• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Kind-"margin-top" verschiebt Eltern-"background-image"

jonas_kl

jonas_kl

Lounge-Member
Hab mich seit Ewigkeiten mal wieder mit Homepage-Erstellung beschäftigt und bin entsprechend seit einer Ewigkeit mal wieder hier gelandet. Schön, dass es jswelt noch gibt :)

Habe folgendes Problem:

Mein Layout besteht aus drei DIV-Boxen, die sich in einer Haupt-Box befinden. Erste Box ist der Kopf, zweite der Hauptteil, dritte die Fußzeile. In der mittleren Box liegen nochmals zwei Divs für Inhalt und Navigation.

Da der der Kopf recht groß ist, soll der Text (div#inhalt) nicht erst unterhalb des Kopfes, sondern schon etwas weiter oben beginnen. Ich habe das mit CSS und "margin-top: -125px;" gelöst:

HTML: 
div#body {
	width: 1152px;
	margin-left: auto ;
	margin-right: auto ;
}

div#head {
	background-image: url(bg_head.jpg);
	background-repeat: no-repeat;
	height: 533px;
}

div#main {
	background-image: url(bg_main.jpg);     <<<<<<<<<<<<<<<<<<<<<<
	background-repeat: repeat-y;
	padding-left: 100px;
}

   div#inhalt {                                 <<<<<<<<<<<<<<<<<<<<<<
	margin-top: -125px;
	width: 720px;
   }

   div#navi {
   }

div#footer {
	background-image: url(bg_footer.jpg);
	background-repeat: no-repeat;
	height: 76px;
}

An sich funktioniert das ohne Probleme, doch leider verschiebt div#inhalt jetzt auch div#main nach oben und damit passen die Hintergrundbilder nicht mehr nahtlos zusammen.

div#inhalt mit "position: absolute" loszulösen kommt nicht in Frage, weil der Text dann nicht mehr ins Fenster passt, wenn das Browser-Fenster kleiner ist.

Ich könnte auch das Hintergrundbild von div#main ans Kopf-Hintergrundbild dran hängen und div#main gar keinen Hintergrund mehr zuzuweisen, aber das hätte den Nachteil, dass das Bild dann sehr lang sein müsste, weil ja auch sehr lange Texte noch einen Hintergrund haben sollen.

Hat jemand einen Tipp für mich?

Grüße an Albu, J-C, bine und Co!

Jonas
 
Ich habe befürchtet, dass diese Frage kommen würde, denn natürlich habe ich keinen Link...

Aber ich bevor mir niemand helfen kann, lad ich's halt irgendwo hoch...

Bitte schön: home.html

(Wobei ich finde, dass das auch nicht viel hilft. Nur vom Angucken versteht man das Problem schließlich auch nicht. )

Jonas
 
Zuletzt bearbeitet:
OK - jetzt hab' ich nachvollzogen. Hab' mal ein bisschen rumgespielt und diese Lösung gefunden - im IE7 und FF3 getestet:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
div#body {
	width: 1152px;
	margin-left: auto ;
	margin-right: auto ;
}

div#head {
	background-image: url(http://www.jk-art.de/pax/bg_head.jpg);
	background-repeat: no-repeat;
	height: 533px;
}

div#main {
	background-image: url(http://www.jk-art.de/pax/bg_main.jpg);
	background-repeat: repeat-y;
	padding-left: 100px;
}

   div#inhalt {                                
	margin-top: -125px;
	width: 720px;
   }

   div#navi {
   }

div#footer {
	background-image: url(http://www.jk-art.de/pax/bg_footer.jpg);
	background-repeat: no-repeat;
	height: 76px;
}
</style>
</head>
<body>
<div id="body">
	<div id="head">h</div>
	<div id="main"> 
		<div id="inhalt">a</div>
		<div id="navi">l</div>
	</div>
	<div id="footer">o</div>
</div>
</body>
</html>

PS: Im IE verhaut's dir deine Navi.
 
dkdenz schrieb:
Es gibt das schöne Tool "Edit CSS" in der WebDevBar, da kann man "live" die CSS-Einstellungen ändern, um zu sehen, wo's klemmt.
Zum Vergrößern anklicken....

Danke für den Tipp. Zufällig habe ich mir das Addon sogar vor 5 Minuten runtergeladen, aber wie schon im ersten Post geschrieben, habe ich mich seit längerem nicht mehr mit HTML und CSS beschäftigt und entsprechend alles vergessen, was ich mal zu dem Thema wusste... Auch, dass es da eine "Edit CSS"-Funktion gab... :(

kkapsner schrieb:
OK - jetzt hab' ich nachvollzogen. Hab' mal ein bisschen rumgespielt und diese Lösung gefunden
Zum Vergrößern anklicken....

Jetzt mal eine saublöde Frage: Was ist denn da anders? Ein einfaches   ? Manchmal ist Programmierung echt zu pingelig...

Vielen Dank!

p.p.s Der IE ist das letzte und kommt entsprechend auch zuletzt dran :D Nein, ich habe die Navi eigentlich auch noch gar nicht angefangen, sondern einfach mal einen Platzhalter gesetzt... Aber jetzt müsste es passen, stimmts?
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben