float nur auf nachfolgendes Element anwenden

[Chris]

Hallo

Bin gerade ganz verzwatzelt und komme nicht weiter ohne das Dokument unnötig mit leeren Elementen aufzufüllen die mir das float wieder zurücknehmen sollen.

Hier mein Beispielcode.

<div class="box">

<div class="label">User ID</div>
<div class="data">Kurzer Text</div>

<div class="label">Name</div>
<div class="data">Kurzer Text</div>

<div class="label">Date</div>
<div class="data">Kurzer Text</div>

<div class="label">Time</div>
<div class="data">Kurzer Text</div>

</div>

Der Container box umfasst das ganze Feld nur mit einem Rahmen. Der Container label soll immer auf der linken Seite stehen, der nachfolgende Container rechts davon. Beim nächsten Container label soll das float wieder aufgehoben werden und dieser wieder links eine Zeile tiefer stehen.

Hier das CSS

.label {
 color: #336699;
 background-color: #eeeeee;
 font-size: 0.8em;
 font-weight: bold;
 padding: 0.3em 0.6em 0.3em 0.6em;
 margin: 1px;
 width: 6em;
 float: left;
 }

.data {
 color: #000000;
 background-color: #ffffff;
 font-size: 0.8em;
 padding: 0.3em 0.6em 0.3em 0.6em;
 margin: 1px;
 }

Hat jemand einen Tipp wie ich das float nach dem Container data wieder aufheben kann, so dass der nächste Container label wieder sauber auf der linken seite beginnt. Momentan wird jeder label Container um eine Containerbreite nach rechts versetzt.

Grüße, Christian

[at]

Hallo.
Kennst du die CSS-Eigenschaft "clear"?
MfG, at

[Chris]

Kennst du die CSS-Eigenschaft "clear"?

Hallo at

Ja klar, nur wo soll ich die sinnvoll setzen? Wenn ich sie bei dem Container data benutze, dann wird ja dieser schon in die nächste Zeile geschrieben. Ich wollte kein zusätzliches Element zwischen die "Reihen" schreiben, das nur für den Umbruch sorgt.

Verwirrte Grüße, Chris

[at]

Hallo.

Ich wollte kein zusätzliches Element zwischen die "Reihen" schreiben, das nur für den Umbruch sorgt.

Wozu auch. Du hast in deinem Container ja schon zwei Elemente, von denen eines das richtige sein sollte.
MfG, at

[Chris]

Wozu auch. Du hast in deinem Container ja schon zwei Elemente, von denen eines das richtige sein sollte.

Hi at

Uh, gerade habe ich bemerkt, dass mir irgendeine anderer Stylesheet hier Chaos verursacht. Deswegen hat das bei mir nie so funktioniert wie es sollte.

Manchmal sollte man zwischendurch einfach mal Pause machen ...

Danke trotzdem, Chris

[MudGuard]

Hi,

<div class="box">
<div class="label">User ID</div>
<div class="data">Kurzer Text</div>
<div class="label">Name</div>
<div class="data">Kurzer Text</div>
<div class="label">Date</div>
<div class="data">Kurzer Text</div>
<div class="label">Time</div>
<div class="data">Kurzer Text</div>
</div>

Das sieht für mich so aus, als würdest Du dl oder vielleicht sogar table verwenden wollen. div-Suppe ist nicht so toll.

Hat jemand einen Tipp wie ich das float nach dem Container data wieder aufheben kann, so dass der nächste Container label wieder sauber auf der linken seite beginnt. Momentan wird jeder label Container um eine Containerbreite nach rechts versetzt.

clear im .label

cu,
Andreas

[Cyx23]

Hallo Christian,

Hat jemand einen Tipp wie ich das float nach dem Container data [...]

clear:left; ist wohl klar?

Bei deinem Beispiel ist das wohl bereits bei .label möglich,
ggf. sind CSS-Browserweichen nötig wenn ein Browser doch eine
andere Variante benötigt und Hilfselemente vermieden werden
sollen.

Grüsse

Cyx23

[Axel Richter]

Hallo,

Der Container box umfasst das ganze Feld nur mit einem Rahmen. Der Container label soll immer auf der linken Seite stehen, der nachfolgende Container rechts davon. Beim nächsten Container label soll das float wieder aufgehoben werden und dieser wieder links eine Zeile tiefer stehen.

Hier das CSS

.label {
 color: #336699;
 background-color: #eeeeee;
 font-size: 0.8em;
 font-weight: bold;
 padding: 0.3em 0.6em 0.3em 0.6em;
 margin: 1px;
 width: 6em;
 float: left;
 }

.data {
 color: #000000;
 background-color: #ffffff;
 font-size: 0.8em;
 padding: 0.3em 0.6em 0.3em 0.6em;
 margin: 1px;
 }

Lass das CSS so und ändere das HTML so:

<table class="box">
<tr>
<td class="label">User ID</td>
<td class="data">Kurzer Text</td>
</tr>
<tr>
<td class="label">Name</td>
<td class="data">Kurzer Text</td>
</tr>
<tr>
<td class="label">Date</td>
<td class="data">Kurzer Text</td>
</tr>
<tr>
<td class="label">Time</td>
<td class="data">Kurzer Text</td>
</tr>
</table>

viele Grüße

Axel

[MudGuard]

Hi,

Lass das CSS so und ändere das HTML so:

<table class="box">
<tr>
<td class="label">User ID</td>
<td class="data">Kurzer Text</td>
</tr>

th und td bieten sich an statt class...
Oder aber wie schon erwähnt dl, dt, dd

cu,
Andreas

[Axel Richter]

Hallo,

th und td bieten sich an statt class...

Ja, dann muss man das CSS für die Labels aber weiter verändern, da th meist per default zentriert und im Fettdruck ist.
Natürlich hatte ich auch übersehen, dass man bei meinem Vorschlag das float aus dem CSS entfernen sollte.

Oder aber wie schon erwähnt dl, dt, dd

Ja, besonders, wenn es, bei längeren kurzen Texten ;-), so aussehen soll:
+----------+
| Label    | Kurzer Text Kurzer
+----------+ Text Kurzer Text
Kurzer Text Kurzer Text Kurzer...
+----------+
| Label    | Kurzer Text Kurzer
+----------+ Text Kurzer Text
Kurzer Text Kurzer Text Kurzer...

viele Grüße

Axel

[MudGuard]

Hi,

th und td bieten sich an statt class...
Ja, dann muss man das CSS für die Labels aber weiter verändern,

Naja, zwei Selektoren mehr: .box td und .box th - gewaltige Änderung ...

da th meist per default zentriert und im Fettdruck ist.

So gewaltig ist das ja auch nicht, auch noch die zwei Deklarationen dazuzunehmen.
Abgesehen davon ist sowieso Fettdruck gesetzt für .label ;-)

Dafür aber sinnvolleres Markup.

cu,
Andreas