✔ Grafik zwischen Navilinks

[Denniz]

Hallo Leute,

ich habe eine horizontale Navigation erstellt in der eine Grafik (pipe.gif) zwischen den links angezeigt werden soll: -link-

Ich Grafik soll zwischen <li class="pipe"></li> dargestellt werden, klappt aber nicht. -link-
HTML:

<div id="navi">
  <ul>
    <li ><a href="#">Link1</a></li>
    <li class="pipe"></li>
    <li><a href="#">Link2</a></li>
    <li class="pipe"></li>
    <li><a href="#">Link3</a></li>
    <li class="pipe"></li>
    <li><a href="#">Link4</a></li>
  </ul>
</div>

CSS:

* { 
   margin:0px; 
   padding:0px; 
}

html,body {  
   width:100%; 
   height:100%; 
}

#navi { 
   width:950px; 
   height:21px; 
   background:#6f7b8b; 
}

#navi ul { 
   height:21px; 
   margin-left:262px; 
   width:580px; 
   list-style:none; 
   font-family: Arial, Verdana, Helvetica, sans-serif; 
   font-size: 12px; 
}

#navi ul li { 
   display:inline; 
}

#navi ul li a { 
   color:#FFF; 
   line-height:21px; 
   padding:0px 28px 
}

#navi ul li.pipe { 
   background: url(../_img/pipe.gif) no-repeat; 
   width:1px; 
   height:21px; 
}

#navi a:link, #navi a:visited { 
   color:#FFF; 
   text-decoration: none; 
}

#navi a:hover,#navi a:active { 
   text-decoration: underline; 
}

Was mache ich falsch?

Gruß

 

[Maik]

Hi,

setz es mal auf diese Weise um:

#navi ul li a {
   color:#FFF;
   line-height:21px;
   padding:0px 28px;
   float:left;
}

#navi ul li .pipe {
   background: url(../_img/pipe.gif) no-repeat left;
}

<div id="navi">
  <ul>
    <li ><a href="#">Link1</a></li>
    <li><a href="#" class="pipe">Link2</a></li>
    <li><a href="#" class="pipe">Link3</a></li>
    <li><a href="#" class="pipe">Link4</a></li>
  </ul>
</div>

 

[Denniz]

Hi,

ja das geht sicherlich, aber gibt es auch eine Möglichkeit die Grafiken in diese HMTL
struktur einzubauen:

 <ul>
    <li ><a href="#">Link1</a></li>
    <li class="pipe"></li>
    <li><a href="#">Link2</a></li>
    <li class="pipe"></li>
    <li><a href="#">Link3</a></li>
    <li class="pipe"></li>
    <li><a href="#">Link4</a></li>
  </ul>

Ich habe nämlich das Problem das ich die seite in Typo3 umsetzten will und eine navi ist dort nicht so einfach zu erstellen.

 

[Maik]

Wozu willst du extra "inhaltsleere" Listenpunkte dazwischen schieben, wenn sich das Hintergrundbild direkt und ganz bequem in den Links einbinden lässt?

 

[Maik]

Aber wenn es denn unbedingt sein muss; aus

#navi ul li {
   display:inline;
}

wird

#navi ul li {
   float:left;
}

 

[Denniz]

Ja, du hast ja recht , das es nicht soviel sinn macht inhaltsleere elemente zu haben.
Aber wie gesagt soll die seite in typo3 umgesetzt werden und dazu muß man das HTML welches ausgegeben werden soll erst mit typoscript zusammenbauen.
Ist nicht so einfach.

Mein HTML krieg ich mit typoscript dargestellt aber nicht deins

Aber wenn's wirklich nicht anders geht, ist das dann eher ein typoscript problem das ich dann hier hab.


EDIT: Super daran lag's, du ersparst mir dadurch ne menge typoscript ärger auch wenn's nicht die eleganteste lösung ist.