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] kan dit qua css en beeld mooier?

dJeedJee
2 antwoorden
  • Ik wil een blok van vier boxes hebben. Nu heb ik het zo voor elkaar dat het er in IE en FF redelijk goed uitziet. Helaas heb ik wel een stuk wit onderaan. Dat staat een beetje slordig. De css die ik gebruikt heb is
    [code:1:d27629ce39]
    body {
    margin:0px auto 0px auto;
    padding:0px 0px 0px 0px;
    width:800px;
    top: 0px;
    left:0px;
    }

    .linksboven {
    position: relative;
    padding: 0px 0px 0px 5px;
    top: 0px;
    left:0px;
    width:395px;
    height:300px;
    overflow:hidden;
    }

    .rechtsboven {
    position: relative;
    padding: 0px 0px 0px 5px;
    top: -302px;
    left:400px;
    width:395px;
    height:300px;
    overflow:auto;
    }

    .rechtsonder {
    position: relative;
    padding: 0px 0px 0px 5px;
    top: -302px;
    left:400px;
    width:395px;
    height:300px;
    overflow:hidden;
    }

    .linksonder {
    position: relative;
    padding: 0px 0px 0px 5px;
    top: -604px;
    left:0px;
    width:395px;
    height:300px;
    overflow:auto;
    }[/code:1:d27629ce39]

    en de link is resultaat

    Heeft iemand tips om dit mooier te krijgen?
  • Je doet wat rare dingen, zoals het geven van een vaste breedte van 800 pixels aan de body. Dat mag niet. Ook dat relatief positioneren is niet zo netjes.
    Je kunt beter een container maken met daarin de verschillende vlakken. Zo dus:

    [code:1:b30e68689c]
    body
    {
    text-align:center; /* Voor IE5 */
    }
    .container
    {
    margin:0 auto;
    width:794px;
    text-align:left;
    background-color:#FFFFFF;
    }
    .linksboven
    {
    width:395px;
    height:300px;
    background-color:#4040FF;
    border:1px solid #000000;
    float:left;
    overflow:hidden;
    }
    .rechtsboven
    {
    width:395px;
    height:300px;
    border:1px solid #000000;
    float:left;
    overflow:auto;
    }
    .linksonder
    {
    width:395px;
    height:300px;
    border:1px solid #000000;
    float:left;
    overflow:auto;
    }
    .rechtsonder
    {
    width:395px;
    height:300px;
    background-color:#40FF40;
    border:1px solid #000000;
    float:left;
    overflow:hidden;
    }[/code:1:b30e68689c]

    HTML komt er nu zo uit te zien:

    [code:1:b30e68689c]<div class="container">
    <div class="linksboven">linksboven</div>
    <div class="rechtsboven">blabla</div>
    <div class="linksonder">blabla</div>
    <div class="rechtsonder">rechtsonder</div>
    </div>[/code:1:b30e68689c]

Beantwoord deze vraag

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