Przesunięcie elementów w inne miejsce

1.8.4
localhost

Testuję nowy silnik MyBB ze standardowym szablonem i mam pytanie jak przesunąć elementy Portal, Szukaj, Użytkownicy, Pomoc które są zawarte w

<div class="wrapper">

przesunąć w to oto miejsce:


Szablon header

<div id="container">
        <a name="top" id="top"></a>
        <div id="header">
            <div id="logo">
                <div class="wrapper">
                    <a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>
                    <ul class="menu top_links">
                        {$menu_portal}
                        {$menu_search}
                        {$menu_memberlist}
                        {$menu_calendar}
                        <li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help">{$lang->toplinks_help}</a></li>
                    </ul>
                </div>
            </div>
            <div id="panel">
                <div class="upper">
                    <div class="wrapper">
                        {$quicksearch}
                        {$welcomeblock}
                    <!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
                <!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
            </div>
        </div>
        <div id="content">
            <div class="wrapper">
                {$pm_notice}
                {$bannedwarning}
                {$bbclosedwarning}
                {$unreadreports}
                {$pending_joinrequests}
                {$awaitingusers}
                <navigation>
                <br />

Mało mam czasu na rozkminianie tego więc może ktoś mnie naprowadzi bo coś nie wychodzi mi to przesunięcie.

Generalnie chcę uzyskać taki efekt z tymi kilkoma linkami jak tutaj na http://community.mybb.com/

header:

<div id="container">
        <a name="top" id="top"></a>
        <div id="header">
            <div id="logo">
                <div class="wrapper">
                    <a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>
                    
                </div>
            </div>
            <div id="panel">
                <div class="upper">
                    <div class="wrapper">
                        {$quicksearch}
<ul class="menu top_links">
                        {$menu_portal}
                        {$menu_search}
                        {$menu_memberlist}
                        {$menu_calendar}
                        <li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help">{$lang->toplinks_help}</a></li>
                    </ul>
                        {$welcomeblock}
                    <!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
                <!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
            </div>
        </div>
        <div id="content">
            <div class="wrapper">
                {$pm_notice}
                {$bannedwarning}
                {$bbclosedwarning}
                {$unreadreports}
                {$pending_joinrequests}
                {$awaitingusers}
                <navigation>
                <br /> 


Do #header ul.menu dopisz float: right;.

Wszystko byłoby OK elementy przesuwają się tam gdzie trzeba tylko czemu przejmują ikonę czegoś obcego. Każdy z tych elementów, który miał zostać przesunięty w nowe miejsce ma ikonę wyszukiwania.

Skoro wynieśliśmy to 'menu' z id "#logo" to w CSS też należy się tego pozbyć.
global.css:

#logo ul.top_links {
    font-weight: bold;
    text-align: right;
    margin: -10px 5px 0 0;
}

#logo ul.top_links a.search {
    background-position: 0 0;
}

#logo ul.top_links a.memberlist {
    background-position: 0 -20px;
}

#logo ul.top_links a.calendar {
    background-position: 0 -40px;
}

#logo ul.top_links a.help {
    background-position: 0 -60px;
}

#logo ul.top_links a.portal {
    background-position: 0 -180px;
} 


#logo pozamieniaj na #panel.

OK, ale cały ten kod musiałem przenieść poniżej:

#panel .upper a.register {
    background: url(images/headerlinks_sprite.png) right -80px no-repeat;
    padding-right: 20px;
    margin-left: 10px;
    font-weight: bold;
}

Wtedy ikony zaczęły mi się wyświetlać taki jak trzeba. Jak kod był na tym samym miejscu jak wcześniej, każda ikona miała ten sam obraz.
Dziwne myślałem, że nie robi różnicy czy kod CSS masz na początku czy gdzieś na końcu.

Bo nie robi.

A wcześniej gdzie umieszczałeś?

Nie ruszałem z miejsca były tak jak były tylko, że zmieniłem

#logo ul.top_links {

na

#panel .upper a.register {

Gdybym zapomniał nawias { forum wyglądałoby całkiem inaczej bo raz taką pomyłkę miałem, ale jak piszę po przeniesieniu kodu niżej do elementów #panel i zmianie z #logo na #panel ikony zaczęły się wyświetlać tak jak trzeba.