Ergebnis 1 bis 3 von 3

Thema: ul mit 2 hintergrundbildern???

  1. #1
    HTML Newbie
    Registriert seit
    07.04.2009
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard ul mit 2 hintergrundbildern???

    Hallo
    ich habe eine ul für eine Unternavigation. Die Navigation ist wie folgt aufgebaut:
    HTML-Code:
    <div id="navigation">
    <ul id="nav_main">
    <li><img src="fileadmin/img/nav_idee_a.png" alt="" />
    
    <ul id="sub_menu"><div id="sub_container">
    <li><a href="#">Fakten und Zahlen</a></li>
    <li><a href="#">Ernährung</a></li>
    <li><a href="#">Bewegung</a></li>
    <li><a href="#">Fittness</a></li>
    </div></ul>
    
    </li>
    <li><img src="fileadmin/img/nav_macher_n.png" alt="" /></li>
    <li><img src="fileadmin/img/nav_programm_n.png" alt="" /></li>
    <li><img src="fileadmin/img/nav_galerie_n.png" alt="" /></li>
    <li><img src="fileadmin/img/nav_referenzen_n.png" alt="" /></li>
    </ul>
    </div>
    Die ul so mit runden Ecken erstellt werden. Ich hab das über das CSS so gelöst:

    Code:
    ul#nav_main {
        margin: 0 0 0 110px;
    }
    
    ul#nav_main li {
        position: relative;
        display: block;
        padding: 0 0 1px 0;
    }
    
    ul#sub_menu {
        position: absolute;
        top: 0;
        left: -110px;
        width: 110px;
        padding: 0 0 4px 0;
        line-height: 13px;
        background: url(../img/hg_subnav_unten.png) no-repeat left bottom;
        font-size: 9px;
    }
    
    #sub_container {
        padding: 4px 0 0 0;
        background: url(../img/hg_subnav_oben.png) no-repeat left top;
    }
    
    ul#sub_menu li {
        display:block;
        height:16px;
        background-color: #e1deb9;
        padding: 2px 4px 2px 4px;
    }
    Das dumme ist nur, dass ich ja für ein xhtml-Dokument das DIV-Tag nicht in der Liste haben darf. Eigentlich bräuchte ich das UL-Tag 2 Hintergrundbilder. Das geht aber nicht.

    Aber ich brauch noch ein Element, wo ich eine Hintergrundbild mit den runden Ecken unterbringen kann. Da das ganze in ein CMS kommt kann ich nicht expliziet das letzte LI-Tag ansprechen.

    Hat mir zufällig jemand einen kleinen Tip, wie man das Problem xhtml konform löst?

    Danke für Eure Mühe

    Grüsse Georg
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru Avatar von driver
    Registriert seit
    10.04.2006
    Alter
    34
    Beiträge
    20.729
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: ul mit 2 hintergrundbildern???

    der div-container is ja auch falsch...

    ähm.. wie sehn die hintergrundbilder denn aus ?
    ises evtl um die liste entsprechend abzuschließen ?

    spontan könntest da einfach unten noch eine li anfügen,
    ohne inhalt, und der dann über ne class die abschlussgrafik
    geben..
    >> die icq-schreiberlinge bitte dies hier beachten



    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    07.04.2009
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: ul mit 2 hintergrundbildern???

    ich habs mal so gemacht ... es scheint zu funktionieren ... der validator jammert zumindest nicht:

    HTML-Code:
    <div id="navigation">
    <ul id="nav_main">
    <li><img src="fileadmin/img/nav_idee_a.png" alt="" />
    <div id="sub_container">
    <ul id="sub_menu">
    <li><a href="#">Fakten und Zahlen</a></li>
    <li><a href="#">Ernährung</a></li>
    <li><a href="#">Bewegung</a></li>
    <li><a href="#">Fittness</a></li>
    </ul></div>
    </li>
    <li><img src="fileadmin/img/nav_macher_n.png" alt="" /></li>
    <li><img src="fileadmin/img/nav_programm_n.png" alt="" /></li>
    <li><img src="fileadmin/img/nav_galerie_n.png" alt="" /></li>
    <li><img src="fileadmin/img/nav_referenzen_n.png" alt="" /></li>
    </ul>
    </div>
    und das CSS:
    Code:
    ul#nav_main {
        margin: 0 0 0 110px;
    }
    
    ul#nav_main li {
        position: relative;
        display: block;
        padding: 0 0 1px 0;
    }
    
    ul#sub_menu {
        padding: 0 0 4px 0;
        line-height: 13px;
        background: url(../img/hg_subnav_unten.png) no-repeat left bottom;
        font-size: 9px;
    }
    
    ul#nav_main li #sub_container {
        position: absolute;
        top: 0;
        left: -110px;
        width: 110px;
        padding: 4px 0 0 0;
        background: url(../img/hg_subnav_oben.png) no-repeat left top;
    }
    
    ul#sub_menu li {
        display:block;
        height:16px;
        background-color: #e1deb9;
        padding: 2px 4px 2px 4px;
    }
    Also das DIV um das UL gemacht ... es schaut zumindest in den Browsern so aus, wie ich es möchte.

    Danke für die Hilfe

    Grüsse aus der Schweiz

    Georg

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •