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)

Hoe krijg ik een div van van top tot bottom?

Aernout
3 antwoorden
  • Hoi,

    Ik ben druk bezig met het ontwerpen van een website, maar loop nu toch tegen een probleem aan. Surf eens naar de volgende website en bekijk de pagina's die verschijnen als je op de links in het hoofdmenu klikt. Rechts in beeld zie je de 'sidebar' en op enkele pagina's na loopt de div met de paarse achtergrond niet helemaal tot aan de footer. Op sommige pagina's is dat wel zo, maar dat komt omdat de inhoud (tekst) toevallig meer is.

    Nu is mijn vraag: hoe krijg ik de div van boven tot onder zodat de paars kleur op iedere pagina vanaf het menu tot de footer komt.

    Dit is de url van de website: http://www.verrassendvertrouwd.nl/pivot/index.php

    En hieronder de css code die erbij hoort:

    body {
    background: url(images/pageback.png);
    background-align: middle;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-align: center;
    color: #333;
    line-height: 1.4;
    margin: 0;
    }
    #maincontainer {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    background: url(images/maincontainerback.png);
    }
    #container {
    width: 800px;
    border: none;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    background: url(images/contentback.gif);
    }

    #wrap {
    border: 1px solid #111;
    padding: 0;
    }

    #banner {
    padding: 0px;
    margin-bottom: 0;
    margin-top: 0;
    text-align: left;
    background-color: #000;
    background: url(images/header.jpg);
    height: 150px;
    border: none;
    }


    #content {
    padding: 10px;
    margin-right: 220px;

    }

    #sidebar {

    }

    #sidebar-a {
    float: right;
    width: 200px;
    width: 110px;
    width: 200px;
    margin: 0;
    margin-left: 0;
    padding: 5px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 1.2;
    background: url(images/sidebar.jpg);
    background-color: #cccce2;

    }

    #headbar {
    clear: both;
    background: url(images/bg_header.gif);
    height: 20px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    }

    #headbar ul {
    padding: 0px;
    margin: 0;
    float : right;
    }

    #headbar ul li {
    display: inline;
    }

    #headbar ul li a {
    padding-right: 1em;
    padding-left: 1em;
    font-size: 10px;
    text-decoration: none;
    color: #FFFFFF;
    font-style: normal;
    }

    #headbar ul li a:hover {
    background-color : #FFFFFF;
    color : #151559;
    }

    #footer {
    clear: both;
    background: url(images/bg_header.gif);
    height: 15px;
    margin: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    text-align: center;
    color: #FFFFFF;
    }

    #footer a {
    text-decoration: none;
    color : #FFFFFF;
    }

    #footer a:hover {
    text-decoration: none;
    background-color : #FFFFFF;
    color : #151559;
    }

    blockquote {
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    font-style: italic;
    }

    h1 {

    font-variant: small-caps;
    font-size: 225%;
    color: #ccc;
    font-style: normal;
    line-height: 1;
    margin-bottom: 25px;
    }

    h1 span {
    color: #c90;
    font-style: italic;
    font-size: 35%;
    font-variant: normal;
    }


    .footer{
    text-align: right;
    font-weight: normal;
    text-transform : uppercase;
    font-size: 85%;
    color: #333;
    line-height: 1;
    }
    .marginfooter{

    width:200px;
    text-align:center;
    margin-bottom:30px;
    }

    #content h2 {
    padding-left: 20px;
    font-weight: bold;
    font-variant: small-caps;
    font-size: 16px;
    color: #000;
    background: url(images/doc.png);
    background-position: center left;
    background-repeat: no-repeat;

    }

    #content h2 .date {
    font-weight: normal;
    font-variant: small-caps;
    font-size: 11px;
    color: #333;
    line-height: 1;
    }

    #sidebar-a h2{
    font: 12px Verdana, Arial, Helvetica, sans-serif;
    color: black;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 16px;
    padding: 0;
    border-bottom: 1px solid #eee;
    }


    a:visited, a:link {
    color: #151559;
    text-decoration: underline;

    }

    a:hover {
    color: black;
    text-decoration: underline;

    }

    h1 a:visited, h1 a:link, h1 a:hover {
    font-variant: small-caps;
    color: #ccc;
    font-style: normal;
    line-height: 1;
    border-bottom: none;
    }
    .entry {
    background-color: #fff;
    color:#333;
    padding:10px;
    border: 1px #ccc solid;
    text-align:justify;
    }

    .ornament {
    text-align:center;
    width:560px;
    }
    .commentform {
    background-color: #fff;
    border: 1px #ccc solid;
    padding: 10px;
    width: 570px;
    }
    .commentinput {
    border:1px #ccc solid;
    width:300px;
    }

    .searchbox {
    border:1px #ccc solid;
    margin-bottom:5px;
    width:190px;

    }
    .commentbutton, .searchbutton {
    border:1px #000 solid;
    background:#ddd;
    }
    .commentbutton {
    width:140px;
    }
    .searchbutton {
    width:190px;
    }
    #comments {
    margin-left:40px;
    }
    .pivot-image {
    border:1px #ccc solid;
    padding:5px;
    background:#fff;
    }
    #buttonbox a {
    border-bottom:none;
    }
    .badge {
    border:none;
    margin-bottom: 5px;
    }






    /* these styles are for the calendar widget */

    .calendar {
    padding: 1px 5px;
    margin: 0px;
    font-size: 10px;
    }

    .calendarHeader {
    font-weight: bold;
    font-size: 11px;
    color: #000;
    margin:0px;
    padding: 2px 5px;
    }

    .calendartoday {
    background-color: #fff;
    font-weight: bold;
    text-decoration: underline;
    }


    table.calendar {
    /* only the calendar has a line, not the individual cells */
    border: none;
    padding: 0px;
    width: 200px;
    }

    .calendarHeader a, .calendar a {
    font-weight: bold;
    color: #253a69;
    text-decoration: none;
    }

    /* some default styles for the calendar.. */
    .defcalendar {
    font-size: 10px;
    }

    .defcalendar td {
    padding: 1px 4px;
    }

    .defcalendar td:hover {
    background-color: #ff6;
    }

    .defcalendarlink {
    font-size: 10px;
    }

    .defcalendartoday {
    background-color: #ff9;
    border: 1px solid #999;
    font-weight: bold;
    }

    /* JM - removed as an inline style for accessibility */

    .calendarHeaderControl {
    font-size:13px;
    }

    /* ACCESSIBILITY CHANGES - JM 2004/11/26 */

    /* these hide the accessibility tags to stop the layout from changing */

    .pivot-search label { visibility:hidden; display:none; }
    .pivot-search legend { visibility:hidden; display:none; }
    .pivot-search fieldset { border:0; padding:0; margin:0; }
    .pivot-search-result label { visibility:hidden; display:none; }
    .pivot-search-result legend { visibility:hidden; display:none; }
    .pivot-search-result fieldset { border:0; padding:0; margin:0; }
  • Het antwoord is volgens mij te vinden door een artikel te lezen over faux columns. Met een herhalende background-image fake je dan dat de kolom doorloopt naar beneden. (Op moment van schrijven doet hét artikel over faux columns van A List Apart het helaas niet?)
  • [quote:3fa0eae56b="boelieboelie"]Het antwoord is volgens mij te vinden door een artikel te lezen over faux columns. Met een herhalende background-image fake je dan dat de kolom doorloopt naar beneden. (Op moment van schrijven doet hét artikel over faux columns van A List Apart het helaas niet?)[/quote:3fa0eae56b]

    Kijkend naar de website van gwbosma denk ik niet dat de faux columns een volledige oplossing is, want hij heeft ook nog een footer.

    Kijk ook eens hier: Damascus demo van stijlstek + uitleg

Beantwoord deze vraag

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