✔ Horizontale Navigation mit Bilder funktioniert nicht.

F

FunkFlex

Mitglied
Hi,
ich hab da mal wieder ne Frage. Ich bastel grad an ner Seite, mit horizintaler Navigation die aus Grafiken besteht und dann mit Rollover Effekt und so.
Nur 1. werden die Grafiken nicht dargestellt obwohl jeder dieser eine eigene ID hat und 2. um zu testen ob sie sich wenigsten horizontal anordnern würden, hab ich den Linktext noch reingeschrieben. Aber es tut sich leider absolut nichts.
Hier mein html:
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>Salon Mutlu</title>
<link rel="stylesheet" href="home_style.css" type="text/css" />
</head>
<div id="wrapper">

<div id="topbox">
    

 <ul id="Navigation">
    <li><a href="index.html" id="navi1" > news </a></li>
    <li><a href="laden.html" id="navi2" > laden</a></li>
    <li><a href="team.html" id="navi3" > team</a></li>
    <li><a href="gaestebuch.html" id="navi4"> gaestebuch</a></li>
    <li><a href="kontakt.html" id="navi5" >kontakt</a></li>
    </ul> 

</div> <!-- endtopbox-->

<div id="metainformation">
  <div id="inner">
  
  </div> <!-- endinner -->
</div> <!--endmeta -->

</body>
</html>

Und hier mein CSS:
Code: 
@charset "utf-8";
/* CSS Document */


#wrapper {
	background-color:#CC3;
	width: 900px;
	height:auto;
	margin-right:auto;
	margin-left:auto;

}
	
#topbox {
	background-color:#fff;
	widht:720px;
	height: 140px;
	margin-left:auto;
	margin-right:auto;
	
}


  #Navigation {
	  width:140px;
	  height:32px;
	  list-style-type:none;
	  text-align:center;
  }
  #navigation li {
	 width:140px;
	 height:32px;
	 display:inline;
	 list-style-type:none;
     
    }

  #navigation a{ 
  width: 140px;
  height:32px;
  list-style:none;
  text-decoration:none;
   }
  
  
#navigation li a#navi1:link {
        background-image: url(news.gif);
        }

#navigation li a#navi1:hover {
background-image: url(news_hov.gif);
}
#navigation li a#navi2:link {
        background-image: url(laden.gif);
        }

#navigation li a#navi2:hover {
background-image: url(laden_hov.gif);
}
#navigation li a#navi3:link {
        background-image: url(Team.gif);
      }

#navigation li a#navi3:hover {
background-image: url(team_hov.gif);
}
#navigation li a#navi4:link {
        background-image: url(gaestebuch.gif);
       }

#navigation li a#navi4:hover {
background-image: url(gaestebuch_hov.gif);
}
#navigation li a#navi5:link {
        background-image: url(kontakt.gif);
      		}

#navigation li a#navi5:hover {
background-image: url(kontakt_hov.gif);
}  

#metainformation {
	background-color:#033;
	width:720px;
	height:auto;
	min-height:300px;
	margin-left:auto;
	margin-right:auto;
}

#inner {
	width:700px;
	height:auto;
	min-height:300px;
	margin-left:auto;
	margin-right:auto;
}

Danke shconmal für eure Hilfe.
Gruß
 
Hi,

dem Inline-Element <a> fehlen hierfür die "Block-Level-Eigenschaften", um die deklarierte Höhe und Breite anzunehmen.

Im "Normalfall" würde dies display:block regeln, da die Elemente aber horizontal ausgerichtet werden sollen, bedienen wir uns hier der float-Eigenschaft:

CSS: 
#navigation a{ 
  width: 140px;
  height:32px;
  list-style:none; /* ist hier sinnfrei, da das a-Element keine Listenzeichen besitzt bzw. erzeugt */
  text-decoration:none;
  float:left;
   }


mfg Maik
 
Is ja echt wahnsinn wie schnell du hier antwortest!:-) Echt cool.
Nur funktionieren tuts leider net.
Andere Lösung vlt.?
Ich hab alles so gemacht wie ichs gelernt hab, nur find ich den Fehler net.....
UNd die Grafiken zeigts leider auch net an....
Gruß
 
CSS unterscheidet strikt zwischen Groß- und Kleinschreibung, d.h. #Navigation ist nicht gleich #navigation.

mfg Maik
 
Wie auch, wenn das Elternelement <ul> genauso breit ist, wie seine beiden Nachfolgeelemente <li> und <a> :suspekt:

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück