nicht angemeldet
Floatendes Image in zweispaltigem Layout
Hallo!
auf einer Seite habe ich eine links floatende Navigation mit einem nicht gefloateten Inhaltsbereich daneben: http://www.campusradio.uni-bremen.de/personen.php. Nun möchte ich gerne die Bilder im Inhaltsbereich floaten, so dass sie rechts umflossen werden. So weit, so gut.
Jetzt soll aber jedes neue Bild bzw. jede neue Überschrift den Textfluss wiederherstellen. Wenn ich also den Bildern bzw. wenn nicht vorhanden den Überschriften ein clear gebe, werden sie unter die Navigation gesetzt. Geht es also, den Textfluss nur für den letzten float (Bild) oder nur in einem Bereich (#inhalt) wiederherzustellen?
Außerdem kommt in Opera noch ein merkwürdiges Problem hinzu: Der Hintergrund-Kasten besteht aus einem Bild für oben, einem für unten, und einem wiederholten für die Mitte, die jeweis einem Div als Hintergrund zugewiesen sind. Auf der oben verlinkten Seite fehlt aber das mittlere Hintergrundbild. Auf den anderen Seiten klappt es aber...
Für alle Tipps, auch allgemein zur Seite, bin ich sehr dankbar!
Liebe Grüße
Fredo
-
Gut, vielleicht habe ich die Frage zu verworren gestellt. Daher noch einmal ganz reduziert:
Ist es möglich, auf dieser Seite die zweite Kapitelüberschrift zwar unter dem Bild, aber nicht unter der Navi stehen zu lassen?
Wäre wirklich für alle Hinweise extrem dankbar!
LG
Fredo-
Hallo Fredo
Ist es möglich, auf dieser Seite die zweite Kapitelüberschrift zwar unter dem Bild, aber nicht unter der Navi stehen zu lassen?
Ja
Wäre wirklich für alle Hinweise extrem dankbar!
In diesem Fall nützt dir ein clear für die Überschrift nichts.
Du kannst jeweils der Überschrift und/oder dem Text eine Minimalhöhe geben,
die für beide Elemente zusammen der Höhe der Grafik entspricht.
(min-height für Browser, height für IE)Du kannst jeweils Bild, Überschrift und Text gruppieren (z.B. ein Div).
Diesem Element kannst du dann eine Minimalhöhe zuweisen, oder du kannst
ihm ein float geben, dann wird es auf die Höhe in ihm floatenden Elements
ausgedehnt.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Detlef,
Ja
Das freut mich!
In diesem Fall nützt dir ein clear für die Überschrift nichts.
... hatte ich befürchtet...
Du kannst jeweils der Überschrift und/oder dem Text eine Minimalhöhe geben,
die für beide Elemente zusammen der Höhe der Grafik entspricht.
(min-height für Browser, height für IE)Finde ich prinzipiell eine gute Idee, vor allem in Verbindung mit
Du kannst jeweils Bild, Überschrift und Text gruppieren (z.B. ein Div).
Diesem Element kannst du dann eine Minimalhöhe zuweisen,Das hätte ich gerne gemacht, aber die Unterscheidung von IE und die anderen habe ich mit dem style-Attribut nicht hinbekommen. Zentral definieren geht ja nicht, weil die Bilder unterschiedlich groß sind. Und ich wollte PHP nicht noch in meinem CSS rumfuhrwerken lassen. Daher habe ich mich also für
oder du kannst
ihm ein float geben, dann wird es auf die Höhe in ihm floatenden Elements
ausgedehnt.entschieden, in Verbindung mit width:100%. Das gibt dann genau das Resultat, das ich haben wollte.
Also, vielen Dank für die Tipps!
Liebe Grüße
Fredo
-
-
-
Hi,
auf einer Seite habe ich eine links floatende Navigation mit einem nicht gefloateten Inhaltsbereich daneben: http://www.campusradio.uni-bremen.de/personen.php.
Schau Dir die Seite bitte mal im Firefox an. Du mußt den Elementenfluß schon wieder herstellen, wenn Du die Inhaltsbox um den Inhalt haben willst und solltest nicht für den IE-quirks-mode schreiben.
Wenn ich also den Bildern bzw. wenn nicht vorhanden den Überschriften ein clear gebe, werden sie unter die Navigation gesetzt. Geht es also, den Textfluss nur für den letzten float (Bild) oder nur in einem Bereich (#inhalt) wiederherzustellen?
Nein. Aber die Kenntnis der unterschiedlichen Interpretation von 'clear' könnte Dir vielleichet helfen.
freundliche Grüße
Ingo-
Hallo Ingo,
Schau Dir die Seite bitte mal im Firefox an. Du mußt den Elementenfluß schon wieder herstellen, wenn Du die Inhaltsbox um den Inhalt haben willst
Leider habe ich hier keinen FF, sonder verlasse mich meistens auf Opera. Zu dem Zeitpunkt, zu dem Du die Antwort geschrieben hast, dachte ich, das Problem schon längst gelöst zu haben (mit den Hinweisen von Detlef). Den Elementenfluss stelle ich jetzt am Ende wieder her. Daher meine Frage: Stimmt die Anzeige im FF immer noch nicht?!?
und solltest nicht für den IE-quirks-mode schreiben.
??? Bitte was??? Es kann ja sein, dass ich ab und zu (Denk-)fehler mache, und so die Anzeige nicht mit dem übereinstimmt, was ich mir erhofft habe. Aber deswegen frage ich ja hier, und ich weiß nicht, was der Verweis auf den Quirks-Mode soll... Wie Du vielleicht gesehen hast, schreibe ich extra XHTML strict, um eben jenen zu vermeiden. Wenn es mir nicht um eine standardkonforme Darstellung ginge, würde ich hier gar nicht erst nachfragen...
Wenn ich also den Bildern bzw. wenn nicht vorhanden den Überschriften ein clear gebe, werden sie unter die Navigation gesetzt. Geht es also, den Textfluss nur für den letzten float (Bild) oder nur in einem Bereich (#inhalt) wiederherzustellen?
Nein. Aber die Kenntnis der unterschiedlichen Interpretation von 'clear' könnte Dir vielleichet helfen.
Das war wiederum hilfreich. Es stimmt, dass diese Definition von clear erst mal der Erwartung nicht entspricht. Aber wenn man das weiß, kann man ja andere Lösungen suchen (s.o.).
Liebe Grüße
Fredo-
Hi,
Leider habe ich hier keinen FF, sonder verlasse mich meistens auf Opera. Zu dem Zeitpunkt, zu dem Du die Antwort geschrieben hast, dachte ich, das Problem schon längst gelöst zu haben (mit den Hinweisen von Detlef). Den Elementenfluss stelle ich jetzt am Ende wieder her. Daher meine Frage: Stimmt die Anzeige im FF immer noch nicht?!?
Was die Boxausdehnung betrifft: Ja. Die Navigation ist noch falsch platziert. Du solltest Dir wirklich Firefox installieren und Dich keinesfalls auf die Darstellung im Opera verlassen - diese orientiert sich leider gern mal eher an IE-Bugs als am Standard.
und solltest nicht für den IE-quirks-mode schreiben.
??? Bitte was???
Sorry, wie ich sehe, verwendest Du einen standardkonformen Doctype. Das Ergebnis im Firefox im Gegensatz zum IE und Opera ließ mich anderes vermuten.
freundliche Grüße
Ingo-
Hallo Ingo,
Was die Boxausdehnung betrifft: Ja. Die Navigation ist noch falsch platziert. Du solltest Dir wirklich Firefox installieren und Dich keinesfalls auf die Darstellung im Opera verlassen - diese orientiert sich leider gern mal eher an IE-Bugs als am Standard.
Das Problem mit der Navi ist mir gar nicht aufgefallen :-( Ich hab den FF deswegen nicht drauf, weil mein armer, alter Win98-Laptop sowieso immer leicht überladen ist. Und meist ist Opera ganz anständig, was die Anzeige angeht, solange man im Standards-Mode ist.
Dabei hatte ich die Breite der Navi doch extra in em angegeben, rate mal, woher ich das habe... ;-) Und da es in Opera gut aussah, dachte ich, das sind wohl genug ems für die Navi. Aber da werde ich mich wohl noch mal dran machen...
Danke schon mal soweit!
Liebe Grüße
Fredo-
Hi,
Dabei hatte ich die Breite der Navi doch extra in em angegeben, rate mal, woher ich das habe... ;-) Und da es in Opera gut aussah, dachte ich, das sind wohl genug ems für die Navi. Aber da werde ich mich wohl noch mal dran machen...
tja, aber leider gibst Du die Abstände unpassend und dazu noch in px an. Im Firefox würde
#boxinhalt { padding-left: 2em; }
#inhalt { margin-left: 13em; }
passen. Wobei ich nicht gerade padding hierfür verwenden würde.freundliche Grüße
Ingo-
Hallo Ingo,
tja, aber leider gibst Du die Abstände unpassend und dazu noch in px an. Im Firefox würde
#boxinhalt { padding-left: 2em; }
#inhalt { margin-left: 13em; }
passen. Wobei ich nicht gerade padding hierfür verwenden würde.Den margin von #inhalt hatte ich in em, und zwar den selben Wert, den die Navi als width hatte. Dass das in FF anders aussieht als in Opera verstehe ich nicht ganz. Ich habe den Wert jetzt mal auf die von Dir empfohlenen 13em gesetzt und hoffe, dass es dann im FF besser aussieht. In Opera ist jetzt aber ziemlich viel Platz bis zum Inhalt - Was für mich darauf hindeutet, dass Opera vorher die Navi nicht eigenmächtig ausgedehnt hat. Ich verstehe nicht ganz, wieso sich die Interpretation von em da so unterscheidet.
Bei einer Sache kann ich Dir nicht folgen: Warum sollen die Angaben zum padding des #boxinhalt nicht dazu passen? Dass sie in px sind, hat seine Berechtigung darin, dass sie sich an der Hintergrundgrafik orientieren, und die ändert sich nunmal nicht mit der Schriftgröße. Und meines Wissens ist es doch möglich, für eine Angabe em zu verwenden, und für eine andere px, oder?
Naja, ich werde an dem Layout sowieso noch ein paar Dinge machen, und am Ende noch einmal alles ausgiebig testen.
Liebe Grüße
Fredo-
Hi,
In Opera ist jetzt aber ziemlich viel Platz bis zum Inhalt - Was für mich darauf hindeutet, dass Opera vorher die Navi nicht eigenmächtig ausgedehnt hat. Ich verstehe nicht ganz, wieso sich die Interpretation von em da so unterscheidet.
Das muß nichts mit em zu tun haben - eher mit Browserbugs (des IE, die der Opera wie gesagt teilweise übernimmt).
Bei einer Sache kann ich Dir nicht folgen: Warum sollen die Angaben zum padding des #boxinhalt nicht dazu passen? Dass sie in px sind, hat seine Berechtigung darin, dass sie sich an der Hintergrundgrafik orientieren, und die ändert sich nunmal nicht mit der Schriftgröße. Und meines Wissens ist es doch möglich, für eine Angabe em zu verwenden, und für eine andere px, oder?
Das schon - nur kann es dann schwierig sein, einen passenden Abstand anzugeben - etwas wie 10em+20px ist ja nicht möglich. In diesem Fall mußt Du dann halt etwas Spielraum einkalkulieren.
freundliche Grüße
Ingo
-
-
-
-
-
-