Aufzählungsmarker vor Navigationbar Links legen

  • Hey Leute!
    Ich würde gerne eine einfache png als Aufzählungszeichen vor jeden Link der Navigation bar legen.
    Da sich meine CSS Kenntnisse zugegebenermassen in Grenzen halten, habe ich auf gut glück versucht, es irgendwo im Header einzufügen (per Firebug), um so die entscheidende Referenz zu finden.

    Als befehl habe ich "list-stlye-image:url('images/...');" verwendet. ist das überhaupt so richtig? :D und kann ich das überhaupt direkt machen in der stlye.css oder muss ich mir da was anderes anschauen?
    Leider hab ich die site gerade noch auf nem testing server laufen, deshalb poste ich hier vorerst den ausschnitt des headers aus der style.css und schaue zu, dass ich die site schnellstmöglich oben habe.
    Gruß Deniz


    /*////////////////////////////////////////////////////////////////////////
    // 04 - Header
    ///////////////////////////////////////////////////////////////////////*/

    #header{
    width: 100%;
    position: relative;
    padding: 0 0 0 0;
    margin: 0;
    background: #83b8cc;
    }

    #header .inside{
    max-width: 62.5em;
    margin: 0 auto;
    position: relative;
    padding: 0;
    }

    #header .inside .top {
    background: rgba(0,0,0,.1);
    padding: 10px 20px 10px 20px;
    border-bottom: 1px solid rgba(0,0,0,.1);;
    }

    #header .inside .top p{
    margin: 0;
    color: #c1dce6;
    }

    #header .inside .bottom {
    padding: 20px 0 20px 0;
    position: relative;
    }

    #logo {
    display: inline-block;
    margin: 0px 0 0px 3%;
    float: left;
    padding: 0;
    }

    #logo h1 {
    margin: 0 !important;
    line-height: 1em !important;
    padding: 0 !important;
    font-size: 1.5em;
    font-weight: bold;
    color: #fff;
    }

    #header h1 {
    font-size: 1.5em;
    color: #fff;
    margin: 0;
    }

    #header h1 a, #header h1 a:hover{
    color: #fff !important;
    }


    /* Top level navigation */

    #header .top .right .sf-menu {
    padding-top: 5px;
    }

    #mainNav{
    right: 3%;
    position:absolute; top:50%; height:20px; margin-top:-10px;
    font-family: Oswald;
    z-index: 300;
    font-size: 30px;
    }

    .sf-menu li, #mainNav li{
    margin: 0 0 0 1.5em;
    display: inline-block;
    padding: 0;

    }

    .sf-menu a, #mainNav ul a{
    line-height: 25px;
    color: #c1dce6;
    font-size: .75em;
    font-weight: bold;
    }

    .sf-menu a {
    font-weight: normal;
    line-height: 15px;
    }

    .sf-menu {
    margin: 0 !important;
    padding: 5px 0 0 0;
    }

    .sf-menu li {
    margin: 0 0 0 15px;
    padding: 0;
    }

    .sf-menu ul a, #mainNav ul ul a{
    line-height: 15px;
    font-weight: normal;
    border-top: none;

    }


    #mainNav ul li.current a,
    #mainNav ul li.current-cat a,
    #mainNav ul li.current_page_item a,
    #mainNav ul li.current-menu-item a,
    #mainNav ul li.current-post-ancestor a,
    .single-post #mainNav ul li.current_page_parent a,
    #mainNav ul li.current-category-parent a,
    #mainNav ul li.current-category-ancestor a,
    #mainNav ul li.current-portfolio-ancestor a,
    #mainNav ul li.current-projects-ancestor a {
    text-decoration: none;
    color: #fff;
    }

    #mainNav ul li.sfHover a,
    #mainNav ul li a:hover,
    #mainNav ul li:hover,
    .menu-top-menu-container ul li.sfHover a,
    .menu-top-menu-container ul li a:hover,
    .menu-top-menu-container ul li:hover {
    text-decoration: none;
    color: #fff;
    }

    /* Second level+ dropdowns */

    #mainNav ul ul {
    padding: 20px 0px 0 0px !important;
    margin-top: -10px;
    background: #83b8cc;
    }

    #mainNav ul ul ul {
    padding-top: 20px !important;
    margin-left: -1.25em;
    margin-top: -5px;
    }

    #mainNav ul ul li {
    float: none;
    background: none;
    margin: 0 5px 10px 15px !important;
    }

    #mainNav ul ul li a {
    padding: 0px 0 10px 0;
    font-weight: normal;
    border: none !important;
    }

    #mainNav ul li.sfHover ul a { color: #7b7b7b!important; }

    #mainNav ul li.sfHover ul a:hover { color: #fff!important; }

    /** arrow **/

    #mainNav .sf-menu a.sf-with-ul {
    position: relative;
    min-width: 1px;
    }

    .sf-sub-indicator {
    position: absolute;
    bottom: 0px;
    display: block;
    width: 100%;
    text-indent: -999em;
    overflow: hidden;
    z-index: 200;
    height: 40px;
    }

    .sfHover .sf-sub-indicator {

    bottom: -10px;
    }

    #mainNav .sf-menu li ul .sf-sub-indicator {
    display: none;
    }

    #mainNav .sf-menu li ul .sfHover .sf-sub-indicator {
    position: absolute;
    top: 0;
    right: -1px;
    left: none;
    display: block;
    }

    .sfHover a.sf-with-ul .sf-sub-indicator {
    height: 30px;
    }

    .children .sf-sub-indicator {
    display: none;
    }

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • hey pixselig!
    vielen dank für den link! im grunde genommen verstehe ich auch, wie ich das einbinde, nur die stelle scheint bei mir iwie falsch zu sein. wollte das einfach in die unordered list reinpacken, funktioniert aber irgendwie nicht :\
    mittlerweile habe ich aber auch die website auf nen server geladen:
    http://www.dlld-fashion.de
    gruß deniz

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!