1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  2. Unsere jährliche Weihnachts-Banner-Aktion hat begonnen! Wir freuen uns auf viele, viele kreative Vorschläge.
    Mehr dazu könnt Ihr hier nachlesen: Weihnachtsbanner 2016

    Information ausblenden

Navigation per CSS um Trenner erweitern

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von Mauki, 18.08.08.

  1. Mauki

    Mauki Finkenwerder Herbstprinz

    Dabei seit:
    19.12.05
    Beiträge:
    470
    Wie kann ich den meine obere Navigation (Startseite, Kontakt ...) per CSS um einen Trenner "|" erweitern.

    Navigation aktuelle Seite --> Die Links stehen direkt im Code
    Navigation Entwurf neue Seite --> Die Links werden von WP erzeugt
     
  2. Slashwalker

    Slashwalker Winterbanana

    Dabei seit:
    15.05.06
    Beiträge:
    2.190
    Code:
    .navi_oben a:after{
    content:"|";
    }
    
    Aber der IE 6 macht da soweit ich weiß nicht mit :( , zudem erzeugt das auch hinter "Intern" einen |
     
  3. el caramba

    el caramba Doppelter Prinzenapfel

    Dabei seit:
    04.08.07
    Beiträge:
    441
    am schnellsten in dem du aus: Startseite ein Startseite | machst

    haste ein plugin etc installiert oder missbrauchst du einfach das blog als cms?
     
  4. MasterofDistres

    MasterofDistres Kleiner Weinapfel

    Dabei seit:
    07.12.06
    Beiträge:
    1.139
    Als schnelle Lösung würde ich einmal bei

    Code:
    .navi_oben li {
        display: inline;
        [B]border-right: 1px solid #fff;
        padding-right: 5px;[/B]
    }
    hinzufügen und folgendes für den letzten Punkt, um den Rahmen dort wieder zu entfernen:
    (Klassen-Selektor ggfs. ändern)

    Code:
    li.page_item.page-item-55 {
    	border-right: none;
    	padding-right: 0px;
    }
    In CSSEdit (d.h. Webkit) hat es jedenfalls den gewünschten Effekt zur Folge gehabt, in FF /IE konnte ich's auf die schnelle nicht testen ;)
     
  5. el caramba

    el caramba Doppelter Prinzenapfel

    Dabei seit:
    04.08.07
    Beiträge:
    441
    a:hover:after { content: " ]";}
    a:focus:after { content: " ]";}

    die kann der ie soviel ich weiß
     
  6. Mauki

    Mauki Finkenwerder Herbstprinz

    Dabei seit:
    19.12.05
    Beiträge:
    470
    naja das ist nicht so perfekt ;)

    Ja hab auch Plugins installiert, z.b pageMash oder Page Link Manager

    @MasterofDistres
    hab mal deine Lösung probiert. Auf dem PC sieht es in Safari spitze aus, in FF ist am Anfang noch ein Strich und im IE ist das grausig ;)
     
  7. Mauki

    Mauki Finkenwerder Herbstprinz

    Dabei seit:
    19.12.05
    Beiträge:
    470
    Mit dieser Lösung klebt der Strich direkt am Link o_O
     
  8. Bajuware

    Bajuware Oberösterreichischer Brünerling

    Dabei seit:
    23.04.08
    Beiträge:
    707
    Ich würds auch über border-right machen, zusätzlich noch als block, die Höhe kleiner als die line-height und das entsprechende padding rein. Dann ist der Strich kleiner als die Schrift, was wahrscheinlich ein bisserl besser aussieht.
     
  9. Mauki

    Mauki Finkenwerder Herbstprinz

    Dabei seit:
    19.12.05
    Beiträge:
    470
    @Bajuware
    Wie würde da der passenden Code dafür aussehen?

    Im FF ist aber bie border-right auch noch ein Strich vor Startseite. Wie bekommt man das den weg?
     
  10. Bajuware

    Bajuware Oberösterreichischer Brünerling

    Dabei seit:
    23.04.08
    Beiträge:
    707
    gib dem ersten Menüpunkt, deiner Startseite einfach ne weitere Klasse mit auf den Weg, die ein entsprechend den Border entfernt. Alternativ kannst du das ganze ja auch noch mittels Hintergrundbild gestalten um das ganze etwas aufzupeppen.

    Beispiel:

    .deineklasse { display: block; height: 20px; padding: 0 10px; background: #fff url(../deinbild.gif) top right no-repeat; line-height: 20px; font-family: ...; color: #fff; font-size: 12px; text-decoration: none; }

    für den letzten Menüpunkt dann entsprechend

    .deineklassezwei { background: #fff; }

    da display block könntest du jetzt auch noch ein:

    .deineklasse:hover, .deineklassezwei:hover { background: #f5f5f5; color: green; font-weight: bold; }

    oder ähnliches stylen.
     
  11. Mauki

    Mauki Finkenwerder Herbstprinz

    Dabei seit:
    19.12.05
    Beiträge:
    470
    Hab jetzt mal mit folgendem Code probiert und im Safari/FF sieht es gut aus. IE muß ich morgen mal checken!

    Bekommt man die Trenner noch ein wenig kleiner?

    Code:
    .navi_oben li {
        display: inline;
        border-right: 1px solid #fff;
        padding-right: 5px;
    	}
    
    li.page_item.page-item-60 {
    	border-left: none;
    	padding-right: 0px;
    	}
    
    li.page_item.page-item-55 {
    	border-right: none;
    	padding-right: 0px;
    	}
       
     

Diese Seite empfehlen