float & clear

Hier können allgemeine Fragen zu HTML und CSS gestellt und diskutiert werden.
Antworten
Benutzeravatar
baluo
ConPresso-Experte
Beiträge: 607
Registriert: 14.11.2005 12:17
Hat sich bedankt: 216 Mal
Danksagung erhalten: 11 Mal

float & clear

Beitrag von baluo »

liebe leute,

auf einer website einer evangelischen kirchengemeinde in karlsruhe haben wir mit float und clear zu kaempfen:
http://www.kirchennetz.info/luther-ka/k ... sik_leiter.

kurioserweise stellen ie6 und opera9 die seite (vermutlich nicht "richtig", aber) so dar, wie wir uns das wuenschen, der ff2 leider nicht.

bei der dieser seite handelt es sich um die "index"-seite der rubrik. der erste "graue kasten" stellt dabei den "teaser"-text eines laengeren artikels (auf der folgeseite) dar, die restlichen "grauen boxen" darunter sind alle ein "teaser"-text des zweiten artikels.

die css-zuweisungen von aussen nach innen, innerhalb des inhaltefeldes:

Code: Alles auswählen

** inhaltefeld (von den templates gesteuert)**
#textfeld{
border-left: solid 1px black;
border-bottom: solid 1px black;
border-right: solid 1px black;
padding:10px; margin:0 0 0 189px;
}

** "textbereich" **
.textbereich1{
font-size: 0.9em;
margin: 0; padding: 0 5px 0 0;
}

** "graue box" **
.textrahmen, .box_grau{
border: 3px #F2F2F2 solid;
padding: 3px; margin:0 0 5px 0;
line-height: normal;
font-size:0.9em;
float:left; width:98.5%; /*um floatende grafiken im textrahmen zu
halten*/
}

** und der "weiter"-link **
.weiter{
font-size:0.75em;
text-align: right;
margin: -10px 0 15px 0;
}
das template (beinhaltet noch eine marginalspalte):

Code: Alles auswählen

<!-- ifNotSet: marginalie-teaser; -->
<div class="textbereich1">
<!-- ifSet: Subtitle; --><h2 style="height:22px;"><!-- text: Subtitle; --> </h2><!-- /ifSet -->
<!-- ifSet: Teaser; --><!-- html: Teaser; --><!-- /ifSet --> 
<!-- ifSet: More-link; --><div class="weiter">[ <!-- url: More-link; starttag; more; -->
<!-- url: More-link; text; -->&raquo;</a> ]</div><!-- /ifSet -->
</div> 
<!-- /ifNotSet -->




<!-- ifSet: marginalie-teaser; -->
<div class="textbereich2">
<!-- ifSet: Subtitle; --><h2 style="height:22px;"><!-- text: Subtitle; --> </h2><!-- /ifSet -->
<!-- ifSet: Teaser; --><!-- html: Teaser; --><!-- /ifSet -->
<!-- ifSet: More-link; --><div class="weiter">[ <!-- url: More-link; starttag; more; -->
<!-- url: More-link; text; -->&raquo;</a> ]</div><!-- /ifSet -->
</div> 
<!-- /ifSet --> 


<!-- ifSet: marginalie-teaser; -->
<div class="marginalie-re"><!-- HTML: marginalie-teaser; --></div>
<div class="clear-re"></div>
<!-- /ifSet --> 




<!-- ifNotSet: More-link; -->
<!-- ifSet: Subtitle-article; -->
<div class="sub-links">
<!-- URL: More-link;starttag; more; -->&raquo; <!-- text: Subtitle-article; --></a>
</div>
<!-- /ifSet --> 
<!-- /ifNotSet -->


"mein" ff2 setzt den "weiter"-link kurioserweise ueber die textbox und die ueberschrift des folgeartikels *in* die folgende textbox.

nach einer ganzen reihe von (fast erfolglosen) versuchen hoffe ich auf einen hilfreichen tipp von euch experten.

danke, gerhard
Benutzeravatar
Matthias V
Modul-Entwickler
Beiträge: 1251
Registriert: 01.01.1970 01:00
Wohnort: Sondershausen
Hat sich bedankt: 54 Mal
Danksagung erhalten: 147 Mal
Kontaktdaten:

Beitrag von Matthias V »

Hallo Gerhard,

ich habs mir jetzt nicht genau angesehen, aber ein

Code: Alles auswählen

<div style="clear: both;"></div>
an der Richtigen Stelle wirkt oft Wunder.

Aber warum musst du denn alles mit float machen. Man kann doch soche Sachen einfach hintereinander wegschreiben, ohne da irgendwas zu Floaten.
:?: :?:

Gruß Matthias V
mod_Guestbook 4.1.0

Features:
- Einträge als ConPresso-Artikel
- benutzt Templates, Rubriken, ...
- Captcha
- BB-Code + Smilies + Zitieren
- Badwords
- Anonymisierung
Benutzeravatar
baluo
ConPresso-Experte
Beiträge: 607
Registriert: 14.11.2005 12:17
Hat sich bedankt: 216 Mal
Danksagung erhalten: 11 Mal

Beitrag von baluo »

hoi matthias,
Matthias V hat geschrieben:aber ein

Code: Alles auswählen

<div style="clear: both;"></div>
an der Richtigen Stelle wirkt oft Wunder.
haben wir schon versucht bzw. machen wir auch, aber da habe ich dann das naechste problem: bei der derzeitigen konstruktion setzt sich das clear:both *unter* die navigation links und laesst damit nach oben "luft"
Aber warum musst du denn alles mit float machen. Man kann doch soche Sachen einfach hintereinander wegschreiben, ohne da irgendwas zu Floaten.
aehhh ?? ich koennte natuerlich mit positionierungen arbeiten, aber das erschien mir float und relative breiten ueberzeugender.

es gibt vielleicht eine loesung, die ich mal vor einiger zeit gelesen und hier angewandt habe: http://www.dw-dith.de/cpo/wirueberuns/i ... c=wir_team
im prinzip das selbe spiel, nur das der inhalte-container hier selbst floatet (nach rechts). die regel scheint zu lauten, dass ein float-container eigene float-elemente sauber platziert und auch einschliesst. das muessen wir nun nochmals in einer operation bei der lutherwebsite testen.


uebrigens noch eine css-frage:
hast du eine idee / workaround fuer eine min-width beim ie ? diese dw-dith-website habe ich so fixiert, um ein umbrechen der div-container zu vermeiden, aber der ie kuemmert sich nicht ...

Code: Alles auswählen

#rahmen{
 width:100%; min-width:875px;
}
ciao, gerhard (geht jetzt zu bett in downunder)
Benutzeravatar
Matthias V
Modul-Entwickler
Beiträge: 1251
Registriert: 01.01.1970 01:00
Wohnort: Sondershausen
Hat sich bedankt: 54 Mal
Danksagung erhalten: 147 Mal
Kontaktdaten:

Beitrag von Matthias V »

ne, ich habe keine Idee, wie man min-width beim IE erzeugen kann.

Hast du das hier: http://community.conpresso.de/viewtopic.php?t=3203
schon gelesen, da habe ich heute gerade eine neue CSS-Layoutseite hinzugefügt: http://www.mitchbryson.com/css-templates/

Kannst ja mal schauen, wie du das umsetzten möchtest.


Klassisch macht man es so, dass man den div#content mit einem Margin vom Rand fern hällt und dann absolut, oder fixed die Navigation drüber setzt. So mache ich das jedenfalls. Mit float könnte man die Navi auch drüber setzen. Aber ein clear: both; dürfe sich nicht auswirken, wenn der margin groß genug ist. D.h. der Kontent dürfte nicht unter die Navi rutschen.

Gruß Matthias V
mod_Guestbook 4.1.0

Features:
- Einträge als ConPresso-Artikel
- benutzt Templates, Rubriken, ...
- Captcha
- BB-Code + Smilies + Zitieren
- Badwords
- Anonymisierung
Tor3
ConPresso-User
Beiträge: 82
Registriert: 11.12.2006 13:02
Danksagung erhalten: 5 Mal

Beitrag von Tor3 »

max-width geht zumindest so

Code: Alles auswählen

max-width:500px;
width:expression((body.offsetWidth>800)?'500px':'auto');
wobei die 800 je nach restlichem Seitenaufbau anzupassen ist...
Benutzeravatar
Matthias V
Modul-Entwickler
Beiträge: 1251
Registriert: 01.01.1970 01:00
Wohnort: Sondershausen
Hat sich bedankt: 54 Mal
Danksagung erhalten: 147 Mal
Kontaktdaten:

Beitrag von Matthias V »

Hallo Tor3,

das kannte ich nocht nicht.

Die 800 sind aber eine weite Schwelle. ich würde es auch auf 500 setzen.

Dann geht min-widht z.B. so:

Code: Alles auswählen

min-width:500px;
width:expression((body.offsetWidth<500)?'500px':'auto');
Nochmal zur Syntax dieser Abfrage: Dies eintspricht einer einfachen if- then-else Struktur (am Bsp von PHP):

Code: Alles auswählen

if(body.offsetWidth<500)
    echo '500px';
else
    echo 'auto';
Gruß Matthias V
mod_Guestbook 4.1.0

Features:
- Einträge als ConPresso-Artikel
- benutzt Templates, Rubriken, ...
- Captcha
- BB-Code + Smilies + Zitieren
- Badwords
- Anonymisierung
Benutzeravatar
balu
ConPresso-Entwickler
Beiträge: 1748
Registriert: 01.01.1970 01:00
Hat sich bedankt: 81 Mal
Danksagung erhalten: 133 Mal

Beitrag von balu »

Matthias V hat geschrieben:Klassisch macht man es so, dass man den div#content mit einem Margin vom Rand fern hällt und dann absolut, oder fixed die Navigation drüber setzt. So mache ich das jedenfalls. Mit float könnte man die Navi auch drüber setzen. Aber ein clear: both; dürfe sich nicht auswirken, wenn der margin groß genug ist. D.h. der Kontent dürfte nicht unter die Navi rutschen.
absolut, aber besonders fixed machen leider in manchen Browsern noch Probleme. Der "klassische" Weg ist daher eher ein Float neben dem Platz halten durch "margin".

Sehr schoene Erklaerung fuer Floats: http://css-technik.de/css-examples/219_9/

Ein Problem, dass bei floats immer wieder auftritt ist das, dass man eben nicht alles "clearen" will (so dass der Inhalt unter die Navi verschoben wird z.B.). In diesem Fall muss der Inhaltsbereich auch gefloated werden. - Bloede zu erklaeren, aber das hat mir schon mal geholfen.

Balu
Benutzeravatar
Matthias V
Modul-Entwickler
Beiträge: 1251
Registriert: 01.01.1970 01:00
Wohnort: Sondershausen
Hat sich bedankt: 54 Mal
Danksagung erhalten: 147 Mal
Kontaktdaten:

Beitrag von Matthias V »

balu hat geschrieben:absolut, aber besonders fixed machen leider in manchen Browsern noch Probleme. Der "klassische" Weg ist daher eher ein Float neben dem Platz halten durch "margin".
Aus diesem Grund benutze ich immer diesen Kunstgriff:

Code: Alles auswählen

position: fixed !important;
position: absolute;
top: 60px;
left: 0px;
Alle Browser, die fixed; verstehen, die verstehen auch das important (dadurch lässt sich dieser Wert nur noch mit erneutem important überschreiben).
Alle die fixed nicht verstehen, verstehen aber absolute. Und dann überschreibt dieses absolute das vorher stehende fixed.

Und wenn ein Browser zu alt (wie z.B. Netscape 4) ist und weder fixed und absolute versteht, dann hatt der User eben einfach pech gehabt und sieht die Seite eben ohne diese Positionierung. D.h. Die Navigation steht dann über dem Content.

Ich meine aber, zu alte Browser müssen nicht unterstützt werden.
Aber die Seite muss trotzdem einen klaren aufbau haben, dass die Seite immer benutzbar ist.

Ich habe diese Positionierung auf einigen Seiten laufen und habe noch nie Klagen gehört.

Gruß Matthias V
mod_Guestbook 4.1.0

Features:
- Einträge als ConPresso-Artikel
- benutzt Templates, Rubriken, ...
- Captcha
- BB-Code + Smilies + Zitieren
- Badwords
- Anonymisierung
Benutzeravatar
baluo
ConPresso-Experte
Beiträge: 607
Registriert: 14.11.2005 12:17
Hat sich bedankt: 216 Mal
Danksagung erhalten: 11 Mal

Beitrag von baluo »

danke fuer eure hinweise, diese loesung funktioniert:

Code: Alles auswählen

 min-width:875px;
 width:expression((body.offsetWidth<1000)?'875px':'auto');
eine andere variante frueher hat immer zum einfrieren des ie6-fensters gefuehrt, diese nicht mehr.

beispiel: http://www.dw-dith.de/cpo/migration/

ich glaube, der entscheidende faktor ist, dass sich die beiden groessenangaben deutlich voneinander unterscheiden muessen -- da habe ich auf jeden fall in einem der (wenigen) internet-beitraege zu diesem thema gefunden.

danke!!
gerhard
Antworten