probleme mit DIVS (überschneidung)

drella · 20. Februar 2005

guten abend.

ich baue gerade eine seite (ohne tabellen - nur divs). jetzt habe ich eine "aussenbox" mit der id="box" und innen sind weitere divs (dreispaltiges layout mit einem head). nur wenn jetzt eine der drei "spalten" länger als die box wird, verlängert sich nicht automatisch die box.

grau = (id=boxLeft)

siehe bild:

meine id´s:

Code:

#box{
width:900px; 
height:100%; 
background-color:#ffffff; 
margin:0px auto;
border:1px solid #D3D3D3;
text-align:center;
display:block;
}

#boxHead{
width:880px;
height:150px;
background-color:#ffffff;
border:1px solid #D3D3D3;	
margin:10px 10px 0px 10px;
}

#boxLeft {
width:150px;
height:100%;
background-color:#cccccc;
text-align:left;
float:left;
position:relative;
top:20px;
left:10px;
}

ich hoffe es ist verständlich...

vielen dank
andré

Maik · 20. Februar 2005

Hallo drella,

kannst du mal bitte den kompletten HTML-source posten?

thanx, maik.l

drella · 20. Februar 2005

Hi Maik.

hier meine index.php

Code:

<div id="box">
		<div id="boxHead" style="background-image:url(images/head/01.jpg); background-repeat:no-repeat;">&nbsp;</div>
		<div id="boxMenu"><?include "pages/_menu.php";?></div>
		<div id="boxMenuRight"><?include "pages/_menu.right.php";?></div>
		<div id="boxLeft">
			<div id="boxLeftTop">
				<div id="boxTitle" style="background-image:url(images/layout/titel.hoeren.gif);">&nbsp;</div>
				<?include "pages/tipp.php";?>
			</div>
			<div id="boxLeftMiddle">
				<div id="boxTitle" style="background-image:url(images/layout/titel.hingehen.gif);">&nbsp;</div>
				<?include "pages/tipp.php";?>
			</div>
			<div id="boxLeftBottom">
				<div id="boxTitle" style="background-image:url(images/layout/titel.freunde.gif);">&nbsp;</div>
				<?include "pages/tipp.php";?>
			</div>
		</div>
		<div id="boxMiddle">
			<div id="boxTitle" style="background-image:url(images/layout/titel.aktuelles.gif);">&nbsp;</div>
			<?include "pages/test.php";?>
		</div>
		<div id="boxRight">
			<div id="boxTitle" style="background-image:url(images/layout/titel.schreiben.gif);">&nbsp;</div>
			<?include "pages/test.php";?>
		</div>
	</div>

hier mein stylesheet

Code:

/* ** DIV MODELL ** */
#box{
	width:900px; 
	height:100%; 
	background-color:#ffffff; 
	margin:0px auto;
	border:1px solid #D3D3D3;
	text-align:center;
	display:block;
}

/*** HEAD + MENU ***/

#boxHead{
	width:880px;
	height:150px;
	background-color:#ffffff;
	border:1px solid #D3D3D3;	
	margin:10px 10px 0px 10px;
}
#boxMenu{
	width:880px;
	height:20px;
	background-color:#ffffff;
	position:relative;
	top:0px;
	left:11px;
	text-align:left;
	float:left;
}

#boxMenuRight{
	width:200px;
	height:20px;
	background-color:#ffffff;
	text-align:right;
	float:right;
	position:relative;
	top:-20px;
	right:10px;
}

/*** CONTENT ***/

#boxTitle{
	height:20px; 
	border-bottom:1px solid #D3D3D3;
	background-repeat:no-repeat; 
	background-position:right;
}

#boxLeft {
	width:150px;
	height:100%;
	background-color:#cccccc;
	text-align:left;
	float:left;
	position:relative;
	top:20px;
	left:10px;
}

#boxMiddle {
	width:440px;
	background-color:#ffffff;
	border:1px solid #D3D3D3;
	float:left;
	text-align:left;
	position:relative;
	top:20px;
	left:30px;
}

#boxRight {
	width:250px;
	background-color:#ffffff;
	border:1px solid #D3D3D3;
	text-align:left;
	float:right;
	position:relative;
	top:0px;
	left:-10px;
}

/***  LEFTBOXES ***/

#boxLeftTop{
	width:150px;
	border:1px solid #D3D3D3;
	margin-bottom:20px;
}

#boxLeftMiddle{
	width:150px;
	border:1px solid #D3D3D3;
	margin-bottom:20px;	
}

#boxLeftBottom{
	width:150px;
	border:1px solid #D3D3D3;
}

Maik · 21. Februar 2005

Hallo drella,

wenn du <div id="box"> mittels CSS positionierst, verlängert sich das DIV auch, wenn eine der Spalten länger wird:

Code:

/*  DIV MODELL  */
#box{
position:absolute;
left: 50%;
margin-left: -450px; /* negative Hälfte von width:900px = zentrierte Ausrichtung */
width:900px;
height:100%;
background-color:#ffffff;
border:1px solid #D3D3D3;
text-align:center;
display:block;
}

greez, maik.l

drella · 21. Februar 2005

Hi Maik.

Danke für deine Antwort. Beim IE mwürde er es machen, aber Netscape, Moz und FF haut das ganze Layout zusammen...

Hast du vielleicht ne Ahnung, wieso ich bei der rechten Spalte (id=#boxRight) die relative Positionierung anders setzen muss, als bei der linken und mittleren?

position:relative;
top:0px;
left:-10px;

Vielleicht kann man ja das genze Boxmodell einfacher umsetzen, als ich das gemacht habe?! Hast du schon mal ein zentriertes 3 Spalten Layout mit Head erstellt?

Danke + Gruß
Andre

Maik · 21. Februar 2005

Hallo drella,

hier mal ein alternativer Source-Code mit einem Header und drei Spalten:

Code:

<html>
<head>
<title> </title>

<style type="text/css">
<!--
body
{
padding: 0px;
margin: 0px;
background: #000010;
color: #ddeeff;
font-family: verdana, sans-serif;
font-size: 11px;
}

#headDiv
{
height: 50px;
margin: 10px;
padding: 0px;
border: 1px solid #506b84;
background-color: #001122;
}

#contentDiv
{
width: auto;
padding: 0px;
margin: 0px 150px;
border: 1px solid #506b84;
background-color: #001122;
}

#leftmenuDiv
{
position: absolute;
top: 70px;
left: 10px;
width: 130px;
height: 300px;
margin: 0px;
padding: 0px;
border: 1px solid #506b84;
background-color: #001122;
}

#rightmenuDiv
{
position: absolute;
top: 70px;
right: 10px;
width: 130px;
height: 300px;
margin: 0px;
padding: 0px;
border: 1px solid #506b84;
background-color: #001122;
}
-->
</style>

</head>
<body>

<div id="headDiv">
<p>headDiv</p>
</div>

<div id="contentDiv">
<p class="head">contentDiv | margin , auto-width</p>
</div>

<div id="leftmenuDiv">
<p>leftmenuDiv</p>
</div>

<div id="rightmenuDiv">
<p>rightmenuDiv</p>
</div>

</body>
</html>

greez, maik.l

drella · 21. Februar 2005

hi maik.

danke erstmal. ich werde es zuhause testen ob es hinhaut.

viele grüße
andré

Maik · 21. Februar 2005

Hallo drella,

habe dir heute morgen eine Alternative gepostet, die aber nicht zentriert ist, so wie deine Vorlage.

Hier also ein dreispaltiges Seitenlayout, das in einem zentrierten DIV eingebettet ist:

Code:

<html>
<head>
<title> </title>

<style type="text/css">
<!--
body
{
margin: 0px;
padding: 0px;
background: #000010;
color: #ddeeff;
font-family: verdana, sans-serif;
font-size: 11px;
font-weight: bold;
}

#mainDiv
{
position: absolute;
left: 50%;
width: 900px;
margin-left: -450px; /* negative Hälfte von width:900px = zentrierte Ausrichtung */
margin-top: 10px;
border: 1px solid #506b84;
background-color: #001122;
padding: 0px;
}

#headDiv
{
height: 100px;
padding: 0px;
border-bottom: 1px dashed #506b84;
}

#leftmenuDiv
{
float: left;
width: 150px;
padding: 0px;
}

#contentDiv
{
float: left;
width: 600px;
padding: 0px;
border-right: 1px dashed #506b84;
border-left: 1px dashed #506b84;
}

rightmenuDiv
{
float: left;
width: 150px;
padding: 0px;
}
-->
</style>

</head>
<body>

<div id="mainDiv">

<div id="headDiv">headDiv </div>

<div id="leftmenuDiv">leftmenuDiv </div>

<div id="contentDiv">contentDiv </div>

<div id="rightmenuDiv">rightmenuDiv </div>

</div>

</body>
</html>

greez, maik.l

drella · 22. Februar 2005

hi maik. ich bins mal wieder. ich habe jetzt dein code als basis hergenommen. es sind noch zwei sachen hinzugekommen. menu und footer. ich habe mal in photoshop einen kleinen entwurf gemacht, wie es eigentlich aussehen soll. du findest auf der seite (unten) auch einen link, wie ich es bis jetzt erstellt habe.

http://www.pop77.de/tmp/layout_roh.html

ein großes problem gibt es bei den abständen zwischen den boxen (ja 10px). bei IE spring die rechte box gleich unter die mittlere....

ich bekomme schon graue haare..... mit tabellen wäre es so einfach

vielleicht hast du noch nen tipp.

vielen dank schon mal für deine gegebene mühe super danke!

grüße
andré

Maik · 22. Februar 2005

Hallo drella,

wie es scheint, kommt hier mal wieder die unterschiedliche Boxmodell-Interpretation der Browsers zum Tragen: wenn ich eine Lösung für den IE (5.5) gefunden habe, dann stimmt's nicht mehr im Mozilla (1.6), und umgekehrt

CSS-Code für IE:

Code:

body
{
margin: 0px;
padding: 0px;
background: #ffffff;
color: #000000;
font-family: verdana, sans-serif;
font-size: 11px;
font-weight: bold;
}

#box{
        position: absolute;
        left: 50%;
        width:900px;
        margin-left: -450px; /* negative Hälfte von width:900px = zentrierte Ausrichtung */
        margin-top: 10px;
        border:1px solid #D3D3D3;
        background-color: #FFFFFF;
}

#boxHead{
        width:880px;
        height: 150px;
        padding: 0px;
        margin: 10px;
        background-color:#ffffff;
        border:1px solid #D3D3D3;
}

#boxLeft{
        float: left;
        width: 150px;
        padding: 0px;
        text-align:left;
        margin:10px 5px; /* EDIT 22.02.2005 */
}

#boxMiddle{
        float: left;
        width: 460px; /* EDIT 22.02.2005 */
        padding: 0px;
        text-align:left;
        margin:10px 5px; /* EDIT 22.02.2005 */
}

#boxRight{
        float: left;
        width: 250px;
        padding: 0px;
        text-align:left;
        margin:10px 5px; /* EDIT 22.02.2005 */
}

#boxMenu{
        width:880px;
        height:20px;
        background-color:#ffffff;
        border:1px solid #D3D3D3;
        text-align:left;
        margin-left:10px;
}

#boxFooter{
        width:880px;
        height:20px;
        background-color:#ffffff;
        border:1px solid #D3D3D3;
        text-align:left;
        margin:10px;
        clear: left; /* EDIT 22.02.2005 */
}

#boxLeftTop{
        width:150px;
        border:1px solid #D3D3D3;
        margin-bottom:20px;
}

#boxLeftMiddle{
        width:150px;
        border:1px solid #D3D3D3;
        margin-bottom:20px;
}

#boxLeftBottom{
        width:150px;
        border:1px solid #D3D3D3;
}

#boxContent{
        border:1px solid #D3D3D3;
        padding:20px;
}

#boxRightBar{
        border:1px solid #D3D3D3;
        padding:20px;
}

CSS-Code für Mozilla:

Code:

body
{
margin: 0px;
padding: 0px;
background: #ffffff;
color: #000000;
font-family: verdana, sans-serif;
font-size: 11px;
font-weight: bold;
}

#box{
        position: absolute;
        left: 50%;
        width:900px;
        margin-left: -450px; /* negative Hälfte von width:900px = zentrierte Ausrichtung */
        margin-top: 10px;
        border:1px solid #D3D3D3;
        background-color: #FFFFFF;
}

#boxHead{
        width:880px;
        height: 150px;
        padding: 0px;
        margin: 10px;
        background-color:#ffffff;
        border:1px solid #D3D3D3;
}

#boxLeft{
        float: left;
        width: 150px;
        padding: 0px;
        text-align:left;
        margin:10px;
}

#boxMiddle{
        float: left;
        width: 440px;
        padding: 0px;
        text-align:left;
        margin:10px;
}

#boxRight{
        float: left;
        width: 250px;
        padding: 0px;
        text-align:left;
        margin:10px;
}

#boxMenu{
        width:880px;
        height:20px;
        background-color:#ffffff;
        border:1px solid #D3D3D3;
        text-align:left;
        margin-left:10px;
}

#boxFooter{
        width:880px;
        height:20px;
        background-color:#ffffff;
        border:1px solid #D3D3D3;
        text-align:left;
        margin:10px;
        clear: left; /* EDIT 22.02.2005 */
}

#boxLeftTop{
        width:150px;
        border:1px solid #D3D3D3;
        margin-bottom:20px;
}

#boxLeftMiddle{
        width:150px;
        border:1px solid #D3D3D3;
        margin-bottom:20px;
}

#boxLeftBottom{
        width:150px;
        border:1px solid #D3D3D3;
}

#boxContent{
        border:1px solid #D3D3D3;
        padding:20px;
}

#boxRightBar{
        border:1px solid #D3D3D3;
        padding:20px;
}

Jetzt müssen wir 'nur' noch die Schnittmenge für beide Browsers finden ...

greez, maik.l

probleme mit DIVS (überschneidung)

drella

Mitglied

Maik

drella

Mitglied

Maik

drella

Mitglied

Maik

drella

Mitglied

Maik

drella

Mitglied

Maik

Neue Beiträge