ComputerBase
Aktuelles

CSS CSS menü mit bilder

S

Steeef

Ensign
Registriert
Juli 2010
Beiträge
184
Servus,

muss für ein Schulprojekt eine Webseite machen. Jetzt wollte ich das CSS Menü mit Bildern gestalten. Wie kann ich das realisieren? Hab schon danach gegoogelt und bin nicht schlau geworden. Kann mir jemand dabei helfen? Ich hab die 6 Bilder bzw. 6 weitere die dann per a:hover erschneinen sollen schon gestaltet. Hier die ersten beiden:

gruß
 

Anhänge

  • ButtonHome1.png
    ButtonHome1.png
    2,5 KB · Aufrufe: 327
  • ButtonHome2.png
    ButtonHome2.png
    2,7 KB · Aufrufe: 303
Code: 
<html>
	<head>
		<style type="text/css">
			#menu {
				width:200px;
				border:1px solid #000000;
				list-style:none;
				padding:0;
			}
			#menu .punkt1 {
				background-color:#7f9f1f;
			}
			#menu .punkt2 {
				background-color:#658173;
			}
			#menu .punkt1:hover {
				background-color:#aaaaaa;
			}
			#menu .punkt2:hover {
				background-color:#bbbbbb;
			}
			#menu li a {
				height:40px;
				width:200px;
				display:block;
			}
		</style>
	</head>
	<body>
		<ul id="menu">
			<li class="punkt1"><a href="#"></a></li>
			<li class="punkt2"><a href="#"></a></li>
		</ul>
	</body>
</html>

Funktioniert definitiv. Änder background-color auf background-image jeweils und verlink die richtigen Bilder, aber das funktioniert zu 110%… zumindest in Chrome, kA wies mit anderen Browsern aussieht
 
Zuletzt bearbeitet:
ok und einfach dieses spielchen wiederholen bis ich meine 6 punkte habe? werde das dann heute abend mal ausprobieren .. vielen dank schon mal.

gruß
 
Genau das und sonst nichts. Kannst ja mal den Quelltext kopieren, ne neue HTML-Datei machen daraus und es dir mal Live anschauen. Ist wirklich sehr simpel.

PS: IE suckt und will das nicht so darstellen.
 
Zuletzt bearbeitet:
ok vielen dank. das das so einfach geht hätte ich nicht gedacht. danke für die arbeit :)

werds später ausprobieren und dann schreiben obs geklappt hat ;)

gruß
 
Funktioniert in allen Browsern:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title>

<style type="text/css">

/*<![CDATA[*/

#navi               {width:1200px; height:40px; margin:50px auto;}
#navi ul            {margin:0; padding:0; list-style:none;}
#navi li            {margin:0; padding:0;}
#navi a             {display:block; font:bold 15px verdana, arial,sans-serif; color:blue; 
                     text-decoration:none;}
#navi li:hover>ul   {visibility:visible;}

#navi li.x-li       {float:left;}
#navi a.x-a         {float:left; padding:0;}
#navi a.x-a .y      {position:absolute; z-index:-10;}

#navi a.x01         {width:200px; height:40px; 
background:url(http://www.bilder-hochladen.net/files/f11h-m.png);}
#navi a.x02         {width:200px; height:40px; 
background:url(http://www.bilder-hochladen.net/files/f11h-m.png);}
#navi a.x03         {width:200px; height:40px; 
background:url(http://www.bilder-hochladen.net/files/f11h-m.png);}
#navi a.x04         {width:200px; height:40px; 
background:url(http://www.bilder-hochladen.net/files/f11h-m.png);}
#navi a.x05         {width:200px; height:40px; 
background:url(http://www.bilder-hochladen.net/files/f11h-m.png);}
#navi a.x06         {width:200px; height:40px; 
background:url(http://www.bilder-hochladen.net/files/f11h-m.png);}

#navi a.x-a:hover   {background-position:0 -40px;}

/*]]>*/
</style>

</head><body>

<div id="navi">

<ul class="x">
<li class="x-li"><a class="x-a x01" href="#x01"><span class="y">Home</span></a></li>
<li class="x-li"><a class="x-a x02" href="#x02"><span class="y">Link 02</span></a></li>
<li class="x-li"><a class="x-a x03" href="#x03"><span class="y">Link 03</span></a></li>
<li class="x-li"><a class="x-a x04" href="#x04"><span class="y">Link 04</span></a></li>
<li class="x-li"><a class="x-a x05" href="#x05"><span class="y">Link 05</span></a></li>
<li class="x-li"><a class="x-a x06" href="#x06"><span class="y">Link 06</span></a></li>
</ul>

</div>

</body></html>


CSS ist -zum besseren Verständnis- [noch] nicht zusammengefasst.



BS
 
servus,

bei mir zeigt es zwar das menü in dreamweaver an aber sobald ich das ganze im firefox starten möchte sehe ich nur einen kleinen schwarzen balken. hier sind die beiden fotos ..

CSS sieht so aus:
HTML: 
#menu {
width:200px;
border:1px solid #000000;
list-style:none;
padding:0;
}
			
#menu .punkt1 {
background-image: url(Bilder/ButtonHome1.png);
}

#menu .punkt2 {
background-image: url(Bilder/ButtonJSBell1.png);
}

#menu .punkt3 {
background-image: url(Bilder/ButtonErfin1.png);
}

#menu .punkt4 {
background-image: url(Bilder/ButtonQPhy1.png);
}

#menu .punkt5 {
background-image: url(Bilder/ButtonQuellen1.png);
}

#menu .punkt6 {
background-image: url(Bilder/ButtonsImpress1.png);
}

#menu .punkt1:hover  {
background-image: url(Bilder/ButtonHome2.png) ;
}

#menu .punkt2:hover, #menu .punkt2:active, #menu .punkt2:focus {
background-image: url(Bilder/ButtonJSBell2.png) ;
}

#menu .punkt3:hover, #menu .punkt3:active, #menu .punkt3:focus {
background-image: url(Bilder/ButtonErfin2.png) ;
}

#menu .punkt4:hover, #menu .punkt4:active, #menu .punkt4:focus {
background-image:  url(Bilder/ButtonQPhy2.png ;
}

#menu .punkt5:hover, #menu .punkt5:active, #menu .punkt5:focus {
background-image: url(Bilder/ButtonQuellen2.png) ;
}

#menu .punkt6:hover, #menu .punkt6:active, #menu .punkt6:focus {
background-image: url(Bilder/ButtonsImpress2.png);
}			
#menu li a {
height:40px;
width:200px;
display:block;
}

HTML sieht so aus:
HTML: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unbenanntes Dokument</title>
<link href="menue.css" rel="stylesheet" type="text/css">
</head>
<body>
  <ul id=menu>            	   <li class="punkt1"> <a href="index.html" target="_parent" ></a></li>
			    			   <li class="punkt2"> <a href="jsb.html" target="container2"></a></li>
                 			   <li class="punkt3"> <a href="erfindungen.html" target="container2"></a></li>
                 			   <li class="punkt4"> <a href="quantenphysik.html" target="container2"></a></li> 
                			   <li class="punkt5"> <a href="quelle_impressum.html" target="container2"></a></li>
                               <li class="punkt6"> <a href="quelle_impressum.html" target="container2"></a></li>
  </ul>
</body>
</html>
 

Anhänge

  • no1.PNG
    no1.PNG
    9,8 KB · Aufrufe: 301
  • no2.PNG
    no2.PNG
    29,5 KB · Aufrufe: 305
jetzt sieht das ganze so aus.. :( liegt es vllt am .png?
 

Anhänge

  • no3.PNG
    no3.PNG
    34,7 KB · Aufrufe: 291
  • no4.PNG
    no4.PNG
    16 KB · Aufrufe: 263
Dann lad das mal hoch und dann kann man das mal live testen.
 
den code und die html datei hab ich hochgeladen in meinem beitrag .. brauchst du die bilder auch?
 
Dein HTML ist z.B. nicht komplett. Bei einer Bildernavigation brauche ich logischerweise auch die Bilder und das alles selbst zusammen zu stückeln ist mir ehrlich gesagt zu Zeit aufwendig.
Lad das Beispiel lauffähig hoch und wenn du dann dort das Problem siehst, dann poste den Link.


Ich würde dir allerdings trotzdem raten nach der FAQ von vorne anzufangen.
 
hab nicht die möglichkeit die webseite hochzuladen. was fehlt denn in der html datei?
stimmt die css den immerhin?

gruß
 
ich kapiere das nicht mit dem hochladen. und das mit dem doctype sollte doch nur mal auch keine probleme machen oder nicht? ich will die ja nicht hochladen ..
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

D
CSS CSS Menü mittig darstellen
Antworten
16
Aufrufe
3.952
netzgestaltung
netzgestaltung
R
Bilder Anordnen in CSS und noch ein paar kleinigkeiten.
Antworten
5
Aufrufe
3.633
Rockcrusher
R
B
Advanced Menü im Bios verschwunden (insydeh20 setup utility 5.0) Acer
Antworten
2
Aufrufe
11.064
iTzZent
iTzZent
S
CSS Menu mit data-toggle in Bootstrap
Antworten
9
Aufrufe
1.630
racer320kmh
racer320kmh
T
[TypoScript] Menü mit Bilder aus Seiteneigenschaften (Ressourcen)
Antworten
0
Aufrufe
1.953
Teisi
T
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 177 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz