Marie: Dropdown menü im CSS zentrieren

SELF-Forum

Dropdown menü im CSS zentrieren

Marie
– Informationen zu den Bewertungsregeln

Hallo liebes Forum,

habe nach stundenlangem Suchen und Überlegen leider keine Idee mehr.. Habe ein fertiges CSS-Dropdownmenü heruntergeladen. Nun versuche ich seit Stunden, dieses zu zentrieren, so dass die einzelnen Menüpunkte zusammengesehen horizontal zentriert sind. Ich habe alles mögliche versucht aber leider bisher ohne Erfolg. Wenn mir jemand von euch helfen könnte, wäre das super super lieb!! Tausend Dank! Ganz ganz liebe Grüße Marie :-)

Das entsprechende CSS-Dokument:

.preload1 {background: url(three_1.gif);}  
.preload2 {background: url(three_1a.gif);}  
  
#nav {padding:0; margin:0; list-style:none; height:38px; background:#fff url(three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}  
#nav li.top {display:block; float:left; height:38px;}  
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#3e3e3e; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(three_0.gif);}  
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0.gif) right top no-repeat;}  
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0a.gif) no-repeat right top;}  
  
#nav li:hover a.top_link {color:#ff0031; background: url(three_1.gif) no-repeat;}  
#nav li:hover a.top_link span {background:url(three_1.gif) no-repeat right top;}  
#nav li:hover a.top_link span.down {background:url(three_1a.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: #ffffff; padding:3px; border:1px solid #3e3e3e; white-space:nowrap; width:90px; height:auto; z-index:300;}  
#nav li:hover ul.sub li  
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}  
#nav li:hover ul.sub li a  
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #ffffff;}  
#nav li ul.sub li a.fly  
{background:#ffffff url(arrow.gif) 80px 6px no-repeat;}  
#nav li:hover ul.sub li a:hover  
{background:#bababa; color:#ff0031; border-color:#fff;}  
#nav li:hover ul.sub li a.fly:hover  
{background:#000000 url(arrow_over.gif) 80px 6px no-repeat; color:#fff;}  
  
  
#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:90px; top:-4px; background: #ffffff; padding:3px; border:1px solid #3e3e3e; white-space:nowrap; width:90px; 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:#000000 url(arrow_over.gif) 80px 6px no-repeat; color:#fff; 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) 80px 6px no-repeat; color:#000; border-color:#ffffff;}

Und das entsprechende HTML-Dokument:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<title> stu nicholls dot com | menu - Professional dropdown #2</title>  
<meta name="Author" content="Stu Nicholls" />  
  
<link rel="stylesheet" type="text/css" href="pro_dropdown_2/pro_dropdown_2.css" />  
  
<script src="pro_dropdown_2/stuHover.js" type="text/javascript"></script>  
  
</head>  
  
<body>  
<h1>stunicholls.com</h1>  
<h2>Professional dropdown #2</h2>  
<h3>19th November 2007</h3>  
  
<span class="preload1"></span>  
<span class="preload2"></span>  
  
<ul id="nav">  
	<li class="top"><a href="#nogo1" class="top_link"><span>Home</span></a></li>  
	<li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">Products</span></a>  
		<ul class="sub">  
			<li><a href="#nogo3" class="fly">Cameras</a>  
					<ul>  
						<li><a href="#nogo4">Nikon</a></li>  
						<li><a href="#nogo5">Minolta</a></li>  
						<li><a href="#nogo6">Pentax</a></li>  
					</ul>  
			</li>  
			<li class="mid"><a href="#nogo7" class="fly">Lenses</a>  
					<ul>  
						<li><a href="#nogo8">Wide Angle</a></li>  
						<li><a href="#nogo9">Standard</a></li>  
						<li><a href="#nogo10">Telephoto</a></li>  
						<li><a href="#nogo11" class="fly">Zoom</a>  
							<ul>  
								<li><a href="#nogo12">35mm to 125mm</a></li>  
								<li><a href="#nogo13">50mm to 250mm</a></li>  
								<li><a href="#nogo14">125mm to 500mm</a></li>  
							</ul>  
						</li>  
						<li><a href="#nogo15">Mirror</a></li>  
						<li><a href="#nogo16" class="fly">Non standard</a>  
							<ul>  
								<li><a href="#nogo17">Bayonet mount</a></li>  
								<li><a href="#nogo18">Screw mount</a></li>  
							</ul>  
						</li>  
					</ul>  
			</li>  
			<li><a href="#nogo19">Flash Guns</a></li>  
			<li><a href="#nogo20">Tripods</a></li>  
			<li><a href="#nogo21">Filters</a></li>  
		</ul>  
	</li>  
	<li class="top"><a href="#nogo22" id="services" class="top_link"><span class="down">Services</span></a>  
		<ul class="sub">  
			<li><a href="#nogo23">Printing</a></li>  
			<li><a href="#nogo24">Photo Framing</a></li>  
			<li><a href="#nogo25">Retouching</a></li>  
			<li><a href="#nogo26">Archiving</a></li>  
		</ul>  
	</li>  
	<li class="top"><a href="#nogo27" id="contacts" class="top_link"><span class="down">Contacts</span></a>  
		<ul class="sub">  
			<li><a href="#nogo28">Support</a></li>  
			<li><a href="#nogo29" class="fly">Sales</a>  
				<ul>  
					<li><a href="#nogo30">USA</a></li>  
					<li><a href="#nogo31">Canadian</a></li>  
					<li><a href="#nogo32">South American</a></li>  
					<li><a href="#nogo33" class="fly">European</a>  
						<ul>  
							<li><a href="#nogo34" class="fly">British</a>  
								<ul>  
									<li><a href="#nogo35">London</a></li>  
									<li><a href="#nogo36">Liverpool</a></li>  
									<li><a href="#nogo37">Glasgow</a></li>  
									<li><a href="#nogo38" class="fly">Bristol</a>  
										<ul>  
											<li><a href="#nogo39">Redland</a></li>  
											<li><a href="#nogo40">Hanham</a></li>  
											<li><a href="#nogo41">Eastville</a></li>  
										</ul>  
									</li>  
									<li><a href="#nogo42">Cardiff</a></li>  
									<li><a href="#nogo43">Belfast</a></li>  
								</ul>  
							</li>  
							<li><a href="#nogo44">French</a></li>  
							<li><a href="#nogo45">German</a></li>  
							<li><a href="#nogo46">Spanish</a></li>  
						</ul>  
					</li>  
					<li><a href="#nogo47">Australian</a></li>  
					<li><a href="#nogo48">Asian</a></li>  
				</ul>  
			</li>  
			<li><a href="#nogo49">Buying</a></li>  
			<li><a href="#nogo50">Photographers</a></li>  
			<li><a href="#nogo51">Stockist</a></li>  
			<li><a href="#nogo52">General</a></li>  
		</ul>  
	</li>  
	<li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Shop</span></a>  
		<ul class="sub">  
			<li><a href="#nogo54">Online</a></li>  
			<li><a href="#nogo55">Catalogue</a></li>  
			<li><a href="#nogo56">Mail Order</a></li>  
		</ul>  
	</li>  
	<li class="top"><a href="#nogo57" id="privacy" class="top_link"><span>Privacy Policy</span></a></li>  
</ul>  
<p>&copy; 2007 stunicholls.com</p>  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Dropdown menü im CSS zentrieren

    Matthias Apsel Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Om nah hoo pez nyeetz, Marie!

    »»Nun versuche ich seit Stunden, dieses zu zentrieren, so dass die einzelnen Menüpunkte zusammengesehen horizontal zentriert sind.

    also, dass die Navigation als solche in der Mitte steht?

    Blockelemente kannst du mit [link:http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Abstand/margin@title=margin]-left: auto; margin-right: auto; zentrieren. Deine Navigation ist ein Blockelement, genauer eine ungeordnete Liste, mit der ID nav. Du könntest es sie im CSS mit [link:http://wiki.selfhtml.org/wiki/CSS/Selektoren@title=#nav] ansprechen.

    für Inlineelemente hilft text-align.

    Matthias

    --
    1/z ist kein Blatt Papier.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Dropdown menü im CSS zentrieren

      Marie
      – Informationen zu den Bewertungsregeln

      Hallo Matthias,

      danke ganz herzlich für deine Hilfe.
      Ja genau, ich möchte, dass die Navigation als solche in der Mitte steht! :-)
      Aber immer, wenn ich was mit "margin-left: auto; margin-right: auto;" verändert habe, habe ich damit die ganze Navigation abgeschossen. Ich bin leider eine ziemliche Anfängerin.. Bist du so lieb, mir zu schreiben, wo genau ich das verändern muss? Ich habe wirklich schon viele Versionen getestet und mir auch Mühe gegeben aber ich schaffe das nicht alleine.. Nochmal ganz viele liebe Grüße und danke dir!! :-)

      Marie

      > Om nah hoo pez nyeetz, Marie!

      »»Nun versuche ich seit Stunden, dieses zu zentrieren, so dass die einzelnen Menüpunkte zusammengesehen horizontal zentriert sind.

      also, dass die Navigation als solche in der Mitte steht?

      Blockelemente kannst du mit [link:http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Abstand/margin@title=margin]-left: auto; margin-right: auto; zentrieren. Deine Navigation ist ein Blockelement, genauer eine ungeordnete Liste, mit der ID nav. Du könntest es sie im CSS mit [link:http://wiki.selfhtml.org/wiki/CSS/Selektoren@title=#nav] ansprechen.

      für Inlineelemente hilft text-align.

      Matthias

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Dropdown menü im CSS zentrieren

        Matthias Apsel Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Om nah hoo pez nyeetz, Marie!

        Bitte zitiere künftig nicht das gesamte Posting, sondern nur das, worauf du dich gerade beziehst.

        Ja genau, ich möchte, dass die Navigation als solche in der Mitte steht!
        Bist du so lieb, mir zu schreiben, wo genau ich das verändern muss? Ich habe wirklich schon viele Versionen getestet und mir auch Mühe gegeben aber ich schaffe das nicht alleine.

        Wenn du einen Link zur betreffenden Seite posten könntest, sparst du damit vielen Copy und Paste. Es kann sich sicher jemand anschauen. Vielleicht auch ich, wenn ich heute abend wieder da bin. Es ist schönes Wetter.

        Matthias

        --
        1/z ist kein Blatt Papier.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

    2. Dropdown menü im CSS zentrieren

      Marie
      – Informationen zu den Bewertungsregeln

      Hallo Matthias,

      auf der Seite hier ist das Original zu sehen. Da sieht man mein Problem ganz gut. Ich möchte, dass die Menüpunkte als ganzes in der Mitte der Seite sind. Im Beispiel wie auch bei mir sind sie aber zu weit links. Nochmal ganz lieben Dank für deine Hilfe!

      Einen sonnigen Sonntag! :-)
      Liebe Grüße
      Marie

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Dropdown menü im CSS zentrieren

        Marie
        – Informationen zu den Bewertungsregeln

        Jetzt habe ich den Link vergessen ;-)

        http://www.stunicholls.com/menu/pro_dropdown_2.html

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Dropdown menü im CSS zentrieren

          Matthias Apsel Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Om nah hoo pez nyeetz, Marie!

          schnelle schmutzige Lösung: Ändere im CSS unter #nav den Wert für padding in z.B. 0 90px

          #nav {  
  ...  
  padding: 0 90px;  
}

          Matthias

          --
          1/z ist kein Blatt Papier.

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Dropdown menü im CSS zentrieren

            Marie
            – Informationen zu den Bewertungsregeln

            Hallo Matthias,

            das ist leider nicht wirklich eine Lösung... So ist das Menü genau bei meinem Bildschirm in der Mitte und wohl sonst bei keinem anderen.. Und wenn ich rauszoome oder reinzoome ist sogar bei meinem Bildschirm auch nichts mehr in der Mitte... Hast du noch eine andere Idee??

            Liebe Grüße
            Marie

            Om nah hoo pez nyeetz, Marie!

            schnelle schmutzige Lösung: Ändere im CSS unter #nav den Wert für padding in z.B. 0 90px

            #nav {

            ...
              padding: 0 90px;
            }

            
>   
> Matthias
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln