Hallo,
ich bin neu hier und habe meine Navigation mit Grafiken dank eurer FAQ ganz gut hinbekommen.
Jetzt sollte sie rechts angeordnet sein. Klappt aber irgendwie nicht.
Pobiert habe ich schon sie mit margin-left nach rechts zu schieben. Und dem #navi ein float right zu geben ist wohl auch keine Lösung?
Im Forum habe ich keine Antworten gefunden. Das Ganze ist noch im Entwurfsstadium, deshalb so bunt...
Ich hoffe ihr könnt mir weiterhelfen.
Hier der Link
molocco index
zur Seite und der Code.
Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>molocco index</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
text-align:center;
}
#container {
width: 1000px;
text-align: left;
margin: 10px auto;
background-image:url(bilder/muster_links.gif);
background-repeat:repeat;
}
#main {
width: 600px;
margin-left: 200px;
background: #FFF;
color: #000;
}
/* Kopfbereich */
#header {
margin-top: 0px;
margin-right: 30px;
margin-left: 30px;
width: 540px;
background:#FFF;
}
#logo {
padding-top : 0px;
}
#logo h1 {
background:url(bilder/logo.gif) no-repeat top left;
margin-top: 20px;
margin-bottom: 2px;
width: 213px;
height: 15px;
float: right;
}
#logo h1 span {
display : none;
}
/* navigation */
#navi {
clear:right;
width: 540px;
}
#navi li{
float:left;
width: 50px;
list-style-type:none;
}
#navi #grafik {
width: 45px;
}
#navi #fotografie {
width: 85px;
}
#navi #kontakt {
width: 65px;
}
#navi #impressum {
width: 85px;
}
#navi a {
display: block;
height: 10px;
width: 100%;
position: relative;
overflow: hidden;
}
#navi span {
position: absolute;
width: 100%;
height: 10px;
top: 0;
left: 0;
background: url(bilder/navi_grafiken/navigation.gif) ;
background-repeat: no-repeat;
}
#navi #grafik a span {
background-position: 0 0;
}
#navi #grafik a:hover span,
#navi #grafik a:active span,
#navi #grafik a:focus span {
background-position: 0 -10px;
}
#navi #fotografie a span {
background-position: -45px 0;
}
#navi #fotografie a:hover span,
#navi #fotografie a:active span,
#navi #fotografie a:focus span{
background-position: -45px -10px;
}
#navi #kontakt a span {
background-position: -130px 0;
}
#navi #kontakt a:hover span,
#navi #kontakt a:active span,
#navi #kontakt a:focus span {
background-position: -130px -10px;
}
#navi #impressum a span {
background-position: -195px 0;
}
#navi #impressum a:hover span,
#navi #impressum a:active span,
#navi #impressum a:focus span {
background-position: -195px -10px;
}
</style>
</head>
</html>
und der html code
HTML-Code:
<body>
<div id="container">
<div id="main">
<div id="header">
<div id="logo">
<h1><span>css Zen Garden</span></h1>
</div>
<div id="navi">
<ul id="navi">
<li id="grafik"><a href="test_navi.html">Grafik<span></span> </a></li>
<li id="fotografie"><a href="tagesthemen.html">fotografie<span></span></a></li>
<li id="kontakt"><a href="#">Kontakt<span></span></a></li>
<li id="impressum"><a href="#">Impressum<span></span></a></li>
</ul>
</div>
<!-- Ende header-->
<!--Beginn Titelbild-->
</div>
<div id="titel">
<div id="skip_zurueck" >
<div id="skip">
<a href="#zurueck"><img src="bilder/pfeil_gespiegelt.gif" alt="" height="8" width="24"/></a> </div>
</div>
<div id="titelbild" ><img src="bilder/grafik_01.gif" alt="" height="260" width="540"/></div>
<div id="skip_vor" >
<div id="skip">
<a href="#zurueck"><img src="bilder/pfeil.gif" alt="" height="8" width="24"/></a>
</div>
</div>
</div>
<div id="bildunterzeile">
New York
</div>
<!--Ende Titelbild-->
<!--Beginn hauptinhalt-->
<!-- Ende main-->
</div>
<!-- Ende container-->
</div>
</body>
Und bitte noch einen Tipp, ob das zuviel Code war oder ob Auszüge besser sind.
Grüße
lila_3