[lowb0b]

Hallo Leute.

Ich möchte in meiner Navigation zwischen jedem Button 2 jeweils 1 Pixel breite Grafiken als Trennlinien einbauen, sodass es wie folgt aussieht:

Statt...:
   

eben so...:
   

Hier dazu mal hier meine "header" Template:

PHP-Code:

<div class="header_menu">
<div class="menu">
         <ul>
         <li><a href="http://drunken-crusade.xe.cx/"><span class="smalltext">Homepage</span></a></li>
         <li class="nav_border_r"></li>
         <li class="nav_border_l"></li>
         <li><a href="{$mybb->settings['bburl']}/index.php"><span class="smalltext">Forum</span></a></li>
         <li class="nav_border_r"></li>
         <li class="nav_border_l"></li>
         <li><a href="{$mybb->settings['bburl']}/chat.php"><span class="smalltext">Chat</span></a></li>
         <li class="nav_border_r"></li>
         <li class="nav_border_l"></li> usw.
         <li><a href="{$mybb->settings['bburl']}/search.php"><span class="smalltext">Suche</span></a></li>
         </ul>
</div>
</div> 


und meine in CSS definierte Class:

PHP-Code:

li.nav_border_r {
              background: url(images/darkfusion/navi_r.png) no-repeat scroll center top transparent;
              width: 1px;
              display: block;
              height: 26px;
      }

      li.nav_border_l {
              background: url(images/darkfusion/navi_l.png) no-repeat scroll center top transparent;
              width: 1px;
              display: block;
              height: 26px;
      } 


Aber nachdem ich alles gemacht habe sieht es wie folgt aus:
   

Link zur Seite: http://drunken-crusade.xe.cx


Ich hoffe ihr könnt mir weiterhelfen.

PS: Geht der [IMG]-Tag nicht ?

[querschlaeger]

Hallo,

nein, [IMG] ist hier deaktiviert. Zu deiner Frage: Bilder würde ich auf keinen Fall für soetwas verwenden. Setze es lieber mit border(-left, -right) um. Ich hätte es mir ja gern selbst angeschaut, aber bei dir läut kein MyBB, sondern irgendwas anderes.

[lowb0b]

Und wieso sollte man dafür keine Bilder verwenden ? Bringt es Nachteile oder wie darf ich das verstehen ? und ja werde mal mit dme Border versuchen und mal später mein Ergebnis mitteilen

EDIT: Joar ich habs nun mal mit left und right Border gemacht und im Grunde den gleichen Effekt erzielen können wie oben beschrieben. Allerdings habe ich noch zwei kleine Fragen.

1. Wenn ich den Code aus dem Template wie folgt in Template einfüge..:

PHP-Code:

<div class="header_menu">
<div class="menu">
         <ul>
         <li><a href="http://drunken-crusade.xe.cx/"><span class="smalltext">Homepage</span></a></li>
         <li><a href="{$mybb->settings['bburl']}/index.php"><span class="smalltext">Forum</span></a></li>
         <li><a href="{$mybb->settings['bburl']}/chat.php"><span class="smalltext">Chat</span></a></li>
         <li><a href="{$mybb->settings['bburl']}/search.php"><span class="smalltext">Suche</span></a></li>
         </ul>
</div>
</div> 


Dann erscheint zwischen jedem Button, also Homepage, Forum, Chat etc. ein Leerzeichen wodurch zwischen dem rechten und linken Border immer bissen Platz ist, wa snicht so cool aussieht.

Wenn ich allerdings den Code wie folgt in template rienhaue..:

PHP-Code:

<div class="header_menu">
<div class="menu">
                         <ul>
                         <li><a href="http://drunken-crusade.xe.cx/"><span class="smalltext">Homepage</span></a></li><li><a href="{$mybb->settings['bburl']}/index.php"><span class="smalltext">Forum</span></a></li><li><a href="{$mybb->settings['bburl']}/chat.php"><span class="smalltext">Chat</span></a></li><li><a href="{$mybb->settings['bburl']}/search.php"><span class="smalltext">Suche</span></a></li><li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><span class="smalltext">Hilfe</span></a></li> <li><a href="{$mybb->settings['bburl']}/memberlist.php"><span class="smalltext">Mitglieder</span></a></li><li><a href="{$mybb->settings['bburl']}/calendar.php"><span class="smalltext">Kalender</span></a></li>
                         </ul>
</div>
</div> 


Dann sind die Leerzeichen weg, aber dann sieht es so unübersichtlich aus :o.

Ach, glatt meine zweite Frage vergessen, wie kann ich zum Beispiel beim ersten Button den Border wegmachen und beim letzten Button ? Da gibts doch sicher irgendwas von wegen was mit "first" und "last" oder ?