wrapper in wrapper

A

akali

Mitglied
Hi Community,

ich habe ein kleines aber nerviges Problem:

ich möchte einen "wrapper" in einem "wrapper" via div machen.
der sinn ist es, dass der innere schmaler ist als der äußere und ich dadurch einen andersfarbigen rand um den inneren wrapper legen kann.

mein code

Code: 
#outerwrapper {
background-color: #FFFFFF;
width: 75%;
margin: auto;
min-height: 100%;
height:auto !important;
height:100%;
overflow: hidden !important;
}

#innerwrapper {
background-color: #000000;
width: 70%;
margin: auto;
min-height: 100%;
height:auto !important;
height:100%;
overflow: hidden !important;
}


Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <title>website</title>
  <link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
	<div id="outerwrapper">
		
		
				<div id="innerwrapper">
	</div>
		
		
	</div>

	
</body>

</html>

wieso funktioniert dass nicht so wie ich es mir dneke ? ^^


cheers akali
 
Du gibst Höhe und Breite jeweils prozentual an. Diese Werte haben aber keinen Bezug, da die umliegenden Elemente body und html keine Höhe und Breite zugewiesen bekommen haben. Die Breite sollte bei Blockelementen wie html und body ohnehin schon 100% sein. Ergänze mal

Code: 
html, body { height: 100%; }

Dann sollten deine beiden <div>'s auch den ganzen Viewport ausfüllen.
 
oh, tut mir leid habe das html und body css vergessen zu kopieren...

das hatte ich schon mit den 100% im body...
nun geht es so aber auch nicht!

nun die komplette css:

Code: 
html,body
{
	background: #cdcdcd;
	margin: 0;
	padding: 0;
	height: 100%;
}

#outerwrapper {
background-color: #FFFFFF;
width: 75%;
margin: auto;
min-height: 100%;
height:auto !important;
height:100%;
overflow: hidden !important;
}

#innerwrapper {
background-color: #000000;
width: 70%;
margin: auto;
min-height: 100%;
height:auto !important;
height:100%;
overflow: hidden !important;
}
 
Ah, dein Problem ist glaube ich ein ganz anderes.

Setz mal #outerwrapper auf "height: 100%;". Dann vererbt sich die Höhe auch an #innerwrapper. Es nimmt dann 100% der Höhe ein.

Jetzt musst Du "nur" noch oben und unten den Abstand des #innerwrapper setzen. Das ginge z.B. über prozentuale Angaben für die Außenabstände von #innerwrapper für oben und unten.
 
hmm, es funktioniert immer noch nicht !
ich habe es jetzt so gemacht :

Code: 
html,body
{
	background: #cdcdcd;
	margin: 0;
	padding: 0;
	height: 100%;
}

#outerwrapper {
background-color: #FFFFFF;
width: 75%;
margin: auto;
min-height: 100%;
height:auto !important;
height:100%;
overflow: hidden !important;
}

#innerwrapper {
background-color: #000000;
margin: 0 5%;
overflow: hidden !important;
}

könntest du mir das css für den innerwrapper geben ?


edit:
es soll am ende genau so hoch sein wie der outerwrapper aber ein bisschen schmaler , das habe ich jetzt mit margin 0 5% versucht zu realisieren

edit2:
wenn ich beim #innerwrapper die height auf z.b. 100px setze dann wird es angezeigt! aber bei % nicht...
 
Zuletzt bearbeitet:
also,

ich wäre dir sehr dankbar wenn du mir die css des innerwrapper komplett postest.
Ich weiß nicht ob du was durcheinander gebracht hast oder ich komplett dumm bin :-D


durch margin: 5% auto; wird doch der abstand von oben und unten im 5% verändert.
ich möchte ja, dass es links und rechts jeweils 5% schmaler ist. und oben und unten über 100% geht sprich genau so hoch wie outerwrapper.

ich habe nun in innerwrapper mal ein &nbsp eingetragen und nun bekomme ich eine zeile angezeigt, wo es von den außenabständen her passt, nur hat es noch keine 100% höhe******
Ich wäre dir wirklich SEHR dankbar wenn du einfach das css vom innerwrapper posten könntest...

cheers
 
Bei deinem Link musste ich mit Firebug nur #outerwrapper von

Code: 
min-height: 100%;

auf

Code: 
height: 100%;

ändern, wie oben schon geschrieben.

Den Außenabstand von #innerwrapper dann noch anzupassen, so dass Ränder entstehen ist jedoch dann nicht mehr wirklich möglich. Wenn Du statt dessen in #outerwrapper noch

Code: 
padding: 2% 0;

ergänzt, sollte es passen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück