Hallo zusammen,
ich habe zwei Fragen bei denen ich einfach nicht weiterkomme.
1. Auf was genau bezieht sich die Prozent Angabe bei margin-top?
Wenn ich margin-top: 13%; verwende von welchen Wert/Bereich werden die 13% berechnet? Irgendwie ist bei mir der Abstand nach oben egal bei welchen Browser/Auflösung oder Länge des Inhaltes immer exakt gleich groß. Somit klebt das Div einmal extrem weit oben und einmal sehr weit unten (je nach Browser/Device/Auflösung).
2. An was liegt es, dass mir der IE 6 das ganze Layout zerstört?
<body id="body">
<div id="wrapper">
<div id="wrapper_content">
<div id="header">
<a href="home.html" titel="Logo">
<img src="./assets/images/logo.png" alt="logo" />
</a>
</div>
<div id="page_img">
<img src="img.jpg" />
</div>
<div id="menu">
<ul>
<li>Menü 1</li>
<li>Menü2</li>
<li>Menü3</li>
<li>Menü4</li>
<ul>
</div>
<div id="content">
Grundidee beim Entwurf von CSS ...
</div>
<div class="clear"></div>
</div><!-- end wrapper_content div -->
<div class="clear"></div>
<div id="footer">
<div id="footer_module">
Footer
</div>
</div>
</div><!-- end wrapper div -->
<div class="space"></div>
</body>
BODY#body{
margin:0;
padding:0;
text-align: center;
background-image: url(../images/bglogo_brown.png);
background-color:#b3b3b3;
background-attachment:fixed;
}
body, td, th, tr, p, div {
font-family: Corporate, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
line-height: 145%;
}
#wrapper {
width: 900px;
margin: 0 auto;
text-align: left;
}
#wrapper_content {
margin-top: 13%;
padding: 20px 25px;
width: 850px;
background: #fff;
}
#header {
float:left;
margin-bottom: 52px;
width: 650px;
}
#header_large {
margin-bottom: 52px;
width: 650px;
}
#header img{
width: 200px;
}
#header_large img{
width: 200px;
}
#page_img {
float: right;
width: 200px;
height: 110px;
margin-top: 55px;
margin-bottom: 55px;
text-align: center;
}
#page_img img{
width: 200px;
}
#menu {
margin-left: 70px;
width: 130px;
float: left;
text-transform: uppercase;
}
#content {
float: left;
width: 410px;
margin-left: 20px;
margin-right: 20px;
}
.clear {
clear: both;
}
.space {
height: 50px;
}
a, a:link,
a:active,
a:visited {
color: #251C0B;
text-decoration: none;
}
a:hover, a.active {
text-decoration: underline;
}
#menu a,
#menu a:link,
#menu a:visited {
font-size: 14px;
color: #251C0B;
}
#menu ul li a:hover,
#menu ul li a#active_menu {
text-decoration: underline;
}
#menu ul{
list-style-position:outside ;
list-style-type: none;
padding: 0;
}
#content ul{
list-style-position:inside ;
list-style-type:disc;
padding-left:3%;
margin-bottom: 1em;
}
#content p{
text-align: left
margin-bottom: 1em;
clear:both;
}