zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Probleme mit horizontaler Navi rechts

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.07.2009, 09:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.06.2009
Beiträge: 15
lila_3 befindet sich auf einem aufstrebenden Ast
Beitrag Probleme mit horizontaler Navi rechts

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.07.2009, 09:12
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.397
regloh wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.07.2009, 21:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.06.2009
Beiträge: 15
lila_3 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:06 Uhr.