• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

horizontale Liste mit Rahmen unten

ZeitGeist

ZeitGeist

Lounge-Member
Ich habe eine Liste, deren Listenpunkte durch float:left nebeneinander stehen. Wenn ich jetzt unten einen Rahmen haben will, muss ich um den angezeigt zubekommen vorher ein clear sezten. Das Problem ist nur das FireFox den unteren Rahmen nur dann zeigt wenn ich in der liste ein <br/> mit dem clear setzte. Wenn ich den erst nach der Liste, oder in einem Listpunkt setze dann zeigt FireFox den unteren Rahmen nicht an.
Das <br/> möchte ich nach Möglichkeit aber vermeiden, da das kein valides xhtml ist.

css
HTML: 
#navi
{
  list-style-type:none;
  width:798px; 
  margin-left:0px;
  padding-left:0px;
  border-top:2px solid black;
  border-bottom:2px solid black;
}
#navi li  {float:left; width:114px; height:25px;}
#navi a:link		
{
  display:block;
  width:100%;
  height:100%;
  vertical-align:middle;
  text-align:center;
  background-color:black;
  color:white;
  text-decoration:underline;
}
.clear	{clear:both; line-height:0px;}

so funktioniert es nicht
HTML: 
<div id="center">
	<h1>Aus dem Regen</h1>
	<ul id="navi">
		<li><a href="#">Startseite</a></li>
		<li><a href="#">Die Band</a></li>
		<li><a href="#">Gigs</a</li>
		<li><a href="#">Discographie</a></li>
		<li><a href="#">Downloads</a></li>
		<li><a href="#">Links</a></li>
		<li><a href="#">Kontakt</a></li>
		<li style="clear:both; line-height:0px; height:0px;"><br/></li>
	</ul>

und so gehts, aber ist halt nicht valide
HTML: 
<div id="center">
	<h1>Aus dem Regen</h1>
	<ul id="navi">
		<li><a href="#">Startseite</a></li>
		<li><a href="#">Die Band</a></li>
		<li><a href="#">Gigs</a</li>
		<li><a href="#">Discographie</a></li>
		<li><a href="#">Downloads</a></li>
		<li><a href="#">Links</a></li>
		<li><a href="#">Kontakt</a></li>
		<br class="clear"/>
	</ul>

anschauen kann man sich das hier

dank schon mal im voraus
 
Zuletzt bearbeitet:
online nicht getestet, müsste aber so klappen.

CSS:
Code: 
body	{
font:normal normal 12px Verdana, Arial;
}

#center	{
position:absolute;
left:50%;
width:798px;
margin-left:-399px;
}

#aussen	{
border:1px dotted #DF0000;
}

h1 {
text-align:center;
}

#navi ul
{
  list-style-type:none;
  width:798px;
  height:25px;
  margin:0px;
  padding:0px;
  border-top:2px solid black;
  border-bottom:2px solid black;
  overflow:hidden;
  background:#000;
  font:normal normal 18px Verdana, Arial;
}

#navi ul li
{
         float:left;
	width:114px;

}

#navi ul li a
{
  height:25px;
  width:114px;
  display:block;
  text-align:center;
  text-decoration:underline;
  color:#fff;
}

#navi ul li a:hover	{
background:#fff;
color:#000;
}

#content	{
text-align:left;
margin-left:20px;
}

HTML:
Code: 
                 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Regen</title>
<meta name="author" content="bine" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">@import url("zeitgeist.css");</style>
</head>
<body>
<div id="center">

	<div id="aussen">

	         <h1>sich regen bringt Segen</h1>
	                  <div id="navi">
	                                   <ul id="list">
	                                                      <li><a href="#">Link1</a></li>
	                                                      <li><a href="#">Link2</a></li>
	                                                      <li><a href="#">Link3</a></li>
	                                                      <li><a href="#">Link4</a></li>
	                                                      <li><a href="#">Link5</a></li>
	                                                      <li><a href="#">Link6</a></li>
	                                                      <li><a href="#">Link7</a></li>
	                                   </ul>
	                  </div>

                           <div id="content">
                           	<p>Irgendein Text</p>
                           </div>

	</div>

</div>
</body>
</html>


Hier zur Ansicht ein Link http://www.2median.de/zeug/zeitgeist.html
 
Zuletzt bearbeitet:
das ist ne interessante Sache mit dem overflow:hidden
schau mal hier http://www.pmob.co.uk/temp/float-clear.htm

Ich selbst verwende normalerweise die Klasse für den br-Tag aber wies aussieht kann mans auch anders machen.

Tja und allgemein muß man wirklich sehr darauf achten, welche Definition man wo setzt. Ich fummel auch jedesmal dran rum, weil ich intuitiv die Werte nicht rationell genug und auch nicht dort definiere wo sie am sinnvollsten sind. Aber was solls. Übung macht den Meister.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben