nicht angemeldet
Anfängerproblem mit float
Hallo!
Weil ich jetzt auch mal ein bisschen intensiver mit CSS arbeiten will, hab ich mal ein (doch eigentlich) simples Beispiel geschrieben:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>New Document</title>
</head>
<body>
<div style="width: 450px;">
<div style="float: left; background-color: red; width: 200px; height: 200px; padding-top: 5px; padding-left: 10px; margin: 0px; border-style: dotted; border-color: brown; border-width: 2px;">Box 1<br><br>= Test 1</div>
<div style="background-color: red; width: 200px; height: 200px; padding-top: 5px; padding-left: 10px; margin: 0px;">Box 2<br><br><br><br><br><br>= Test 2<br><br><br><br><br><br><br><br><br><br><br><br></div>
<div style="width: auto; clear: left; background-color: yellow; line-height: 25px; font-weight: bold; padding: 2px; border-style: dotted; border-color: brown; border-width: 2px;">Weiter gehts!</div>
</div>
</body>
</html>
Auch zu sehen unter
http://web110.essen082.server4free.de/float.htm
Allerdings stellen die verschiedenen Browser den Abstand zwischen den 2 roten Boxen anders da trotz "margin: 0px"... warum???
thomas.
-
Hallo!
Wir hatten neulich mal so was ähnliches. Häng die verschiedenen <div>'s einfach mal _direkt_ hintereinander, also kein Leerzeichen und kein Zeilensprung, vielleicht ist es dann gut.
MfG, Dennis.
--
Auf Signaturen hab ich keinen Bock!!-
Wir hatten neulich mal so was ähnliches. Häng die verschiedenen <div>'s einfach mal _direkt_ hintereinander, also kein Leerzeichen und kein Zeilensprung, vielleicht ist es dann gut.
Ne, damit hats leider nix zu tun.
1. Würde mann dann ja gar keinen differenzierten Quellcode mehr schreiben können und
2. Hab ichs auch probiert ;)
Woran liegts dann?
thomas.
-
Naja wenn noch jemand eine Lösung hat, rein damit!!!
thomas.
-
-
-
Hallo,
http://web110.essen082.server4free.de/float.htm
Bitte </faq/#Q-19> lesen!
=> http://web110.essen082.server4free.de/float.htmImmerhin ist es valides HTML 4.01 Transitional...
Schwein gehabt;-)
(Du solltest noch ein Charset angeben, am einfachsten
serverseitig.)Allerdings stellen die verschiedenen Browser den Abstand zwischen den 2 roten Boxen anders da trotz "margin: 0px"... warum???
In Mozilla 1.5 (Linux) sehe ich nur eine rote (quadratische) Box.
Darunter eine breitere gelbe Box.
Der Text, der eigentich in der zweiten roten Box2 sein sollte, ueberlagert
die gelbe Box bzw. steht darunter.
Screenshot auf Anfrage.Ich habe keine Erklaerung.
Das aeusserste DIV sollte ja mit 450px breit genug sein,
dass zwei DIVs von je 214px Breite (200 content + 10 padding + 2+2 border)
darin nebeneinander Platz haben, selbst wenn noch ein
Leerzeichen dazwischenkaeme.Mach mal dem aeussersten DIV auch noch einen sichtbaren Rahmen.
Gruesse,
Thomas
--
Bitte keine Mails mit Fachfragen - dafuer gibt es das Forum!
Oft gestellte PHP-Fragen beantwortet die dclp-FAQ bestens: http://www.dclp-faq.de/-
dass zwei DIVs von je 214px Breite (200 content + 10 padding + 2+2 border)
Gut dass du das erwähnst das hatte ich schon wieder vergessen...
Mach mal dem aeussersten DIV auch noch einen sichtbaren Rahmen.
Schon gemacht, schaus dir an!
Und im Netscape 7.2 siehts bei mir auch total chaotisch aus, ich verstehs einfach nicht!
thomas.
-
Hallo,
Mach mal dem aeussersten DIV auch noch einen sichtbaren Rahmen.
Schon gemacht, schaus dir an!http://web110.essen082.server4free.de/float.htm
Also, der scheint ja genug breit zu sein, vermutlich seine 450px, die er sein soll.
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fweb110.essen082.server4free.de%2Ffloat.htm&warning=1&profile=css2&usermedium=all
border-color:brown - brown ist kein gueltiger Wert.Du hast einen Zeilenumbruch aus dem Quelltext entfernt, allerdings nicht
den "richtigen", den Dennis wohl gemeint hat.
Versuch's mal:
<div>
<div>Box1 rot</div><div>Box2 rot</div>
<div>Box gelb</div>
</div>Um das ganze fuer Menschen lesbarer zu machen,
koenntest Du den CSS-Code in Klassen
verpacken und diese einem <style>-Bereich
im <head> der Datei definieren.Zudem koenntest Du bei Border die Kurzschreibweise verwenden:
Statt
border-style: dotted; border-color: blue; border-width: 1px;
einfach
border:dotted blue 1px;Wenn Du das machst, haben andere Leute vielleicht mehr Lust,
Dir zu helfen, als beim derzeitigen Quellcode.Gruesse,
Thomas
-
border-color:brown - brown ist kein gueltiger Wert.
Danke für den Hinweis
Versuch's mal:
<div>
<div>Box1 rot</div><div>Box2 rot</div>
<div>Box gelb</div>
</div>Das geht auch nicht. Wie schon gesagt vorhin. Das hat nichts damit zu tun wie der Quellcode strukturiert ist.
Um das ganze fuer Menschen lesbarer zu machen,
koenntest Du den CSS-Code in Klassen
verpacken und diese einem <style>-Bereich
im <head> der Datei definieren.Hatte ich schon noch vor...
Zudem koenntest Du bei Border die Kurzschreibweise verwenden:
Statt
border-style: dotted; border-color: blue; border-width: 1px;
einfach
border:dotted blue 1px;Man lernt nie aus :)
thomas.
-
-
-
In Mozilla 1.5 (Linux) sehe ich nur eine rote (quadratische) Box.
Darunter eine breitere gelbe Box.
Der Text, der eigentich in der zweiten roten Box2 sein sollte, ueberlagertsetze in das 2. rote div auch noch float:left; und schon funktioniert es.
MfG
Klaus-
setze in das 2. rote div auch noch float:left; und schon funktioniert es.
Super, jetzt gehts! Aber warum musste ich da noch im 2. DIV ein float: left setzen?
thomas.
-
-