Seitenlayout: Divs mit Prozentangaben im CSS

celiadee · 13. Mai 2008

Tach!

Ich habe eine auf Divs/CSS-formatiert basierende Webseite erstellt.
Hier eine vereinfachte Test-Datei:
http://www.christinaundwalter.com/test.php

Im Prinzip sind das zwei Divs nebeneinander - im linken Div ("framecontent"-orange) liegt die Navigation, in den rechten Div ("maincontent"-rot) werden die verschiedenen Inhalte geladen bzw. mit php inkludiert.

Ich möchte nun die Breite des Divs mit der Navigation nun prozentual abhängig vom Browser-Fenster machen (18% anstelle einer fixen Pixel-Angabe).

Das t bis jetzt wunderbar bei FF, Safari, Netscape und Opera. Der IE (6) zerschiesst das Layout aber leider völlig. IBei meiner HP arbeite ich mit einer Browserweiche für IE6+. Wie muss ich das CSS anpassen? Ich kriegs leider nicht hin..Hilfe...grrrr!
Hier das CSS:

PHP:

/* CSS  */

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%;
}

#framecontent{
position: absolute;
top: 0;
bottom: 0; 
left: 0;
width: 18%; /*Width of frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background: orange;
text-align:right;
}

#maincontent{
position: fixed;
top: 0; 
left: 18%; /*Set left value to WidthOfFrameDiv*/
width: 82%;
right: 0;
bottom: 0;
overflow: auto; 
background: red;
}

 
.innertube_navi{
	margin-top: 116px; /*Margins for inner DIV inside each DIV (to provide padding)*/
	margin-right: 20px;
	background: grey;
	}

.innertube_main{
	padding-top: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
	padding-left: 0px;
	padding-bottom: 30px;
	background: green;
	}


#page_hello {
	background: white;
	width: 600px; 
	text-align: left;
	vertical-align: top;
	background-color: yellow; 
	height: 98%;
	}
	
#page_basic {
	background: white;
	width: 575px; 
	text-align: left;
	vertical-align: top;
	padding-left: 25px;
    background-color: blue; 
	height: 700px;
	}

und für den IE:

PHP:

/* CSS IE6+*/

body{
padding: 0 0 0 18%; /*Set value to (0 0 0 WidthOfFrameDiv)*/
}

Das nächste Problem liegt bei divs (Container, in die die ganzen Seiten-Inhalte geladen werden) mit prozentualen Höhenangaben der includierten php-seiten. (im Beispiel: page_hello.php)

FF, Safari, Netscape t wunderbar, aber Opera erkennt die prozentuale Angabe nicht. Beim IE ist es das selbe.

Ich freue mich über jeden Tipp lieben Dank!
celiadee

Maik · 14. Mai 2008

Hi,

dann liste ich hier mal auf, was der IE6 an deinem Stylesheet überhaupt nicht unterstützt:

position:fixed
Kombination der Positionseigenschaften top/bottom und left/right

Wenn du die padding-Deklaration im body-Selektor auf null setzt, und #maincontent für ihn absolut positionierst, richtet er das Element zumindest schon mal direkt neben #framecontent aus.

celiadee · 14. Mai 2008

Hallo Maik,

danke für Deine Hinweise, hat auch geklappt und werde ich mir für die Zukunft merken.
Meine Stylesheets sehen jetzt so aus:

test_css_01:

HTML:

/* CSS Document */

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%;
}

#framecontent{
position: absolute;
top: 0;
bottom: 0; 
left: 0;
width: 18%; /*Width of frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background: orange;
text-align:right;
}

#maincontent{
position: fixed;
top: 0; 
left: 18%; /*Set left value to WidthOfFrameDiv*/
width: 82%;
right: 0;
bottom: 0;
overflow: auto; 
background: red;
}

 
.innertube_navi{
	margin-top: 116px; /*Margins for inner DIV inside each DIV (to provide padding)*/
	margin-right: 20px;
	background: grey;
	}

.innertube_main{
	padding-top: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
	padding-left: 0px;
	padding-bottom: 30px;
	background: green;
	vertical-align: top;
	}


#page_hello {
	background: white;
	width: 600px; 
	text-align: left;
	vertical-align: top;
	background-color: yellow; 
	height: 98%;
	}
	
#page_basic {
	background: white;
	width: 575px; 
	text-align: left;
	vertical-align: top;
	padding-left: 25px;
    background-color: blue; 
	height: 900px;
	}

und für IE: test_css_02:

HTML:

body{ 
padding: 0 0 0 0;
background: #262626;
vertical-align: top;
}

#maincontent{ 
height: 100%; 
width: 100%;
position: absolute;
vertical-align: top;
background: #262626;
overflow: auto; 
background: red;
}

#framecontent{
position: absolute;
padding: 0;
width: 18%; /*Width of frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background: orange;
text-align:right;
}

Einziger Schönheitsfehler: Der IE scrollt nicht, obwohl overflow auf "auto" gesetzt ist.

Dann mache ich mich jetzt mal an das zweite Problem mit den Prozent-Angaben für die Höhe der Container-Divs :suspekt:. Auch hier ist jede Hilfe willkommen.

Grüße
celiadee

Maik · 14. Mai 2008

Vielleicht hilft dir da das CSS-Tutorial Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken weiter?

celiadee · 22. Mai 2008

danke, okay, das ackere ich jetzt mal durch!
Bis später
Celiadee

Maik · 24. Mai 2008

Hi,

ich weiss jetzt nicht, wie weit du schon gekommen bist und, ob du mittlerweile eine browserübergreifende Lösung erarbeiten konntest, also hab ich mich eben mit der Aufgabenstellung etwas näher beschäftigt, und das Ergebnis kann sich sehen lassen ;-)

Das Modell hab ich (unter WinXP Prof. SP2) in den folgenden Browsern erfolgreich getestet:

Firefox 1.5.0.12, Firefox 2.0.0.14
IE 5.01, IE 5.5, IE 6, IE 7
Netscape 7.1
Opera 9.27
Safari 3.0.4
SeaMonkey 1.1.6

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_celiadee</title>

<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
html,body {
height:100%;
overflow:hidden;
}
#framecontent {
position:absolute;
top:0;
left:0;
bottom:0;
width:18%;
overflow:hidden;
background:orange;
}
#maincontent {
position:absolute;
top:0;
right:0;
bottom:0;
left:18%;
height:100%;
overflow:auto;
background:green;
}
#innerbox {
min-height:100%;
width:600px;
background:yellow;
}
.padtop {
height:1em;
background:green;
}
-->
</style>
<!--[if lte IE 6]>
<style type="text/css">
#framecontent {
height:100%;
}
#maincontent {
position:absolute;
top:0;
width:82%;
}
#innerbox {
height:100%;
}
</style>
<![endif]-->

</head>
<body>

<div id="framecontent">
     <p>framecontent</p>
</div>
<div id="maincontent">
     <div id="innerbox">
          <div class="padtop"></div>
          <p>maincontent</p>
          <!-- Ab hier wird der weitere Inhalt zunächst erstmal auskommentiert -->
          <!-- um die 100%-Mindesthöhe von #innerbox im Viewport zu demonstrieren -->
          <!--<p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          <p>maincontent</p>
          - END -
          -->
     </div>
</div>

</body>
</html>

celiadee · 26. Mai 2008

Hi Maik,

lieben Dank dafür, ist ja cool
Ich habe übers WE selbst auch eine Lösung ausgetüftelt,
Divs nimmt der IE und auch Opera mit Prozent-angaben und zwar indem man einfach noch einen Div hineinpackt und mit min-height: x%....definiert.

sieht dann so aus:

HTML:

#page_hello {
	background: white;
	width: 600px; 
	text-align: left;
	vertical-align: top;
	position: absolute;
	height: 97%;
	}

/*darin verschachtelt:*/

#page_content {
  width: 600px;
  min-height: 97%;
  vertical-align: top;
  text-align: left;
  background-color: white;

  }

Hier kann man sich das Ergebnis ansehen:

http://www.christinaundwalter.com

Läuft einwandfrei auf Safari, FF, IE, Opera, Netscape.
Allerdings fehlen mir noch die Scrollbalken am IE (die sind nach wie vor verschwunden)
Werde mir jetzt gleich mal Deine Version ansehen.

Danke Bis später!
celiadee

celiadee · 26. Mai 2008

Hi noch mal Maik!

Das t super und ist ein super einfaches, schlankes Script!
Toll. Danke! Dafür musste ich mir vorher selbst noch einen abbrechen!

Was ist denn 'em' für ne Einheit?
Das kenne ich gar nicht.

Liebe Grüße und nen guten Feierabend!

celiadee

Maik · 27. Mai 2008

Hi,

celiadee hat gesagt.:
Was ist denn 'em' für ne Einheit?
Das kenne ich gar nicht.

em ist eine relative Maßeinheit.

Seitenlayout: Divs mit Prozentangaben im CSS

celiadee

Mitglied

Maik

celiadee

Mitglied

Maik

celiadee

Mitglied

Maik

celiadee

Mitglied

celiadee

Mitglied

Maik

Neue Beiträge