Hallo,
ich habe mal versucht, eine Seite komplett mit CSS zu bauen. Sieht soweit auch schon ganz gut aus, bis auf zwei kleine Fehler: Und zwar ist zum einen der Footer im Internet Explorer nach rechts verschoben (in allen anderen Browsern funktioniert das) und zweitens ist das Menü (Navigation) im Opera Browser sehr weit vom Header entfernt. Eigentlich sollte da nur 1px zwischen sein, wie der Code es hergibt (in Firefox und auch im IE kein Problem), nur in Opera sind das mindestens 40px.
Hier der aufbau der Seite:
Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robot" content="index,nofollow" />
<link rel="STYLESHEET" type="text/css" href="style.css" />
<title></title>
</head>
<body>
<div id="wrap">
<div id="header">
<img src="layout/header_bild.gif" id="header_pic" alt="" />
<h1>Überschrift</h1>
<p class="header_text">Adresse<br />Telefon</p>
</div>
<ul id="navigation">
<li><a href="#">menu1</a></li>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
<div id="content">
<h2>Überschrift 1</h2>
<p>Text</p>
</div>
<div id="footer">
bla
</div>
</div>
</body>
</html>
Und hier die Stylesheets:
Code:
html {
padding:0px;
margin:0px;
height: 100%;
min-height: 100%;
}
body {
background-color: #EDEDED;
font-size: 12px;
color:#564b47;
padding:0px;
margin:0px;
height: 100%;
min-height: 100%;
text-align: center;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#wrap {
border-left:solid 1px #ddd;
border-right:solid 1px #ddd;
width: 600px;
background-color: #ffffff;
margin: 0px auto;
padding: 0px;
background-color: #ffffff;
height: 100%;
min-height: 100%;
}
#header {
height: 100px;
width: 600px;
background-color: #d90000;
color: #fff;
}
h1 {
margin:0px;
padding-top: 8px;
padding-bottom: 0px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 2.5em;
}
p.header_text {
margin-left:auto;
margin-right:auto;
margin-top:0px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1.6em;
}
#header_pic {
width: 67px;
margin-top: 15px;
margin-left: 20px;
float:left;
}
ul,li{
margin: 0;
list-style-type: none;
position: relative;
}
/* Navigation */
#navigation {
width: 600px;
font-weight: bold;
padding: 0px 0px 0px 0px;
float: left;
border-top:solid 1px #fff;
border-bottom: 1px solid #ddd;
background: #1e317B;
margin-top:0px;
}
#navigation a {
background: #1e317B;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
width:148px;
height:30px;
padding: auto 0px auto 0px;
color: #FFF;
margin:0;
display: block;
float:left;
text-decoration:none;
}
#navigation li a:hover {
background-image: url(layout/navigation.gif);
border-right: 1px solid #fff;
height:30px;
padding: auto 0px auto 0px;
color: #000;
margin:0;
display: block;
float:left;
}
#content {
text-align:left;
margin: 0px 10px 0px 10px;
padding: 30px 4px 4px 4px;
}
h2 {
font-size: 1.5em;
color: #1e317B;
}
#footer {
height: 15px;
border-top:solid 1px #fff;
background-color:#1e317B;
bottom: 0;
position: absolute;
width: 600px;
float:left;
margin: 0 -3px 0 0;
color: #d9d5f3;
}
Kann mir jemand sagen, wie diese Fehler zustande kommen, denn ich finds einfach nicht raus und das nervt etwas.... da CSS eigentlich ne gute Sache ist aber trotzdem solche Fehler auftauchen.
Danke!
09.12.2006, 14:15
2 Fehler im CSS, die ich nicht kapiere...
Ähnliche Themen
Linear-Darstellung
