✔ Layout und div in passender Höhe

wachteldonk · 26. August 2007

Hallo,

ich versuch jetzt seit einer Ewigkeit divs mit scrollbalken auf die richtige Höhe zu bringen aber es will nicht klappen. Auf dem beiliegenden Screenshot habe ich die Probleme markiert und hier der Code. Hat jemand eine Problemlösung?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<title>teste 3.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">



<style type="text/css">
<!--
body {
	margin: 0;
	font-family:Arial, Verdana;
	font-size: 13px;
	color:black;
	background-color: #FFFFFF;
}


.NavigationFrame {
	position:fixed;
	width:100%;
	height:30px;
	left:0;
	top: 0; 
	z-index:1000;
	background-color:#bbbbbb;
}

.ContentFrame {
	background-color:#cccccc;
	position:fixed;
	width:100%;
	height:100%;
	top: 30px; 
	right: 0px;
	left: 0px;
	bottom: 26px; 
}

.FooterFrame {
	position:fixed;
	width:100%;
	height:26px;
	bottom: 0px; 
	left: 0; 
	background-color:#cccccc;
	background-image:url(includes/templates/standard/images/background_footer.png);
	background-repeat:repeat-x;

}

.Footertext {
	width:100%;
	height:26px;
	background-image:url(includes/templates/standard/images/footertext.png);
	background-repeat:no-repeat;
	background-position:right;
	bottom:0px;
	left:0px;
}


/* Einzene Elemente */
.ListObject {
	width:30%;
	float:left;
	


	position:fixed;
	top: 30px; 
	right: 0px;
	left: 0px;
	bottom: 26px; 
}
.ListInnerObject {
	overflow:auto;
	background-color:white;
	height:100%;
	border: 2px solid black;
	border-style:inset;
	padding:2px 4px 2px 4px;
	margin: 2px 0px 2px 4px;
}

.ContentObject {
	width:70%;
	

	position:fixed;
	top:30px;
	left:30%;
	bottom:26px;
	
}

.ContentInnerObject {
	overflow:auto;
	background-color:white;
	border: 2px solid black;
	height:100%;
	border-style:inset;
	padding:2px 4px 2px 4px;
	margin: 2px 0px 2px 4px;
}






/* Navigation */
ul#Navigation .Logo {
	background-image:url(includes/templates/standard/images/logo.png);
	background-repeat:no-repeat;
	width:130px;
	height:30px;
}

ul#Navigation .Logo:hover {
	background-color:transparent;
}

ul#Navigation {
    text-align: center;
	z-index:1000;
	width: 100%;	
	margin: 0;
	padding: 0;
	min-height:30px;
	height:30px;
	color:white;
	background-color:#cccccc;
	background-image:url(includes/templates/standard/images/menubackground.png);
	background-repeat:repeat-x;
}

ul#Navigation li {
	z-index:1000;
    list-style: none;
    float: left;
	display:block;
    position:relative;
	margin:0px;
	padding: 5px 10px 5px 10px;
	overflow:visible;
	cursor:pointer;
	color:white;
	text-align:left;

}

ul#Navigation li ul {
	z-index:1000;
    margin: 0; 
	padding: 0;
    position: absolute;
    display: none;
	width:100%;
	top:26px;
	left:-1px;
	border:1px solid white;
}

ul#Navigation li ul li {
	z-index:1000;
	float: none;
    display: block;
	margin:0;
	padding: 3px 10px 3px 10px;
	background-color:#E40303;
	cursor:pointer;
	border-top: 1px solid white;
}

ul#Navigation li:hover {
	z-index:1000;
    background-color:white;
	color:black;
}

ul#Navigation li:hover ul {
	z-index:1000;
    display: block;
}

ul#Navigation a {
	z-index:1000;
    text-decoration: none;
    color: white;
	display:block;
}












/* Links */
a{
	color:black;
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}

-->
</style>

</head>
<body>
	<div class="NavigationFrame"  id="NavigationFrame">
		<ul id="Navigation">
			
			
			<li class="Logo">
			</li>
			

			<li onClick="document.location.href='http://www.test.de'">Hilfe
			  <ul style="width:160px;">
				<li onClick="document.location.href='http://www.test.de'">Hilfreiche Links</li>
				<li onClick="document.location.href='http://www.test.de'">Zur  Homepage</li>
				<li onClick="document.location.href='http://www.test.de'">&Uuml;ber</li>
			  </ul>
			</li>
			<li onClick="document.location.href='http://www.test.de'">Abmelden
			  <ul style="width:140px;">
				<li onClick="document.location.href='http://www.test.de'">Abmelden / Logout</li>
			  </ul>
			</li>
		</ul>
	</div>
	<div class="ContentFrame" id="ContentFrame">
		<div class="MainContent" ID="MainContent">
			<div class="ListObject" ID="ListFrame">
				<div class="ListInnerObject">
					Liste<br />
					Zeile1<br />
					Zeile2<br>
					Zeile3<br />
					Zeile4<br />
					Zeile5<br>
					Zeile6<br />
					Zeile1<br />
					Zeile2<br>
					Zeile3<br />
					Zeile4<br />
					Zeile5<br>
					Zeile6<br />
					Zeile1<br />
					Zeile2<br>
					Zeile3<br />
					Zeile4<br />
					Zeile5<br>
					Zeile6<br />
					Zeile1<br />
					Zeile2<br>
					Zeile3<br />
					Zeile4<br />
					Zeile5<br>
					Zeile6<br />
					Zeile1<br />
					Zeile2<br>
					Zeile3<br />
					Zeile4<br />
					Zeile5<br>
					Zeile6<br />
					Zeile1<br />
					Zeile2<br>
					Zeile3<br />
					Zeile4<br />
					Zeile5<br>
					Zeile6<br />
					Zeile1<br />
					Zeile2<br>
					Zeile3<br />
					Zeile4<br />
					Zeile5<br>
					Zeile6<br />
					Zeile1<br />
					Zeile2<br>
					Zeile3<br />
					Zeile4<br />
					Zeile5<br>
					Zeile6<br />
					Zeile1<br />
					Zeile2<br>
					Zeile3<br />
					Zeile4<br />
					Zeile5<br>
					Zeile6<br />
					Zeile1<br />
					Zeile2<br>
					Zeile3<br />
					Zeile4<br />
					Zeile5<br>
					Zeile6<br />
					Zeile7<br />
					Zeile8<br />
					Zeile9<br />
					Zeile10<br />
					Zeile11<br />
				</div>
			</div>
			<div class="ContentObject" ID="ContentFrame">
				<div class="ContentInnerObject">
					Zeile1<br />
					Zeile2<br>
					Zeile3<br />
					Zeile4<br />
					Zeile5<br>
					Zeile6<br />
					Zeile1<br />
					Zeile2<br>
					Zeile3<br />
					Zeile4<br />
					Zeile5<br>
					Zeile6<br />
					Zeile1<br />
					Zeile2<br>
					Zeile3<br />
					Zeile4<br />
					Zeile5<br>
					Zeile6<br />
					Zeile1<br />
					Zeile2<br>
					Zeile3<br />
					Zeile4<br />
					Zeile5<br>
					Zeile6<br />
					Zeile1<br />
					Zeile2<br>
					Zeile3<br />
					Zeile4<br />
					Zeile5<br>
					Zeile6<br />
					Zeile1<br />
					Zeile2<br>
					Zeile3<br />
					Zeile4<br />
					Zeile5<br>
					Zeile6<br />
					Zeile1<br />
					Zeile2<br>
					Zeile3<br />
					Zeile4<br />
					Zeile5<br>
					Zeile6<br />
					Zeile1<br />
					Zeile2<br>
					Zeile3<br />
					Zeile4<br />
					Zeile5<br>
					Zeile6<br />
					Zeile1<br />
					Zeile2<br>
					Zeile3<br />
					Zeile4<br />
					Zeile5<br>
					Zeile6<br />
					Zeile1<br />
					Zeile2<br>
					Zeile3<br />
					Zeile4<br />
					Zeile5<br>
					Zeile6<br />
				</div>
			</div>
		</div>
	</div>
<div class="FooterFrame"  id="FooterFrame">
	<div class="Footertext" id="Footertext"></div>
</div>
</body>
</html>

Maik · 26. August 2007

Hi,

dass die unteren Pfeile der Scrollbalken im nichtsichtbaren Bereich des Browserfensters verschwinden, liegt an der Kombination der Positionierung der DIVs vom oberen Fensterrand (top:30px) und ihrer deklarierten 100%-Höhe.

Das CSS-Tutorial Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken wird dir da sicherlich weiterhelfen.

wachteldonk · 26. August 2007

Hallo,

ich habe mal etwas rumgespieltaber es klappt irgendwie nicht. Ich habe den geänderten Code mal oben aktualisiert. Jetzt geht unter IE7 die Scrollingbars nicht mehr und die Borderstyles werden auch nicht richtig interpretiert siehe inset/outset

hast du noch eine Idee?

Maik · 26. August 2007

Versuch es mal hiermit:

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
body {
margin: 0;
font-family:Arial, Verdana;
font-size: 13px;
color:black;
background-color: #FFFFFF;
overflow:hidden;
}


.NavigationFrame {
position:absolute;
width:100%;
height:30px;
left:0;
top:0;
z-index:1000;
background-color:#bbbbbb;
}

.ContentFrame {
background-color:#cccccc;
position:absolute;
width:100%;
top:30px;
right: 0px;
left: 0px;
bottom:26px;
}

* html .ContentFrame {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

.FooterFrame {
position:absolute;
width:100%;
height:26px;
bottom: 0px;
left: 0;
background-color:#cccccc;
background-image:url(includes/templates/standard/images/background_footer.png);
background-repeat:repeat-x;
}

.Footertext {
width:100%;
height:26px;
background-image:url(includes/templates/standard/images/footertext.png);
background-repeat:no-repeat;
background-position:right;
bottom:0px;
left:0px;
}


/* Einzene Elemente */
.ListObject {
width:30%;
overflow:auto;
background-color:white;
position:absolute;
top: 30px;
right: 0px;
left: 0px;
bottom: 26px;
}

* html .ListObject {
position:absolute;
top:0px;
right:0px;
height:100%;
border-top:26px solid #fff;
border-bottom:26px solid #fff;
}

.ContentObject {
width:70%;
overflow:auto;
position:absolute;
top:30px;
right:0;
bottom:26px;
}

* html .ContentObject {
position:absolute;
top:0;
right:0;
width:70%;
height:100%;
border-top:26px solid #fff;
border-bottom:26px solid #fff;
}

/* Navigation */
ul#Navigation .Logo {
background-image:url(includes/templates/standard/images/logo.png);
background-repeat:no-repeat;
width:130px;
height:30px;
}

ul#Navigation .Logo:hover {
background-color:transparent;
}

ul#Navigation {
text-align: center;
z-index:1000;
width: 100%;
margin: 0;
padding: 0;
min-height:30px;
height:30px;
color:white;
background-color:#cccccc;
background-image:url(includes/templates/standard/images/menubackground.png);
background-repeat:repeat-x;
}

ul#Navigation li {
z-index:1000;
list-style: none;
float: left;
display:block;
position:relative;
margin:0px;
padding: 5px 10px 5px 10px;
overflow:visible;
cursor:pointer;
color:white;
text-align:left;

}

ul#Navigation li ul {
z-index:1000;
margin: 0;
padding: 0;
position: absolute;
display: none;
width:100%;
top:26px;
left:-1px;
border:1px solid white;
}

ul#Navigation li ul li {
z-index:1000;
float: none;
display: block;
margin:0;
padding: 3px 10px 3px 10px;
background-color:#E40303;
cursorointer;
border-top: 1px solid white;
}

ul#Navigation li:hover {
z-index:1000;
background-color:white;
color:black;
}

ul#Navigation li:hover ul {
z-index:1000;
display: block;
}

ul#Navigation a {
z-index:1000;
text-decoration: none;
color: white;
display:block;
}

/* Links */
a{
color:black;
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

-->
</style>

</head>
<body>
<div class="NavigationFrame" id="NavigationFrame">
<ul id="Navigation">


<li class="Logo">
</li>


<li onClick="document.location.href='http://www.test.de'">Abmelden
<ul style="width:140px;">
<li onClick="document.location.href='http://www.test.de'">Abmelden / Logout</li>
</ul>
</li>
</ul>
</div>
<div class="ContentFrame" id="ContentFrame">
<div class="MainContent" ID="MainContent">
<div class="ListObject" ID="ListFrame">
Liste<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile7<br />
Zeile8<br />
Zeile9<br />
Zeile10<br />
Zeile11<br />

</div>
<div class="ContentObject" ID="ContentFrame">
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
Zeile1<br />
Zeile2<br>
Zeile3<br />
Zeile4<br />
Zeile5<br>
Zeile6<br />
</div>
</div>
</div>
<div class="FooterFrame" id="FooterFrame">
<div class="Footertext" id="Footertext"></div>
</div>
</body>
</html>

wachteldonk · 26. August 2007

Da wirft er einen PHP Fehler. Ist der Syntax der ersten Zeile wirklich so richtig?

Parse error: syntax error, unexpected T_STRING in /var/www/web1/html/testversion_make/_layout/index3.php on line 1

Was hast due eigentlich geändert?

Bei mir werden jetzt die Rahmen oben und unten riesig

Maik · 26. August 2007

Anstelle der XML-Deklaration, die dazu dient, den IE (<7) in den Quirksmodus zu versetzen, damit der "Workaround" in ihm überhaupt funktioniert, kannst du auch einen HTML-Kommentar setzen:

Code:

<!-- put IE into Quirksmode -->

Ändere mal für die Klase .ContentFrame die obere und untere Positionsangabe auf null, damit der Rahmen nicht größer erscheint:

Code:

.ContentFrame {
background-color:#cccccc;
position:absolute;
width:100%;
top: 0;
right: 0px;
left: 0px;
bottom: 0;
}

Was ich geändert habe?

In Anlehnung an das empfohlene CSS-Tutorial habe ich den Positionierungswert fixed durch absolute ersetzt, aus den Klassen .ContentFrame, .ListObject, ContentObject die height:100%-Deklaration entfernt, sowie folgende * html-Selektoren für den IE hinzugefügt:

Code:

* html .ContentFrame {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

* html .ListObject {
position:absolute;
top:0px;
right:0px;
height:100%;
border-top:26px solid #fff;
border-bottom:26px solid #fff;
}

* html .ContentObject {
position:absolute;
top:0;
right:0;
width:70%;
height:100%;
border-top:26px solid #fff;
border-bottom:26px solid #fff;
}

wachteldonk · 26. August 2007

Die Erweiterungen für den IE, sind aber nur für IE6 und kleiner? Mein IE7 zeigte die Seite eigentlich richtig an.
Jetzt gibts aber leider doch noch ein paar Probleme

Wenn ich im IE den rechten Browerscrollbalken mit

*{overflow:hidden;}

deaktiviere, verschwindet zwar die Scrollbar im IE (ganz rechts) aber jetzt werden meine Pulldownmenüs nicht mehr angezeigt. Ne Idee?

dann will ich die jetztigen Scrollboxen noch mit einem Rand versehen. Wenn ich das overflow:auto in den beiden Elementen entferne, eine weiteres Div einfüge und es dann we im obigen Code mit den inner Classen evrsehe geht auf einmal garnix mehr. Komishc ist auch as wenn ich für diese Elemente 100% als breite eingebe. der Scrollbalken ganz verschwindet. Obwohl er bei 90 % noch auftaucht und noch genug Platz da ist um 100% zu zeigen

Noch eine Frage:
Wenn ich das angebe

.ListObject {
width:30%;
overflow:auto;
background-color:white;
position:absolute;
top: 4px;
right: 6px;
left: 6px;
bottom: 4px;
border:10px;
}

krieg ichzwar oben und unten schöne Ränder aber er verschiebt sich auch nach rechts und der rechte frame bleibt da wo er ist

Nicht ganz so gut. Das alles nur im IE7 aber im Firefox tut sich garnix

Keine Ränder,.. nix

Die ganze Sache soll allerdings eh nur im Firefox ab 1.5 udn IE7 laufen.

Maik · 26. August 2007

wachteldonk hat gesagt.:
Wenn ich im IE den rechten Browerscrollbalken mit

*{overflow:hidden;}

deaktiviere, verschwindet zwar die Scrollbar im IE (ganz rechts) aber jetzt werden meine Pulldownmenüs nicht mehr angezeigt. Ne Idee?

Code:

.NavigationFrame {
position:absolute;
width:100%;
height:30px;
left:0;
top: 0;
z-index:1000;
background-color:#bbbbbb;
overflow:visible;
}

wachteldonk · 26. August 2007

ok, Danke.

Jetzt nur noch das Problem mit den Rändern. Im Firefox zeigt er garnix an Im IE zerschießt er alles bei Rändern auf der Horizontalen

Maik · 26. August 2007

Gemäß dem CSS-Boxmodell wird u.a. die border-Eigenschaft zur width-Eigenschaft eines Elements hinzugezählt, was seine "tatsächliche" Boxenbreite ergibt.

Folglich müsstest du 20 Pixel (linker + rechter Rahmen) von den 30% abziehen, um auf die gewünschte 30%-Breite zu kommen - das funktioniert aber genauso gut (perfekt), wie die Äpfel von den Birnen zu subtrahieren.

Du kannst dir ja mal diesen "Annäherungsversuch" anschauen, bei dem von mir die bisherigen Positionsangaben um 10px "eingerückt", sowie die Breitenangaben verringert wurden, um an den Flanken einen Rand (Rahmen) zu erzeugen:

Code:

.ContentFrame {
background:#ffff00; /* um Rand zu visualisieren */
position:absolute;
width:100%;
top:0;
left:0;
bottom:0;
}

.ListObject {
width:28.5%;
overflow:auto;
background:#fff;
position:absolute;
top:40px;
left:10px;
bottom:36px;
}

.ContentObject {
width:68.5%;
overflow:auto;
background:#ccc;
position:absolute;
top:40px;
right:10px;
bottom:36px;
}

Das Modell hab ich erfolgreich im FF (1.5.0.7, 2.0.0.6) und IE7 getestet.

✔ Layout und div in passender Höhe

wachteldonk

Erfahrenes Mitglied

Anhänge

Maik

wachteldonk

Erfahrenes Mitglied

Maik

wachteldonk

Erfahrenes Mitglied

Maik

wachteldonk

Erfahrenes Mitglied

Maik

wachteldonk

Erfahrenes Mitglied

Maik

Neue Beiträge