Css Navi Problem

A

ATom

New member
hallöchen habe ein kleines problem. und zwar habe ich ein navigatiosn menü aus bildern 4 stück nebeneinander, aber das letzte bild schiebt er in der reihe immer nach unten.
daraus resultiert mein folgendes problem , wie bekomm ich es mittel css hin das mein bilderchen menü imemr an der selben stelle angezeigt wird, egal bei welcher auflösung .

hier mal mein css code :

Code: 
body
	{
		margin: 0;
		padding: 0;
		font: 85% arial, hevetica, sans-serif;
		text-align: center;
		color: #505367;
		background-image:url('Buttons/background.gif');
	}
	
	#container
	{
		margin: 1em auto;
		width: 1020px;
		text-align: left;
		
		border: 0px solid black;
	}
	
	
	#header
	{
		height: 203px;
		width: 1020px;
		background-image:url('Header.jpg');
		background-repeat:no-repeat;
	}
	
	
	.nav {
	position:absolute; left:480px;top:145px;
	}
	.nav li {
	float:left;
	list-style-type:none;
	}
	.nav li a {
		display: block;
		font-size: 16px;
		letter-spacing: -1px;
		padding:0 5px 3px 5px;
		margin: 0 5px;
		text-decoration:none;
		color: #777;
		border-bottom: 0px solid #777;
	}
	
	
	
	#contents
	{
		margin-right: 100px;
		margin-left: 20px;
		height: 200px;
		width: 500px;
		margin-top: 50px;
		background-image:url('Buttons/background.gif');
	}


#footer {
margin-top: 260px;
background: #dedede;
border-top: 3px solid #999;
text-align: center;
font-size: 11px;
padding: 10px 0 0px 0;
}
 
der rest ? meinst jetzt den restliche html code oder ?
also das is dann noch die html datei:
Code: 
<body>
<div id="container">
	<div id="header"><img src="Buttons/Home.gif" alt="" border="0"></div>
	<div class="nav"><ul>
<li><a href="Chronik/Chronik.html"><img src="Buttons/Buttons.gif" alt="" border="1"></a></li>
<li><a href="Produkte/Produkte.html"><img src="Buttons/Buttons2.gif" alt="" border="1"></a></li>
<li><a href="Rundgang/Rundgang.html"><img src="Buttons/Buttons3.gif" alt="" border="1"></a></li>
<li><a href="Kontakt.html"><img src="Buttons/Buttons4.gif" alt="" border="1"></a></li>
<li><a href="#"></a></li>
</ul></div>

und dann noch der rest üblichen html
 
super vielen dank, manhcmal sieht man den wald vor lauter bäumen nicht.

aber meien zweite frage: auf meinem bildschirm sieht alels schick aus , sobald ich aber zu ner 1024 er auflösung wechsel, verschiebt sich das alles . wie bekomm ic hdas hi ndas es imemr an der selben stelle bleibt
danke nochmals !!!:rolleyes:
 
ATom schrieb:
aber meien zweite frage: auf meinem bildschirm sieht alels schick aus , sobald ich aber zu ner 1024 er auflösung wechsel, verschiebt sich das alles .
Zum Vergrößern anklicken....

Ein Link zu einer Live-Version wäre gut. Ich habe ein Problem mit "verschiebt sich alles". Was alles? Der div container steht mittig im Viewport, Du hast ihn ja zentriert mit
Code: 
margin: 1em auto;
und Du willst lediglich header, navi, etc. auf einer festen Position? Dann änderst Du bei class .nav die Position von absolute auf relative und gibt auch dem div #header ein
Code: 
position:relative; 
left:20px;
top:5px;

left und top passt Du an.
 
ahhh super geil danke ....hatte das auch schon so probiert aber bin daran gescheitert zu vergessen auch den #header auf relativ zu setzen, besten dank ...!!!
schönen sonntag noch
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben