[css] 2 vlakken komen niet naast elkaar..

[ReseTTim]

ik ben op dit moment bezig met het beter maken van de layout. omdat eerst het probleem was dat mijn #subnavigatie niet tot onderaan de pagina verscheen.. hiervoor heb ik uiteindelijk de oplossing gevonden door gebruik te maken van een container. maar helaas wil dit niet werken zoals ik het wil..



het probleem is zoals je ziet dat het bovenste groene vlak de hoogte bepaald wordt van het aantal links die links staan..

hier wat css code..

Cascading Stylesheet:

body
{
    font-family       : verdana;
    background-color  : #ffffff;
    margin: 0px;
    padding: 0px;
}

#container{
background-color  : #BFE10E; /* tijdelijk kleur nummer van aannemerij*/
position: relative;
margin-left: 0px;
margin-top: 0px;
width: 1000px;
height: 0 auto;
}

#witvlak{
position: relative;
top: 0px;
margin-top: 0 px;
margin-left: 230px;
background-color  : #ffffff;
width: 900px;
height: 0 auto;
}

#title{
  position: relative;
  /*top: 10px;*/
  margin-top: 10px;
  margin-left: 10px;
  color: #BFE10E; /* tijdelijk kleur nummer van aannemerij*/
  font: bold 15px "verdana", arial, helvetica, sans-serif;
  width: 775px;
}

#content{
position: relative;
font: 15px "verdana", arial, helvetica, sans-serif;
margin-top: 10px;
margin-left: 10px;
width: 775px;
height: 0 auto;
}


#subnavigatie{
    background-color  : #BFE10E; /* tijdelijk kleur nummer van aannemerij*/
    left: 0px;
    top: 0px;
    margin-top: 0px;
    padding-left: 25px;
    padding-top: 15px;
    width:195px;
    height: 0 auto;
    position: relative;
}

HTML:

<div id="container">  
 
<div id="subnavigatie">
navigatie links komen hier..
</div>

<div id="witvlak">
        <div id="title">Adres gegevens</div>        

 
<div id="content">
adressen lijst komt hier
 

</div>      
</div>

      
</div>

ik heb al gekeken naar de top, float, width. maar dit was echter helaas niet de oplossing. ook heb ik de volgorde van #subnavigatie en #witvlak omgedraait. maar toen was dus de groene horizontale balk onderaan de pagina.

[Verwijderd]

width: 1000px; <<< logisch dat hij niet zal uitvullen naar het einde van je venster he...

[Blacksnak]

Verwijderd schreef op vrijdag 26 januari 2007 @ 11:13:
width: 1000px; <<< logisch dat hij niet zal uitvullen naar het einde van je venster he...

Probleem van TS gaat ook niet om breedte maar om hoogte van bovenste groene balk. (zo begrijp ik het toch)

[soulrider]

kan er ev. ook wat passend html bij komen ?
(of toch de begin en eind tags en volgorde waarin ze staan met de css verwijzing?)
- staat er al

(ev. linkje naar test-pagina) -> linkje hoeft eigenlijk al niet meer,
ik heb de test code uit je eerste post genomen - wat ik eerst ni gelezen had

want ik vermoed dat de fout zet in gebruik van de volgende:

code:

#subnavigation:

en dan vooral de regel:

code:

height: 0 auto;

daarvan.
- of het relatief plaatsen van alles -
als namelijk je gehele boven kant in die tag zit dan zorgt die ervoor dat de hoogte van die geheel balk automatisch wordt aanpast aan inhoud.

zit alles verdeeld in 3 kolommen dan zou dat beter moeten gaan.

[ Voor 25% gewijzigd door soulrider op 26-01-2007 11:53 . Reden: wat extra info ]

[ReseTTim]

Blacksnak schreef op vrijdag 26 januari 2007 @ 11:16:
Probleem van TS gaat ook niet om breedte maar om hoogte van bovenste groene balk. (zo begrijp ik het toch)

die groene balk is dus de breedte goed.. tenminste dat stuk dat naast de content staat.. echter de #title komt niet bovenaan de pagina te staan.. en dat is op dit moment het probleem..

soulrider schreef op vrijdag 26 januari 2007 @ 11:21:
want ik vermoed dat de fout zet in gebruik van de volgende:

code:

#subnavigation:

en dan vooral de regel:

code:

height: 0 auto;

daarvan.
- of het relatief plaatsen van alles -
als namelijk je gehele boven kant in die tag zit dan zorgt die ervoor dat de hoogte van die geheel balk automatisch wordt aanpast aan inhoud.

zit alles verdeeld in 3 kolommen dan zou dat beter moeten gaan.

http://resettim.nl/intranet/

hier een link om het te testen.. ik ga is kijken naar die height: 0 auto;

die width: 1000px maakt niet uit want dan gaat de schuifbalk onderaan komen..

[ Voor 29% gewijzigd door ReseTTim op 26-01-2007 11:32 ]

[soulrider]

ik heb zelf ondertss ook effe getest, (code van je ts geplekt in enkele bestandjes)

en dan merk ik - spelend met de achtergrond kleuren van je container en je navigatie vlak,
dat de bovenkant van je witvlak steeds even hoog is als de onderkant van je navigatie vlak.

maw: je witvlak staat relatief tegenover je subnavigatie-div ipv relatief tegenover je container.

position: relative; -> steeds relatief ten opzichte van vorig vlak, niet altijd het onderliggend vlak dus.

position: absolute; -> ten opzichte van omvattend element -> ten opzichte van je ondervlak dus.


wat je ev. ook kan doen is de de positioning van je subnav. of witvlak op absolute zetten, dan komt ie wrs goed / beter.
of is het de bedoeling dat dat groene bovenaan blijft ?

probeer dan ev. een ontwerp in kolommen met absolute geplaatste div's
met daarin relatief tegenover elkaar de verschillende delen in de hoogte dan...

[ Voor 55% gewijzigd door soulrider op 26-01-2007 11:51 . Reden: extra test ]

[ReseTTim]

soulrider schreef op vrijdag 26 januari 2007 @ 11:43:
position: relative; -> steeds relatief ten opzichte van vorig vlak, niet altijd het onderliggend vlak dus.

position: absolute; -> ten opzichte van omvattende div. -> ten opzichte van je ondervalk dus.

wat je ev. ook kan doen is de de positioning van je subnav. op absolute zetten, en dan die div toch onderaan plaatsen, dan komt ie wrs goed.
of is het de bedoeling dat dat groene bovenaan blijft ?

thnx het absolute maken van de #subnavigatie was het dus.. de rest is relative

Cascading Stylesheet:

body
{
    font-family       : verdana;
        background-color  : #ffffff;
    margin: 0px;
    padding: 0px;
}


#container{
background-color  : #BFE10E; /* tijdelijk kleur nummer van aannemerij*/
position: relative;
margin-left: 0px;
margin-top: 0px;
width: 1000px;
height: 0 auto;
}

#witvlak{
position: relative;
top: 0px;
margin-top: 0 px;
margin-left: 230px;
background-color  : #ffffff;
width: 900px;
height: 0 auto;
}

#title{
  position: relative;
  /*top: 10px;*/
  padding-top: 10px;
  margin-left: 10px;
  color: #BFE10E; /* tijdelijk kleur nummer van aannemerij*/
  font: bold 15px "verdana", arial, helvetica, sans-serif;
  width: 775px;
}

#content{
position: relative;
font: 15px "verdana", arial, helvetica, sans-serif;
margin-top: 10px;
margin-left: 10px;
width: 775px;
height: 0 auto;
}

#subnavigatie{
    background-color  : #BFE10E; /* tijdelijk kleur nummer van aannemerij*/
    left: 0px;
    top: 0px;
    margin-top: 0px;
    padding-left: 25px;
    padding-top: 15px;
    width:195px;
    height: 0 auto;
    position: absolute;
}

[ Voor 57% gewijzigd door ReseTTim op 26-01-2007 11:53 ]

[soulrider]

gerre gedaan, heb zo zelf ook een tijd zitten vloeken met relatieve en absolute div's in een 'ingewikkelde' pagina (nabouw menu van een belgische digibox)

[Verwijderd]

Blacksnak schreef op vrijdag 26 januari 2007 @ 11:16:
[...]


Probleem van TS gaat ook niet om breedte maar om hoogte van bovenste groene balk. (zo begrijp ik het toch)

GVD, ik moet wat beter de topics lezen
Sorry