[css] Layer positionering

[Verwijderd]

Hey. Ik heb een pagina waarin de plaatjes in layers staan zodat ik ze kan verbergen en kan weergeven(met display:block|none). Nu wil ik dat deze layers met deze plaatjes net zo reageren als gewone plaatjes. Net alsof je met HTML werkt en er een plaatje in zet. Het moet dus net lijken alsof er geen layers zijn(ik heb ze alleen nodig voor het verbergen en weergeven). Ik wil hierbij geen breedte opgeven aan de layer, dit in verband met het grote html/css niveauverschil binnen de organisatie waar de site van is. Dat dit automatisch gaat zou wel goed zijn(een scriptje die de positie van de layer bijvoorbeeld automatisch bepaald, en de tekst daar goed omheen uitlijnt zoals dat anders ook het geval is), maar ik denk niet dat dit mogelijk is. Ik heb de volgende dingen geprobeerd:

Tekst , blablablabla, tekst, blablabla.
<div id="content" style="display:none; position:relative;">
Plaatje
</div>

<div id="hidden" style="display:block; position:relative;">
Plaatje
</div>
Tekst , blablablabla, tekst, blablabla.

Het probleem hierbij is dat de layer een volledige regel in beslag neemt. Het resultaat is dus:

Tekst , blablablabla, tekst, blablabla.
Plaatje
Tekst , blablablabla, tekst, blablabla.

Dit heb ik ook geprobeerd:

Tekst , blablablabla, tekst, blablabla.
<div id="content" style="display:none; position:absolute;">
Plaatje
</div>

<div id="hidden" style="display:block; position:absolute;">
Plaatje
</div>
Tekst , blablablabla, tekst, blablabla.

Het probleem hierbij is dat het plaatje hier als het ware wegvalt. Hij kiest wel de positie na de eerst tekstregel, maar de 2de tekstregel gaat er doorheen.

Tekst , blablablabla, tekst, blablabla. | <plaatje en tekst door elkaar heen>

Wat ik wil is dus gewoon:

Tekst , blablablabla, tekst, blablabla. | Plaatje | Tekst , blablablabla, tekst, blablabla.

op een regel.

Ik ben redelijk nieuw op het css gebied, en ik ken nog niet alle mogelijkheden. Maar ik neem aan dat dit toch gewoon mogelijk is? Ik heb al flink gezocht. Dus of ik kijk niet goed, of het staat echt nergens..

[roytanck]

Volgens mij moet je in plaats van DIV de SPAN-tag gebruiken. Daar kun je ook gewoon een style aan hangen.

Succes!

[Verwijderd]

ik denk dat span een goede oplossing kan zijn in dit geheel, iets in de trend van:

code:

<span style="float: left;">bla bla bla bla bla bla</span> 

plaatje < span style="float: right;">bla bla bla bla bla bla</span>

[Verwijderd]

Wat je ook kan doen is het plaatje display:inline ipv display:block meegeven, block zorgt ervoor dat er 'enters' zitten zowel voor, als na het plaatje

[Verwijderd]

Waarom zou je het plaatje uberhaupt in een span of div zetten? Je kunt het plaatje gewoon laten switchen tussen display: none; en display: inline;. Een layer is lang niet altijd de oplossing, en voor de duidelijkheid: een div is niet altijd een layer.

Een layer is in principe een absoluut gepositioneerd element, dat dus geen invloed uitoefend op de flow.

[RM-rf]

Op vrijdag 21 juni 2002 10:31 schreef Cheatah het volgende:
Een layer is in principe een absoluut gepositioneerd element, dat dus geen invloed uitoefend op de flow.

/zeikmode
nee hoor, een SPAN is ook een layer, een inline displayed element, en ook relatief gepositioneerde DIV's blijven layers.

vanuit CSS kun je layers zien als viewports waarbinnen styles kunnen worden toegevoegd aan de content-elementen, incl. overflow, margins, border etc.

je oplossing is echter uitstekend, zolang het hier om één element gaat hoef je geen container gebruiken, maar kun je styles aan het element zelf toewijzen, waardoor je niet die viewport hoeft te gebruiken

[Verwijderd]

Bedankt allemaal! Ik heb nu geen tijd om er verder mee te klooien, maar als ik weer terug ben denk ik dat dit voldoende informatie is om me verder te helpen! Bedankt!