Probleme mit horizontaler Navi rechts

lila_3 · #1 (**permalink**) 11.07.2009, 09:02

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

regloh · #2 (**permalink**) 11.07.2009, 09:12

Guten Morgen,

zunächst einmal hast du deine #nav-ID zweimal vergeben. Einmal für das <div> und einmal für die <ul>.

Desweiteren clearst du falsch. Dein <h1> innerhalb von #logo hat float: right. Somit hat #logo keine Höhe (das <span> ist ja ausgeblendet). Nun gibst du der #navi das clear: right; was aber außerhalb von #logo steht. Das clear muss in #logo. Dann rutscht die #navi auch richtig unter das #logo und du kannst #nav mit float: right; und ohne width nach rechts schieben. Danach dann das clearen nicht vergessen.

lila_3 · #3 (**permalink**) 14.07.2009, 21:36

Hallo,

hat etwas gedauert, aber ich glaube jetzt gehts.

#logo hat das clear:right und eine Höhe bekommen. Und #navi hat sein clear:right behalten zusammen mit float:right. Ohne clear:right rutscht die navi wieder nach oben. Anders hat es nicht funktioniert.

Vielen Dank nochmal.
lila_3

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten	mazzo	CSS	10	05.04.2012 17:32
grafische Navigation horizontal zentrieren, klappt nicht	lila_3	CSS	4	30.11.2010 10:25
Boxen von Navigation und Logo sind zu weit auseinander	lila_3	CSS	2	03.09.2009 23:28
IE verschiebt Navi Menü	macmensa	CSS	7	17.08.2009 16:45
ie. Abstand über horizontaler Navi geht nicht weg.	tifi	CSS	5	21.11.2006 17:17