Hi,
nachdem ich das Design meiner Homepage nicht mehr ertragen konnte, habe ich mich ein bisschen mit CSS beschäftigt. Bei SelfHTML habe ich ein Layout entdeckt, das ich nach meinem Geschmack verändet habe.
Die Änderungen sind eher durch Versuch und Irrtum entstanden denn durch Kenntnis der Programmiersprache, jedenfalls habe ich mit dem IE getestet, wie die Seite angezeigt wird, und das klappte tadellos.
Nun habe ich gerade spaßeshalber andere Browser ausprobiert und sowohl Opera als auch Firefox stellen die Seite falsch dar.
Link: http://flora-emslandia.de/
Ich habe den ausgelagerten Stylesheet in Verdacht, hier ist er:
body
{
background:silver;
position:left;
}
html, body
{
font: times;
color: #000;
top:0; left:0; right:0;
min-height: 100%;
margin: 0;
padding: 0;
width: 100%;
scrollbar-base-color:#8C8CC6;
scrollbar-3d-light-color:#FFFFFF;
scrollbar-arrow-color:#FFFFFF;
scrollbar-darkshadow-color:#000000;
scrollbar-face-color:#336600;
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#000000;
scrollbar-track-color:#339900;
}
#header_container
{
position: fixed; top:0; left:0; right:0;
text-align: left;
margin: 0;
height: 3em;
z-index: 3;
}
#header
{
position: fixed; top:0; left:0; right:0; bottom:0;
line-height: 60px;
background: #336600;
height: 2em;
font-size: 40px;
font-variant: small-caps;
font-weight: normal;
color: #FFF;
padding-left: 30px;
z-index: 3;
margin: 0;
}
#header span
{
font-weight: normal;
font-size: 22px;
font-variant: normal;
color: #FFF;
}
#content
{
font-family: verdana, sans-serif;
font-size: 14px;
margin: 0;
padding-top: 6.2em;
padding-bottom: 3em;
padding-right: 1em;
padding-left: 1em;
z-index: 2;
}
#navigation
{ padding: 0.2em;
position: fixed;
}
#footer_container
{
position: fixed; bottom:0; left:0; right:0;
text-align: left;
margin: 0;
height: 2em;
z-index: 3;
}
#footer
{
position: absolute; top:0; left:0; right:0; bottom:0;
padding-left: 30px;
background: #336600;
z-index: 3;
}
h2
{
font-size: 22px;
margin-top: 1.5em;
}
p.box {text-align: center; color: white; background-color: darkred; padding-left:10px;
padding-right:10px; width:1%; float:left; margin-right:10px}
* html, * html body
{
overflow: hidden;
bottom: 0;
height: 100%;
}
* html #header_container, * html #footer_container
{
font: times;
color: #FFF;
position: absolute;
width: 100%;
padding-right: 0px;
}
* html #navigation
{
overflow-y: scroll;
left: 0px;
right: 0px;
top: 0px;
width: 170px;
height: 500px;
}
* html #header,* html #footer
{
height: 120%;
position: static;
}
* html #content
{
position: fixed;
overflow: scroll;
top:0; bottom:0; left:0; right:0;
height: 100%;
width: 100%;
margin :0;
}
ul#navigation
{
font: 16px verdana, arials, sans-serif;
margin-top: 90px;
margin-left: 20px;
width: 200px;
float: left;
list-style: none;
}
ul#navigation li
{
text-align: left;
}
ul#navigation li a
{
padding-left: 0px;
height: 27px;
display: block;
width: 170px;
line-height: 27px;
text-decoration: none;
color: #333;
border-bottom: 1px solid #333;
}
ul#navigation li a:hover
{
background: #336600;
color: #FFF;
}
background:#4f4f4f;
color:#ffffff;
text-decoration:underline;
}
* html #navigation
Vielleicht findet ja jemand den Fehler.
Grüße,
David