Hallo,
ich versuche in Layouts tabellenlos auszukommen. Eigentlich bin ich mit Tabellen immer sehr gut hingekommen und die Seiten sehen auch in allen Browsern gut aus, allerdings ist der Quelltext doch immer etwas schlecht lesbar. Darum habe ich mir vorgenommen nun mit DIVS das allgemeine Layout umzusetzen. Soviel zur Vorgeschichte. Nach langem gebastels (so richtig ausgereift ist das ganze meiner Meinung nach noch nicht oder ich bin einfach noch zu schlecht) habe ich nun eine Seite ungefähr so hinbekommen wie ich möchte.
Allerdings habe ich ein Problem:
Im FF alles ok, im IE fehlen komplett die Hintergrundfarben bei den <li>.
Ersetze ich aber:
funktioniert das ganze wieder und ich verstehe absolut nicht wo der Zusammenhang sein soll.
2.tes Problem:
In der linken Spalte befindet sich in der kompletten Version ein Klappmenü über JAVA. Wenn ich nun aufklappe und der DIV Inhalt größer als 100% wird vergrößert sich nichts die DIVS sprengen also quasi einach unten raus. Bei normalem Inhalt der nicht geklappt wird vergrößern sich die DIVS.
Vielleicht findet sich ja jemand mit etwas mehr Erfahrung in CSS Layouts der einfach mal über den Quelltext schaut und mir sagen kann ob ich auf dem richtigen Weg bin, ob Fehler drin sind und optimalerweise bei den beiden Problemen helfen kann. Vorallem interessiert mich brennend warum "position:relative;" Hintergrundfarben im IE verschwinden lässt. Meine IE Version ist 6.0.
ich versuche in Layouts tabellenlos auszukommen. Eigentlich bin ich mit Tabellen immer sehr gut hingekommen und die Seiten sehen auch in allen Browsern gut aus, allerdings ist der Quelltext doch immer etwas schlecht lesbar. Darum habe ich mir vorgenommen nun mit DIVS das allgemeine Layout umzusetzen. Soviel zur Vorgeschichte. Nach langem gebastels (so richtig ausgereift ist das ganze meiner Meinung nach noch nicht oder ich bin einfach noch zu schlecht) habe ich nun eine Seite ungefähr so hinbekommen wie ich möchte.
Allerdings habe ich ein Problem:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title></title>
<link rel="stylesheet" href="./style.css" type="text/css" />
<style type="text/css">
html {
height:100%;
margin: 0px;
padding: 0px;
border:0px;
}
body {
height: 100.01%;
margin: 0;
padding: 0;
border: 0;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 9px;
color: #7F7772;
line-height: 1;
}
#apDiv1 {
position:absolute;
left:0px;
top:0px;
width:50%;
height:100%;
z-index:1;
background-image: url(backleft.jpg);
background-repeat: repeat-x;
}
#apDiv2 {
position:absolute;
left:50%;
top:0px;
width:50%;
height:100%;
z-index:2;
background-image: url(backright.jpg);
background-repeat: repeat-x;
}
#page {
position:relative;
width: 990px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0px auto 0px auto;
z-index: 3;
background-image:url(backl.jpg);
background-repeat:repeat-y;
background-color:#ffffff;
}
#links {
position: absolute;
left: 0;
height: 100%;
width: 234px;
padding:0;
margin:0;
border:0;
}
#mitte {
margin: 0px 200px 0px 234px;
background-color:#ffffff;
padding-bottom:27px;
}
#rechts {
position: absolute;
right: 0;
width: 200px;
}
#unten {
position:absolute;
bottom:0;
margin: 0 auto;
height: 27px;
width: 990px;
background-image:url(u1.jpg);
z-index:10;
}
/*Hier Menudefinition*/
.menucontainer {
width: 234px;
padding:0;
margin:0;
border:0;
position:relative;
}
.menucontainer ul {
list-style-type: none;
margin:0px;
padding:0px;
border:0px;
outline: 0;
font-size:11px;
}
.normalmenu {
background-color: #004478;
border-bottom: solid 1px #2388d5;
padding-left: 25px;
background-image: url(liste.jpg);
background-repeat: no-repeat;
background-position:10px 50%;
padding-bottom:2px;
padding-top:2px;
}
.normalmenu a {
color: #fff;
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
text-transform:uppercase;
}
.klappmenu {
background-color: #035592;
border-bottom: solid 1px #2388d5;
padding-left: 5px;
padding-bottom:2px;
padding-top:2px;
}
.klappmenu a {
color: #fff;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
font-weight: bold;
text-decoration: none;
text-transform:uppercase;
}
</style>
</head>
<body bgcolor="#e4e4e4">
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="page">
<div id="links">
<img src="l1.jpg" width="234" height="316" /><br>
<div class="menucontainer">
<ul>
<li class="normalmenu"><a>UEBER</a></li>
<li class="klappmenu"><a>Organisation</a></li>
<li class="klappmenu"><a>Kontaktpersonen</a></li>
<li class="klappmenu"><a>Aufgaben</a></li>
<li class="klappmenu"><a>Impressum</a></li>
</ul>
</div>
</div>
<div id="rechts"><img src="r1.jpg" width="200" height="121" /></div>
<div id="mitte"><img src="m1.jpg" width="556" height="121" /><br />
</div>
<div id="unten"></div>
</div>
</body>
</html>Im FF alles ok, im IE fehlen komplett die Hintergrundfarben bei den <li>.
Ersetze ich aber:
Code:
.menucontainer {
width: 234px;
padding:0;
margin:0;
border:0;
//das HIER: position:relative; durch
position: absolute;
}funktioniert das ganze wieder und ich verstehe absolut nicht wo der Zusammenhang sein soll.
2.tes Problem:
In der linken Spalte befindet sich in der kompletten Version ein Klappmenü über JAVA. Wenn ich nun aufklappe und der DIV Inhalt größer als 100% wird vergrößert sich nichts die DIVS sprengen also quasi einach unten raus. Bei normalem Inhalt der nicht geklappt wird vergrößern sich die DIVS.
Vielleicht findet sich ja jemand mit etwas mehr Erfahrung in CSS Layouts der einfach mal über den Quelltext schaut und mir sagen kann ob ich auf dem richtigen Weg bin, ob Fehler drin sind und optimalerweise bei den beiden Problemen helfen kann. Vorallem interessiert mich brennend warum "position:relative;" Hintergrundfarben im IE verschwinden lässt. Meine IE Version ist 6.0.
Zuletzt bearbeitet:
