aanpasbare site

[stykurgh]

Hallo,

Ik heb een site, alleen deze heeft overlappende div's. Ik heb dit gedaan met een absolute positie en dan z-index etc. Maar nu wil ik dat mijn content met tekst groter wordt als er meer tekst in komt. Maar hoe doe ik dit? want door de posities staat de onderkant van de site dan niet meer goed.

 

[csshunter]

Hoi stykurgh,
Dan denk ik dat je afscheid moet nemen van de absolute posities, en alles met floats moet organiseren.

• Zie dit topic op het forum, en de twee voorbeelden in reactie nr. #7.

Met vriendelijke groet,
CSShunter

 

[stykurgh]

oke maar hoe geef ik dan aan welke div boven op moet liggen? Want z-index werkt alleen bij ap toch?

 

[csshunter]

Nee hoor:

• In het algemeen bepaalt de volgorde van de div's in de html wie bovenop komt.
• Wil je daarvan afwijken, dan moeten de div's een met name genoemde position krijgen (die ook {position:relative;} mag zijn), en dan kunnen er z-indexen op losgelaten worden.
• Zie: www.w3.org/TR/CSS2/visuren.html#z-index

Met vriendelijke groet,
CSShunter

 

[stykurgh]

Bedankt. Ik kwam er ook net achter dat met rp het wel werkte.

Heel erg bedankt voor je hulp!

Mvg

Michel

 

[csshunter]

Ha, kruispost: had ook net een voorbeeldje in elkaar getimmerd, waarbij het later in de html geplaatste csshunter-tegeltje achter een overlappende andere afbeelding is gezet: met {position:relative} en de z-index:

• www.developerscorner.nl/csshunter/tests/test-floaters-z-index.htm

 

[stykurgh]

: D ik had toch nog een andere vraag ik heb twee divs naast elkaar. Maar als de een naar onder uitrekt moet de ander ook mee gaan, maar dat gebeurt niet. hoe zorg ik ervoor dat dat wel gebeurt?

 

[csshunter]

Iets als:

<div id="samen">
    <div id="linkerkant">
        ... inhoud linkerkant ...
    </div>
    <div id="rechterkant">
        ... inhoud rechterkant ...
    </div>
    <div class="clearL"><!-- ! --></div>
</div>

met:

#linkerkant {
    float: left;
    }
.clearL {
    clear: left;
    }

Net zoals je een menukolom en een content-kolom naast elkaar laat oplopen tot de bodem van de pagina.
Zo nodig kan er op dezelfde manier een faux-column afbeelding voor de background van de twee kolommen in de #samen aan toegevoegd worden.

 

[stykurgh]

Hoe werkt dit precies? want het werkt bij mij niet :s

 

[csshunter]

Ik dacht dat ik niets vergeten was.
Heb je een testpagina om te zien wat er aan de hand is?

 

[stykurgh]

Kheb geen site online, maar heb screen shot bijgevoegd. Dat grijze is langer dan het geel/groene. Maar dit moet dus net zo lang worden. Heb de code van de vorige post gebruikt

 

[csshunter]

Aha. Heb je ook dit gedaan?

#samen {
    background: #CCFF33 url(images/sky-bg.gif) repeat-y;
    }

met:

sky-bg.gif​

Dat is dan de "faux column" (nep-kolom) die als achtergrond-gordijntje achter de linkerkolom hangt; die dan zelf geen background-color hoeft te hebben.

 

[stykurgh]

oke, dit werkt wel, alleen is er nog een klein probleempje. Ik heb meerdere kleuren in de divs die mee moeten gaan.

 

[csshunter]

Desgewenst kunnen koppen e.d. elementen met afwijkende background er gewoon overheen geplakt worden, bv.:

<div id="samen">
    <div id="linkerkant">
        <h2>Linkerkop</h2>
        <h3>Linkersubkop 1</h3>
        ... inhoud linkerkant ...
        <h3>Linkersubkop 2</h3>
        ... meer inhoud linkerkant ...
    </div>
    <div id="rechterkant">
        ... inhoud rechterkant ...
    </div>
    <div class="clearL"><!-- ! --></div>
</div>

met bv.:

#linkerkant h2 {
   background: url(images/bloemetjesbehang.png);
   color: white;
   }
#linkerkant h3 {
   background: yellow;
   color: red;
   }

Dan nog een resterend probleem?

 

[stykurgh]

wat ik eigenlijk zou willen is, links een klein streepje met een kleur. die dus mee langer wordt als de content groter wordt. dan twee divs naast elkaar die ook allebei groter moeten worden als de content in een van die twee divs groter wordt.

plaatje voor duidelijkheid als of in geel of in blauw meer content komt moeten ze alle drie langer worden. hopelijk is het zo een beetje duidelijk

 

[csshunter]

Ah, dan gewoon:

#samen {
    background: url(images/driekleuren-bg.gif) repeat-y;
    }

met de driekleuren-bg.gif uitgestrekt over de volle breedte die je nodig hebt.

Als onderin de <div id="samen"> maar de <div class="clearL"><!-- ! --></div> is opgenomen, vallen dan de drie gordijntjes samen omlaag tot ze op de grond vallen.

Met vriendelijke groet,
CSShunter

 

[csshunter]

Voorbeeldje:

• faux-columns-gordijntjes.htm

 

[stykurgh]

bedankt! zo werkt het