div über mehrere divs

Status
Nicht offen für weitere Antworten.
Y

Yeremy

Grünschnabel
Folgendes Problem...

Ich habe ein zentriertes Design, dieses besteht aus 3 hintergründen...ein fester background oben...ein in der Höhe variabler in der Mitte und ein fester unten.
Darüber sollen 2 Content Boxen liegen...die eine davon hat eine feste Höhe...die andere passt sich in der Höhe dem content an.
Diese Box soll über allen 3 backgrounds liegen und der mittlere background soll sich in der Höhe an der content Box anpassen.

Das „beste“ Ergebnis habe ich damit hinbekommen:

HTML:

Code: 
<body>
<center>
<div id="rahmen">
            <div id="bg-oben"></div>
            <div id="bg-mitte">
                        <div id="navi">
                                    <? include("nav.inc.php"); ?>
                        </div>
                        <div id="box">
                                    <div id="box-oben"><img src="img-hit/box-oben.gif"></div>
                                    <div id="box-mitte">
                                                <div id="content">
                                                            <? include("content.inc.php"); ?>
                                                </div>
                                    </div>
                                    <div id="box-unten"><img src="img-hit/box-unten.gif"></div>
                         </div>
            </div>
            <div id="bg-unten"></div>
</div>
</center>
</body>

CSS:
HTML: 
#rahmen { width: 730px; : 80px 0 0 0; height:100%; text-align: left; }
 
#bg-oben { background: url(/img-hit/bg-oben.jpg) no-repeat; height:433px; }
 
#bg-mitte { background: #000000 url(/img-hit/bg-mitte.jpg) repeat-y; }
 
#bg-unten { background: url(/img-hit/bg-unten.jpg) no-repeat; height:466px; }
 
#navi { text-align: left; position: relative; left: 40px; top:260px; width: 184px; }
 
#box { filter:alpha(opacity=80); -moz-opacity:0.8; opacity:0.8; text-align: left;
position: relative; left: 250px; top:150px; width: 436px; }
 
#box-mitte { background: url(/img-hit/box-mitte.gif) repeat-y; }
 
#content { padding: 0 10px 10px 20px; }


Die Content Box liegt leider nur über dem oberen und mittleren background. Unter der Content Box habe ich noch 200px vom mittleren background dann kommt der untere.
Es ist also viel zu viel Abstand nach unten...Hat das einer Verstanden? :rolleyes:

Viele Grüße und vielen Dank im Voraus
Yeremy
 
Zum besseren Verständnis:

die bg-mitte Grafik ist 1px hoch und soll sich in der Höhe anpassen

bg-oben und bg-unten haben feste px angaben
 

Anhänge

  • so-soll.jpg
    so-soll.jpg
    24 KB · Aufrufe: 13
  • so-ist.jpg
    so-ist.jpg
    20,8 KB · Aufrufe: 12
hi,

ich bin mir jetzt net ganz sicher ob das funktioniert, aber du kannst den einzelen divs noch einen Z-Index zuweisen, dadurch sollten diese eigentlich nach vorne und nach hinten verschoben werden.:D Zu deinem anderen Problem. die contentbox is nicht langenug? Dann setzt du da noch ein min-width rein, dann kannste die minimal Größe festlegen, hoffe ich ich hab den Befehl richtig geschrieben hihi Hoffe das funktioniert :D
mit der Mitte die sich anpassen soll, kann ich dir leider net helfen

liebe Grüße
BadBoy227
 
z-index ist kein problem...alle divs sind auf der richtigen ebene...und die content box ist auch lang genug (passt sich dem content an) nur der background in der mitte ist zu lang...die content box sollte eigentlich noch über dem bg-unten liegen.
Aber vielen Dank für deine Antwort

Yeremy
 
hm dann mach es doch mit max und min Anweisungen, sprich du gibst der Box in der mitte max-height und der contentbox ein min-height, so gibst du dem ganzen eine mindest und maximal Höhe versuchs einfachma so, ich hatte mich vorhin nur verschrieben was height und width angeht xD
 
schon wahr, aber probieren geht über studieren ;) und einfach mal raten :D bzw. wenn ich es richtig verstanden habe, dann hast du doch ein Bild hintendran welches eine feste größe haben wird oder?
 
Zuletzt bearbeitet:
Hi,

wenn ich die Browserinterpretationen, respektive ihre Darstellungen deines Quellcodes mit dem "Soll-Zustand" in der angehängten Grafik vergleiche, müssten demnach die beiden Boxen #navi und #box im mittleren Block mittels eines negativen top-Wertes nach oben verschoben werden, um sie auf diese Weise über den Block #bg-oben zu legen - also beispielsweise:

Code: 
#navi { text-align: left; position: relative; left: 40px; top:-100px; width: 184px; }

#box { filter:alpha(opacity=80); -moz-opacity:0.8; opacity:0.8; text-align: left; position: relative; left: 250px; top:-300px; width: 436px; }
Diese Art der Positionierung hat aber zur Folge, dass der ursprünglich eingenommene Raum der beiden Elemente erhalten bleibt - sprich: der nachfolgende Block #bg-unten rückt nicht automatisch mit nach oben.

Mit den von mir hier als Beispiel gesetzten top-Werten würde sich dann zwischen dem unteren Boxenrand von #box und dem oberen Rand von #bg-unten eine Lücke von 300px ergeben. Folglich muß der untere Bereich ebenfalls nach oben verrückt werden, um den Abstand zum vorherigen Element zu schliessen, womit sich schlussendlich eine Lücke zum unteren Fensterrand ergibt, die das vertikale Scrollen der Seite zur Folge hat.

Zur besseren Veranschaulichung des Sachverhalts poste ich hier mal ein kleines Beispiel:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_Yeremy</title>

<style type="text/css">
<!--
* { margin:0; padding:0; }

#rahmen { width: 730px; margin:0 auto; height:100%; text-align: left; }

#bg-oben { background: url(/img-hit/bg-oben.jpg) no-repeat; height:433px; }

#bg-mitte { background: #000000 url(/img-hit/bg-mitte.jpg) repeat-y; }

#navi { text-align: left; position: relative; left: 40px; top:-100px; width: 184px; z-index:10; }

#box { filter:alpha(opacity=80); -moz-opacity:0.8; opacity:0.8; text-align: left; position: relative; left: 250px; top:-300px; width: 436px; z-index:10;}

#box-mitte { background: url(/img-hit/box-mitte.gif) repeat-y; }

#bg-unten { background: url(/img-hit/bg-unten.jpg) no-repeat; height:466px; position:relative; top:-380px; }

#content { padding: 0 10px 10px 20px; }
-->
</style>

</head>
<body>

<div id="rahmen">
            <div id="bg-oben">bg-oben</div>
            <div id="bg-mitte">
                        <div id="navi">
                                    <p>nav.inc.php</p>
                                    <p>nav.inc.php</p>
                                    <p>nav.inc.php</p>
                                    <p>nav.inc.php</p>
                                    <p>nav.inc.php</p>
                                    <p>nav.inc.php</p>
                                    <p>nav.inc.php</p>
                        </div>
                        <div id="box">
                                    <div id="box-oben"><img src="img-hit/box-oben.gif"></div>
                                    <div id="box-mitte">
                                                <div id="content">
                                                            <p>content.inc.php</p>
                                                            <p>content.inc.php</p>
                                                            <p>content.inc.php</p>
                                                            <p>content.inc.php</p>
                                                            <p>content.inc.php</p>
                                                            <p>content.inc.php</p>
                                                            <p>content.inc.php</p>
                                                            <p>content.inc.php</p>
                                                            <p>content.inc.php</p>
                                                            <p>content.inc.php</p>
                                                            <p>content.inc.php</p>
                                                            <p>content.inc.php</p>
                                                            <p>content.inc.php</p>
                                                            <p>content.inc.php</p>
                                                            <p>content.inc.php</p>
                                                            <p>content.inc.php</p>
                                                </div>
                                    </div>
                                    <div id="box-unten"><img src="img-hit/box-unten.gif"></div>
                         </div>
            </div>
            <div id="bg-unten">bg-unten</div>
</div>

</body>
</html>

Was hat es eigentlich mit diesem "Eigenschafts-Stummel" auf sich?

Code: 
#rahmen { width: 730px; : 80px 0 0 0; height:100%; text-align: left; }
Vermutlich soll für das Element ein oberer Außen- oder Innenabstand deklariert werden?

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück