ahollmann: Horizontale Navigation mit DIVs :-(

Beitrag lesen

SELF-Forum

Horizontale Navigation mit DIVs :-(

ahollmann
– Informationen zu den Bewertungsregeln

Möchte in eine Tabellenzelle eine horizontale Navigation einsetzen, bei der sich die Links *nahtlos* aneinander reihen. Hört sich einfach an, aber es klemmt gewaltig.

Gebe ich den Links und den DIVs ein padding von 0.5em, füllt der blaue Hintergrund das DIV horizontal nicht komplett aus - vertikal dagegen schon. Ich möchte aber, dass sich die Navigation ohne weisse Ränder nahtlos zwischend die grauen Tabellenzellen einfügt.

Irgendwie habe ich hier wohl etwas grundsätzlich nicht verstanden. Wer hilft mir auf die Sprünge?

Hier der Code:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>  
<title>Untitled</title>  
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />  
<style type="text/css">  
  
body {  
	font-family:			verdana,arial,sans-serif;  
}  
  
.zelle {  
	padding:				0px;  
}  
  
div.navtop0 {  
	float:		left;  
	padding:				0.5em;  
	margin:				0px;  
	border:				1px dotted #ff0000;  
}  
.navtop0active {  
	color:					#ffffff;  
	background-color:		#ec6e13;  
}  
div.navtop0 a {  
	color:					#ffffff;  
	background-color:		#6666ff;  
	text-decoration:		none;  
	padding:				0.5em;  
}  
div.navtop0 a:hover {  
	color:					#ffffff;  
	background-color:		#000000;  
}  
  
</style>  
  
</head>  
<body>  
  
<table border="0" style="width:100%;">  
<tr>  
	<td  class="zelle" style="background-color:#999999;">  
		<p>oben</p>  
	</td>  
</tr>  
<tr>  
	<td class="zelle">  
			<div class="navtop0"><a href="index.html">Äpfel</a></div>  
			<div class="navtop0"><a href="index.html">Birnen</a></div>  
			<div class="navtop0"><a href="index.html">Erdbeeren</a></div>  
			<div class="navtop0"><span class="navtop0active">Bananen<span></div>  
			<div class="navtop0"><a href="index.html">Kirschen</a></div>  
			<div style="clear: both; height: 0px">&nbsp;</div>			  
	</td>  
</tr>  
<tr>  
	<td class="zelle" style="background-color:#999999;">  
		<p>unten</p>  
	</td>  
</tr>  
</table>  
  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln