2 span's naast elkaar

[ecross]

hallo allemaal,

ik heb 2 relatief gepositioneerde span's met in elk een absolute gepositioneerde span.
zoiets:

<span style='position:relative;'>
  <span style='position:absolute;'>tekst 1</span>
</span>
<span style='position:relative;'>
  <span style='position:absolute;'>tekst 2</span>
</span>

alleen nu gaan de teksten over elkaar maar ik wil ze juist naast elkaar en na "tekst" gaat hij direct naar een volgende regel, maar dat wil ik niet. hoe doe ik dit?


alvast bedankt, ecross.

 

[peter vazed]

<span style="position:relative;">
  <span style="position:absolute;">tekst 1</span>
</span>
<span style="position:relative;left: 80px;">
  <span style="position:absolute;">tekst 2</span>
</span>

.. en waarom gebruik je ' ipv "
mijn editor negeert dan de kleurcode, wat een belangrijke eigenschap is om typo's te ontdekken.

 

[ecross]

er zat een stukje php omheen met enkele quotjes ( ' ) dus deed ik deze met dubbele,
het zou toch niet moeten uitmaken?

 

[Goeroeboeroe]

' of " mag allebei volgens de standaard. Als het openingsteken maar hetzelfde is als het sluitteken. Is je probleem nu opgelost?

 

[ecross]

oh sorry, ik bedoelde dat ik voor de php dubbele gebruikte ( " ),
maar omwisselen maakt niet uit, ook als ik de code probeer die ik gepost had (dus zonder php) werk het niet hoe ik wil.

ik ben nog even aan het proberen en zo

<span style="position:relative;">
   <span style="position:absolute;">tekst</span>
</span>
tekst 2

gaan de teksten ook overelkaar heen

 

[Goeroeboeroe]

Ik vraag me wel af wat je met deze constructie wilt en of 't niet makkelijker kan.
De volgende code werkt in alle browsers:

<span style="position: relative; display: inline-block; width: 4em; height: 1.2em; background: red;">
     <span style="position: absolute;">tekst 1</span>
</span>
<span style="position: relative; display: inline-block; width: 4em; height: 1.2em; background: blue;">
     <span style="position: absolute;">tekst 2</span>
</span>

(Het achtergrondkleurtje is alleen even om 't zichtbaar te maken.)
'n Span is 'n inline-element, dus begint normaal genomen niet op 'n nieuwe regel, komt netjes naast 'n andere span te staan. Hij wordt normaal genomen even breed als nodig is om de inhoud (hier 'tekst 1' en 'tekst 2') weer te geven.
Maar.
De binnenste span heeft 'n absolute positie. Dat betekent dat hij niet meer meetelt (hij is uit de normale 'flow' van de pagina genomen, zoals dat heet). Dat betekent o.a. dat hij zelf wel breed genoeg wordt om 'tekst 1' weer te kunnen geven, maar de buitenste span. niet: hij geeft z'n breedte niet meer door aan z'n ouder.
Omdat de binnenste span niet meer meetelt voor andere elementen, heeft de buitenste span geen breedte. Oeps. Nu wordt de 'tekst 2' er dus gewoon overheen gezet, want de eerste span heeft geen breedte.

De truc is dus om iets te verzinnen om de buitenste 2 spans zelf breedte te geven, los van die asociale absolute spans binnenin, want die trekken zich nergens iets van aan.
Als ik 'n breedte aan de buitenste spans kan geven, ben ik er. Maar 'n inline-element als 'n span kun je geen breedte geven. Daarom gebruik ik display: inline-block. Nu blijft het 'n inline-element (de tweede span komt niet op 'n nieuwe regel te staan), maar ik kan er wel breedte en hoogte aan geven.
En omdat de buitenste spans nu zelf, helemaal los van de binnenste span, breedte hebben, staan ze naast elkaar.
Voor de breedte en hoogte gebruik ik em, zodat deze meegroeien met de lettergrootte. Anders knalt het eruit bij 'n grotere lettergrootte, maar dit kun je veranderen.

De binnenste span heeft 'n absolute positie. Als je 'n inline-element 'n absolute positie geeft, verandert het in 'n blok-element (tja, ik zei dat je 'n wat ingewikkelde constructie had gekozen ). 'n Blok-element krijgt normaal genomen evenveel breedte als z'n ouder, hier de buitenste span. Die had eerst geen breedte, vandaar dat de getallen op de volgende regel kwamen.
Nu heeft die buitenste span genoeg ruimte om 'tekst 1' en 'tekst 2' op dezelfde regel te houden.

 

[ecross]

dit is het nog niet helemaal,

aangezien de buitenste span's een vaste breedte hebben groeien ze niet meer mee en als er dus meer tekst in de binnenste span's komt dan komt dat onder elkaar te staan.

het is de bedoeling dat de breedte variabel is aangezien de gebruiker zelf een tekst mag intypen.

toch bedankt voor je reactie

 

[Goeroeboeroe]

Dat klopt. De binnenste is absoluut gepositioneerd en daardoor heeft die geen invloed op de breedte van de buitenste.
Maar zoals ik al zei: dit is 'n heel ingewikkelde constructie. Misschien moet je gewoon 'ns omschrijven waar 't voor nodig is, mogelijk blijkt er dan 'n simpeler constructie mogelijk.

 

[ecross]

ik wil twee stukjes tekst die over elkaar heen staan (de tweede iets naar rechts) en daarnaast nog twee stukjes tekst die over elkaar heen staan.

en nu zie je op internet enkele uitleggen over absolute gepositioneerd binnen een relatief gepositioneerde span, alleen als je dat 2x naast elkaar doet loopt het fout

 

[Goeroeboeroe]

Het probleem is dat die twee binnenste spans dus gewoon niet meetellen, omdat ze absoluut zijn gepositioneerd. Daardoor hebben de buitenste geen breedte.
Je moet dus óf die absolute positie veranderen, óf de twee buitenste spans op een of andere manier op hun plaats zetten.

* Waarom hebben die binnenste spans 'n absolute positie? Kan dat niet met 'n relatieve positie? Of met 'n negatieve marge? In beide gevallen telt hun breedte dan weer mee, en wordt de buitenste span dus netjes even breed als de binnenste span.

* Kun je de tweede buitenste span (de onderste in de code) niet naar rechts floaten? Dan zal hij niet over de eerste heen komen te staan. Je zou de hele handel in 'n div kunnen zetten met 'n bepaalde breedte, en dan de ene naar links en de ander naar rechts floaten.
Of de div 'n bepaalde breedte geven en de eerste span links in de div en de tweede halverwege de div kunen zetten.

Misschien werkt dit geen van alle. Maar het basis-idee is dus om óf die absolute positie weg te halen, óf de buitenste spans ergens neer te zetten.

Edit: het op 'n nieuwe regel komen te staan kun je voorkomen met white-space: nowrap;
Maar daarmee voorkom je nog niet dat de tweede span óver de eerste komt te staan.

 

[ecross]

ik wilde dit krijgen:

<span style='position:relative;'>
  <span style='position:absolute;'>tekst 1</span>
  <span style='position:absolute; left:10px;'>tekst 1</span>
</span>

maar toen ik dat 2 keer achter elkaar deed ging het dus mis.
maar toen dacht ik: als de eerste absolute is dan neemt hij geen ruimte is dus hoeft de 2e niet ook absolute te zijn, na wat proberen heb ik dit:

<span style='position:relative;'>
	<span style='position:absolute'>tekst 1</span>
	<span style='position:relative; margin-left:10px;'>tekst 1</span>
</span>

waardoor hij de buitenste div de breedte krijgt en de tekst er het zelfde uit ziet als mijn 1e voorbeeld.

bedankt voor het meedenken,

Ecross