CSS - Navi Hintergrundbild

Eragon

hi ich hab hier ein css Code für eine navigationsleiste. Leider hab ich keine ahnung wie man da statt der hintergrundfarbe ein bild nehmen kann... bzw. ein anderes Bild beim überfahren mit der maus angezeigt werden kann. könnt ihr mir helfen?

Code

#menu {
width: 100%;
background: #ffff00;
float: left;
}


#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 180px;
float: left;
}


#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #0000ff #0000ff #0000ff #bbb;
margin: 0;
padding: 2px 3px;
}


#menu h2 {
color: #0000ff;
background: solid;
text-transform: uppercase;
}


#menu a {
color: #0000ff;
background: #ffff00;
text-decoration: none;
}


#menu a:hover {
color: #0000ff;
background: #ffff00;
}


#menu li {position: relative;}


#menu ul ul {
position: absolute;
z-index: 500;
}


#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}


div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}


div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

Alles anzeigen

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress, WoltLab & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Wenn du Fragen hast, kannst du dich gerne jederzeit an @Maximilian Rupp wenden

Hinweis:

Eragon

inzwischen hab ichs geschafft ein bild einzufügen nur wie geht das, dass beim überfahren ein anderews bild kommt?

Zwirni

In deinem CSS-Code sehe ich kein Bild. Falls es sich um ein Bild handelt, welches als Hintergrund eingefügt werden könnte wäre das hier ein Weg:

Code

li a { background-image: url(bild.gif); }
li a:hover { background-image: url(bild2.gif); }

Sollte das nicht bei deinem Design gehen bliebe nur der Weg über JavaScript, was jedoch etwas komplexer ist.

Eragon

Also es funktioniert jetzt.
nur ich würde gerne noch erfahren wie man es macht das beim überfahren mit der maus bzw. beim draufklicken der buttens ein anderes bild angezeigt wird.

ich habs so gemacht:

Code

#menu {
width: 100%;
float: left;
}


#menu ul {
list-style: none;
margin: 0;
padding: 0;
height: 33px;
width: 180px;
float: left;
}


#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 0px;
border-style: solid;
border-color: #0000ff #0000ff #0000ff #bbb;
margin: 0;
padding: 0px 0px;
height: 33px;
width: 180px;
}


#menu h2 {
color: #0000ff;
background-image: url(button.png);
text-transform: uppercase;
}


#menu a {
color: #0000ff;
background: #ffff00;
background-image: url(button.png);
text-decoration: none;
}


#menu a:hover {
color: #0000ff;
background: #ffff00;
background-image: url(button.png);
}


#menu li {position: relative;}


#menu ul ul {
position: absolute;
z-index: 500;
}


#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}


div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}


div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

Alles anzeigen

Zwirni

Du musst hier einfach ein anderes Bild nennen:

Code

#menu a:hover {
color: #0000ff;
background: #ffff00;
background-image: url(button.png);
}

Eragon

Danke hat geklappt^^

Eragon

Hallo leider ist ein neues Problem aufgetreten: Irgenwie funktioniert das mit IE nicht, da ich bis jetzt nur firefox genutzt habe habe ich es jetzt erst gemerkt. Was ist der Fehler?

ich nutze das mit dem HTML Code:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>


<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test</title>


<link rel="stylesheet" type="text/css" href="2d-nav-h.css">


<!--[if IE]>
<style type="text/css" media="screen">
 #menu ul li {float: left; width: 100%;}
</style>
<![endif]-->


<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {behavior: url(csshover.htc); font-size: 100%;}
#menu ul li a {height: 1%;} 
}
</style>
<![endif]-->
</head>


<body>


<div id="menu">


<ul>
  [*]<h2>Daten</h2>
    <ul>
		[*][url='#']Schlüsselnummern[/url]
    		        <ul>
       			[*][url='#']GT/E 1[/url]


       			[*][url='#']GT/E 2[/url]
       			[*][url='#']zwei c[/url]

				[*][url='#']zwei d[/url]
 			[/list]



		[*][url='#']Pressemitteilungen[/url]


			<ul>
       			[*][url='#']GT/E 1[/url]


       			[*][url='#']GT/E 2[/url]
       			[*][url='#']zwei c[/url]

				[*][url='#']zwei d[/url]
 			[/list]


		
       [*][url='#']drei ...[/url]
	   		<ul>


       			[*][url='#']drei a[/url]
       			[*][url='#']drei b ...[/url]
					<ul>
       					[*][url='#']drei b i[/url]


       					[*][url='#']drei b ii[/url]
       					[*][url='#']drei b iii[/url]


					[/list]

       			[*][url='#']drei c[/url]
 			[/list]



    [/list]

 [/list]


<ul>
  [*]<h2>Titel 2</h2>
    <ul>
		[*][url='#']eins[/url]
		[*][url='#']zwei ...[/url]


			<ul>
       			[*][url='#']zwei a[/url]




       			[*][url='#']zwei b[/url]
       			[*][url='#']zwei c[/url]
				[*][url='#']zwei d[/url]
 			[/list]



       [*][url='#']drei ...[/url]
	   		<ul>


       			[*][url='#']drei a[/url]
       			[*][url='#']drei b ...[/url]
					<ul>
       					[*][url='#']drei b i[/url]


       					[*][url='#']drei b ii[/url]
       					[*][url='#']drei b iii[/url]


					[/list]

       			[*][url='#']drei c[/url]
 			[/list]



    [/list]

 [/list]


<ul>
  [*]<h2>Titel 3</h2>
    <ul>
		[*][url='#']eins[/url]
		[*][url='#']zwei ...[/url]


			<ul>
       			[*][url='#']zwei a[/url]


       			[*][url='#']zwei b[/url]
       			[*][url='#']zwei c[/url]
				[*][url='#']zwei d[/url]
 			[/list]


		
       [*][url='#']drei ...[/url]
	   		<ul>


       			[*][url='#']drei a[/url]
       			[*][url='#']drei b ...[/url]
					<ul>
       					[*][url='#']drei b i[/url]


       					[*][url='#']drei b ii[/url]
       					[*][url='#']drei b iii[/url]


					[/list]

       			[*][url='#']drei c[/url]
 			[/list]



    [/list]

 [/list]


</div>
</body>
</html>

Alles anzeigen

Zwirni

Was ist denn der Fehler?

Lumen

Junge Junge,
glaub ich würd erstmal den Quellcode aufräumen, diese verschachtelten Listen hauen ja mal übelst rein. 8O
Die h2 kann auch vor die Liste, die li Elemente können auch per class formatiert und eingerückt werden.

Eragon

Zwirni Wenn ich das mit IE öffne kommen nur die 3 buttons mit den überschriften oben wenn ich mit der maus darüber fahre öffnet sich kein menü nach unten.

Lumen Wenn ich die h2 vor die listen setzte gehts gar nicht mehr. Und warum ich die lis mit class formatieren soll versteh ich auch nicht ganz...

Zwirni

Kann ich nicht nachvollziehen. Aus meiner Sicht müssten die Menüs immer ausgeklappt sein. Der Inhalt der Datei 2d-nav-h.css und csshover.htc wäre noch interessant ...

Eragon

Nee eigentlich ist das ein klappmenü...

2d-nav-h.css= Der oben genannte css code

csshover.htc = ein code aus dem internet der dem Internet Explorer die <hover> Anweisungen übersetzt und sorgt für korrekte Ausführung.

Jetzt mitmachen!