KOMPOOS.NL

css menu (karakter-achtergrond)

home » css » css-menu-character-background.html

sitemap


voorbeeld css menu (met karakters als achtergrond)

uitleg css-menu met character achtergrond

Hierboven kan je duidelijk zien wat de procedure 'doet'. Voor wat 'ideetjes' aangaande de ascii, kan je op de http://kompoos.nl/manuals/ascii/karakter-referentie-9984-10175.html kijken. Plaats de stylesheet in de head-sectie van jouw pagina, en de html-code in de body-sectie van jouw pagina. De procedure valideert op html5 en de CSS.

html code van dit css menu voorbeeld


<ul id="css-menu">
        <li>
                <a href="/css/css-menu-character-background.html"><span>&#10048;</span>css menu</a>
        </li>
        <li>
                <a href="/css/css-menu-character-background.html"><span>&#10048;</span>character</a>
        </li>
        <li>
                <a href="/css/css-menu-character-background.html"><span>&#10048;</span>background</a>
        </li>
        <li>
                <a href="/css/css-menu-character-background.html"><span>&#10048;</span>super snel</a>
        </li>
</ul>
<div class="clear_all"></div>

stylesheet voor het css menu met karakter achtergrond


<style type="text/css">
        #css-menu,#css-menu ul{
                list-style-type:none}
        #css-menu{
                margin:10px 0 80px 0;
                position:relative}
        #css-menu li{
                float:left}
        #css-menu a,#css-menu a:visited{
                font-weight:bold;
                display:block;
                width:120px;
                height:8em;
                line-height:8em;
                text-decoration:none}
        #css-menu a:hover{
                color:#050
                background:inherit}
        #css-menu a:active,#css-menu a:active{
                color:#a00;
                background:inherit}
        li span{
                font-size:8em;
                font-weight:normal;
                position:absolute;
                top:0;  
                color:#ddffdd;
                background:inherit;
                z-index:-1}
        .clear_all{
                clear:both}
</style>
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.