float links und float rechts

[DenisCGN]

Nabend zusammen,

http://www.musicheadquarter.de/single_layout.htm

das ist meine Testlayout Seite. Ich schaffe es einfach nicht die dritte Zeile "Von Denis Hoffmann | am 13.09.2007" zu splitten. Soll heißen "Von Denis Hoffmann" float left und "am 13.08.2007" float right.

Wenn ich das so gestalte mit 2 SPAN dann rutscht das Bild natürlich nach "Denis Hoffmann". Wie kann man sowas lösen ?

Im Augenblick habe ich nochmal ein DIV drum gezogen, weiter weiß ich dann auch nicht mehr. Dachte mir, wenn ich ein DIV drum baue, dann fängt das Bild wie in einer neuen Zeile an, denkste.

Grüße
Denis

[SchneewittchenX]

Hallo Denis,
ich hatte gestern früh ein ähnliches Problem, optimal ist meine Lösung noch nicht, da ich mir mit einem festen Abstand (margin-left) helfe, es gibt bestimmt eine bessere Lösung:

.author {
	font-size: 10px;
	line-height: 20px;
	font-weight: normal;
	letter-spacing: normal;
	word-spacing: normal;
	padding: 0px;
}
.authordate {
	font-size: 10px;
	line-height: 20px;
	font-weight: normal;
	letter-spacing: normal;
	word-spacing: normal;
	margin-left: 300px;
	padding: 0px;
}
...
<div class="author">Von <a href="#">Denis Hoffmann</a> <span class="authordate">am 13.09.2007</span></div>

float scheint hier nicht die Lösung zu sein, denn der Text soll ja gar nichts umfließen (Bild).
Bei meiner Lösung wandert aber das Datum in Abhängigkeit der Textlänge des Autors (auf verschiedenen Seiten) hin und her - schlecht.

Du könntest Deine Styles stark vereinfachen und kürzen, wenn Du am Anfang sich wiederholende Einstellungen zusammenfasst, z.B:

*
{
	font-family:Arial,verdana,helvetica,sans-serif;
	color: black;
	line-height: 20px;
	font-weight: normal;
	letter-spacing: normal;
	word-spacing: normal;
	padding: 0px;

}

Bein font-size und line-height solltest Du besser nicht mit den absoluten Angaben px oder pt arbeiten, sondern mit den relativen em oder %. (Im Texteditor px durch 0% ersetzen, geht am schnellsten und ändert nicht wirklich was an den Schriftgrößen). Wenn unter Body keine absolute Schriftgröße angegegeben ist, erbt dieser die Einstellung des Browserfensters und so bleibt es dem Betrachter überlassen, wie groß er sich Deine Texte anzeigen lässt.

SchneewittchenX

[Boris]

dann rutscht das Bild natürlich nach "Denis Hoffmann". Wie kann man sowas lösen ?

Indem du nicht vergisst, ordentlich clear zu benutzen?

[th2409]

So als Ansatz für die Zeile, deren einer Teil links, deren anderer teil rechts stehen soll:

<div>
<div style="width:50%; float:left">Von Dennis Hoffmann</div>
<div style="width:50%; float:right">13.08.2007</div>
<div style="clear:both; height:1px;"></div>
</div>

Du musst 2 divs machen, die floaten: eines links, das andere rechts. Damit sie vernünftig nebeneinander stehen können, muss man eine Breite angeben, die gewährleistet, dass sie auch nebeneinander passen können (hab jetzt mal 50% eingestellt). Anschließend ein clear, damit das beschrieben Problem mit dem Textfluss/Bild behoben ist.

[Boris]

Das ist extrem unsauberes HTML, sprich: eine DIV-Suppe.

Besser wäre eher ein Konstrukt wie z.B.:

<div class="newsitem">
<h3>Autor der News</h3>
<h4>Datum der News</h4>
</div>

Für h3 und h4 dann float left + right mit je 50% Breite.

Und ein sauberes clearen geht optimal dann direkt via CSS (ohne sinnfreies, leeres DIV):

PHP-Code:

.newsitem:after
{
    content: ".";
    visibility: hidden;
    height:        0;
    display:    block;
    clear:        both;
} 


[Rizzo]

@ Boris
Das funktioniert aber nur im IE7, da IE6 kein :after kennt, oder? Demnach müsste also noch eine IE6 Version zum clearen eingebaut werden.

[Boris]

Nö, der IE5 und 6 machen es ja "falsch" und clearen einfach ohne clear.

Falls es mal nicht der Fall sein sollte, haben wir noch immer hasLayout, sprich: für den IE5+6 geben wir einem Element ein height: 1% und dem IE7 ein min-height: 1% und voilà, sie clearen automatisch.

[Rizzo]

Achsooo, na dann ist die Variante mit dem :after clearen ja recht elegant. Gleich mal in die Sammlung packen.

[Boris]

Hier hast du noch mehr Lesestoff: http://www.positioniseverything.net/easyclearing.html

[SchneewittchenX]

Hallo,
ich möchte mich erst einmal bedanken, jetzt habe ich das Prinzip besser verstanden und auch noch einmal gezielt in selfhtml und css4you nachgeschlagen.
Bei mir befanden sich die beiden Elemente zusätzlich in einem Container für die Fußzeile, der selbst ein clear:both; enthielt. Aber jetzt klappt es.

SchneewittchenX