CSS Navigation zentrieren macht Seite auf einmal zu breit?!?

[Marvin]

Hallo ihr,

bin völlig verzweifelt.
Diese Navigationsleiste macht mich fertig. Sie wird zentriert angezeigt!
Aber sobald ich mehr Menüpunkte hinzufüge, erscheint ein horizontaler Scrollbalken und der Bildschirmbereich wird nach rechts immer größer. Sozusagen kommt dann rechts leerer Platz hinzu, die Navigation bleibt aber genau da, wo sie sein soll.
Was kann ich also machen, um den Bildschirmbereich nicht mehr nach rechts größer werden zu lassen? Ich habe wirklich vieles versucht, bin aber mit meinem Latein am Ende.

Danke für eure Hilfe!!

Marvin

Der entsprechende Ausschnitt vom CSS-Code:

#nav {float: left; position: relative; left: 50%; margin: 0 auto; margin-left: -50px; list-style: none; height:38px;  z-index:500; font-family:arial, verdana, sans-serif; }  
  
#nav li.top {position: relative;  
right: 50%; display:block; float:left; height:38px;}

Der entsprechende Ausschnitt vom HTML-Code:

<ul id="nav">  
  
  <li class="top"><a href="index.html" class="top_link"><span>Home</span></a></li>  
  
  <li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">&Uuml;ber  
mich</span></a>  
    <ul class="sub">  
  
      <li><a href="life.html">Lebenslauf</a> </li>  
 <li><a href="philosophy.html">Philosophie</a></li>  
      <li class="mid"><a href="publications.html">Ver&ouml;ffentlichungen</a> </li>  
  
      <li><a href="friends.html">Freunde</a></li>  
  
    </ul>  
  
  </li>  
  
  
</ul>

[Baba]

Hey,
bis auf den dritten CSS-Eintrag von mir ist das Dein Beispiel. Bitte erweitere es so, dass man Dein Problem nachvollziehen kann. Da ist momentan kein Scrollbalken zu sehen.

Cheers,
Baba

[Marvin]

Hallo ihr,

erstmal vielen Dank für eure Antworten. Ich dachte, wenn ich euch die beiden Problemstellen zeige, dann ist alles gesagt. Also hier der vollständige CSS-Teil von der Navigation und die vollständige Navigation im HTML-Dokument. Nochmals ganz herzlichen Dank für eure Hilfe!!

#nav {float: left; position: relative; left: 50%; margin: 0 auto; margin-left: -50px; list-style: none; height:38px;  z-index:500; font-family:arial, verdana, sans-serif; }  
  
#nav li.top {position: relative;  
right: 50%; display:block; float:left; height:38px;}  
  
  
  
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#6e6e6e; text-decoration:none; font-size:13px; padding:0 0 0 32px; cursor:pointer;}  
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; }  
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(../images/three_0na.gif) no-repeat right top;}  
  
#nav li:hover a.top_link {color:#ff0031; background: url(../images/three_1n.gif) no-repeat;}  
#nav li:hover a.top_link span {background:url(../images/three_1n.gif) no-repeat right top;}  
#nav li:hover a.top_link span.down {background:url(../images/three_1an.gif) no-repeat right top;}  
  
/* Default list styling */  
  
#nav li:hover {position:relative; z-index:200;}  
  
#nav li:hover ul.sub  
{left:1px; top:38px; background:url(../images/system/bg_body_grad_both2.jpg) 50% -0% repeat-x; padding:3px; border:1px solid #fff; white-space:nowrap; width:130px; height:auto; z-index:300;}  
#nav li:hover ul.sub li  
{display:block; height:30px; position:relative; float:left; width:130px; font-weight:normal;}  
#nav li:hover ul.sub li a  
{display:block; font-size:13px; height:24px; width:128px; line-height:26px; text-indent:5px; color:#6e6e6e; text-decoration:none;border:1px solid #ffffff;}  
#nav li ul.sub li a.fly  
{background:url(../images/system/bg_body_grad_both2.jpg) 50% -0% repeat-x;}  
#nav li:hover ul.sub li a:hover  
{background:#ffffff; color:#ff0031; border-color:#fff;}  
#nav li:hover ul.sub li a.fly:hover  
{background:#ffffff url(../images/arrow.gif) 120px 9px no-repeat; color:#000; border-color:#ffffff;}  
  
  
#nav li:hover li:hover ul,  
#nav li:hover li:hover li:hover ul,  
#nav li:hover li:hover li:hover li:hover ul,  
#nav li:hover li:hover li:hover li:hover li:hover ul  
{left:130px; top:-4px; background: url(../images/system/bg_body_grad_both2.jpg); padding:3px; border:1px solid #fff; white-space:nowrap; width:130px; z-index:400; height:auto;}  
  
#nav ul,  
#nav li:hover ul ul,  
#nav li:hover li:hover ul ul,  
#nav li:hover li:hover li:hover ul ul,  
#nav li:hover li:hover li:hover li:hover ul ul  
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}  
  
#nav li:hover li:hover a.fly,  
#nav li:hover li:hover li:hover a.fly,  
#nav li:hover li:hover li:hover li:hover a.fly,  
#nav li:hover li:hover li:hover li:hover li:hover a.fly  
{background:#ffffff url(arrow.gif) 120px 9px no-repeat; color:#000000; border-color:#fff;}  
  
#nav li:hover li:hover li a.fly,  
#nav li:hover li:hover li:hover li a.fly,  
#nav li:hover li:hover li:hover li:hover li a.fly  
{background:#ffffff url(arrow.gif) 120px 9px no-repeat; color:#000; border-color:#ffffff;}  
  
  

Hier der komplette HTML-Teil:

<ul id="nav">  
  
  <li class="top"><a href="TitelX.html" class="top_link"><span>TitelX</span></a></li>  
  
  <li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">TitelX</span></a>  
    <ul class="sub">  
  
      <li><a href="TitelX.html">TitelX</a> </li>  
 <li><a href="TitelX.html">TitelX</a>  
  </li>  
      <li class="mid"><a href="TitelX.html">TitelX</a>  
      </li>  
  
  
      <li><a href="TitelX.html">TitelX</a></li>  
  
    </ul>  
  
  </li>  
  
  <li class="top"><a href="TitelX.html" id="services" class="top_link"><span>TitelX</span></a>  
  </li>  
  
  
  
  <li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">TitelX</span></a>  
    <ul class="sub">  
  
<li><a href="TitelX.html">TitelX</a></li>  
</ul>  
  
  
  <li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">TitelX</span></a>  
  <ul class="sub"><li class="mid"><a href="#nogo7" class="fly">TitelX</a>  
        <ul>  
  
          <li><a href="TitelX.html">TitelX</a></li>  
  
          <li><a href="TitelX.html">TitelX</a></li>  
           <li><a href="TitelX.html">TitelX</a></li>  
  
  
        </ul>  
  
      </li>  
  
      <li><a href="TitelX.html">TitelX</a></li>  
       <li><a href="TitelX.html">TitelX</a></li>  
              <li><a href="TitelX.html">TitelX</a></li>  
  
  
  
  
</ul>  
  
  
  
  <li class="top"><a href="TitelX.html" id="privacy" class="top_link"><span>TitelX</span></a></li>  
  <li class="top"><a href="TitelX.html" id="privacy" class="top_link"><span>TitelX</span></a></li>  
  
  <li class="top"><a href="http://www.TitelX.com" id="privacy" class="top_link"><span>TitelX</span></a></li>  
  
</ul>  

[Jo]

Hallo Marvin,

was hast du den vor? Aus dem bisher gesagten kann ich nicht nachvollziehen was du versuchst zu realisieren.

So etwas etwa:

#nav * {  
  list-style: none;  
}  
#nav {  
  margin: 0;  
}  
#nav li {  
  padding-left: 40%;  
}  
#nav li ul li {  
  padding-left: 0px;  
}

<ul id="nav">  
  <li><a href="#"><span>Home</span></a></li>  
  <li><a href="#">Über mich</a>  
    <ul>  
      <li><a href="#">Lebenslauf</a> </li>  
      <li><a href="#">Philosophie</a></li>  
      <li><a href="#">Veröffentlichungen</a></li>  
      <li><a href="#">Freunde</a></li>  
    </ul>  
  </li>  
</ul>

[Toni]

oder noch minimalistischer...

#nav {
  margin: 0;
  padding-left: 35%;
}

<dl id="nav">
  <dd><a href="#">Home</a></dd>
  <dd><a href="#">Über mich</a>
    <dl>
      <dd><a href="#">Lebenslauf</a> </dd>
      <dd><a href="#">Philosophie</a></dd>
      <dd><a href="#">Veröffentlichungen</a></dd>
      <dd><a href="#">Freunde</a></dd>
    </dl>
  </dd>
</dl>

[Salome]

also ich habe ihn so verstanden?!?

nav {
  text-align: center;
  margin: 0 auto;
}
nav * {
  margin: 0;
  vertical-align: top;
  display: inline-block;
  text-align: left;
}
nav dl dl  {
  display: block;
}
nav dl dl dd  {
  display: block;
}

<nav>
  <dl>
    <dd><a href="#">Home</a></dd>
    <dd><a href="#">Über mich</a>
    <dl>
      <dd><a href="#">Lebenslauf</a></dd>
      <dd><a href="#">Philosophie</a></dd>
      <dd><a href="#">Veröffentlichungen</a></dd>
      <dd><a href="#">Freunde</a></dd>
    </dl>
    </dd>
  </dl>
</nav>

[Marvin]

Das Problem hat sich gelöst! Salomes Tipp war perfekt! Habt alle ganz herzlich Dank! Frohe Weihnachten und liebe Grüße! :-)

[Gunnar Bittersmann]

@@Toni:

nuqneH

<dl id="nav">
  <dd><a href="#">Home</a></dd>
  <dd><a href="#">Über mich</a>
    <dl>
      <dd><a href="#">Lebenslauf</a> </dd>
      <dd><a href="#">Philosophie</a></dd>
      <dd><a href="#">Veröffentlichungen</a></dd>
      <dd><a href="#">Freunde</a></dd>
    </dl>
  </dd>
</dl>

dl macht hier keinen Sinn; das ist für Gruppen von zusammengehörigen dt und dd gedacht. Hier gibt es keine dt, also ist dl falsch.

ul (oder auch ol) und li sind die richtigen™ Elemente.

Zur Auszeichnung der Navigation wäre auch das nav-Element zu verwenden (nicht zuletzt aus Gründen der besseren Zugänglichkeit):

<nav id="nav">  
  <ul>  
    ⋮  
  </ul>  
</nav>

Anstelle von @id="nav" wäre noch ein treffenderer Bezeichner zu verwenden, bspw. "main-nav".

Qapla'