Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

css raadsel! (li object volledige breedte met hover)

[m]
7 antwoorden
  • Ik ben druk bezig een site te maken in xhtml met css en daarvoor gebruik ik een site(van een duits politiebureau oid die uitgeroepen was als beste site) als voorbeeld.
    duitse site

    Nou kwam ik daar iets aparts tegen. Bij het volgende voorbeeld staat het menu, dit werkt heel mooi met een veranderende kleur dmv style sheets. Echter was ik aan het zoeken hoe ze het voor elkaar hebben kregen de gehele balk als link te maken ipv alleen de tekst.(kijk even naar de site als je niet begrijpt wat ik bedoel)
    Ik aan het zoeken, kwam ik er achter dat wanneer ik in onderstaand stukje vode de h3 tag weghaal dat de links alleen bij de tekst werken. Ik snap echt niet hoe dat kan en ik hoop dat iemand mij het kan vertellen.
    html:[code:1:27c1a0a9de]
    <div id="bereichsmenu">
    <h3 class="unsichtbar"></h3>
    <ul class="top">
    <li class="auswahl">Aktuell </li>
    <li><a href="#">Pressemeldungen </a></li>
    <li><a href="#">Newsletter </a></li>
    <li><a href="#">Fahndung </a></li>
    <li><a href="#">Bewerbung </a></li>
    <li><a href="#">Fragen / FAQ </a></li>
    <li><a href="#">Links </a></li>
    </ul>
    </div>
    [/code:1:27c1a0a9de]
    css:[code:1:27c1a0a9de]
    .unsichtbar{
    position:absolute;
    left:-2000px;
    }


    #bereichsmenu {
    position:absolute;
    top:60px;
    left:0;
    width:200px;
    background-color:#899180;
    }

    #bereichsmenu ul.top{
    margin:0;
    padding:0;
    font-size:100%;
    }
    #bereichsmenu a{
    color:#FFF;
    display:block;
    padding:3px 5px 3px 10px;
    text-decoration:none;
    }
    #bereichsmenu a:hover,
    #bereichsmenu a:focus,
    #bereichsmenu a:active{
    background-color:#CBCEBF; /*padding:3px 5px 3px 10px;*/
    color:#000;
    display:block;
    }
    [/code:1:27c1a0a9de]

    Ik hoop dat iemand mij dit kan uitleggen

    PS Ik heb beide code gestript om het een beetje overzichtelijk te houden.
  • http://alistapart.com/articles/taminglists/
  • [quote:796bebe0cf="termin8or"]http://alistapart.com/articles/taminglists/[/quote:796bebe0cf]

    en daar staat toch dat dat werkt met: display:block;
    :D
  • [quote:7f14bd2f02="The Milkman"][quote:7f14bd2f02="termin8or"]http://alistapart.com/articles/taminglists/[/quote:7f14bd2f02]

    en daar staat toch dat dat werkt met: display:block;
    :D[/quote:7f14bd2f02]En daar staat ook een workaround voor IE ;-). Daarnaast is het beter een artikel te lezen dan een site te rippen imo.
  • Helemaal mee eens, ik rip ook niet echt, maar gebruik het als voorbeeld, tik alles zelf en gebruik die site als voorbeeld. Die artikeltjes zijn natuurlijk ook wel makkelijk en gebruik ik zeer zeker ook.
  • [quote:35ef6cc534="Struis"]Helemaal mee eens, ik rip ook niet echt, maar gebruik het als voorbeeld, tik alles zelf en gebruik die site als voorbeeld. Die artikeltjes zijn natuurlijk ook wel makkelijk en gebruik ik zeer zeker ook.[/quote:35ef6cc534]

    En die stylesheet dan? :wink:
    (…/Temp)
    Maareuh, Uitgeroepen tot beste wat precies?
  • geen idee, maar eh stond tijd geleden op tweakers. Ben daar z\elf niet echt bekend maar kreeg het via een collega

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.