1. 04-03-2009, 13:02 #1
    Boris Meer
    Boris Meer is offline Particulier
    Berichten
    650
    Lid sinds
    16 Jaar

    [CSS]2 kolommen moeten mee rekken

    hey,

    hier het probleem:

    http://blackhawk.dotbas.net/Swebo/index.html

    je ziet dat de linker kant niet gelijk is met de rechter kant. en dat zal ik graag willen. dat de rechterkant mee groeit met het content zodra het langer wordt.

    code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//NL" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Swebo | design by ReashDesign |</title>
<link href="css.css" rel="stylesheet" type="text/css" /> 
</head>
<body>
<div class="container">
<div class="b-header">
    <div class="logo"></div>
</div>
 
<div class="header">
    <div class="header-left"></div>
    <div class="header-right">
        <div class="nieuws"></div>
    </div>
</div>
<div class="navigatie">
    <div class="menu-left"></div>
    <div class="menu">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="artikelen.html">Artikelen</a></li>
            <li><a href="clipjes.html">Clipjes</a></li>
            <li><a href="filpjes.html">Filmpjes</a></li>
            <li><a href="forum">Forum</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>
</div>
 
<div class="content">
    <div class="left">
        <div class="clipjes">tekst
        </div>
        <div class="poll">tekst
        </div>
        <div class="advertentie">tekst
        </div>
    </div>
    
<div class="mid">
    <div class="intro">
            <p>intro tekst
            <p>tekst
    </div>
    <div class="mededelingen">
        <div class="nieuws1">
            <div class="icon"></div>
            <div class="balk">Nieuws:   Title here</div>
            <div class="schrijver">geschreven door: Boris</div>
            <div class="text"><p>tekst
            <p>tekst</div>
        </div>
        <div class="nieuws1">
            <div class="icon2"></div>
            <div class="balk2">Nieuws:   Title here</div>
            <div class="schrijver">geschreven door: Boris</div>
            <div class="text"><p>tekst
            <p>tekst</div>
        </div>
        <div class="nieuws1">
            <div class="icon"></div>
            <div class="balk">Nieuws:   Title here</div>
            <div class="schrijver">geschreven door: Boris</div>
            <div class="text"><p>tekst
            <p>tekst</div>
        </div>
    </div>
<div class="footer">
    <div class="left-footer"></div>
    <div class="right-footer"></div>
</div>
 
 
</div>
</body>
</html>
    CSS:


    Code:
    body {
    background-image: url(images/back.gif);
    background-repeat: repeat;
    font-family:tahoma, Verdana,'Lucida Grande', Helvetica, sans-serif;
    font-size:13px;
    margin-top:0px;
    margin-left: auto;
    margin-right: auto;
    width:100%;
}
/*header*/
 
.b-header {
    background-image: url(images/header-balk.gif);
    background-repeat: repeat;
    width:1000px;
    height:87px;
}
.header-left {
    background-image: url(images/header-left.gif);
    background-repeat: no-repeat;
    width:603px;
    height:175px;
    float:left;
}
.header-right {
    background-image: url(images/header-right.gif);
    background-repeat: no-repeat;
    width:397px;
    height:175px;
    float:left;
}
 
/*menu*/
 
.menu-left {
    background-image: url(images/left-menu.gif);
    background-repeat: no-repeat;
    width:279px;
    height:37px;
    float:left;
}   
.menu {
    background-image: url(images/menu.gif);
    background-repeat: repeat;
    width:721px;
    height:37px;
    float:left;
}
.menu li {
    float:left;
    margin-left:40px;
    padding-top:8px;
    list-style:none;
}
.menu ul {
    font-size:17px;
}
.menu a:link {
    color: black;
    text-decoration: none;
}
.menu a:visited {
    color: black;
    text-decoration: none;
}
.menu a:hover {
    color: #0099cc;
    text-decoration: none;
}
.menu a:active {
    color: #0099cc;
    text-decoration: none;
}
/*sider*/
 
.left {
    float:left;
}
.clipjes {
    background-image: url(images/left-s.gif);
    background-repeat: repeat;
    width:253px;
    min-height:200px;
    height:auto !important;
    height:200px;
    margin-top:0px;
    margin-left:23px;
    border-left: 1px solid #cccccc; 
    border-right: 1px solid #cccccc; 
}
.poll {
    background-image: url(images/left-s.gif);
    background-repeat: repeat;
    width:253px;
    min-height:100px;
    height:auto !important;
    height:100px;
    margin-top:0px;
    margin-left:23px;
    border-left: 1px solid #cccccc; 
    border-right: 1px solid #cccccc; 
}
.advertentie {
    background-image: url(images/left-s.gif);
    background-repeat: repeat;
    width:253px;
    min-height:200px;
    height:auto !important;
    height:200px;
    margin-top:0px;
    margin-left:23px;
    border-left: 1px solid #cccccc; 
    border-right: 1px solid #cccccc; 
}
 
/*content*/
.mededelingen {
    width:723px;
    min-height:200px;
    height:auto !important;
    height:200px;
    float:left;
}
.intro {
    float:left;
    margin:15px;
    margin-top:25px;
    width:695px;
}
.icon {
    background-image: url(images/icon-nieuws.png);
    background-repeat: no-repeat;
    width:70px;
    height:75px;
    float:left;
    margin-left:20px;
}
.icon2 {
    background-image: url(images/icon-update.png);
    background-repeat: no-repeat;
    width:83px;
    height:78px;
    float:left;
    margin-left:20px;
}
.balk {
    background-image: url(images/med.gif);
    background-repeat: repeat;
    width:620px;
    height:40px;
    margin-top:14px;
    float:left;
}   
.balk2 {
    background-image: url(images/med.gif);
    background-repeat: repeat;
    width:607px;
    height:40px;
    margin-top:23px;
    float:left;
}
.text {
    margin:15px;
}
 
/*footer*/
.footer {
    float:left;
}
.left-footer {
    background-image: url(images/left-footer.gif);
    background-repeat: no-repeat;
    width:279px;
    height:37px;
    margin-top:0px;
    float:left;
    border-bottom: 1px solid #333333;
}
.right-footer {
    background-image: url(images/footer.gif);
    background-repeat: repeat;
    width:723px;
    height:36px;
    margin-top:0px;
    float:left;
    border: 1px solid #333333;
    border-left: 0px;
    border-right:0px;
}

    Weet iemand hoe ik deze wel goed krijg?


    Gr. Boris
    Laatst aangepast door Boris Meer : 04-03-2009 om 13:08
  3. 04-03-2009, 13:05 #2
    Jeroen Burgers
    Jeroen Burgers is offline Particulier
    Berichten
    102
    Lid sinds
    16 Jaar

    Misschien heb je wat aan dit topic: https://www.sitedeals.nl/html-xhtml-a...-met-text.html
  4. 04-03-2009, 13:13 #3
    Boris Meer
    Boris Meer is offline Particulier
    Berichten
    650
    Lid sinds
    16 Jaar

    nee dat is meer hoe je een div laat mee rekken, ik zoek hoe de linkse div mee gaat met het content divje.
  5. 04-03-2009, 13:32 #4
    gast13152
    gast13152 is offline Particulier
    Berichten
    87
    Lid sinds
    16 Jaar

    zet die content in 1 grote div, maak daar dan je 2 divs in (linkse en content).
  6. 04-03-2009, 13:41 #5
    Boris Meer
    Boris Meer is offline Particulier
    Berichten
    650
    Lid sinds
    16 Jaar

    dat heb ik toch al ;)

    Code:
    <div class="content">
    <div class="left">
        <div class="clipjes">tekst
        </div>
        <div class="poll">tekst
        </div>
        <div class="advertentie">tekst
        </div>
    </div>
    
<div class="mid">
    <div class="intro">
            <p>intro tekst
            <p>tekst
    </div>
    <div class="mededelingen">
        <div class="nieuws1">
            <div class="icon"></div>
            <div class="balk">Nieuws:   Title here</div>
            <div class="schrijver">geschreven door: Boris</div>
            <div class="text"><p>tekst
            <p>tekst</div>
        </div>
        <div class="nieuws1">
            <div class="icon2"></div>
            <div class="balk2">Nieuws:   Title here</div>
            <div class="schrijver">geschreven door: Boris</div>
            <div class="text"><p>tekst
            <p>tekst</div>
        </div>
        <div class="nieuws1">
            <div class="icon"></div>
            <div class="balk">Nieuws:   Title here</div>
            <div class="schrijver">geschreven door: Boris</div>
            <div class="text"><p>tekst
            <p>tekst</div>
        </div>
    </div>
    en wat moet ik dan doen als ik het in een grote div heb staan?
  7. 06-03-2009, 21:41 #6
    Jeffrey Kroon
    Jeffrey Kroon is offline Particulier
    Berichten
    330
    Lid sinds
    16 Jaar

    Als ik de layout bekijk, staat alles door elkaar in zowel IE, Firefox Opera en Safari, of ben je op site moment bezig met de html & Css ?

Quick links

Sitedeals

Andere media

Over Sitedeals

  • Sitedeals.nl is de grootste handelswebsite voor website eigenaren. Deel kennis en participeer op het webmasterforum.

Inloggen

Inloggen