Zu dämlich für float / clear

Pyrofreak · 04.03.2008, 17:08

Hallo Leute!

Ich habe meine Seite nun umgestellt auf schwebende Spalten also mit float
right und left, aber obwohl ich es so wie in meinem Buch gemacht habe und
auch die Seite wo das mit dem clear im Inet erklärt ist, schnall ich es
scheinbar nicht! Nun sieht meine Startseite den Umständen entsprechend
miserabel aus...

http://www.chat-surium.com/

Hoffe Ihr könnt mir helfen

gr Pyro

koenixblau · 04.03.2008, 22:56

Dynamisch, Header, Links eine Navi, in der Mitte Content, Rechts eine "Navi" mit Footer.

Siehe Beispiel:
http://www.intensivstation.ch/files/...es/temp07.html

Zufinden unter:
http://www.intensivstation.ch/templates/
(beinhaltet u.a. auch statische Beispiele)

Pyrofreak · 05.03.2008, 11:19

Hallo königsblau!

Danke die Seite kenne ich schon, habe mir die Templates schon durchgeschaut
und verglichen, aber ich kann den Fehler bei meiner Seite trotzdem
nicht finden...

gr Pyro

koenixblau · 05.03.2008, 11:33

Mal eine oberflächige Frage,
alle Div's geschlossen?

Nele · 05.03.2008, 11:40

Nee, irgendwas hat er nicht geschlossen, schau mal hier.

koenixblau · 05.03.2008, 11:47

Zitat:

Zitat von Nele

Nee, irgendwas hat er nicht geschlossen, schau mal hier.

Deswegen frag ich ja.

Bin zwar dabei mir den Quelltext und CSS anzusehen, welches aber sehr träge läuft. Da "logische" Bezeichnungen nicht vorliegen.

Nele · 05.03.2008, 12:26

Geh doch deinen Quellext einfach mal durch und rücke logisch ein. 5 Minuten und du findest den Fehler ...

Pyrofreak · 05.03.2008, 13:33

@Leute Ihr habt recht, habe irrtümlich beim Umbau meiner Seite ein </div>
gelöscht, sonst wäre alles richtig gewesen mensch Meier gg

Ja sorry Leute hab ich echt übersehen, danke nochmal

Aber eine wichtige Frage hätte ich noch zu meiner Titelzeile (wo die Überschrift steht), habe dort ein "float: left;" benutzt und dieses aber nie geschlossen
sondern erst am Ende der Seite schliesse ich die beiden Seitenleisten mit "float: both; ist das überhaupt korrekt? Muss ich nicht das erste "float: left;" auch irgendwo schliessen?

gr Pyro

koenixblau · 05.03.2008, 14:27

Scheinbar hast du dir die Beispiele/Templates nicht richtig angesehen.

Siehe 08/15 - Quick'n Dirty:

HTML-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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chat Surium - Muster</title>
<style type="text/css">
* {
	margin: 0em;
	padding: 0em;
}

body {
	background-color: #602C16;
	margin: 1em 1.5em;
}
body,td,th {
	color: #000000;
	font: 0.9em Arial, Helvetica, sans-serif;
}
h1 {
	font-size: 1.2em;
}
h2 {
	font-size: 1.1em;
}
h3 {
	font-size: 1em;
}
#kontainer {
	background: #FFBF47;
	height: auto;
	width: 98%;
	margin: 0em;
	padding: 0.6em;
}
#header {
	margin: 0em 0em 1em;
	padding: 0.5em;
}
#menue_links {
	background: #FFE3AD;
	float: left;
	width: 11em;
	margin: 0em 1em 0em 0em;
	padding:0.5em;
	border: 0.1em solid #7C5C1E;
	height: auto;
}
#inhalt {
	background: #FFE3AD;
	border: 0.1em solid #7C5C1E;
	padding: 0.5em;
	margin: 0em;
	min-height: 450px;
}
#menue_rechts {
	width: 15em;
	background: #FFE3AD;
	border: 0.1em solid #7C5C1E;
	float: right;
	padding: 0.5em;
	margin: 0em 0em 0em 1em;
	height: auto;
}
#footer {
	border-top: 0.1em solid #7C5C1E;
	border-bottom: 0.1em solid #7C5C1E;
	border-right-style: none;
	border-left-style: none;
	margin: 1em 0em 0em;
	clear: both;
	padding: 0.5em;
}

</style>
</head>

<body>

<div id="kontainer">
<div id="header">
  <h1>HEADER</h1>
</div>
<div id="menue_links">
  <h3>MENÜ-LINKS</h3>
  </div>
<div id="menue_rechts">
  <h3>MENÜ-RECHTS</h3>
</div>
<div id="inhalt">
  <h2>INHALT</h2>
  Achtung! Dieser Blindtext wird gerade durch 130 Millionen Rezeptoren Ihrer Netzhaut erfasst. Die Zellen werden dadurch in einen Erregungszustand versetzt, der sich über den Sehnerv in dem hinteren Teil Ihres Gehirns ausbreitet. Von dort aus überträgt sich die Erregung in Sekundenbruchteilen auch in andere Bereiche Ihres Grosshirns. Ihr Stirnlappen wird stimuliert. Von dort aus gehen jetzt Willensimpulse aus, die Ihr zentrales Nervensystem in konkrete Handlungen umsetzt. Kopf und Augen reagieren bereits. Sie folgen dem Text, nehmen die darin enthaltenen Informationen auf wie ein Schwamm. Nicht auszudenken, was mit Ihnen hätte passieren können, wenn dieser Blindtext durch einen echten Text ersetzt worden wäre. Achtung! Dieser Blindtext wird gerade durch 130 Millionen Rezeptoren Ihrer Netzhaut erfasst. Die Zellen werden dadurch in einen Erregungszustand versetzt, der sich über den Sehnerv in dem hinteren Teil Ihres Gehirns ausbreitet. Von dort aus überträgt sich die Erregung in Sekundenbruchteilen auch in andere Bereiche Ihres Grosshirns. Ihr Stirnlappen wird stimuliert. Von dort aus gehen jetzt Willensimpulse aus, die Ihr zentrales Nervensystem in konkrete Handlungen umsetzt. Kopf und Augen reagieren bereits. Sie folgen dem Text, nehmen die darin enthaltenen Informationen auf wie ein Schwamm. Nicht auszudenken, was mit Ihnen hätte passieren können, wenn dieser Blindtext durch einen echten Text ersetzt worden wäre. Achtung! Dieser Blindtext wird gerade durch 130 Millionen Rezept</div>

<div id="footer">FOOTER</div>
</div>

</body>
</html>

ps:
Bin zwar nicht stolz auf den "Kackmist" aber hauptsächlich ging es ja um die Float-Problematik.

EDIT

Aktionstag, nur noch für kurze Zeit - Online: http://www.koenixblau.de/tutorial/muster.html

steffenk · 05.03.2008, 14:34

wie heisst es so schön: wer float sagt muss auch clear sagen.
also nach float:left; muss ein clear:left; folgen.

Pyrofreak · 05.03.2008, 15:43

@steffenk

Das kann nicht stimmen, in meinem Buch wird bei einem Beispiel öfter "links"
gefloatet und einmal "rechts" und ganz am Ende wird mittels "footer" einmal
gecleart both und fertig, da is nix mit nach jedem "float left" folgt ein "clear left".

Sorry ich kann nur das wiedergeben was in meinem Buch steht

Und meine Seite (Startseite) funktioniert jetzt einwandfrei mit 2mal float left
1mal float right und 1mal clear both am Ende!

Habe zwar auf einer Unterseite noch einen Fehler aber der scheint nicht vom
"float" zu kommen, denn dort habe ich am Ende "clear left" ausprobiert und
es hat sich nix am Fehler geändert..

gr Pyro

th2409 · 05.03.2008, 16:37

Auf ein "float: left" muss nicht zwingend auch ein "clear: left" folgen, es kann auch ein "clear: both" sein (ein clear:right" würde nichts bringen...).
Das mit dem clear versehene Element schaut halt nur, dass es erst unter dem/den gefloateten Elementen steht, und dass es eben in die "geclearte" Richtung frei ist. Also: "clear:left" stellt sicher, dass es links auf alle Fälle nichts neben sich hat, ein "clear:right" sorgt rechts für freie Bahn und "clear: both" links und rechts. "both" impliziert "right" und "left".

koenixblau · 05.03.2008, 16:54

Zitat:

Zitat von Pyrofreak

@steffenk

Das kann nicht stimmen, in meinem Buch wird bei einem Beispiel öfter "links"
gefloatet und einmal "rechts" und ganz am Ende wird mittels "footer" einmal
gecleart both und fertig, da is nix mit nach jedem "float left" folgt ein "clear left".

Wie heißt es denn?
Suche noch interessante Lektüre.

Zitat:

Zitat von Pyrofreak

Und meine Seite (Startseite) funktioniert jetzt einwandfrei mit 2mal float left
1mal float right und 1mal clear both am Ende!

1 x float: left, 1 x float: right mit 1 x clear:both wären schon ausreichend
(Wie man im obigen Quick'n Dirty erkennen kann, wenn man es sich ansieht.)

"Theoretisch"

bleibt bei deiner Lösung ein "Clear" offen.

Zitat:

Zitat von Pyrofreak

Habe zwar auf einer Unterseite noch einen Fehler aber der scheint nicht vom
"float" zu kommen, denn dort habe ich am Ende "clear left" ausprobiert und
es hat sich nix am Fehler geändert..

U.a. fehlt nach meinem Geschmack auch etwas Struktur,
für eine eventuelle weitere Problem-Lösung.

steffenk · 05.03.2008, 17:01

Zitat:

Zitat von Pyrofreak

@steffenk

Das kann nicht stimmen, in meinem Buch wird bei einem Beispiel öfter "links"
gefloatet und einmal "rechts" und ganz am Ende wird mittels "footer" einmal
gecleart both und fertig, da is nix mit nach jedem "float left" folgt ein "clear left".

mann mann mann ...

ein clear:left löscht das float:left
ein clear:right löscht das float:right
ein clear:both löscht .. na?

und wenn das nur einmal am Ende geschieht musst Du Dich nicht wundern wenn es in der Mitte durcheinander purzelt.

Pyrofreak · 05.03.2008, 17:39

@steffenk

Ja und warum ist das dann in meinem Buch anders beschrieben erklär mir das mal? Ich weis was "clear both" macht aber es geht darum das in meinem
Buch und das ist nicht irgendein CSS Buch in mehreren Beispielen
zuerst in der Titelzeile ein float "left" kommt, danach Seitenleiste1 ebenfalls
ein float: "left", Seitenleiste2 float: "right" und dann am Schluss kommt "einmal"
ein clear: "both" und fertig!

Demnach müsste nach deiner Theorie genau ein "clear: left" fehlen nämlich das
für die Titelzeile ok? Tut es aber nicht, weil es auch im Buch fehlt...So ich hoffe
Du weist jetzt was ich meine

gr Pyro