1. 09-03-2011, 19:46 #1
    vgorissen
    vgorissen is offline Particulier
    Berichten
    63
    Lid sinds
    15 Jaar

    content over footer

    Beste mede forum leden,

    Ik heb een web pagina gemaakt met een aantal divs:

    header
    opdrachtgever
    breadcrumb
    content
    content1
    content2
    content3 (content 1,2,3 zijn 3 divs die in de div content naast elkaar staan)
    footer
    contact
    social media
    nieuws (contact,social media, nieuws zijn 3 divs die naast elkaar staan in de div footer)

    Het probleem is het volgende: contact, social media en nieuws schuiven naar beneden als ik content hoger maak met een height de div footer blijft staan. Hoe laat ik deze ook mee schuiven? Ik heb hier beneden de HTML en de CSS gezet:

    HTML:
    [<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="stylesheet.css" rel="stylesheet" type="text/css" />
    <title>Untitled Document</title>
    </head>

    <body><div id="container">
    <div id="header">
    <a href="http://www.c-concepts.biz" ><img class="logo" src="logo3.jpg" border="0" width="482px" height="56px" />
    <div id="menu">
    <ul>
    <li><a href="">Partners</a></li>
    <li><a href="">Diensten</a></li>
    <li><a href="">Home</a></li>
    </ul>


    </div>
    </div>

    <div id="opdrachtgevers">
    <p class="opdrachtgevers">
    Opdrachtgevers
    </p>


    <hr />
    </div>

    <div id="breadcrumb">
    <a href="index.html">Home</a> > <a href="diensten.html">Diensten</a> >
    </div>



    <div id="content">

    <div class="contenttekst" id="content1">
    </div>

    <div class="contenttekst" id="content2">
    </div>

    <div class="contenttekst" id="content3"> </div>

    </div>

    <div id="footer">
    <div id="contact"><p class="kopjes">Contact</p>
    <p class="footertekst">
    info<br />
    info<br />
    info<br />
    info<br />
    </p></div>

    <div id="socialmedia"><p class="kopjes">Social Media</p>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a target="_blank" href="http://twitter.com/#!/vgorissen"><img src="https://www.sitedeals.nl/images/twitter.jpg" border="0px" height="35px" width="28px">
    &nbsp;&nbsp;&nbsp;&nbsp;
    <a target="_blank" href="http://www.linkedin.com/in/vincentgorissen"><img src="https://www.sitedeals.nl/images/linkedin.jpg" border="0px" height="39px" width="39px" </a>

    </div>

    <div id="nieuws"><p class="kopjes">Nieuws</p>
    <p class="footertekst">
    Nieuwe website <br />
    Meer diensten beschikbaar <br />
    Samenwerkings verband met <br />
    Personeels uitbreiding <br />
    Nieuwe opdrachtgever <br />
    </p>
    </div>
    </div>



    </div>
    </body>
    </html>]

    CSS:
    [body {}

    a:link {
    color: #A098EA; text-decoration: none; }
    a:hover {
    color: #A098EA; text-decoration: none; }
    a:visited {
    color: #A098EA; text-decoration: none; }
    a:active {
    color: #A098EA; text-decoration: none; }

    #container {
    width:1100px;
    margin:0px auto;
    }

    #container #header {
    height:130px;
    background-color:#F2EDED;
    }

    #container #header #menu {
    height:23px;
    float:right;
    font-family:Arial, Helvetica, sans-serif;
    font-size:19px;
    text-decoration:none;
    margin-top:75px; }

    #container #header #menu ul {
    list-style-type:none;}

    #container #header #menu ul li {
    float:right;
    margin:0px 13px;}

    #container #opdrachtgevers {
    height:120px;
    }

    #container #breadcrumb {
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    padding:10px 10px;
    width:993px;
    }

    #container #content {
    height:130px;
    overflow:visible;
    width:993px;
    margin:13px auto;
    margin-bottom:35px;
    }

    #container #content #content1 {
    overflow:visible;
    float:left;
    width:311px;
    margin-right:30px;
    }

    #container #content #content2 {
    overflow:visible;
    float:left;
    width:311px;
    margin-right:30px;
    }

    #container #content #content3 {
    overflow:visible;
    float:left;
    width:311px;
    }

    /*#container #content #content4 {
    float:left;
    width:205px;}

    #container #content #content5 {
    float:left;
    width:205px;}*/

    #container #footer {
    height:140px;
    background-color:#F2EDED;
    padding: 0px 0px;
    }

    #container #footer #contact {
    float:left;
    margin:0px 188px 0px 65px;
    width:199px;
    height:29px;}

    #container #footer #socialmedia {
    width:142px;
    height:29px;
    float:left;
    margin:0px 188px 0px 10px;
    }

    #container #footer #nieuws {
    float:left;
    width:221px;
    height:29px;
    margin:0px 71px 0px 0px;}



    .opdrachtgevers {font-family:Arial, Helvetica, sans-serif; font-size:23px; color:#A098EA; text-align:center; font-weight:bold;}
    .kopjes {font-family:Arial, Helvetica, sans-serif; font-size:23px; color:#A098EA; font-weight:bold; text-align:left; margin-bottom:12px; margin-top:5px;}
    .footertekst { font-size:13px; font-family:Arial, Helvetica, sans-serif; color:#CCB8B8;}
    hr { color:#F00; height:1px; color:#F2EDED; width:993px;}
    .contenttekst { font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#8891D3;}
    .logo { margin-top:38px; margin-left:5px;}
    .foto { text-align:center;}]
    Laatst aangepast door vgorissen : 14-03-2011 om 13:47 Reden: onoverzichtelijk
  3. 09-03-2011, 20:12 #2
    T.Voskuil
    T.Voskuil is offline Particulier
    Berichten
    79
    Lid sinds
    14 Jaar

    Re: content over footer

    het is een stuk overzichtelijker als je rond de code [CODE] tags plaats
  4. 09-03-2011, 20:32 #3
    Mike Schippers
    Mike Schippers is offline Particulier
    Berichten
    1.137
    Lid sinds
    15 Jaar

    Re: content over footer

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" /> 
<title>Untitled Document</title>
</head>

<body><div id="container">
<div id="header">
<a href="http://www.c-concepts.biz" ><img class="logo" src="logo3.jpg" border="0" width="482px" height="56px" />
<div id="menu"> 
<ul>
<li><a href="">Partners</a></li>
<li><a href="">Diensten</a></li>
<li><a href="">Home</a></li>
</ul>


</div>
</div>

<div id="opdrachtgevers">
<p class="opdrachtgevers">
Opdrachtgevers
</p>


<hr />
</div>

<div id="breadcrumb">
<a href="index.html">Home</a> > <a href="diensten.html">Diensten</a> >
</div>



<div id="content">

<div class="contenttekst" id="content1">
</div>

<div class="contenttekst" id="content2"> 
</div>

<div class="contenttekst" id="content3"> </div>

</div>

<div id="footer">
<div id="contact"><p class="kopjes">Contact</p>
<p class="footertekst">
info<br />
info<br />
info<br />
info<br />
</p></div>

<div id="socialmedia"><p class="kopjes">Social Media</p>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a target="_blank" href="http://twitter.com/#!/vgorissen"><img src="https://www.sitedeals.nl/images/twitter.jpg" border="0px" height="35px" width="28px">
&nbsp;&nbsp;&nbsp;&nbsp;
<a target="_blank" href="http://www.linkedin.com/in/vincentgorissen"><img src="https://www.sitedeals.nl/images/linkedin.jpg" border="0px" height="39px" width="39px" </a>

</div>

<div id="nieuws"><p class="kopjes">Nieuws</p>
<p class="footertekst">
Nieuwe website <br />
Meer diensten beschikbaar <br />
Samenwerkings verband met <br />
Personeels uitbreiding <br />
Nieuwe opdrachtgever <br />
</p>
</div>
</div>



</div>
</body>
</html>

CSS:
body {}

a:link {
color: #A098EA; text-decoration: none; }
a:hover {
color: #A098EA; text-decoration: none; }
a:visited {
color: #A098EA; text-decoration: none; }
a:active {
color: #A098EA; text-decoration: none; }

#container {
width:1100px;
margin:0px auto;
}

#container #header {
height:130px;
background-color:#F2EDED;
}

#container #header #menu {
height:23px;
float:right;
font-family:Arial, Helvetica, sans-serif;
font-size:19px;
text-decoration:none;
margin-top:75px; }

#container #header #menu ul {
list-style-type:none;}

#container #header #menu ul li {
float:right;
margin:0px 13px;}

#container #opdrachtgevers {
height:120px;
}

#container #breadcrumb {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
padding:10px 10px;
width:993px;
}

#container #content {
height:130px;
overflow:visible;
width:993px;
margin:13px auto;
margin-bottom:35px;
}

#container #content #content1 {
overflow:visible;
float:left;
width:311px;
margin-right:30px;
}

#container #content #content2 {
overflow:visible;
float:left;
width:311px;
margin-right:30px;
}

#container #content #content3 {
overflow:visible;
float:left;
width:311px;
} 

/*#container #content #content4 {
float:left;
width:205px;}

#container #content #content5 {
float:left;
width:205px;}*/ 

#container #footer {
height:140px;
background-color:#F2EDED;
padding: 0px 0px;
}

#container #footer #contact {
float:left;
margin:0px 188px 0px 65px;
width:199px;
height:29px;}

#container #footer #socialmedia {
width:142px;
height:29px;
float:left;
margin:0px 188px 0px 10px;
}

#container #footer #nieuws {
float:left;
width:221px;
height:29px;
margin:0px 71px 0px 0px;}



.opdrachtgevers {font-family:Arial, Helvetica, sans-serif; font-size:23px; color:#A098EA; text-align:center; font-weight:bold;}
.kopjes {font-family:Arial, Helvetica, sans-serif; font-size:23px; color:#A098EA; font-weight:bold; text-align:left; margin-bottom:12px; margin-top:5px;}
.footertekst { font-size:13px; font-family:Arial, Helvetica, sans-serif; color:#CCB8B8;}
hr { color:#F00; height:1px; color:#F2EDED; width:993px;}
.contenttekst { font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#8891D3;}
.logo { margin-top:38px; margin-left:5px;}
.foto { text-align:center;}
    Heb het even voor de TS gedaan.
    LET OP! Dit is niet de aangepaste code; maar de gegeven code uit de startpost. Hij is nu overzichtelijker!
  5. 10-03-2011, 15:34 #4
    vgorissen
    vgorissen is offline Particulier
    Berichten
    63
    Lid sinds
    15 Jaar

    Re: content over footer

    Ok bedankt ik wist niet hoe dat moest.
  6. 10-03-2011, 18:46 #5
    Roger Kok
    Roger Kok is offline Particulier
    Berichten
    34
    Lid sinds
    14 Jaar

    Re: content over footer

    Hey vgorissen,

    Je zou kunnen proberen bij #container #content float:left; toe kunnen voegen.

    Gr, Roger
  7. 11-03-2011, 16:29 #6
    vgorissen
    vgorissen is offline Particulier
    Berichten
    63
    Lid sinds
    15 Jaar

    Re: content over footer

    Helaas dat werkt niet. Wat ik zo raar vind de Footer div blijft staan maar in de footer div staan nog 3 divs en die schuiven wel weg, dat vind ik raar.

    Gr Vinnie
    Aanvullend bericht:
    Ik voeg een float:left; toe aan de div footer en probleem opgelost :S
    Laatst aangepast door vgorissen : 18-03-2011 om 23:05 Reden: Automatisch samengevoegd.

Tags voor dit bericht

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