eine Box über eine andere Box platzieren

piepser · 3. März 2012

Hallo,
ich habe einen Gesamtbereich von 80% und margin: 50px, auto definiert. In diesem Gesamtbereich gibt es 2 Kopfbereiche. Einen linken mit 80% und einen rechten mit 20%.
Darunter folgt dann die navi auf der linken Seite, der Inhaltsbereich auf der rechten Seite und der Fussbereich ganz unten an der Seite.
Jetzt würde ich gerne im linken Kopfbereich eine weitere Box gestalten. Sie sollte ca. 20px nach oben aus dem Kopfbereich rausschauen und so gross sein, dass evtl. ein Bild hineinpasst. Der Abstand vom Gesamtbereich nach oben wäre dann - für die Grösse der Box - nur noch 30px. Im Prinzip würde es so aussehen, als wenn eine weitere Box über den Kopfbereich plaziert wurde.
Ich hoffe das war verständlich. Ist gar nicht so einfach, dass hier so zu schreiben. :oops:
Mein bisheriger Code:

Code

#gesamt {
    position: relative;
	width: 80%;
	min-width: 600px;
	min-height: 95%;
	margin: 50px auto;
	background-color: #D4D4D4;
	color: #333;
	border: 4px solid #000;
	line-height: 2em;
}




#kopf_links {
	background-color: blue;
	float: left;
	padding: 10px 0px;
	width: 80%;
	height: 180px;
}




#kopf_rechts {
	background-color: yellow;
	float: left;
	padding: 10px 0;
	width: 20%;
	height: 180px;
	margin-right: -1px;
}




<div id="gesamt">




    <div id="kopf_links">
        hier kommt der linke kopf
    </div>




    <div id="kopf_rechts">
        hier kommt der rechte kopf
    </div>




    <div id="links">
        hier kommt die navi
    </div>




    <div id="inhalt">
        hier kommt der inhalt
    </div>




    <div id="fuss">
        hier kommt der fuss
    </div>




</div>

Alles anzeigen

liebe Grüsse
piepser
*hoffentlich habe ich den Code richtig eingefügt* :roll:

unkown-6363 · 3. März 2012

kannst du vielleicht einmal im paint skizzieren, was du vorhast?

Wenn ich es richtig verstanden habe, soll eine Box über der anderen liegen?

Spiele mal ein wenig mit:

position:absolute; und einem z-index:

herum

gruß
phip

piepser · 4. März 2012

Hallo,
habe jetzt mal eine Zeichnung angehangen.
Es geht um die rote Box. Die anderen habe ich soweit angelegt.
Ich bin auch mit z-index am probieren, komme aber nicht wirklich weiter. :oops:
Muss mich da noch mal einlesen. Den z-index muss ich doch nur bei kopf_links und der neuen Box vergeben, oder sehe ich das falsch?
Muss ich dann auch beide Boxen mit position:absolute versehen?
Und die restlichen Boxen brauchen keine position?
Liebe Grüsse
piepser

piepser · 6. März 2012

Hallo,
ich habe es jetzt soweit gelöst. Ist zwar nicht das ideale. Aber es geht.
Vielen Dank noch mal und
liebe Grüße
piepser

webmaster3000 · 6. März 2012

Wenn du jetzt noch deinen Code hochladen würdest...
Sollte jemand (vielleicht sogar wieder du selber) ein ähnliches Problem haben, kann er den Code einfach kopieren und anpassen, ohne erneut fragen zu müssen.

piepser · 6. März 2012

den Code kann ich hochladen. Nur ist er wirklich nicht perfekt. Das Bild in der Mitte wandert mit, was es eigentlich nicht sollte und die Navi läuft hinter dem Inhalt nach rechts raus, wenn ich die Seite seitlich verkleinere. Alles Dinge die eigentlich nicht sein sollten. Also ich müsste es wieder von vorne neu aufbauen.
Hier der Code falls sich jemand dran wagen möchte:

PHP

html, body {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
background-color: #D71515;
color: #000;
}




#kopf_links {




    background-image: url(../img/lueckenfueller.jpg);
    background-repeat: repeat-x;
    float: left;
    position: absolute;
    margin-top: 30px;
    width: 70%;
    height: 180px;
    z-index: 2;
}




#kopf_mitte {
    background-color: #ffffff;
    position: absolute;
    margin-top: 10px;
    margin-left: 35%;
    padding: 5px;
    border-bottom: 2px solid #5C5C5C;
    border-right: 2px solid #474747;
    width: 270px;
    height: 180px;
    z-index: 3;
}




#kopf_rechts {
    background-image: url(../img/lueckenfueller.jpg);
    background-repeat: repeat-x;
    float: right;
    margin-top: 30px;
    width: 30%;
    height: 180px;
    z-index: 2;
}




#schrift_logo {
    width: 296px;
    height: 98px;
    margin: 41px auto;
}




#balken {
    width: 100%;
    min-width: 900px;
    height: 15px;
    background-image: url(../img/balken_01.jpg);
    background-repeat: repeat-x;
}




#wrapper {
    position: relative;
    width: 80%;
    min-height: 50%;
    margin: 0px auto;
    background-color: yellow;
}




#links {
	float: left;
	padding: 0px 0;
	border-top: 1px solid gray;
	width: 15%;
	min-height: 550px;
	height: 550px;
	background-color: #939393;
}




#inhalt {
    overflow: auto;
	padding: 0px 0;
	margin-right: -1px;
	border-top: 1px solid gray;
	border-left: 1px solid gray;
	float: right;
	width: 85%;
	min-height: 550px;
	height: 550px;
	background-color: #dedede;
}




#fuss {
	clear: both;
	position: absolute;
	bottom: 0px;
	width: 100%;
	background-color: #707070;
	border-top: 1px solid gray;
	line-height: 1.5em;
}







/* Navigation */
#navi {
    clear: left;
    width: 129px;
    margin: 5px auto;
    padding: 0px;
    background-color: #939393;
}




#navi ul {
    list-style: none;
    width: 129px;
    margin: 0 0 0 0;
    padding: 0;
}




#navi li {
    margin-bottom:5px;
}




li a.navi_home {
    display: block;
    width: 129px;
    height: 30px;
    background: transparent url(../img/navi_home.gif) no-repeat top left;
}




li a:hover.navi_home {
    display: block;
    width: 129px;
    height: 30px;
    background: transparent url(../img/navi_home.gif) no-repeat bottom left;
}




li a.navi_galerie {
    display: block;
    width: 129px;
    height: 30px;
    background: transparent url(../img/navi_galerie.gif) no-repeat top left;
}




li a:hover.navi_galerie {
    display: block;
    width: 129px;
    height: 30px;
    background: transparent url(../img/navi_galerie.gif) no-repeat bottom left;
}
















<!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=iso-8859-1">
    <title>Hauptseite Weingut G&auml;stehaus</title>
    <link rel="stylesheet" type="text/css" href="design_01.css">
</head>







<body>




    <div id="kopf_links">
        <img src="../img/logo.jpg" width="854" height="180" alt="" />
    </div>




    <div id="kopf_mitte">
        <img src="../img/collage_01.jpg" width="270" height="180" alt="" />
    </div>




    <div id="kopf_rechts">
        <div id="schrift_logo">
            <img src="../img/schrift.jpg" width="296" height="98" alt="" />
        </div>
    </div>




    <div id="balken"></div>




    <div id="wrapper">
        <div id="links">
            <?php include("navi.php") ?>
        </div>




        <div id="inhalt">
            text
        </div>




        <div id="fuss">
            <div id="balken"></div>
        </div>
    </div>







</body>
</html>

Alles anzeigen

liebe Grüße
piepser

eine Box über eine andere Box platzieren

Jetzt mitmachen!

Teilen