navigationsleiste mit Hintergrundbild

[bibifellow]

Ich habe eine horizontale Navi mit einem dropnmenü
Ich möchte ein Hintergrund png hinter der Navi und ein png hinter das dropdown menü
Bei der horizontalen navi habe ich einen Rand obwohl die png hat keinen Rand.
Bei dem dropdown Menü habe ich links und oben auch einen Rand obwohl die Grafik groß genug ist. Woran könnte das liegen.

 <div id="navibereich">
 <div id="navibereich_innen">
<ul >
    <li><a href="#Beispiel">Seite 1</a></li>
    <li><a href="#Beispiel">Seite 2</a>
      <ul>
        <li><a href="#Beispiel">Seite 2a</a></li>
        <li><a href="#Beispiel">Seite 2b</a></li>
        <li><a href="#Beispiel">Seite 2c</a></li>
      </ul>
    </li>
    <li><a href="#Beispiel">Seite 3</a></li>
    <li><a href="#Beispiel">Seite 4</a></li>
  </ul>
</div></div>

die css datei

  #navibereich
  {	margin-left:-20px;

	  
	  }
  #navibereich_innen
  {
	background-image:url(Image/navi1.png);
	  background-repeat: no-repeat;
    background-position: left  ;

	float: left;
	min-width: 660px;
	max-width: 72em;
  }
#navibereich_innen ul {
    margin: 0; padding: 0;
    text-align: center;

  }

  #navibereich_innen ul li {

    list-style: none;
    float: left;
    width: 10em;
    position: relative;
    margin: 0.4em; padding: 0;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
  }
  * html #navibereich_innen ul li {  /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: -0.4em;
  }
  *:first-child+html #navibereich_innen ul li {  /* Korrektur fuer den IE 7 */
    margin-bottom: -0.1em;
  }

 #navibereich_innen ul li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.7em; left: -0.4em;
	background-color:#060;
		background-image: url(Image/navi2.png) ;
		
  }
  * html #navibereich_innen ul li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
  }
  #navibereich_innen ul li ul li {
	display: block;
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
	background-image: url("Image/navi2.png");
  }

  #navibereich_innen ul a, #navibereich_innen ul span {
    display: block;
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
color:white;
  }
  * html #navibereich_innen ul a, * html #navibereich_innen ul span {  /* nur fuer IE erforderlich */
    width: 100%;
    w\idth: 6.4em;
  }
  #navibereich_innen ul a:hover, #navibereich_innen ul span, li a#aktuell {
  color:#CCC ;
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color:#999; 
  }
  #navibereich_innen ul li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: maroon;
  }

/* Erweiterung zur dynamischen Ein-/Ausblendung */
 #navibereich_innen ul li>ul {
    display: none; top: 1.6em;
  }
 #navibereich_innen ul li:hover>ul, ul#Navigation li>a#aktuell+ul {
    display: block;
  }

  /* Workaround fuer den IE 7 */
  *:first-child+html #navibereich_innen ul ul {
    background-color:silver; padding-bottom:0.4em;
  }

 

[bibifellow]

AW: navigationsleiste mit Hintergrundbild

erledigt lag an

background-position: center ;
ich hatte vorher position left und einen Rand.

 

[patrick_l]

AW: navigationsleiste mit Hintergrundbild

Wie so oft erst einmal der Tipp ein CSS reset zu machen. Das geht sehr ausführlich oder eben für die "wichtigsten" Elemente über den Universal-Selektor (Stern). Damit bringst du alle Browser auf einen Nenner.

* {padding:0; margin:0; border:none; outline:none; list-style:none;}

Auch würde ich den Aufbau deiner Navigation überarbeiten bzw. anders gestalten. Die Div navibereich-innen ist unnötig. Du kannst dem UL doch einen Hintergrund geben und entsprechend anpassen. Die Hovergrafiken dann über die Anker.

<div id="nav">
    <ul>
        <li><a href="#">punkt1</a></li>
        <li><a href="#">punkt2</a></li>
        <li><a href="#">punkt3</a></li>
    </ul>
</div>

Die einzelnen Elemente, also die umliegende Div, die UL usw. im CSS aufrufen und passend formatieren / stylen. Wenn es noch mehr sein darf, verwende die Kurzschreibweise, damit dein CSS übersichtlicher bleibt.

Liebe Grüße, Patrick

 

[bibifellow]

AW: navigationsleiste mit Hintergrundbild

Ein weiteres Problem hat sich eingeschlichen. Wenn ich bei dem Einblenden von 2a und 2b wird die Seite aufgeklappt aber ich kann nicht mit der Maus herunterfahren da ist sie schon wieder eingeklappt. ???