✔ DIV Layout.... (what the $%&)

Status
Nicht offen für weitere Antworten.
F

faustkeil

Grünschnabel
Hallo zusammen,

ich verzweifele seit 2 Tagen an einem Layout, dass ich gerne mit DIVs gestalten möchte. Es soll so aussehen wie auf der beigefügten Zeichnung und es läuft halbwegs, nur leider ab ie7.... und ich verstehe nicht, warum. Die Navigation muss 200px breit sein und der rechte Rahmen 20px. Das lustige ist, dass der Content 100%hoch und breit sein soll, damit sich dieser beim ziehen vergrößert. Ich verzweifele langsam an diesem Problem. Geht das vielleicht nur mit Tabellen?

Anbei der HTML und CSS Code...

Code: 
body
{
	margin:0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;	
}

/* ------------------------- Master Pages --------------------------------*/
#divHeader
{
	height: 90px;
	overflow: hidden;
	background-color:#010066;
}
#divMeOverAll
{
	
	font: 9px verdana, sans-serif;
	color:Blue;
	line-height: 20px;
	/*color: #2E3D43;*/
	text-decoration: none;
	text-align: center;
	background-color:White;
}

#divNavigation
{
	position:absolute; 
	left:0; 
	top:90px; 
	bottom:0px; 	
	width: 200px;
	min-width: 200px;	
	background-color: #F0F0F0;
	z-index: 99;
	
}

/*
html>body #divNavigation 
{ 
    position: fixed;
}
*/
#divContent
{
	overflow: auto;
	position: absolute;
	z-index: 3;
	top: 120px;
	bottom: 0px;
	left: 200px;
	right: 0;
	text-align: left;
	background-color: white;
	/*
	width:80%;
	min-width: 80%;
	*/
}	

#divFooter
{
	overflow:auto;
	position: absolute;
	bottom: 0px;
	background-color: #F0F0F0;
	left: 0px;	
	width: 100%;
	min-width: 100%;
	z-index:2;	
}



#divHeaderMenue
{
	height: 30px;
	margin-left: 200px;
	background-color: #CCAC80;
}

#divRightPane
{
	overflow: auto;
	position:absolute; 
	z-index:4; 	
	right:0; 
	top:120px; 
	bottom:0px;	
	background-color: #F0F0F0;
	margin-left: 200px;
	width:20px;
	/*
	min-height:768px;
	height: 768px;
	*/
}



#divDefaultContent
{
	
	padding: 30px 30px 30px 30px; 
}


Code: 
<%@ Master Language="VB" CodeFile="VEW.master.vb" Inherits="VEW" %>
<%@ Register Assembly="RadPanelbar.Net2" Namespace="Telerik.WebControls" TagPrefix="radP" %>

<!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 runat ="server">
            <title>ARGH</title>

<body>
    <form id="form1" runat="server">
    <div id="divMeOverAll">
        <div id="divHeader"><asp:Image SkinID="LogoLeft" ID="imgLogoLeft" runat="server" /><asp:Image SkinID="LogoRight" ID="imgLogoRight" runat="server" /></div>
	    <div id="divHeaderMenue">Geiler Header</div>
	    <div id="divNavigation" style="vertical-align:bottom;">Navigation</div>
	    <div id="divContent">
            <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
            </asp:contentplaceholder>
        </div>
        <div id="divRightPane"></div>
    </div>
    </form>
</body>
</html>
 

Anhänge

  • layout.jpg
    layout.jpg
    14,9 KB · Aufrufe: 28
Hi,

kannst du uns auch mitteilen, was in den übrigen Browsern daran nicht funktioniert, denn ich kann beispielsweise im Firefox keine Darstellungsfehler entdecken.

Das einzige was in den "nicht-IE-Browsern" stört, sind die beiden Zeilen vor der Doctype-Deklaration, die nicht geparst und somit zu Dokumentbeginn (vor dem Header) mit ausgegeben werden.
 
im ie6 ist links die navigation und rechts der rand nur sp hoch wie die schrift "navigation" und die beiden container erstrecken sich nicht bis zum bottom.....
 
das habe ich mir heute schon angeschaut, das problem ist, dass hier die toolbar leiste fehlt und ich habe heute den ganzen tag versucht, die dort reinzufummeln, aber entweder war der content bereich darüber oder die leiste, aber nie der content unter der toolbar... horror... ich habe gerade fast eine lösung, vielleicht kann mir jemand sagen, wie ich jetzt das header element über der navigation und dem rechten rahmen bringen kann, dann sollte es das sein....

hier mein neuer code:

Code: 
body
{
	margin:0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;	
}

/* ------------------------- Master Pages --------------------------------*/
#divHeader
{
	top: 0;
	height: 90px;
	overflow: hidden;
	background-color:#010066;
	z-index:99;
	
	}
#divMeOverAll
{
	
	font: 9px verdana, sans-serif;
	color:Blue;
	line-height: 20px;
	/*color: #2E3D43;*/
	text-decoration: none;
	text-align: center;
	background-color:White;
}

#divNavigation
{
	position:absolute; 
	left:0; 
	top:0; 
	bottom:0; 	
	width: 200px;
	min-width: 200px;	
	background-color: #F0F0F0;
	min-height: 100%;
    height: auto !important;
    height: 100%;
	z-index: 3;
	
}

/*
html>body #divNavigation 
{ 
    position: fixed;
}
*/
#divContent
{
	overflow: auto;
	position: absolute;
	z-index: 3;
	top: 120px;
	bottom: 0px;
	left: 200px;
	right: 0;
	text-align: left;
	background-color: white;
	/*
	width:80%;
	min-width: 80%;
	*/
}	

#divFooter
{
	overflow:auto;
	position: absolute;
	bottom: 0px;
	background-color: #F0F0F0;
	left: 0px;	
	width: 100%;
	min-width: 100%;
	z-index:2;	
}



#divHeaderMenue
{
	height: 30px;
	margin-left: 200px;
	background-color: #CCAC80;
}

#divRightPane
{
	overflow: auto;
	position:absolute; 
	z-index:4; 	
	right:0; 
	top:0; 
	bottom:0px;	
	background-color: #F0F0F0;
	margin-left: 200px;
	width:20px;
	min-height: 100%;
    height: auto !important;
    height: 100%;
	/*
	min-height:768px;
	height: 768px;
	*/
}



#divDefaultContent
{
	
	padding: 30px 30px 30px 30px; 
}
 
z-index funktioniert nur in Verbindung mit der position-Eigenschaft:

Code: 
#divHeader
{
        top: 0;
        height: 90px;
        overflow: hidden;
        background-color:#010066;
        z-index:99;
        position:absolute;
        width:100%;
}
Und bitte beachte die Netiquette bzgl. deiner durchgängigen Kleinschreibung. Vielen Dank.
 
Super, das hätten wir dann erledigt.... Jetzt muss ich nur noch meinem Chef erklären, warum ich da zwei Tage dran gesessen habe :) Vielen Dank an Dich Maik! Grüße aus Krefeld, Faustkeil!
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück