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)

3 column CSS: Holy Grail of toch mogelijk

Ger
2 antwoorden
  • Dear all,

    Met deze css kom ik een heel eind echter als ik in de rechterkolom ele tekst plaats en een border-bottom meegeef.. wordt op 60% van de hoogte al de border geplaats.. niet goed dus.. iemand een tip, idee?



    [code:1:2ee20064ef]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    <html>
    <head>
    <title></title>

    <style type="text/css">
    <!–

    /* CSS 3 column lay-out, sizeable */

    /* general tags and classes */

    * {
    margin: 0px;
    padding: 0px;
    font-family: Verdana, Arial, Helvetica;
    font-size: 1em; /* don't edit */
    color: #062340;
    }

    html {
    font-size: 62.5%; /* don't edit */
    line-height: 1.8em;
    }

    html, body {
    height: 100%;
    min-height: 100%;
    }

    body {
    font-size: 1.12em; /* edit here global, 1em is 10px in alle browsers */
    }

    #contentWrap {
    border-top: 1px solid #062340;
    padding: 5px;
    background-color: #F0E68C;
    display: table;
    }

    #wrap {
    display: table-row;
    }

    #left,
    #middle,
    #right,
    #content {
    display: table-cell;
    vertical-align: top;
    }

    * html #left,
    * html #middle,
    * html #right,
    * html #content {
    margin-bottom: -100000px;
    padding-bottom: 100000px;
    float: left;
    }

    *+html #left,
    *+html #middle,
    *+html #right,
    *+html #content {
    height: 100%;
    float: left;
    }

    #left {
    background-color: #ff78ce;
    width: 10em;
    padding: 0.5em;
    border: 1px solid gray;
    }
    #middle {
    background-color: #fc2ffd;
    width: 30em;
    padding: .5em;
    border-bottom: 1px solid lime;
    border-top: 1px solid lime;
    }
    #right {
    background-color: #fffff0;
    width: 15em;
    padding: .5em;
    border: 1px solid gray;
    }

    p {
    color: #0F82EC;
    }

    –>
    </style>
    </head>

    <body>


    <div id="contentWrap">
    <div id="wrap">

    <div id="left">Eros feugiat iusto luptatum </div>

    <div id="middle">With by from if it ears out love do with you a you, worry, to high. And you out to from lend a get alone from, you try my help and little. A a would is lend up do what i i to the, away what on, do by help if. Would your out get own high you a are little to, high by sing, sad. Be my help lend. Key get, be alone, are because, my, of a, tune song on by, you friends a help a do if. You me you i from you try, no little i the from i'll song sang out, your your. Going i feel and help and my key. From feel to try tune tune your i'll, i, my end, friends friends you it by you. I of sing stand a and friends with with, you high on, and you little out the. Do my from from, you try my help and little no a would is. Does up do what i i. </div>

    <div id="right">Veniam ut ullamcorper aliquip in eu esse eum duis tincidunt. Iriure nostrud dignissim vulputate praesent, nibh at vero, nisl. Ipsum molestie aliquam vel ad ut, vel vel, ullamcorper duis feugiat enim iriure lobortis ut. Lorem exerci vero velit eum dolore consequat veniam quis duis ipsum vero quis hendrerit delenit magna. Lobortis suscipit accumsan consequat hendrerit, dolore, tincidunt tation odio iriure amet wisi odio nostrud te nulla. Dolor aliquip minim. Nostrud velit volutpat magna blandit, blandit amet sed veniam blandit suscipit ea vero nibh dolore. In ea suscipit, ad, volutpat augue. Dolore elit, vulputate tation augue aliquip. Nonummy et ut, facilisi lobortis nulla ut accumsan. Ut, iusto nostrud at vel consequat dolor autem vel praesent sit et ullamcorper ad ut qui feugait erat at. Eu iusto esse eu. Minim vel ad ex feugait vel nulla lobortis ut ullamcorper esse luptatum dolor aliquam, sit. Aliquip eum at ullamcorper. Vel minim vulputate veniam, dolor, nostrud ea feugiat nulla molestie, minim nonummy nulla dolore tincidunt consectetuer. Enim facilisi ipsum ea, ut, at qui blandit suscipit accumsan. Ex vel blandit elit dolor, ea elit suscipit nisl blandit hendrerit luptatum wisi wisi, et dolore qui illum. Dolor duis feugiat velit consequat. Facilisi sed wisi nulla odio te illum duis. Et accumsan velit illum molestie consequat ipsum molestie dolore duis ut ullamcorper facilisi exerci iusto blandit.</div>

    </div>
    </div>


    </body>
    </html>
    [/code:1:2ee20064ef]
  • Zou je kunnen uitleggen (of liever: illustreren d.m.v. een plaatje) wat je wilt bereiken?

    Verder zit je CSS vol dingen die je beter niet zou moeten gebruiken, zoals * html. Maak een stylesheet die door elke moderne browser kan worden gelezen en behandel afwijkingen in een IE-only stylesheet, maar zet geen hacks in je default stylesheet. Overigens, bijzondere selectors zoals de 'direct adjacent combinator' werken niet in IE6.

Beantwoord deze vraag

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