• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Navigation Position

MartyMcRame

Neues Mitglied
Ich konnte das Problem bereits lösen. Ich hatte absolute eingestellt, statt relative. beim relativen passt es wunderbar :)





_____________________
Hi Forumer,
Ich habe ein neues Design für meine Website erstellt und bin auf einen Fehler gekommen, der mich sehr beschäftig.

Rame Entertainment | Elmar Bernhard

Ich habe für meine Navigation folgenden Code in meinem CSS stylesheet:
HTML:
div#header ul#navi {
    position:absolute;
    top:140px;
    left:665px;
    list-style:none;
    color: #bfbfbf;
}
div#header ul#navi li {
    float:left;
    padding:0 15px;
    border-right:1px solid #bfbfbf;
    line-height:18px;
    text-transform:uppercase;
    color:#bfbfbf;    
}
div#header ul#navi li a {
    color:#c3c3c3;
    font-size:18px;
    text-decoration:none;
}
div#header ul#navi li a:hover,
div#header ul#navi li.active a {
    text-decoration:none;
    color:#7ccafd;
}

in meinem source code:
HTML:
<body bgcolor="#000" text="#FFF" link="#00FFFF" vlink="#FF00FF">
    <div id="container">
        <div id="topshine"></div>
        <div id="header">
            <div id="logo"><a href="http://www.rameentertainment.at/" id="linktohome" class="noText"></a></div>     
            <ul id="navi">
          <!-- TemplateBeginEditable name="navi" -->
              <li><a href="http://www.html.de/index.html">HOME</a></li>
            <li><a href="http://www.html.de/html/projects.html">PROJECTS</a></li>
            <li><a href="http://www.html.de/html/links.html">LINKS</a></li>
            <li><a href="http://www.html.de/html/contact.html">CONTACT</a></li>
            <li class="noBorder"><a href="http://www.html.de/html/impressum.html">IMPRESSUM</a></li>
            <!-- TemplateEndEditable -->
          </ul>
      </div>

Wenn man den Bildschirm aufzoomt verzieht sich nun leider die Navigation bzw kleinere Monitore mit einer unpassenden Pixelgröße haben dann die Navi einfach irgendwo.

Einen Tipp, wie ich das verhindern kann?

Marty
 
Zuletzt bearbeitet:
Ich habe jetzt den Overflow auf hidden gestellt und so ist mein kompletter rechter border verschwunden. container um 3px vergrößert und alles passt hoffentlich jetzt.
 
Der Verzicht auf absolute Postionierung wäre das optimale. Selbst eine relative sollte man vermeiden. Mit Außenabständen kann man auch einiges hinbekommen.

Wenn Du overflow auf den Wert hidden setzt und das betreffende Element eine feste Höhe und/oder Breite hat, wird alles was über diese Höhe und/oder Breite hinaus geht ausgeblendet.
 
Zurück
Oben