Es ist mir fast peinlich, aber: CSS Problem

BiBaButzemann · 28.04.2008

Joa, schreibe seit fast 1 Jahr nur noch ActionScript und bin total raus aus css / html Zeugs.

also folgendes bebildertes Problem:

ich hab nen fullsize workaround (also die Seite bekommt Browserbreite und passt sich dran an). Links das blaue ist n Menü und hat ne feste Breite.

Der graue Content soll nur den Rest einnehmen. Darin sind dann Elemente die entweder ne fixed Breite bekommen (grün), wobei dann daneben ein Element stehen kann, welches dann den Rest einnehmen soll (rot). Leider nimmt jetzt das content div irgendwie nur den Platz ein, den es auch braucht - ist also schmaler als es sein müsste.

Gebe ich dem Content nun 100% width, "klappt er um", schaut dann ca so aus:

Wenn ich es mitm roten Kasten mache, passiert ca das selbe.

Ich bin kurz davor, den shit zu tablen. Also irgendwelche Idee zufällig am Start? :[

Das Problem ist halt auch, dass der Content links ans Menu rangefloatet kommt. Dadurch scheinen die divs die eigenschaft zu verlieren, sich breit zu machen.

Edit: und wenn ich dem content kein float verpasse, sondern nur dem Mainmenu gibts nen ganz prima effekt - die elemente schieben sich hinter das Menü. Aber immerhin einheitlich in IE und FF - lässt sich vielleicht was draus machen.

Edit2: Hm ja so gehts halbwegs.

Edit3: Ne, IE bekommts nicht geschissen...

Also Lösungsvorschläge sind iommer noch willkommen

Wesen · 28.04.2008

kannst du nicht den blauen kasten auch in den grauen kasten packen um das problem mit dem "umklappen" zu verhindern und dann die positionen etc. so anpassen dass es aussieht wie in bild 1 ?

cart · 29.04.2008

Original geschrieben von BiBaButzemann
Edit: und wenn ich dem content kein float verpasse, sondern nur dem Mainmenu gibts nen ganz prima effekt - die elemente schieben sich hinter das Menü. Aber immerhin einheitlich in IE und FF - lässt sich vielleicht was draus machen.

Mach das und schieb die Elemente um die Breite des Menüs nach rechts (padding-left: $BREITEpx

?

Devotika · 29.04.2008

Oh man, das erinnert mich an alte Zeiten, wo ich ein bisschen Seiten erstellt habe.

Versteht eigentlich irgendjemand die Logik, die hinter dem Interpretieren des Codes steht? :ugly:

RRA^StArFiRe · 29.04.2008

poste doch ma deine css layer code-schnipsel

BiBaButzemann · 29.04.2008

Code:

body
{
	padding: 0;
	margin: 0;
	font: normal 12px Arial, Helvetica, sans-serif;
	color: #[DEFCOLOR];
	background: #ffffbe;
}

#pagehead
{
	background: #ffffff url("[STATIC]/common/curve-bkd.png") no-repeat;
	background-position: 254px 0;
	height: 111px;
}

#headouter
{
	height: 86px;
	background: url("[STATIC]/common/head_tile-bkd.png") repeat-x;
}

#headinner
{
	height: 86px;
	background: url("[STATIC]/common/head_left-bkd.png") no-repeat;
}

#footerouter
{
	height: 36px;
	background: url("[STATIC]/common/foot_tile-bkd.png") repeat-x;
}

#footerinner
{
	height: 36px;
	background: url("[STATIC]/common/foot_left-bkd.png") no-repeat;
}

#mainframe
{
	background: #f0f0f0;
}

#mainmenu
{
	width: 191px;
	background: url("[STATIC]/common/mainmenu_tile-bkd.png") repeat-y;
	float: left;
}

#content
{
	padding: 5px 10px 0 195px;
}

div.clear
{
	clear: both !important;
	height: 0 !important;
	overflow: hidden !important;
}


<body>

<div id="pagehead">
//Zeug überhalb des Headers
</div>

<!-- Start Head  -->
<div id="headouter">
	<div id="headinner">
	//Headerinhalte
	</div>
</div>
<!-- End Head -->


<!-- Start Mainframe  -->
<div id="mainframe">


<!-- Start Mainmenu  -->
<div id="mainmenu">
//Links
</div>
<!-- Ende Mainmenu  -->


<!-- Start Content -->
<div id="content">
//Hier ist nun der Content, wo die Boxes reinkommen
</div>
<!-- Ende Content -->

	<div class="clear"></div>
</div>
<!-- Ende Mainframe  -->

<!-- Start Footer  -->	
<div id="footerouter">
	<div id="footerinner">
	//Footerinhalte
	</div>
</div>
<!-- Ende Footer  -->	

</body>

Das ist jetzt die Variante, bei der der Content nicht gefloatet wird und nen dickes Padding bekommt (wie cart auch schon beschrieb).
Problem ist nun noch: die Inhalte innerhalb des Contents, wenn ich da quasi das Selbe mache, packt es der IE nicht (egal wie hoch ich das padding setze, ich bekomme das rechte div nicht von links raus, bzw er buggt da allgemein ziemlich rum).

Edit: Habs jetzt so fast:

Code:

<div style="float: left; width: 300px; background: #ff0000;">//Linke Box</div>

<div style="width: 10px; height: 100px; background: #345354; float: left;"></div>

<div style="background: #345354; padding: 0 0 0 310px">//Rechte Box</div>

Problem bei der Lösung ist nun: das mittlere Div braucht ne height, die größer ist, als die Höhe der linken box. Und leider sind die Inhalte dynamisch, als das ich da jetzt nen fixen Wert angeben kann (es sei denn ich mache ihn so hoch, dass ich irgendwo mit auf nummer sicher gehe - ist aber extrem unschön). Naja, mühsam nähred sich das Eichhörnchen :[

Nochn Edit: Rechte box bekommt jetzt die height vom mittleren automatisch verpasst - gnarf :[

ViperDK · 29.04.2008

Geht halt doch nix ueber die guten alten Tables

BiBaButzemann · 29.04.2008

Habs

Boxes:

<div style="width: 300px; float: left;">Linke Box</div>

<div style="position: relative; margin-left: 310px">Rechte Box</div> (10px weiter rechts plaziert)

I still got it, baby - browserscheisse 0 - biba 1

Hm klappt aber nur, wenn rechte Spalte höher als die linke ist.

DelphiZ · 29.04.2008

min-height ?^^

cart · 29.04.2008

Kannst du dir das hiermit zusammenbasteln: http://www.stichpunkt.de/css/5-box.html ?

BiBaButzemann · 29.04.2008

ich habs jetzt

Code:

#content
{
	padding: 5px 10px 0 10px;
	overflow: hidden;
}

<div style="width: 290px; float: left;">linke box</div>
<div style="margin-left: 300px;">rechte box</div>

aber danke

Es ist mir fast peinlich, aber: CSS Problem

Erweitert

BiBaButzemann

Wesen

cart

Technik/Software Forum

Devotika

Guest

RRA^StArFiRe

Guest

BiBaButzemann

ViperDK

BiBaButzemann

DelphiZ

cart

Technik/Software Forum

BiBaButzemann