nicht angemeldet
Positionierungsprobleme
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 {
}
-
hi,
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.
Dazu brauchst du eigentlich nicht mal absolute Positionierung, mittels float sollte sich das auch machen lassen.
Aber mit absoluter Positionierung innerhalb eines relativ positionierten, zentrierten Vorfahrenelementes ist es natürlich auch möglich.
Allerdings solltest du dich erst noch mal mit HTML beschäftigen - denn dein Code ist ziemlicher Murks.
<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>Das ist eine ziemlich abscheuliche DIV-Suppe.
Nutze Listen für Navigations_listen_.
Und gewöhne dir ab, Divs um alle möglichen Elemente drumherum zu packen - z.b. die Divs um die einzelnen Links in deinem Code sind vermutlich ziemlich sinnfrei.gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; } -
Hallo Lukas,
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.
ich habe Verständnisprobleme! ;-)
Um unerwünschte weiße Rahmen zu entfernen, empfiehlt es sich in aller Regel für body/html margin und padding erst einmal auf '0' zu setzen.
html, body {
margin:0;
padding:0;
}Sofern ich dein Anliegen richtig verstehe, willst deinen Inhalt mittig haben sowie einen Header und eine Navigationsleiste links?
Nimm ein umschließendes Div, gib ihm eine Breite und setze es mittels margin:auto zentriert. Notiere in diesem Div deinen Header und danach deine Navi. Gib ihr eine Breite und die Eigenschaft float:left. Danach notiere die Angaben für den Inhaltsbereich.
Bin mir nicht sicher, ob es das ist was du wolltest.
HTML
*******<div id="container"> <h1>Ein Header - Gerne auch mit Bild</h1> <ul id="navi_links"> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> </ul> <div id="content"> <h2>Überschrift im Inhaltsbereich</h2> <p>Text im Inhaltsbereich</p> <p>Text im Inhaltsbereich</p> <p>Text im Inhaltsbereich</p> </div> </div>CSS
****div#container { width:90%; margin:auto; } ul#navi_links { width:12em; float:left } div#content { margin-left:13em; }Mit freundlichen Grüßen,
André-
Danke für dieses konstruktive Post...
War zwar nicht so ganz wie ich meinte, aber mit deiner Hilfe und ein paar Versuche später funktioniert es schon gut und die DIV Suppe ist auch weg!
Lg.
Lukas-
Hallo Lukas,
Danke für dieses konstruktive Post...
gern geschehen.
War zwar nicht so ganz wie ich meinte, aber mit deiner Hilfe und ein paar Versuche später funktioniert es schon gut und die DIV Suppe ist auch weg!
sollte es noch Probleme geben, melde dich noch mal.
Mit freundlichen Grüßen,
André
-
-