nicht angemeldet
float zerschießt mir mein Layout
0 0 0 0 0 
Matthias Apsel
0 0 
Der Martin
0 1 Der Martin
0 0 0 Der Martin
0 Matthias Apsel
float zerschießt mir mein Layout
Hallo zusammen,
ich habe heute ein Problem, was sich mit Sicherheit schnell lösen lässt, ich komm aber nicht drauf wie und google gibt mir auch nix passendes zurück.
Mein Problem ist folgendes:
ich bin dabei in Formular zu basteln welches aus 2 Spalten besteht in denen unterschiedliche Formularfelder stehen. Jetzt möchte ich, dass die Spalten von oben nach unten befüllt werden.
Wenn ich allerdings in der Defintion meiner Spalten float:left bzw. float:right einsetze, dann zerschießt es mir mein komplettes Layout. Nachfolgend poste ich euch mal meinen Style-Sheet. Es wäre echt super, wenn mir von euch da jemand weiterhelfen könnte.
Hier mein Style-Sheet:
<style>
body {
margin: 0;
background: #FFF;
}
/\* Positioning Rules \*/
#container {
width: 900px;
margin: 0 auto;
}
#titel {
position: relative;
height: 40px;
background: #999;
vertical-align: middle;
font: x-large h1, bold;
}
#subtitel {
position: relative;
height: 30px;
background: #CCC;
vertical-align: middle;
font: large h1, bold;
}
#content {
position: relative;
padding: 20px 20px 60px 20px;
background: #fff;
}
#left {
position: relative;
left: 0;
width: 50%;
background: #FFF;
float:left;
}
#right {
position:relative;
left:50%;
right: 0;
width:50%;
background: #FFF;
float:left;
}
</style>
Ich dank euch schon jetzt für eure Mühen und Ratschläge.
-
Dein HTML Code fehlt. Probier mal nach den zwei Floatcontainern das hier <div style='clear: both'></div>
-
Hier mal ein Ausschnitt aus meinem kompletten 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>Fragebogen</title><style> body { margin: 0; background: #FFF; } /\* Positioning Rules \*/ #container { width: 900px; margin: 0 auto; } #titel { position: relative; height: 40px; background: #999; vertical-align: middle; font: x-large h1, bold; } #subtitel { position: relative; height: 30px; background: #CCC; vertical-align: middle; font: large h1, bold; } #content { position: relative; padding: 20px 20px 60px 20px; background: #fff; } #left { position: relative; left: 0; width: 50%; background: #FFF; float:left; } #right { position:relative; left:50%; right: 0; width:50%; background: #FFF; float:left; } </style></head>
<body>
<form action="fragebogen/auswertung.php" method="post"><div id="container">
<div id="titel">
Erleben und Warnehmen von Natur und Landschaft
</div>
<div id="subtitel">
Feldprotokoll zur Bewertung von Flüssen - Bächen
</div>
<br /><div id="left">
<b>Naturräumliche Einheit:</b><br />
<input type="text" name="natureinheit" size="30" /> <br /><br />
<b>Name des Fließgewässers:</b> <br />
<input type="text" name="fließname" size="30" /> <br /><br />
<b>Kartierabschnitt:</b> <br />
<input type="text" name="kabschnitt" size="30" /> <br /><br />
<b>TK-Blatt:</b> <br />
<input type="text" name="tkblatt" size="10" /> <br /><br />
</div>
<div id="right">
<b>Bearbeiter/in:</b> <br />
<input type="text" name"bearbeiter" size="30" /> <br /><br />
<b>Datum:</b> <br />
<input type="date" name="datum" /> <br /><br />
<b>Uferseite:</b> <br />
<select name="uferseite" size="1">
<option>Bitte wählen</option>
<option>linke Uferseite</option>
<option>rechte Uferseite</option>
</select>
</div>
<br /><div id="titel" >
1. Allgemeine Angaben
</div>
<div id="subtitel">
1.1 Allgemeine Angaben - Lage des Fließgewässerabschnitts
</div>
</div>
</form>
</body>
</html>Ich weiß nicht, wo du meinst, dass ich <div style='clear: both'></div> einfügen soll.
-
<div id="right"> <b>Bearbeiter/in:</b> <br /> <input type="text" name"bearbeiter" size="30" /> <br /><br /> <b>Datum:</b> <br /> <input type="date" name="datum" /> <br /><br /> <b>Uferseite:</b> <br /> <select name="uferseite" size="1"> <option>Bitte wählen</option> <option>linke Uferseite</option> <option>rechte Uferseite</option> </select> </div> <div style='clear: both'></div>Aber Matthias sagt, kein eigenes Element dafür verwenden. Ich glaube da gibt es sowas wie pseudoklassen bei css wie du bei dem #right etwas mit "after" einfügen kannst. Sicher bin ich mir nicht.
-
vlt kann mir ja noch jemand weiterhelfen. Hab gerade mal versucht das mit flex-box zu machen aber irgendwie klappt das nicht
-
Om nah hoo pez nyeetz, Benedikt!
vlt kann mir ja noch jemand weiterhelfen. Hab gerade mal versucht das mit flex-box zu machen aber irgendwie klappt das nicht
Gern, am effizientesten wäre ein Blick auf die Seite.
Matthias
--
1/z ist kein Blatt Papier.
-
Hallo Matthias,
hier der Link zur Seite.
Das Layout sollte am Ende zweispaltig sein.Link: http://benedikt86.bplaced.de/imke/fragebogen.php
-
Hallo,
Das Layout sollte am Ende zweispaltig sein.
Link: http://benedikt86.bplaced.de/imke/fragebogen.phpdas ist kein Link. Das da ist einer -> http://benedikt86.bplaced.de/imke/fragebogen.php ;-)
Ja, so übersichtlich dein Quellcode auch ist (dafür ein ehrliches Lob!), da ist einiges, was negativ auffällt.
Als erstes natürlich die Fülle von div-Containern, geradeso als gäbe es keine passenderen Elemente. Zum Beispiel deutet <div id="titel"> und <div id="subtitel"> unmissverständlich darauf hin, dass es in Wirklichkeit ein <h1>, <h2> oder entsprechend sein möchte; die Blöcke innerhalb des Formulars wären optimal als <fieldset> ausgezeichnet; die Beschriftungen der Eingabefelder möchten <label> sein; die teils doppelt oder dreifach auftretenden br-Elemente möchten zugunsten von Abständen (CSS) völlig eliminiert werden.
Dann sehe ich, dass du mehrere Elemente mit derselben ID hast - klarer Fehler, das darf nicht sein.
Falsch ist auch folgende Verschachtelung, denn ein Absatz (p-Element) darf kein weiteres Blockelement enthalten:
<p><div id="left"> <input type="radio" name="abschnitt1" value="innerorts"/> Innerorts <br /> <input type="radio" name="abschnitt1" value="ortsrand" /> Ortsrandlage <br /> <input type="radio" name="abschnitt1" value="aussen"/> außerhalb einer Ortschaft </div> <div id="right"> <input type="checkbox" name="abschnitt2[]" value="wald"/> Wald / Forst <br /> <input type="checkbox" name="abschnitt2[]" value="gehoelz"/> Gehölze / Gehölzsaum / Einzelbäume <br /> [...] </div></p>Und seltsam mutet dein Versuch der Positionierung an, als Beispiel:
#left {
position: relative;
left: 0;
width: 50%;
background: #FFF;
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
}Bist du dir über die Auswirkung von position:relative im Klaren? Insbesondere bei den Boxen, die rechts stehen sollen, habe ich nicht den Eindruck.
Ich habe allerdings den Eindruck, dass du die Boxen am besten weder positionieren noch floaten solltest, sondern einfach als display:inline-block und mit einer Breite von 50% (oder etwas weniger) formatieren solltest.
So long,
Martin--
Der Klügere gibt solange nach, bis er der Dumme ist.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hallo Martin,
vielen Dank erstmal für deine Anmerkungen. Ganz im Klaren über position:relative bin ich mir nicht, hab mir das alles erst vor kurzem nach und nach mal durchgelesen und zusammengebaut.
Mein primäres Ziel ist eben, dass der Fragebogen in einem zweispaltigen Layout ist, weil sich dann bei jeder Frage die positiven und negativen Aspekte gegenüberstehen. Nach meiner Recherche im Internet hab ich festgestellt, dass es so am Besten funktionieren könnte. Wenn du jetzt sagst, dass ich grundsätzlich die falsche Variante gewählt habe, so ist das für mich natürlich zunächst einmal schlecht weil die ganze Arbeit bisher umsonst war. Aber dennoch bin ich dir dafür dankbar.
Könntest du mir dann, vlt an einem kleinen Beispiel, zeigen wie ich es besser machen könnte? Dann würde ich mir das ansehn und auf meinen Quellcode anwenden.Viele Grüße
Benedikt-
Hi Benedikt,
vielen Dank erstmal für deine Anmerkungen. Ganz im Klaren über position:relative bin ich mir nicht, ...
ganz kurz zusammengefasst: Das betroffene Element wird relativ zu der Position, die es normalerweise hätte, verschoben, aber der Platz, den es ursprünglich eingenommen hätte, bleibt trotzdem reserviert.
Mein primäres Ziel ist eben, dass der Fragebogen in einem zweispaltigen Layout ist, weil sich dann bei jeder Frage die positiven und negativen Aspekte gegenüberstehen.
Das mit dem zweispaltigen Layout hatte ich schon verstanden; inhaltlich habe ich es nicht so genau angesehen, um jetzt positive und negative Aspekte zu erkennen; ist aber auch egal.
Wenn du jetzt sagst, dass ich grundsätzlich die falsche Variante gewählt habe, so ist das für mich natürlich zunächst einmal schlecht weil die ganze Arbeit bisher umsonst war. Aber dennoch bin ich dir dafür dankbar.
Nein, sowas mit float zu realisieren ist nicht falsch. Aber komplizierter als nötig und mit einigen Fallstricken. Und umsonst? Nein, der Umbau ist gar nicht mal so aufwendig.
Könntest du mir dann, vlt an einem kleinen Beispiel, zeigen wie ich es besser machen könnte?
Ja. Allerdings will ich dabei auch zeigen, wie man das Markup (HTML) aussagekräftiger und semantisch besser machen kann. Und übersichtlicher noch dazu. Und du wirst feststellen, dass ein div-Element nur noch in Ausnahmefällen auftaucht. ;-)
<form action="fragebogen/auswertung.php" method="post"> <!-- Echte Überschriften anstatt neutraler div-Blöcke --> <h1>Erleben und Warnehmen von Natur und Landschaft</h1> <h2>Feldprotokoll zur Bewertung von Flüssen - Bächen</h2> <!-- fieldset als Block zum Gruppieren von Formularelementen, jedem Formularelement sein label --> <fieldset> <label>Naturräumliche Einheit: <input type="text" name="natureinheit" size="30" /></label> <label>Name des Fließgewässers: <input type="text" name="fliessname" size="30" /></label> <label>Kartierabschnitt: <input type="text" name="kabschnitt" size="30" /></label> <label>TK-Blatt: <input type="text" name="tkblatt" size="10" /></label> </fieldset <fieldset> <label>Bearbeiter/in: <input type="text" name"bearbeiter" size="30" /></label> <!-- type="date" ist nur in HTML 5 definiert, nicht in XHTML 1 --> <label>Datum: <input type="text" name="datum" size="12" /> </label> <!-- values für die option-Elemente ergänzt --> <label>Uferseite: <select name="uferseite" size="1"> <option value="" >Bitte wählen</option> <option value="L">linke Uferseite</option> <option value="R">rechte Uferseite</option> </select> </fieldset <!-- Nächster Hauptblock --> <h1>Allgemeine Angaben</h1> ...Soweit das Markup. Dir fällt sicher auf, dass ich alle Elemente und Attribute, die nur der Darstellung dienen, entfernt habe, weil ich die Darstellung ausschließlich mit CSS regeln will.
h1 { ... } h2 { ... } fieldset { display: inline-block; width: 48%; min-width: 20em; padding: 0 0.5%; border: none; /* fieldset hat einen Rahmen als Default */ } label { display: block; font-weight: bold; /* das ersetzt dein b-Element */ margin-bottom: 1em; /* und das die br-Elemente */ } label input, label select { display: block; /* damit die inputs in ihrer eigenen Zeile stehen */ }Das soll mal als Inspiration genügen; ist nicht in allen Punkten ausgereift. Ganz ähnlich wie beim Floating rutschen auch die inline-block-Elemente untereinander, wenn das Browserfenster die Mindestbreite (hier 20em pro Box) unterschreitet.
Die Verwendung von label-Elementen hat übrigens -außer der besseren Semantik- auch den Vorteil, dass man nicht unbedingt das Eingabefeld anklicken muss, sondern stattdessen auch auf die Beschriftung klicken kann. Das ist besonders bei Radiobuttons und Checkboxen ein Plus an Komfort.So long,
Martin--
PCMCIA: People Can't Memorize Computer Industry Acronyms
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(h2-
Super, vielen Danke für deine Mühe.
Als Inspiration reicht mir das völlig. Ich denk damit kann ich das recht gut umsetzen. Werd mich dann melden und berichten ob es funktioniert hat oder nicht. -
Also die Inspiration hat mir schon wahnsinnig weitergeholfen. Jetzt sieht es schon zu 95% so aus wie ich das gerne hätte. Eine letzte Frage wäre noch, wie ich es hinbekomme, dass die checkbox, radio-button, etc. vor dem Text stehen. Derzeit stehen sie immer eine Zeile darunter.
-
Hallo,
Also die Inspiration hat mir schon wahnsinnig weitergeholfen. Jetzt sieht es schon zu 95% so aus wie ich das gerne hätte. Eine letzte Frage wäre noch, wie ich es hinbekomme, dass die checkbox, radio-button, etc. vor dem Text stehen. Derzeit stehen sie immer eine Zeile darunter.
ah, verstehe. Daran hatte ich beim Entwurf nicht gedacht. Ich hatte radikal alle input-Elemente als display:block formatiert, so dass sie in einer eigenen Zeile stehen - und das betrifft natürlich auch die Checkbox- und Radiobutton-Elemente.
Mir fallen zwei alternative Wege aus dem Dilemma ein.
1. Nimm display:block für die input- und select-Elemente wieder raus und mach den Zeilenumbruch da, wo er gewünscht ist, mit einem(!) br-Element.
2. Mach den Selektor (in meinem Beispiel
label input) spezifischer, also zum Beispiellabel input[type="text"]. Dann gilt er nur noch für die Texteingabefelder, nicht für andersartige input-Elemente.So long,
Martin--
Lieber eine gesunde Verdorbenheit als eine verdorbene Gesundheit.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
perfekt, jetzt funktioniert alles so, wie ich es mir vorgestellt hab. Tausend Dank!
-
Hallo,
perfekt, jetzt funktioniert alles so, wie ich es mir vorgestellt hab. Tausend Dank!
das freut mich. Einen Vorschlag habe ich noch: Lass die height-Angabe für die Überschriften (h1, h2) einfach weg. Je nach Fensterbreite und Schriftgröße kann es vorkommen, dass die Überschrift auch mal auf zwei Zeilen umgebrochen wird, und das sieht mit begrenzter Höhe besch... äh, nicht so gut aus.
Ciao,
Martin--
Ja, ja ... E.T. wusste schon, warum er wieder nach Hause wollte.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
-
-
-
-
-
-
-
-
-
-
-
-
-
Om nah hoo pez nyeetz, Benedikt!
Ohne HTML ist das CSS ohne Aussagekraft.
Es gibt neben dem clearing, für welches man besser kein eigenes Element verwenden sollte, noch die besseren Varianten Flex-box bzw. inline-block. Die Browserunterstützung für display: inline-block ist deutlich größer.
Matthias
--
1/z ist kein Blatt Papier.