Navigation passt sich nicht Browserfenster an?

Schnatterinchen · 14. Juli 2008

Hallo CSS-Experts, bin mit meiner Internetseite weitestgehend fertig, das einzige was noch stört, ist, dass sich die Navileiste beim verkleinern des Browserfensters nicht ebenso verkleinert. Statttdessen wird eine neue Zeile begonnen. Ich bin der Meinung, dass das irgendwie mit Prozentangaben gelöst werden kann; oder man müsste irgendwie eine Box um die Navileiste legen damit sie sich anpasst.

css.datei

Code:

.preload1 {background: url(blank_over.gif);}
.preload2 {background: url(blank_overa.gif);}

#nav {border-right: 5px solid white; border-left: 5px solid white;padding:0; margin:0 26% 0 26%; 

list-style:none; height:36px; background-color:white; z-index:500; font-family:arial, verdana, 

sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:36px; line-height:27px; color:black; text

-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 8px; 

cursor:pointer;background: blue url(blank.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; 

height:36px;background: url(blank.gif) right top;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:36px; 

background:url(blanka.gif) no-repeat right top;}
#nav li a.top_link:hover {color:white; background: url(blank_over.gif) no-repeat;}
#nav li a.top_link:hover span {background:url(blank_over.gif) no-repeat right top;}
#nav li a.top_link:hover span.down {background:url(blank_overa.gif) no-repeat right top;}

#nav li:hover > a.top_link {color:white; background: url(blank_over.gif) no-repeat;}
#nav li:hover > a.top_link span {background:url(blank_over.gif) no-repeat right top;}
#nav li:hover > a.top_link span.down {background:url(blank_overa.gif) no-repeat right top;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

/* keep the 'next' level invisible by placing it off screen. */
#nav ul, 
#nav li:hover ul ul,
#nav li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-

style:none;}

#nav li:hover ul.sub
{left:0; top:31px; background: #fff; padding:3px; border:1px solid #3a93d2; 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:20px; width:90px; line-height:20px; text-indent:5px; 

color:#000; text-decoration:none;}
#nav li ul.sub li a.fly
{background:#fff url(arrow.gif) 80px 7px no-repeat;}
#nav li:hover ul.sub li a:hover 
{background:#3a93d2; color:white;}
#nav li:hover ul.sub li a.fly:hover
{background:#3a93d2 url(arrow_over.gif) 80px 7px no-repeat; color:#fff;}

#nav li:hover ul li:hover > a.fly {background:#3a93d2 url(arrow_over.gif) 80px 7px no-repeat; 

color:#fff;} 

#nav li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{left:90px; top:-4px; background: white; padding:3px; border:1px solid #3a93d2; white-

space:nowrap; width:80px; z-index:400; height:auto;}

html.

HTML:

<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="Über mich" class="top_link"><span class="down">Über mich</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="#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><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">Ausbildung</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">Gallerie</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">Kontakt</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>

</div>

Die Anhänge sind Bilder für die Leiste, weiß net ob man die irgendwie braucht?

Danke, bin für jegliche Hilfe dankbar.

prm · 14. Juli 2008

Aus welchen Gründen auch immer ist der rechte nav-border etliche Pixel von der Navi entfernt. Die Ursache kann ich nicht lokalisieren.
Der Navi fehlt ein schließendes </ul>

Gib #nav eine feste Breite und zentriere mit margin: 0 auto;

Aber wie gesagt: Das erste Problem und damit auch die Zentrierung ist damit leider noch nicht gelöst.

Maik · 20. Juli 2008

Hi,

da die Navigation offensichtlich von Stu Nicholls stammt, und es sich hierbei vermutlich um die Variante Professional drop-down #6 handelt, kann ich dazu nur sagen, dass sich das zum Download bereitgestellte Beispiel sehr wohl der Fensterbreite anpasst, und die Menüpunkte beim Verkleinern des Browserfensters nicht in eine neue Zeile umgebrochen werden.

Desweiteren möchte ich dich darum bitten, das Copyright des Autors zu berücksichtigen, sprich beim Posten des CSS-Codes den Hinweis zu Beginn des Stylesheets nicht zu entfernen:

/* ================================================================

This copyright notice must be kept untouched in the stylesheet at
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/pro_drop6.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */

Oder möchtest du Dominik Haubrich, dem Betreiber der tutorials.de-Community, rechtliche Unannehmlichkeiten bereiten?

mfg Maik

Navigation passt sich nicht Browserfenster an?

Schnatterinchen

Grünschnabel

Anhänge

prm

Mitglied

Maik

Neue Beiträge