Trennlinie in horizontale Hauptnavi, wie?

Moin Leude,

habe da eine Frage zum Thema Webentwicklung.

ich habe eine Trennlinie, mit dem Stil "eingedrückt" als jpg, die für die obere Hauptnavigation gedacht ist. Meine Frage, wie bindet man diese Trennlinie in die Navigation ein, bzw. wie muss das im CSS dargestellt sein.

Freu mich auf Eure Tips

Please also mark the comments that contributed to the solution of the article

Content-Key: 195300

Url: https://administrator.de/contentid/195300

Printed on: April 23, 2024 at 18:04 o'clock

7 Comments

Latest comment

Hallo,

poste am besten mal ein paar Links. Zu deiner Seite und von der Trennlinie, dann kann man sich besser was drunter vorstellen.

Generell <div-Container> mit dem Namen "navigation" oder so erstellen. Dort deine Navigation mit <ul> und <li> erstellen. Im CSS könnte das Ganze dann so aussehen:

.navigation {
width: 500px;
height: 30px;
}

.navigation ul{
    display: inline;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.navigation li {
background-image: url(./trennlinie.jpg);
color: #FFF;
width: 100px;
height: 30px;
}

Gruß

ok, ich versuchs das mal. Ist denn durch den Befehl "background-image: url(./trennlinie.jpg);" gewährleistet, dass der Trennstrich immer rechts neben dem Navilink erscheint. Muss man da nicht noch den Abstand von Trennstrich zu Link definieren?

Hallo,

nein das wäre damit nicht gewährleistet. Dazu müsste ich deine Trennlinie sehen. Das mit dem "background-image: url(./trennlinie.jpg);" würde passen, wenn du ein komplettes Hintergrundsbild pro Menüpunkt hast, wo die Trennlinie rechts mit drauf ist.

Du könntest z.B. auch folgendes machen

list-style-image: url(trennlinie.jpg);

Gruß

Hätte ich ein komplettes Hintergundbild müsste ich doch das Bild auf "repeat" stellen, und dann hätte ich ja in dem Navibutton die Trennlien mehrmals oder ich müsste dem Hintergundbild eine fixte Breite geben, dann würde aber doch das nicht mehr passen, da die Textlinks unterschiedlich lang sind....

Ich versuch das auch mal mit dem list-style

Hallo,

Hätte ich ein komplettes Hintergundbild müsste ich doch das Bild auf "repeat" stellen

mein Code oben ist für jedes <li-Element>. Sprich für jeden einzelnen Menüpunkt. Jedem Menüpunkt habe ich eine Breite von 100px gegeben.

Das was du meinst, wäre wenn man dem <div-Container>/ oder <ul-Container> Navigation ein Hintergrund zuweist.

Gruß

Wenn es nicht unbedingt eine Grafik sein muss, kannst du es auch so machen:

HTML

<div id="navigation">  
    <ul id="navigation">  
    	<li class="first"><a href="#">Eins</a></li>  
        <li><a href="#">Zwei</a></li>  
        <li><a href="#">Hier kommt eine Zahl</a></li>  
        <li><a href="#">Vier</a></li>  
        <li class="last"><a href="#">Fünf</a></li>  
    </ul>
</div>

CSS

#navigation li {
background: #525D69;
border-left: 1px solid #707F90;
border-right: 1px solid #3C444D;
float: left;
list-style:none;
}

#navigation li a {
color: #DFE1E2;
float: left;
padding: 10px 20px;
}

#navigation li a:hover {
background: #C03;
color: #fff;
}

#navigation li a.active {
background: #C03;
color: #fff;
text-decoration: underline;
}

#navigation li.first {
border-left: 0;
}

#navigation li.last {
border-right: 0;
}

Resultat:
http://img1.bildupload.com/af5bc08237ed4b819dab5c1d813aeb2d.jpg
Leider kann man keine externen URL-Bilder einbinden.
Gruß

na das sieht doch schon ganz gut aus. Ich versuch das mal und meld mich wieder. Danke Dir soweit.

German Question Web Development Development

Hotly discussed

Check of ZFW Firewallgleixnerd - 5 Comments

Wireguard VPN on UDM Pro behind Fritzbox - Handshake did not completejstricker - 3 Comments

How to set up and configure a Linux GRE tunnelAlexWisha - 3 Comments