Antworten auf deine Fragen:
Neues Thema erstellen

float zerschießt layout

_tnt_

pixel!

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

Komischer Typ und Köter

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

Noch nicht viel geschrieben

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_

pixel!

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_

pixel!

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

Noch nicht viel geschrieben

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
 

vincitore

Aktives Mitglied

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

xHTML & CSS Junkie

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 :p
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben