Zur Navigation

Horizontale CSS-Navigation mit background-image ?

1 Geli

Hallo,
ich möchte gerne aus dem unten stehenden Code eine horizontale Navigation bauen. (Habe schon alles mögliche gelesen und ausprobiert - ... display: inline ...- bekomme es aber einfach nicht hin.)
Verdikal funktioniert es prima!
Die gesamte Zelle ist 920 px breit und 31px hoch. Am Anfang sollen drei
Buttons stehen, der Rest wird mit einer Grafik aufgefüllt.

Ich würde mich sehr freuen, wenn mir jemand einen Tipp geben könnte!

ul#menu {
	list-style: none;
	padding: 0px;
	margin: 0px;
}


li#wand a {
background: url(images/button_dunkelblau.gif) no-repeat; 
width: 150x; 
height: 31px; 
display: block; 
outline: none; 
}

li#wand a:hover {
background:url(images/hover_button_dunkelblau.gif) no-repeat;
} 
li#wand a:active {
background: url(images/hover_button_dunkelblau.gif) no-repeat; 
} 

li#maler a {
background: url(images/button_mittelblau.gif) no-repeat; 
width: 150x; 
height: 31px; 
display: block;
outline: none; 
}

li#maler a:hover {
background:url(images/hover_button_mittelblau.gif) no-repeat;
} 
li#maler a:active {
background: url(images/hover_button_mittelblau.gif) no-repeat; 
} 

li#tapez a {
background: url(images/button_petrol.gif) no-repeat; 
width: 150x; 
height: 31px; 
display: block; 
outline: none; 
}

li#tapez a:hover {
background:url(images/hover_button_petrol.gif) no-repeat;
} 
li#tapez a:active {
background: url(images/hover_button_petrol.gif) no-repeat; 
}

17.10.2009 21:20

2 Jörg Kruse

Wie sieht denn das zugehörige HTML aus? und was hat bei deinen bisherigen Versuchen nicht funktioniert? vielleicht kannst du eine Beispielseite verlinken, damit man sich direkt ein Bild machen kann?

display: inline ist eine Möglichkeit. Auf Selfhtml gibt es auch eine Anleitung für eine horizontale Navigation, vielleicht hilft die weiter:

http://de.selfhtml.org/css/layouts/navigationsleisten.htm#horizontal

17.10.2009 22:32

3 Geli

Hallo Jörg,
hier die html-datei und die css-datei.
Meine ganzen Versuche habe ich jetzt mal rausgelöscht.
Mein Problem ist, dass ich die Buttons, die horizontal erscheinen sollen, nicht nebeneinander bekomme. Außerdem sind Listenpunkte da, obwohl ich list style none eingegeben habe.
Die Anleitung aus selfhtml hatte ich schon ausprobiert. Ich kann sie aber einfach nicht für mein Vorhaben umsetzten. Mit „ul#Navigation span“ kann ich gar nichts anfangen.
Ich denke, dass es mit padding und margin zu tun haben muß!?! Kriege es aber einfach nicht in eine Reihe.
Hier der Link zur Beispielseite:
http://freenet-homepage.de/maler-rauschmaier/testseite.html

P.S.: Dass es mit der vertikalen Navigation funktioniert, habe ich übrigens Dir zu verdanken. Das hast Du mir im vergangen Jahr so prima erklärt, dass ich es im Leben nicht mehr vergessen werden.

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-image: url(images/hintergrund2.gif);
	background-repeat: repeat-y;
	background-position: center;
}

ul#navigation {
   list-style: none;
	    }
  
  ul#navigation li {
  list-style: none;
    display: inline;
}  
li#navigation a {
	margin: 0;
	padding: 0;
	width: 150px; 
	height: 31px; 
	display: block; 
	background-image: url(images/button_startseite.gif);
	background-repeat: no-repeat;
	
  }
li#navigation a:hover {
	background-image: url(images/hover_button.gif);
	background-repeat: no-repeat;
	  }
  
  li#referenzen a {
	list-style: none;
	width: 150px; 
	height: 31px; 
	display: block; 
	background-image: url(images/button_referenzen.gif);
	background-repeat: no-repeat;
	
  }


li#referenzen a:hover {
	background: url(images/hover_button.gif) no-repeat; 
  }
  
li#partner a {
background: url(images/button_partner.gif) no-repeat;
    list-style: none;
       margin: 0px; padding: 0px;
	width: 150px; 
height: 31px; 
display: block; 
  }
li#partner a:hover {
	background: url(images/hover_button.gif) no-repeat; 
  }


.navigationsgrafik {
	background-image: url(images/kopfleiste_grau_470x31.gif);
	background-repeat: no-repeat;
	background-position: right top;
	}


leistungen {
	padding: 0px;
}



ul#menu {
	list-style: none;
	padding: 0px;
	margin: 0px;
}



li#wandgestaltung a {
background: url(images/button_dunkelblau.gif) no-repeat; 
width: 150x; 
height: 31px; 
display: block; 
outline: none; 
}

li#wandgestaltung a:hover {
background:url(images/hover_button_dunkelblau.gif) no-repeat;
} 
li#wandgestaltung a:active {
background: url(images/hover_button_dunkelblau.gif) no-repeat; 
} 

li#malerarbeiten a {
background: url(images/button_mittelblau.gif) no-repeat; 
width: 150x; 
height: 31px; 
display: block; 
outline: none; 
}

li#malerarbeiten a:hover {
background:url(images/hover_button_mittelblau.gif) no-repeat;
} 
li#malerarbeiten a:active {
background: url(images/hover_button_mittelblau.gif) no-repeat; 
} 

li#tapezierarbeiten a {
background: url(images/button_petrol.gif) no-repeat; 
width: 150x; 
height: 31px; 
display: block; 
outline: none; 
}

li#tapezierarbeiten a:hover {
background:url(images/hover_button_petrol.gif) no-repeat;
} 
li#tapezierarbeiten a:active {
background: url(images/hover_button_petrol.gif) no-repeat; 
} 

li#innenputze a {
background: url(images/button_dunkelgruen.gif) no-repeat; 
width: 150x; 
height: 31px; 
display: block; 
outline: none; 
}

li#innenputze a:hover {
background:url(images/hover_button_dunkelgruen.gif) no-repeat;
} 
li#innenputze a:active {
background: url(images/hover_button_dunkelgruen.gif) no-repeat; 
} 

li#bodenbelaege a {
background: url(images/button_hellgruen.gif) no-repeat; 
width: 150x; 
height: 31px; 
display: block; 
outline: none; 
}

li#bodenbelaege a:hover {
background:url(images/hover_button_hellgruen.gif) no-repeat;
} 
li#bodenbelaege a:active {
background: url(images/hover_button_hellgruen.gif) no-repeat; 
} 

li#lackieren a {
background: url(images/button_gelb.gif) no-repeat; 
width: 150x; 
height: 31px; 
display: block; 
outline: none; 
}

li#lackieren a:hover {
background:url(images/hover_button_gelb.gif) no-repeat;
} 
li#lackieren a:active {
background: url(images/hover_button_gelb.gif) no-repeat; 
} 

li#fassadengestaltung a {
background: url(images/botton_orange.gif) no-repeat; 
width: 150x; 
height: 31px; 
display: block; 
outline: none; 
}

li#fassadengestaltung a:hover {
background:url(images/hover_button_orange.gif) no-repeat;
} 
li#fassadengestaltung a:active {
background: url(images/hover_button_orange.gif) no-repeat; 
} 

li#waermedaemmung a {
background: url(images/button_hellrot.gif) no-repeat; 
width: 150x; 
height: 31px; 
display: block; 
outline: none; 
}

li#waermedaemmung a:hover {
background:url(images/hover_button_hellrot.gif) no-repeat;
} 
li#waermedaemmung a:active {
background: url(images/hover_button_hellrot.gif) no-repeat; 
} 

li#geruestbau a {
background: url(images/button_rot.gif) no-repeat; 
width: 150x; 
height: 31px; 
display: block; 
outline: none; 
}

li#geruestbau a:hover {
background:url(images/hover_button_rot.gif) no-repeat;
} 
li#geruestbau a:active {
background: url(images/hover_button_rot.gif) no-repeat; 
} 




.grauer_rand {
	width: 150px;
	margin: 0px;
	padding: 0px;
	height: auto;
}
.kontakt {
	background-image: url(images/farbkleckse.jpg);
	background-repeat: no-repeat;
	background-position: right top;
	margin: 0px;
	padding: 0px;
}
<!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>testseite</title>
<link href="rauschmaier.css" rel="stylesheet" type="text/css">
</head>

<body>

<table width="920" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="3" class="kontakt"><img src="images/logo.jpg" alt="Logo Maler Rauschmaier" width="270" height="210"><img src="images/lackieren_header.jpg" alt="Lackieren Maler Rauschmaier" width="430" height="210" class="kontakt"></td>
  </tr>
  <tr>
    <td width="920" colspan="3" background="images/kopfleiste_grau_470x31.gif" class="navigationsgrafik">
    <li id="navigation"><a href="index.html"></a>  
      <li id="referenzen"><a href="referenzen.html"></a>  
    <li id="partner"><a href="partner.html"><br>
    </a></td>
  </tr>
  <tr>
    <td width="150">
    <ul id="menu">
    <img src="images/button_leistungen.jpg" alt="Leistungen Maler Rauschmaier" width="150" height="31" class="leistungen">     
    <li id="wandgestaltung"><a href="wandgestaltung.html"></a></li>
       <li id="malerarbeiten"><a href="malerarbeiten.html"></a></li>
         <li id="tapezierarbeiten"><a href="tapezierarbeiten.html"></a></li>
       <li id="innenputze"><a href="innenputze.html"></a></li>
       <li id="bodenbelaege"><a href="bodenbelaege.html"></a></li>
         <li id="lackieren"><a href="lackieren.html"></a></li>
           <li id="fassadengestaltung"><a href="fassadengestaltung.html"></a></li>
       <li id="waermedaemmung"><a href="waermedaemmung.html"></a></li>
       <li id="geruestbau"><a href="geruestbau.html"></a></li></td>
    <td width="770" colspan="2"></td>
  </tr>
  <tr>
    <td width="150" bgcolor="#f4f4f4" class="grauer_rand"><img src="images/maler_grafik.gif" alt="Grafik Maler bei der Arbeit" width="119" height="256"></td>
    <td colspan="2"><div align="right"></div></td>
  </tr>
  <tr>
    <td colspan="3"><img src="../images/leiste_grau_31x920.jpg" width="920" height="31"></td>
  </tr>
</table>

</body>
</html>

18.10.2009 08:44

4 Pion

http://www.css4you.de/float.html

:)

18.10.2009 10:17

5 Jörg Kruse

Die LIste ist nicht richtig verschachtelt. Die Listenpunkte können niemals selbständig vorkommen, sondern immer nur als Kindelemente einer LIste (<ul>, <ol>)

Außerdem sind Listenpunkte da, obwohl ich list style none eingegeben habe.

Du hast dies für "ul#navigation" definiert, die drei betreffenden Listenpunkte liegen aber nicht innerhalb von '<ul id="navigation">'

Mit „ul#Navigation span“ kann ich gar nichts anfangen.

Das bezieht sich auf alle <span> Elemente innerhalb von '<ul id="Navigation">'

Auf dieser Seite sind die CSS-Selektoren erklärt, mit denen man bestimmte HTML-Elemente ansprechen kann:

http://de.selfhtml.org/css/formate/zentrale.htm

Wichtig sind hierbei vor allem die Formate für Klassen und die Individualformate.

Wenn du das <ul> Element mit der passenden ID einfügst, sollten die von dir definierten Eigenschaften für ul#navigation auch angesprochen werden. Allerdings musst du dann das erste <li> anders bezeichnen, da eine ID nur einmal vorkommen darf, z.B.:

  <tr>
    <td width="920" colspan="3" background="images/kopfleiste_grau_470x31.gif" class="navigationsgrafik">
    <ul id="navigation">
    <li id="startseite"><a href="index.html"></a></li>  
      <li id="referenzen"><a href="referenzen.html"></a></li>  
    <li id="partner"><a href="partner.html"></a></li>
  </ul>
  </td>
  </tr>

18.10.2009 12:18 | geändert: 18.10.2009 12:20

6 Geli

Hallo Jörg,
D A N K E !!!!!
Ich habe den Code nach Deiner Anleitung geändert und im CSS mit "positon absolut" die Buttons an die richtige Stelle gesetzt.

18.10.2009 18:06

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]