HTML interesse |
|
hi,
k heb intussen 2 kolommen gemaakt met div's. de linkerkolom is een nieuwslijn, die via php berichten uit n databank ophaalt. na verloop van tijd zal de content dus 'langer' worden en de footer 'overflowen'.
is er een manier om de hoogte van de container zo in te stellen dat hij mee groeit met de content? de hoogte een vaste waarde geven lijkt me niet echt een oplossing.. heb t geprobeerd met {overflow: ... }, maar geen van de 4 mogelijkheden doet wat ik wil.
hieronder nog es mn stylesheet..
thanks,
-------------
body {
background-color: #ffffff;
text-align: center;
margin: 0;
}
/*////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////// id's //////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////// */
#container {
position: relative;
margin: 0 auto;
width: 760px;
}
#headertop {
text-align: center;
height: 10px;
width: 760px;
background: #33CCFF url(http://www.getbasic.be/IMG/elements/headertop.gif) no-repeat bottom center;
}
#headermain {
text-align: center;
height: 40px;
width: 760px;
background: #996633 url(http://www.getbasic.be/IMG/elements/headermain.gif) no-repeat bottom center;
}
#headerbottom {
text-align: center;
height: 10px;
width: 760px;
background: #33CCFF url(http://www.getbasic.be/IMG/elements/headerbottom.gif) no-repeat bottom center;
}
#navigbar {
text-align: left;
width: 760px;
background-color: #f0f0f0;
/*border-bottom-color: #cccccc;
border-bottom-style: solid;
border-bottom-width: thin;*/
}
#content {
position: relative;
font-family: Arial, Verdana, sans-serif;
color: #000000;
width: 760px;
margin-bottom: 10px;
overflow: scroll;
background: #ffffff url(http://www.getbasic.be/IMG/elements/logo_guy_background.gif) no-repeat center;
background-attachment: fixed;
}
#disclaimer {
text-align: center;
height: 20px;
width: 760px;
background-color: #f0f0f0;
border-top-color: #cccccc;
border-top-style: solid;
border-top-width: thin;
}
#bottom {
text-align: center;
height: 10px;
width: 760px;
background: #33CCFF url(http://www.getbasic.be/IMG/elements/bottom.gif) no-repeat bottom center;
}
#navigtekst {
font-family: Arial, Verdana, sans-serif;
font-size: 80%;
font-weight: bold;
background-color: #f0f0f0;
margin-top: 0px;
margin-left: 3px;
margin-bottom: 2px;
padding-top: 3px;
}
#news {
position: absolute;
width: 400px;
left: 3px;
top: 0px;
}
#leftcolumn {
position: absolute;
width: 330px;
background: #ffffff;
left: 410px;
top: 0px;
}
/*////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////// links ////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////// */
a:link {
color: #33CCFF;
text-decoration: none;
}
a:visited {
color: #33CCFF;
text-decoration: none;
}
a:hover, a:active {
color: #996633;
text-decoration: none;
}
/*/////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////// classes ///////////////////////// */
/* ///////////////////////////////////////////////////////////////////// */
.newsheader {
margin-left: 3px;
text-align: left;
font-size: 110%;
font-weight: bold;
border-bottom-color: #cccccc;
border-bottom-style: solid;
border-bottom-width: thin;
margin-bottom: 0px;
}
.newsbody {
margin-left: 3px;
margin-top: 4px;
text-align: left;
font-size: 90%;
font-weight: normal;
}
.blue {
color: #33CCFF;
}
.brown {
color: #996633;
}
.spip {
font-family: font-family: Arial, Verdana, sans-serif;
font-size: 90%;
font-weight: normal;
text-align: left;
}
-----------------
------------- body { background-color: #ffffff; text-align: center; margin: 0; } /*////////////////////////////////////////////////////////////////////// */ /* ///////////////////////////// id's //////////////////////////////// */ /* ///////////////////////////////////////////////////////////////////// */ #container { position: relative; margin: 0 auto; width: 760px; } #headertop { text-align: center; height: 10px; width: 760px; background: #33CCFF url(http://www.getbasic.be/IMG/elements/headertop.gif) no-repeat bottom center; } #headermain { text-align: center; height: 40px; width: 760px; background: #996633 url(http://www.getbasic.be/IMG/elements/headermain.gif) no-repeat bottom center; } #headerbottom { text-align: center; height: 10px; width: 760px; background: #33CCFF url(http://www.getbasic.be/IMG/elements/headerbottom.gif) no-repeat bottom center; } #navigbar { text-align: left; width: 760px; background-color: #f0f0f0; /*border-bottom-color: #cccccc; border-bottom-style: solid; border-bottom-width: thin;*/ } #content { position: relative; font-family: Arial, Verdana, sans-serif; color: #000000; width: 760px; margin-bottom: 10px; overflow: scroll; background: #ffffff url(http://www.getbasic.be/IMG/elements/logo_guy_background.gif) no-repeat center; background-attachment: fixed; } #disclaimer { text-align: center; height: 20px; width: 760px; background-color: #f0f0f0; border-top-color: #cccccc; border-top-style: solid; border-top-width: thin; } #bottom { text-align: center; height: 10px; width: 760px; background: #33CCFF url(http://www.getbasic.be/IMG/elements/bottom.gif) no-repeat bottom center; } #navigtekst { font-family: Arial, Verdana, sans-serif; font-size: 80%; font-weight: bold; background-color: #f0f0f0; margin-top: 0px; margin-left: 3px; margin-bottom: 2px; padding-top: 3px; } #news { position: absolute; width: 400px; left: 3px; top: 0px; } #leftcolumn { position: absolute; width: 330px; background: #ffffff; left: 410px; top: 0px; } /*////////////////////////////////////////////////////////////////////// */ /* ///////////////////////////// links ////////////////////////////// */ /* ///////////////////////////////////////////////////////////////////// */ color: #33CCFF; text-decoration: none; } a:visited { color: #33CCFF; text-decoration: none; } a:hover, a:active { color: #996633; text-decoration: none; } /*/////////////////////////////////////////////////////////////////////// */ /* ///////////////////////////// classes ///////////////////////// */ /* ///////////////////////////////////////////////////////////////////// */ .newsheader { margin-left: 3px; text-align: left; font-size: 110%; font-weight: bold; border-bottom-color: #cccccc; border-bottom-style: solid; border-bottom-width: thin; margin-bottom: 0px; } .newsbody { margin-left: 3px; margin-top: 4px; text-align: left; font-size: 90%; font-weight: normal; } .blue { color: #33CCFF; } .brown { color: #996633; } .spip { font-family: font-family: Arial, Verdana, sans-serif; font-size: 90%; font-weight: normal; text-align: left; } -----------------
|