nicht angemeldet
Hallöchen!
Bin gerade dabei mich mit CSS zu beschäftigen und stoße an Verständissprobleme mit der Positionierung in CSS (ich kapier den Unterschied zwischen Relative & Co trotz einer Menge einverleibter Tutorials noch nicht wirklich)...
Konkret hänge ich gerade an folgendem Beispiel,bei dem ich möchte, dass die "Navigation" linksbündig sitzt, diese aber von der Klasse "mittig" Positioniert wird.
Wenn ich die Navigation aus der Verschachtelung rausnehme, dann sitzt sie ganz links im Viewport, was aber nicht erwünscht ist, da die Seite zentriert angezeigt werden soll.
Weiters hänge ich noch an dem Problem, dass ich oben im Viewport einen weißen Rand zwischen Browserfenster und der "Logoleiste" habe.
Wenn ich die Positionsangabe "static" mit top:0px; setze ist zwar der Rand weg, aber die Zentrierung auch.
Würde mich trotz einer weiten Verbreitung dieses Themas totzdem um hilfe freuen, da ich die Positionierungsbeschreibungen einfach nicht kapiere...
Lg.
Lukas
Anbei der Quelltext aus dem HTML Dokument und aus dem Externen CSS:
<!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>untitled</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 id="logoleiste"><a href="#" id="logoleiste"></a></div>
<div class="mittig">
<div id="link_camps4you"><a href="#" id="link_camps4you"></a></div>
<div id="link_reiseziele"><a href="#" id="link_reiseziele"></a></div>
<div id="link_kursdaten"><a href="#" id="link_kursdaten"></a></div>
<div id="link_preis"><a href="#" id="link_preis"></a></div>
<div id="link_eltern"><a href="#" id="link_eltern"></a></div>
<div id="link_bilder"><a href="#" id="link_bilder"></a></div>
<div class="navigation">
</div>
</div>
</body>
</html>
---------------------------------------------------------------------
#logoleiste a {
display:block;
background-image: url(Bilder/Logoleiste.gif);
background-repeat: no-repeat;
width: 800px;
height: 97px;
position:relative;
top:0px;
text-align: center;
margin-left:auto;
margin-right:auto;
}
.mittig {
text-align: center;
position:relative;
margin-left:auto;
margin-right:auto;
width:800px;
border:0px;
}
#link_camps4you, #link_reiseziele, #link_kursdaten, #link_preis, #link_eltern, #link_bilder {
float:left;
margin:0px;
padding:0px;
background-repeat: no-repeat;
}
#link_camps4you a {
background-image:url(Bilder/Camps4You.gif);
width:150px;
height:60px;
}
#link_camps4you a:hover {
background-image:url(Bilder/Camps4You_roll.gif);
width:150px;
height:60px;
}
#link_reiseziele a {
background-image:url(Bilder/reiseziele.gif);
width:95px;
height:60px;
}
#link_reiseziele a:hover {
background-image:url(Bilder/reiseziele_roll.gif);
width:95px;
height:60px;
}
#link_kursdaten a {
background-image:url(Bilder/kursdaten.gif);
width:169px;
height:35px;
}
#link_kursdaten a:hover {
background-image:url(Bilder/kursdaten_roll.gif);
width:169px;
height:35px;
}
#link_preis a {
background-image:url(Bilder/preis.gif);
width:148px;
height:35px;
}
#link_preis a:hover {
background-image:url(Bilder/preis_roll.gif);
width:148px;
height:35px;
}
#link_eltern a {
background-image:url(Bilder/eltern.gif);
width:106px;
height:35px;
}
#link_eltern a:hover {
background-image:url(Bilder/eltern_roll.gif);
width:106px;
height:35px;
}
#link_bilder a {
background-image:url(Bilder/bilder.gif);
width:132px;
height:60px;
}
#link_bilder a:hover {
background-image:url(Bilder/bilder_roll.gif);
width:132px;
height:60px;
}
.navigation {
text-align:left;
background-image:url(Bilder/Navigation.gif);
background-repeat: no-repeat;
width:150px;
height:298px;
}
.main {
}
.abschlussleiste {
}