Menu na całą szerokość ekranu

Założony przez  Leben.

wersja skryptu MyBB: 1.6.8
adres forum: localhost ;/
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu): Cześć, chciałbym aby menu przystosowało się pod każdą rozdzielczość ekranu.

header:
<div id="container">
        <a name="top" id="top"></a>
                    <div id="header">

<div class="menu">
<div class="wrap">



      <form method="post" class="searchform" action="{$mybb->settings['bburl']}/search.php">
        <input type="hidden" name="action" value="do_search" />
        <input type="hidden" name="postthread" value="1" />
        <input type="hidden" name="forums" value="all" />
        <input type="hidden" name="showresults" value="threads" />
        <input type="text" class="searchbox" name="keywords" value="Przeszukaj forum..." onblur="this.value = this.value || this.defaultValue; this.style.color = '#1a94b9';" onfocus="this.value=''; this.style.color = '#fff';" />
        <input type="submit" class="searchsub" value="Szukaj" />
<a href="{$mybb->settings['bburl']}/search.php"  style="float:right; position: relative; bottom: 30px; right: 32px;"><img src="{$theme['imgdir']}/zaawansowane_szukanie.png" alt="Zaawansowane szukanie" title="Zaawansowane szukanie" /></a>

<div style="float:right; position: relative; bottom: 30px; left: 77px;"><a href="#" id="toggler">
<img src="{$theme['imgdir']}/przycisk_szukaj.png" alt="change background" title="change background image"/>
</a>
</div>

    </form>
</div>

            <ul id="navMenu">
<li><a href="{$mybb->settings['bburl']}/portal.php" style="margin-left: 5px;">Strona główna</a></li>
<li><a href="{$mybb->settings['bburl']}/index.php">Forum</a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php">Userzy</a></li>
<li><a href="{$mybb->settings['bburl']}/showteam.php">Zespół</a></li>
<li><a href="{$mybb->settings['bburl']}/tut.php">Tut</a></li>
<li><a href="{$mybb->settings['bburl']}/point.php?action=point">Point</a></li>
                </ul>
</div>
<br>
<navigation>

<div id="login">
    <div id="login-slide">
        <div id="login-content">
              {$welcomeblock}

        </div>
    </div>
    <div id="login-toggle">
        <p>Panel</p>
        <p style="display: none;"><img class="close" src="{$theme['imgdir']}/close.png" alt="" />Ukryj panel</p>
    </div>
</div>
</div>
<br />
            <div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
            <hr class="hidden" />
        </div>
        <br />
        <hr class="hidden" />
        <br class="clear" />
        <div id="content">
            {$pm_notice}
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}
            {$pending_joinrequests}
            <br />

global.css:
.menu {
background: url(images/samp/menu_body.png) repeat-x;
    width: 1000px;
    height: 40px;
    margin: -10px 0 0 -10px;
font-family: springsteel;
font-size: 15px;
    box-shadow: 0px 2px 4px 0px #7FA2AB;
    border-radius: 10px;
    z-index: 2;
    position: relative;
    position: fixed;
}

#navMenu {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
    line-height: 40px;
}

#navMenu li {
        float:left;    
        width:110px;                            /* width and height of the menu item */
        height:40px;
        position:relative;            /* must set it as relative, because .hover class top and left with absolute position will be positioned according to li.    */
}

#navMenu li a {
    color: #fff;
    z-index: 20;
    display: block;
    height: 40px;
    position: relative;
    text-shadow: 1px 1px 2px #063B4A;
    text-decoration: none;
    font-weight: bold;
}

#navMenu li .hover {
    background: url(images/samp/over.png) no-repeat center center;
    width: 110px;
    position: absolute;
    height: 40px;
    left: 0;
    top: 0;
    z-index: 0;
    display: none;
    text-decoration: none;
}
w global.css w sekcji .menu znajdź:
width: 1000px;
zamień na
width: 100%;

i to tyle
No nie do końca. Jeśli menu tkwi w kontenerze (#container) to nic to nie da, ponieważ menu zostaje ograniczone przez szerokość owej klasy.
W szablonie musisz jeszcze wrzucić div #container pod diva określającego menu.
Na Google Chrome działa jak powinno, lecz na Mozilli już nie.



Użytkownicy przeglądający ten wątek:

1 gości