HTML interesse |
|
hi,
ik probeer een pagina op te maken met een container, header, navigatiebalk, twee content-kolommen, disclaimer en een footer.
ik wil de linker-contentkolom absoluut postitionen ten opzichte van de content-container die position: relative heeft. t vreemde dat die linkerkolom helemaal niet opschuift..
html-structuur en css hieronder (ik heb voor de id's waarvan ik denk dat ze belangrijk zijn '#####' gezet, kwestie van leesbaarheid hier op t forum),
als iemand de fout(en) vindt, let me know,
thanks,
-----------
de html is ongeveer zoiets:
<div id="container">
<div id="header"></div>
<div id="navigbar"></div>
<div id="content"> => aparte containter voor de content (is dit aan te raden of net niet??)
<div id="news"> => linkerkolom </div>
<div id="rightcolumn"></div>
</div>
<div id="disclaimer"></div>
<div id="footer"></div>
</div>
------
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;
border-collapse: collapse;
background: #ffffff url(http://www.getbasic.be/IMG/elements/headertop.gif) no-repeat bottom center;
}
#headermain {
text-align: center;
height: 40px;
width: 760px;
border-collapse: collapse;
background: #ffffff url(http://www.getbasic.be/IMG/elements/headermain.gif) no-repeat bottom center;
}
#headerbottom {
text-align: center;
height: 10px;
width: 760px;
border-collapse: collapse;
background-color: #ffffff;
background: #ffffff 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;
border-collapse: collapse;
}
#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;
border-collapse: collapse;
background: #ffffff 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 {
width: 400px;
postition: absolute;
left: 70px;
}
#####rightcolumn {
background: #cccccc;
}
/*////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////// links ////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////// */
a:link {
color: #66CCFF;
text-decoration: none;
}
a:visited {
color: #66CCFF;
text-decoration: none;
}
a:hover, a:active {
color: #FF0099;
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;
}
.lightblue {
color: #FF0099;
}
.pink {
color: #FF0099;
}
------------
|