HTML div - Bereich anordnung

beig1 · 15. März 2012

Hallo,

ich mach gerade eine WebApp mit dem GWT, nur stehe ich vor einem kleinen Problem.

Ich mache das Menü mit 2 Bildern und 1 'Container' über div.

im <body> sieht das ganze so aus:

HTML:

<div class="background" align="center">
<div class="transp" align="center">		
<div id="container" align="center">
</div></div></div>

Dann wird aber irgendwie das Menü verschoben. (im CSS stehen alle auf margin-left -right: auto)

Mach ich da irgendwas falsch?
Füge ich den container am Anfang der Seite ein wird er zentriert.

Vielleicht kann mir ja jemand weiterhelfen.

Danke

Freezedevil · 15. März 2012

align="center" zentriert nur horizontal nicht vertikal. Du müsstest dem div transp eine line-height spendieren die groß ist wie das ganze gebilde und dann noch ein vertical-align: center; hinterherschieben. Das müsste es erschlagen.
btw: Wenn du schon CSS verwendest, dann mach doch den Style auch komplett dort und fang nicht an das mit dem html zu mischen. Das ist dann nur schwer zu durchschauen und bringt keine Punkte.

Daaron · 15. März 2012

erstmal kannst du die align="center" rausfeuern, das align-Attribut hat bestenfalls in Tabellen was zu suchen. Außerdem könntest du, statt 2 geschachtelte Divs für 2 überlagernde Hintergründe zu nutzen, einfach css3-basierte multiple backgrounds nutzen (und User mit IE<=8 gnadenlos abstrafen).

Effektiv bräuchten wir hier aber mal etwas mehr Rahmen-Informationen, insbesondere die gesamten CSS-Deklarationen der betreffenden Elemente. Das, was ich hier so sehe, sieht nach ner falsch verwendeten Margin aus.

beig1 · 15. März 2012

EDIT: mhh, entweder ich hatte es falsch ausm kopf ... aber mit padding im background verschiebt sich das ganze nach unten, sollte also passen.

wollt das ganze nun zuhause nachbauen

soweit passt eig. alles, steh nur vor dem problem
dass margin-top jetzt das ganze gebilde mit nach unten verschiebt anstatt nur das eine bzw. die 2 divs

Code:

<div class="background">	
	<div class="transp">	
		<div id="container">
			</div>
		</div>
	</div>

Code:

div.container {
	margin-left: auto;
	margin-right: auto;
	width: 800px;
}

.center {
 margin: 0px auto;
    width: 880px;
}

div.transp {

	height: 56px;
	width: 800px;
	margin-left: auto;
	margin-right: auto;
		margin-top:100px;
	background-image: url(menu_transp.png);
	background-repeat: no-repeat;
}

div.background {
	height: 440px;
	width: 880px;
	border: 2px;
	margin-left: auto;
	margin-right: auto;
	background-image: url(main_bg.jpg);
	background-repeat: no-repeat;
}

wird so im chrome angezeigt wenn man über das element fährt

Daaron · 16. März 2012

Ja, das ist so n recht eigenartiges aber übliches Verhalten von margin-top. Gib nicht .trans ein margin-top, sondern .background ein padding-top. Sollte gehen.
und denk nochmal über multiple backgrounds nach. macht das leben leichter

Suche

HTML div - Bereich anordnung

beig1

Cadet 4th Year

Freezedevil

Lieutenant

Daaron

Fleet Admiral

beig1

Cadet 4th Year

Daaron

Fleet Admiral

Ähnliche Themen