✔ Ein weiteres CSS Problem

Status
Nicht offen für weitere Antworten.
R

reddragon90

Erfahrenes Mitglied
Hallo,

ich muss euch noch einmal mit meinen ziemlich billige Fragen stören. Und möchte mich an dieser stelle auch für diese fragen entschuldigen. Aber ich bekomme es nicht hin das die Drei Div's im middleContainer nicht in der gleichen höhe sind.

Code: 
#container {
position:relative;
	width:1024px;
	height: 700px;
	z-index:1;
}
#topContainer {
	position:relative;
	margin-left:50px;
    margin-top:76px;
	width:1024px;
	height:145px;
	background-image:url(screen/bg_header.gif);
    background-repeat: no-repeat;
	z-index:2;
}
#middleContainer {
	margin-left:50px;
	margin-top:0px;
	width:1024px;
	min-height:137px;
	height:137px;
	height:137px;
	z-index:auto;
	background-image:url(screen/bg_middle.gif);
	background-repeat:repeat-y;
}
#Logo {	
	position:absolute;
    margin-left:10px;
    margin-top:10px;
	left:68px;
	top:31px;
	width:321px;
	height:57px;
	z-index:4;

}
#bottomContainer {
	margin-left:50px;
    margin-top:0px;
	width:1024px;
	height:170px;
	background-image:url(screen/bg_bottom.gif);
	background-repeat:no-repeat;
	top: 282px;
	left: 0px;
	z-index:5;
}
#leftContent {
	position:relative;
	left:0px;
	top:0px;
	margin-left:40px;
	margin-right:0px;
	width:299px;
	height:auto;
	z-index:6;
}
#middleContent {
	position:relative;
	left:340px;
	top:0px;
	margin-left:0px;
	margin-right:0px;
	width:299px;
	height:auto;
	z-index:7;
}
#rightContent {
	position:relative;
	left:640px;
	top:0px;
	margin-left:0px;
	margin-right:0px;
	width:299px;
	height:auto;
	z-index:8;
}

HTML: 
<body>
			

		<div id="container">
		  <div id="topContainer">
				<div id="Logo"><a href="index.php"><img src="../css/screen/logo.gif" width="312" height="58" border="0" /></a> </div>
		  </div>

					<div id="middleContainer">
					  <div id="leftContent">
								  <p>Das ist der erste Content								</p>
					  </div>

								<div id="middleContent">
								  <p>Das ist der zweite Content</p>
							    </div>

								<div id="rightContent">
									<p>Das ist der dritte Content								</p>
								</div>
		  </div>
				
		  <div id="bottomContainer">
					
		  </div>

</div>
</body>
 
Hi,

versuch es mal anstelle der Positionsangaben mit der float-Eigenschaft:

Code: 
#leftContent, #middleContent, #rightContent {
        float:left;
}

#leftContent {
        position:relative;
        /*left:0px;*/
        /*top:0px;*/
        margin-left:40px !important; /* Für moderne Browser */
        margin-left: 20px; /* Für IE */
        margin-right:0px;
        width:299px;
        z-index:6;
}
#middleContent {
        position:relative;
        /*left:340px;*/
        /*top:0px;*/
        margin-left:0px;
        margin-right:0px;
        width:299px;
        z-index:7;
}
#rightContent {
        position:relative;
        /*left:640px;*/
        /*top:0px;*/
        margin-left:0px;
        margin-right:0px;
        width:299px;
        z-index:8;
}
 
Mir ist noch eine kleine Unstimmigkeit für das DIV #middleContainer aufgefallen, die zur Folge hat, dass bei zunehmenden Boxinhalt die Mindesthöhe für das Element in den modernen Browsern nicht zunimmt, und der Inhalt dann über den unteren Elementrand hinausläuft:

Code: 
/* aus */
        
min-height:137px;
height:137px;
height:137px;

/* wird */

min-height:137px;
height:auto !important;
height:137px;
Zudem muss die "Fließumgebung" gecleart werden, da ansonsten der gleiche Darstellungsfehler auftritt:

Code: 
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: left;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
Die Klasse clearfix wird zusätzlich im DIV middleContainer aufgerufen:

Code: 
<div id="middleContainer" class="clearfix">  ... </div>
Siehe hierzu auch http://positioniseverything.net/easyclearing.html
 
Mit der !important-Regel sollen die modernen Browser die nachfolgende height-Eigenschaft übergehen, die nur für den IE (<7) gilt, da er die min-height-Eigenschaft nicht unterstützt, dafür aber die height-Eigenschaft als Mindesthöhe für die Box ansieht. ;)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück