login  Naam:   Wachtwoord: 
Registreer je!
 Forum

postitioning: wat doe ik fout?

Offline fluxxoid - 20/01/2005 21:31
Avatar van fluxxoidHTML 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;
}

------------

4 antwoorden

Gesponsorde links
Offline remy - 20/01/2005 21:49
Avatar van remy PHP ver gevorderde de containerdiv moet relatieve geposittioneerd worden, alles wat daarin staat moet absolute gepositioneerd worden
Offline fluxxoid - 20/01/2005 21:55
Avatar van fluxxoid HTML interesse hmm, dus ook die 'contentcontainer' zelf? oki, k probeer t es;
Offline remy - 20/01/2005 21:56
Avatar van remy PHP ver gevorderde alleen de eerste -> tutorial
Offline fluxxoid - 20/01/2005 22:20
Avatar van fluxxoid HTML interesse lol, was n typo (postition opv position).. (was van die tutorial vertrokken hoor)

nu heb k wel n ander probleem, namelijk dat de content 'buiten' structuur valt, of: div's die lager staan in de html, komen onder de content terecht, terwijl die content die lagere div's (disclaimer en footer) naar beneden zou moeten duwen.. t lijkt wel of ie niet in de content-container zit..

enig idee hoe ik dit gefixt krijg?
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.222s