Zur Navigation

Runde Ecken mit Div und Bildern

1 Sam (Gast)

Hallo,
warum funktioniert mein runde Ecken Layout bloß nicht richtig?
Also wenn man das Explorer-Fenster resized, dann bricht das grüne Text-Div manchmal aus dem Rahmen heraus und zerschiesst des Layout.
Und im Firefox reisst das Grüne Div manchmal sogar noch die Ecke mit.

Hier ist das Übel: [url=http://jugend-pivitsheide.de/rund/index2.html]

20.03.2006 13:45

2 Jörg Kruse

Hallo Sam,

da für den Div #content keine Breite angegeben ist, berechnen die Browserdies wohl aus der Gesamtbreite von #center minus der Breite von #center_left. Da #center_right im Quelltext erst noch folgt, wird dessen Breite noch nicht abgezogen, so dass es zu eng wird für #content. Du könntest aber diese beiden Divs umstellen:

<div id="center">
		<div id="center_left"></div>
                 <div id="center_right"></div>
                 <div id="content">
		Bla bla Blindtext. Echt super. Hallo, warum geht das nicht? Und in Firefox siehts ganz schlimm aus. Das kann doch nicht sein. Wofür ist float und clear überhaupt gut? Bla bla Blindtext. Echt super. Hallo, warum geht das nicht? Und in Firefox siehts ganz schlimm aus. Das kann doch nicht sein. Wofür ist float und clear überhaupt gut?
                 </div>

	</div>

... und für #content das float als Eigenschaft streichen:

#content{

background:#00FF99;
}

Dann sprengt der Text nicht mehr den äußeren Rahmen

20.03.2006 16:44 | geändert: 20.03.2006 16:45

4 Sam (Gast)

OK, danke Jörg, funktioniert.
Ein Problem hätte ich nun nur noch mit der variablen Höhe. Wenn ich keine Fixhöhe angebe, sondern "auto" dann wird der Rand rechts und links nicht bis unten gezeichnet. Schade. Gibt es dafür auch noch eine Lösung?

Danke Chilla für das posten der Lösung, allerdings finde ich diese nicht gut, da die Skalierung eingeschränkt ist.

23.03.2006 13:25

5 Jörg Kruse

Du meinst, dass der Container bis nach unten an das Fenster reicht? Bei Opera und Firefox könnte man #main absolut positionieren und mit entsprechend niedrigen Werten für top und bottom von oben nach unten aufspannen - leider scheint dies nicht im Internet Explorer zu funktionieren :/

Ich werd aber auch nochmal schauen, ob ich irgendwo noch eine Lösung finde - und vielleicht fällt jemand anderem auch noch etwas ein

23.03.2006 14:42

6 Sam (Gast)

Ok, das wär cool.
Hier habe ich noch eine Lösung, allerdings würde ich deine Version bevorzugen (nur die vertikale Flexibilität fehlt noch), da sie mir verständlicher ist...

Also, hier die andere Lösung:

http://jugend-pivitsheide.de/rund/index4.html

Prolem hierbei ist nur, das der Rahmen links im IE nicht angezeigt wird.

23.03.2006 15:53

7 Jörg Kruse

Ich habe hier noch eine Lösung gefunden für eine Höhe, die sich auch im strictem XHTML an die Höhe des Browser-Fensters anpasst:

CSS2 100% height

Demnach könntest du den Container folgendermaßen bis an das untere Ende ausdehnen:

html,body,#main {
height:100%;
}

24.03.2006 12:17

8 Sam (Gast)

Hmm, bei mir ist das mehr als 100%.
Die Seite ist größer als das Browserfenster und ich bekomme einen Scrollie...

24.03.2006 15:33

9 Jörg Kruse

Ja, stimmt, und beim Verkleinern der einheitlichen Höhe von 100% verhalten sich die Browser auch noch unterschiedlich :/

Mit dieser Kombination von Höhenangaben hat das untere Ende des Containers in meinen IE, Firefox und Opera in etwa den gleichen Abstand zum unteren Fensterrand:

html {
height:100%;
}

body{
height:85%;
background:#F4F2F2;
}

#main{
width:100%;
height:100%;
}

24.03.2006 15:47

10 Sam (Gast)

Habe mich vorerst für die andere Lösung entschieden mit statischen Größenangaben. Dort habe ich allerdings zwei Probleme:

1. Wie soll ich die Buttons darstellen?
(nutze momentan eine größe Grafik mit drei Buttonzuständen, die sich bei mouseover und press weiterschiebt. Wenn ich die Buttons per display:inline-block positioniere, ist es genau richitg, allerdings geht das nicht im FF, da der die Grafiken nicht komplett anzeigt.

2. Der linke Rand des Main- Div´s wird im IE nicht angezeigt.

Soll ich dafür ein neues Thema eröffnen oder ist es ok, das hier rein zuschreiben?

27.03.2006 10:50