Darstellungsproblem

[SilverVegeto]

Guten Morgen Leute,

hab ein kleines Darstellungsproblem (siehe Screen). Wie bekomm ich das denn geordnet?

CSS-Ausschnitt:

div.box_text_links { float: left; padding: 0px; margin: 0px; text-align: left; border: 1px solid #9D639C; }

PHP-Ausschnitt (habe die Inhalte etwas gekürzt):

<div class="box_text_links" style="width: 35%;">Überschrift<br><div class="schrift_info">(min. 6 Zeichen)</div></div><div class="box_text_links" style="width: 61%;">TEXTBOX</div><br>		
<div class="box_text_links" style="width: 35%;">Nachricht<br><div class="schrift_info">(min. 20 Zeichen)</div></div><div class="box_text_links" style="width: 61%;">TEXTBOX</div><br>
<div class="box_text_links" style="width: 35%;">&nbsp;</div><div class="box_text_links" style="width: 61%;">TEXTBOX</div><br>
<div class="box_text_links" style="width: 35%;">Themenlogo<br><div class="schrift_info">(kleines Themenbild links neben den News)</div></div><div class="box_text_links" style="width: 61%;">AUSWAHLBOX</div><br>			
<div class="box_text_links" style="width: 35%;">Link<br><div class="schrift_info">(ohne "http://" eingeben)</div></div><div class="box_text_links" style="width: 61%;">TEXTBOX</div><br>
<div class="divbox_35pro_links">&nbsp;</div><div class="box_text_links" style="width: 61%;">SPEICHERN</div><br><br>
<div style="clear:left;">&nbsp;</div>

 

[Maik]

hab ein kleines Darstellungsproblem (siehe Screen). Wie bekomm ich das denn geordnet?

Moin,

wenn du noch den Sollzustand des Layouts zeigst, können wir schon eher einen Putzplan ausarbeiten.

Auf jeden Fall vermisse ich auf dem ersten Blick zwischendurch als Pendant zu float:left die clear:left-Deklaration, um den Textfluß der einzelnen Blöcke auch "absatzweise" anzuordnen.

mfg Maik

 

[SilverVegeto]

Also wenn ich mal deine Onlinezeiten so betrachte bekomme ich langsam Angst, sicher das du kein Tutorial-Bot bist ^^

Also der Soll-Zustand soll eigentlich so sein:
von links weg 35% Länge für die Info dann 61% Länge für die Textbox (alles auf gleicher Höhe)
Hoffe damit kannst jetzt etwas anfangen.

clear:left-Deklaration habe ich am Ende gesetzt oder sollte ich das anders machen?

 

[Maik]

Nö, nicht wirklich, eine grafische Illustration würde mir in dem Darstellungssalat bedeutend mehr weiterhelfen.

mfg Maik

//edit: clear:left wirst du für jede neue Zeile benötigen, damit ihr Textfluß unterhalb des vorangegangen Floats erzwungen wird, denn derzeit soll nach deiner definierten CSS-Regel jedes DIV box_text_links vom nachfolgenden Element auf seiner rechten Flanke umflossen werden, was zu diesen Darstellungsfehlern führt.

 

[SilverVegeto]

Okay, hab das mal schnell gebastelt.
Hoffe damit kannst du mehr anfangen.

Hab gerade dein Edit gelesen und nachdem ich überall "<div style="clear:left;">&nbsp;</div>" drangehangen habe gings. Gibts da vielleicht ne bessere Schreibweise?

 

[Maik]

Ist das jetzt die "XXLight-Version" zum vorangegangen Formular, oder fehlt da nicht noch was? :suspekt:

mfg Maik

 

[SilverVegeto]

Gott jetzt musst ich lachen ^^ (light-formular)
Hab auf die schnelle ein anderes Formular bearbeitet soll aber genauso aussehen.
Wobei ich es schon geschafft habe nachdem ich überall <div style="clear:left;">&nbsp;</div> drangehangen habe. Gibts da vielleicht ne bessere Schreibweise oder muss ich das überall per Hand hinschreiben?

 

[Maik]

Wenn du das Formular geschickter auszeichnest bzw. in einzelne Blöcke unterteilst (siehe hierzu auch Gruppierung von Elementen und Label für Elemente - wobei ich mit den Beispielcodes nicht auf die Tabellenstruktur abziele!), hilft hier How To Clear Floats Without Structural Markup anstelle der inhaltsleeren DIVs weiter, die ausschliesslich dem Floatclearing dienen.

mfg Maik

 

[SilverVegeto]

Danke, dann werde ich mir das mal ansehen.