nicht angemeldet
Hallöchen!
Dank dieses Forums mache ich gerade meine ersten Schritte in CSS und bin mal mit dem Grundlayout fertig.
Da ich nur den IE zum Testen habe, wende ich mich an euch um eventuelle Darstellungs/Coding Fehler zu finden.
Derzeit kämpfe ich zwar noch damit die Seite zu zentrieren ohne das mir das Layout zerfällt, aber sonst wird an dem Code nichts mehr verändert (außer ihr könnt mir noch Tipps geben)...
Würde mich über Hilfe freuen...
Lg.
Lukas
P.S.: Habe auch mal eine Version online gestellt zwecks Browserkompatibilität!
HTML:
<!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>
<title>Camps4You - Englisch Camps</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="logoleiste">
<ul>
<li><a href="#" class="logo" title="Zur Startseite von Camps4You"></a></li>
<li><a href="#" class="camps4you" title="Camps4You"></a></li>
<li><a href="#" class="reiseziele" title="Reiseziele"></a></li>
<li><a href="#" class="kursdaten" title="Kursdaten & Preise"></a></li>
<li><a href="#" class="preis" title="Im Preis inkludiert"></a></li>
<li><a href="#" class="eltern" title="Für Eltern"></a></li>
<li><a href="#" class="bilder" title="Bildergalerie"></a></li>
</ul>
</div>
<div class="navigation">
<ul >
<li><a href="#">test 1</a></li>
<li><a href="#">test 2</a></li>
<li><a href="#">test 3</a></li>
<li><a href="#">test 4</a></li>
<li><a href="#">test 5</a></li>
<li><a href="#">test 6</a></li>
</ul>
<div class="navigation2">
<ul>
<li><a href="#" title="Online Buchen">Online Buchen</a></li>
<li><a href="#" title="Kontakt/Info">Kontakt / Info</a></li>
<li><a href="#" title="Broschüre bestellen">Broschüre bestellen</a></li>
<li><a href="#" title="Für Lehrer/innen">Für Lehrer/innen</a></li>
</ul>
</div>
</div>
<div class="main"></div>
<div class="footer"></div>
</body>
</html>
--------------------------------------------------------------
CSS:
html, body {
margin:0px;
padding:0px;
border-style:none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.grundlayout {
margin-left:auto;
margin-right:auto;
text-align:center;
}
.logoleiste {
width:800px;
position:relative;
}
.logoleiste ul {
list-style-type:none;
margin:0px;
padding:0px;
}
.logoleiste ul li {
display:inline;
}
.logoleiste ul li a {
background-repeat: no-repeat;
float: left;
}
li .logo {
background-image:url(Bilder/Logoleiste.gif);
width: 800px;
height: 97px;
}
li .camps4you {
background-image:url(Bilder/Camps4You.gif);
width:150px;
height:60px;
}
li .camps4you:hover {
background-image:url(Bilder/Camps4You_roll.gif);
width:150px;
height:60px;
}
li .reiseziele {
background-image:url(Bilder/reiseziele.gif);
width:95px;
height:60px;
}
li .reiseziele:hover {
background-image:url(Bilder/reiseziele_roll.gif);
width:95px;
height:60px;
}
li .kursdaten {
background-image:url(Bilder/kursdaten.gif);
width:169px;
height:35px;
}
li .kursdaten:hover {
background-image:url(Bilder/kursdaten_roll.gif);
width:169px;
height:35px;
}
li .preis {
background-image:url(Bilder/preis.gif);
width:148px;
height:35px;
}
li .preis:hover {
background-image:url(Bilder/preis_roll.gif);
width:148px;
height:35px;
}
li .eltern {
background-image:url(Bilder/eltern.gif);
width:106px;
height:35px;
}
li .eltern:hover {
background-image:url(Bilder/eltern_roll.gif);
width:106px;
height:35px;
}
li .bilder {
background-image:url(Bilder/bilder.gif);
width:132px;
height:60px;
}
li .bilder:hover {
background-image:url(Bilder/bilder_roll.gif);
width:132px;
height:60px;
}
.navigation {
position:absolute;
top:157px;
width:150px;
height:398px;
text-align: left;
float:left;
background-image:url(Bilder/navigation.gif);
background-repeat:no-repeat;
}
.navigation ul {
list-style-type:disc;
margin:20px;
}
.navigation ul a {
color:#000000;
text-decoration:none;
}
.navigation ul a:hover {
color:#FFFFFF;
text-decoration:none;
}
.navigation2 {
position:absolute;
top:290px;
left: 0;
width:140px;
}
.navigation2 ul {
list-style-type:none;
line-height:25px;
padding:5px;
margin:0px;
font-weight: bold;
}
.navigation2 ul a {
color:#FFFFFF;
text-decoration:none;
}
.navigation2 ul a:hover {
color:#000000;
text-decoration:none;
}
.main {
position:absolute;
top:157px;
left:150px;
width:650px;
height:398px;
float:right;
overflow: scroll;
}
.footer {
background-color:#6699CC;
position:absolute;
width:800px;
height:25px;
top: 555px;
left: 0;
}