Zur Navigation

waagerechtes Menü

1 Hagen (Gast)

Hallo leute,

mein aktuelles problem ist sicher für euch ein alter hut...
ich möchte ein menü bauen, welches aus zwei untereinanderstehenden kategorien besteht. Wenn man sich dann in einer befindet, sollen alle Unterpunkte waagerecht laufen. an sich recht simpel - und so solls aussehen.
http://www.dieses.net/temp/menue.gif

Bei mir steht leider alles hintereinander :-(

Markup:
<div id="navigation_g">
		<ul id="nav_grafik">
				<li>grafik</li>
				<li>freie Sachen</li>
				<li>angewandt</li>
			</ul>
		</div>
		<div id="navigation_f">
			<ul id="nav_foto">
				<li>foto</li>
				<li>prignitz</li>
				<li>portrait</li>		
				<li>fhtw</li>
			</ul>
		
		</div>
CSS:
#navigation_g
		{margin-top: 30px;
		margin-left: 145px;
		text-align: left;
		}
		
#navigation_f
		{margin-top: 0;
		margin-left: 145px;
		text-align: left;
		}
		
ul#nav_grafik, ul#nav_foto 
		{list-style-type: none;
		line-height: 15px;
		letter-spacing: 0.2em;
		}
		
ul#nav_grafik li, ul#nav_foto li 
		{padding: 0.4em;
		float: left;
		}

04.08.2006 14:51

2 Jörg

Hallo Hagen,

ein float:left wirkt sich auf alle nachfolgenden Elemente aus, also auch auf das Element #navigation_f. Du kannst den float dort mit einem clear:left beenden:

#navigation_f
{margin-top: 0;
margin-left: 145px;
text-align: left;
clear:left;
}

04.08.2006 15:39 | geändert: 04.08.2006 15:40

3 Hagen (Gast)

Vielen Dank für den schnellen Rat.

ul#nav_grafik, ul#nav_foto 
		{list-style-type: none;
		line-height: 15px;
		letter-spacing: 0.2em;
		clear: left;
		}

wie du siehst, hab ich das "clear:left hier reingetan. Erschließt sich mir zwar nicht ganz, aber funktioniert! :-)

04.08.2006 20:03

Beitrag schreiben (als Gast)





[BBCode-Hilfe]