float zerschießt layout

_tnt_ · 19.12.2012

hallo!

ich wollte ein einfaches layout umsetzen. doch ich scheitere schon am float.

HTML:

Code:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
	<title>Title</title>
	<style type="text/css" media="all">@import "style.css";</style>
</head>
	<body>
		<div id="wrapper">
			<div id="header">
				<h1>header</h1>
			</div>
			
			<div id="menu">
				<h1>menu</h1>
				<ul>
					<li><a href="index.jsp?menu=noten_anzeigen">Schiff</a></li>
					<li><a href="index.jsp?menu=noten_anzeigen">Schiff</a></li>
					<li><a href="index.jsp?menu=noten_anzeigen">Schiff</a></li>
				</ul>
			</div>
			
			<div id="content">
				<h1>content</h1>
			</div>
				
			<div id="footer">
				<h1>footer</h1>
			</div>
		</div>
	</body>
</html>

CSS:

Code:

body{
	font-family: Helvetica, sans-serif;
	font-size: 10pt;
	background-color: rgb(14, 14, 14);
	color: rgb(255, 255, 255);
}

#wrapper{
	width: 900px;
	margin: 0px auto;
}

#header, #menu, #content, #footer{
	border: 1px solid rgb(6, 68, 108);
	margin: 10px;
	padding: 10px;
}

h1 {
	font-size: 14pt;
}

a , a:link, a:visited, a:active, a:hover{
	color: rgb(6, 68, 108);
	text-decoration: none;
}

ul{
	margin: 0px;
	padding: 0px;
}

li{
	list-style-type: none;
	display: block;
	margin: 0px;
	padding: 0px 5px 0px 0px;
	/*float: left;*/
}

mir ist jetzt nicht ganz klar, warum meine links wenn ich float:left mache aus dem menü boarder raus springen?

außerdem müsste ich ein clear:left irgend wo machen oder?

gruß

Whykiki · 19.12.2012

AW: float zerschießt layout

Hallo,

ich verstehe nicht genau, wo die Links rausfliegen ???
Wenn ich mir das so anschaue, dann sieht erst einmal alles so weit ok aus....

Vier Boxen mit Rahmen, in der zweiten Box die drei Links untereinander....?!

jaderbass · 19.12.2012

AW: float zerschießt layout

Hi,

also wenn Du hinter den UL-Tags ein clear einbaust bleiben die "Schiffe" im "Hafen" ;-)

z.B. so:

HTML:

...
<h1>menu</h1>
                <ul>
                    <li><a href="index.jsp?menu=noten_anzeigen">Schiff</a></li>
                    <li><a href="index.jsp?menu=noten_anzeigen">Schiff</a></li>
                    <li><a href="index.jsp?menu=noten_anzeigen">Schiff</a></li>
                </ul>
                <br class="clear" />
...

Code:

...
.clear {
    clear: both;
    float: none;
}
...

_tnt_ · 19.12.2012

AW: float zerschießt layout

ja wenn ich das float:left im css (li) auskommentiert lasse, dann passt alles.
sobald ich aber das float:left aktiviere damit die links neben einander sind, ist die border linien vom menu in der mitte der links.

_tnt_ · 19.12.2012

AW: float zerschießt layout

@jaderbass: vielen dank! k
annst du mir auch erklären, warum sich HTML/CSS so verhalten und die links nicht da bleiben wo sie sein sollten?

jaderbass · 19.12.2012

AW: float zerschießt layout

Hallo _tnt_,

float ist nicht so ganz einfach zu verstehen. Schau mal auf diese Seite: .

Dabei ist mir auch gleich aufgefallen, dass Du die Weite in den LI-Tags nicht angegeben hast. Beim Float muss zwingend eine Weite angegeben werden (dann würde es auch ohne das clear funktionieren). Aber clear trotzdem nie vergessen.

Gruß
jaderbass

tabf · 28.12.2012

AW: float zerschießt layout

Ich würde den ganzen <div> floaten nicht nur die <li>´s .

vincitore · 29.12.2012

AW: float zerschießt layout

wenn du die Listeneinträge in einer Zeile anzeigen willst, kannst du das auch mit display: inline-block; machen.

Grüße

jackprince · 15.01.2013

AW: float zerschießt layout

Zum Verständnis von Floats:

Spezifisch zu deinem Problem:

Vorausgesetzt du hast den Beitrag aus obigem Link gelesen und das Prinzip von Floats verstanden,
dann solltest du sehen das:

Dein Liste keine Angaben hat wie sie aussehen soll, durch das floaten der Listenpunkte ist sie dann quasi leer. Deswegen ganz richtig das du wahlweise nach den Listenpunkten ein clear Element benötigst oder Angaben wie groß die Liste an sich sein soll.

Angenommen das ganze ist ein Menü was über die ganze Breite geht und das Hauptmenü darstellen soll kannst du z.B. folgendes machen.

HTML:

<div id="menu">
 <ul>
  <li>Start</li>
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li> 
  <li>Kontakt</li>
  <li>Impressum</li>
 <ul>
</div>

PHP:

#menu ul {
  width: 100%;
 height: 2em;
 border: none;
 margin: 0;
 padding: 0;
}

#menu ul li{
 float: left;
 margin: 0 2px 0 2px;
 padding: 2px;
 height: 1.8em;
}

P.S. ungetestet und zu wenig Kaffee intus :muede:, ergo keine Garantie