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] padding dynamisch maken mbt sidebar

pc_freak17
2 antwoorden
  • Hoi allemaal,
    Ik ben bezig een site met een header, sidebar en content te maken. Een deel van de pagina's op mijn site zullen echter geen sidebar hebben en ik vroeg me af of dit in 1 css-bestand te verwerken is of dat ik hiervoor 2 losse css-bestanden moet gebruiken.

    Mijn code zit er als volgt uit (de kleuren zijn overigens alleen voor bij het testen om duidelijk onderscheidt te zien):
    [code:1:cb24bf6100]body
    {
    margin:0;
    padding:150 0 0 170 ;
    overflow:hidden;
    }

    div#topbar
    {
    position: absolute;
    top: 0;
    left:0;
    height:140;
    width:100%;
    padding:10 0 0 10;
    background-color:red;
    }
    div#sidebar
    {
    position:absolute;
    top: 150;
    left:0;
    height:100%;
    width:150;
    background-color:yellow;
    margin: 0;
    padding: 10 10 0 10;
    }

    div#main
    {
    height:100%;
    overflow:auto;
    background-color:blue;
    padding:10 0 0 10;
    }

    @media screen{
    body>div#topbar{
    position:fixed;
    }
    body>div#sidebar{
    position:fixed;
    }
    }[/code:1:cb24bf6100]

    Als ik nu de padding van links (1ste getal) voor de body dynamisch kan maken mbt tot de width van de sidebar dan hoef ik geen 2 aparte css-bestanden aan te maken. Weet iemand of dat mogelijk is?
    (niet dat die twee css-bestanden nu zo'n probleem geven, maar ik ben gewoon benieuwd of het kan)
  • Als je de body van de pagina's met sidebar bijv. een class 'smalle-pagina' en de body van de pagina's zonder sidebar een class 'brede-pagina' meegeeft, kun je m.b.v. CSS-specificity pagina's met verschilende layout stylen zonder twee stylesheets aan te maken.
    [code:1:c6394881a8].brede-pagina #main {padding:100px 0 0 10px;}
    .smalle-pagina #main {padding:10px 0 0 10px;}[/code:1:c6394881a8]
    Maar op de manier waarop je nu werkt, zal het niet lukken. Je gebruikt bijv. geen eenheden bij afmetingen.

Beantwoord deze vraag

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