KOMPOOS.NL

verticale lijn - CSS

home » css » verticale-lijn-css.html

sitemap


voorbeeld verticale lijnen met puur CSS

css verticale lijnen

uitleg verticale lijnen css

In tegenstelling tot wat veel "web-guru's" beweren, is het wel degelijk mogelijk om met CSS verticale lijnen te maken. De box die rond de tekst staat is geen border om een div, maar zijn gewoon lijnen die "getekend" zijn.

Het voorbeeld spreekt voor zichzelf. Met de stylesheet kan je de verticale (en natuurlijk ook horizontale) lijnen makkelijk "stylen". Met een beetje fantasie kan je maken wat je wilt. Een hint: met CSS3 kan je eenvoudig "gradiënt" toevoegen aan de verticale lijnen.

Hieronder staat een opzetje voor de stylesheet, en dááronder staan de (op deze pagina gebruikte) html-regels. De b-tags staan onder elkaar; maar bij jou op de pagina moeten ze (per onderwerp) achterelkaar(!) worden gezet. Om "verspringen" (in de verschillende browsers) te voorkomen, mag er geen witruimte tussen de tags zitten. De CSS valideert voor 100% en de html5-code is ook geheel valide.

stylesheet voor de verticale lijnen


<style type="text/css">
        b{
                position:relative;
                display:inline-block;
                width:2px;
                height:2px;
                color:inherit;
                background:#808080;
                font-size:2px}
        b.verticale-lijn-4px{
                color:inherit;
                background:#807060;
                font-size:4px;
                width:4px;
                height:4px}
        b.verticale-lijn-6px{
                color:inherit;
                background:#806040;
                font-size:6px;
                width:6px;
                height:6px}
        b.verticale-lijn-8px{
                color:inherit;
                background:#805020;
                font-size:8px;
                width:8px;
                height:8px}
        b.verticale-lijn-10px{
                color:inherit;
                background:#804010;
                font-size:10px;
                width:10px;
                height:10px}    
</style>

html-code voor de verticale lijnen procedure


<h4>css verticale lijnen</h4>
<div style="margin-top:-64px">
        <b style="left:-5px;top:-54px;padding-top:40px;"></b>
        <b style="left:-5px;top:-94px;padding-left:160px;"></b>
        <b style="left:-169px;top:-54px;padding-left:232px;"></b>
        <b style="left:-169px;top:-54px;padding-top:40px;"></b>
        <b class="verticale-lijn-4px" style="left:-159px;top:-54px;padding-bottom:40px;"></b>
        <b class="verticale-lijn-6px" style="left:-149px;top:-54px;padding-bottom:60px;"></b>
        <b class="verticale-lijn-8px" style="left:-139px;top:-54px;padding-bottom:80px;"></b>
        <b class="verticale-lijn-10px" style="left:-129px;top:-54px;padding-bottom:100px;"></b>
</div>
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.