[Bijdrager scd]

xhtml: vraag over uitlijnen van tekst

Is er ook een simpele manier om in xhtml (of css) twee tekstgedeeltes op dezelfde hoogte te houden, waarbij het ene gedeelte links uitlijnt en het tweede gedeelte rechts?
Bijvoorbeeld:

Geachte heer, Zutphen, 2012

Ik kom er maar niet uit

Edit:
het voorbeeld werkt natuurlijk niet. Geachte heer moet dus links uitlijnen, en Zutphen, 2012 helemaal rechts, maar wel op dezelfde regel.

[Bijdrager scd]

het voorbeeld werkt natuurlijk niet. Geachte heer moet dus links uitlijnen, en Zutphen, 2012 helemaal rechts, maar wel op dezelfde regel.

[Bijdrager nickybbb]

als je bv een css aanmaakt met de naam “datum_rechts” en dan zegt float right; dan kun je in die tekst de <span gebruiken>

bv:

Geachte heer, <span class=”datum_rechts”>Zutphen, 2012</span>

http://www.kreja.nl/voorbeeld.html

[Bijdrager Dr. Maddox]

Ik heb even snel een voorbeeldje gemaakt maar nickybb was me voor zie ik al.

Ik gebruik geen span maar gewoon div’s. Wat op zich niet zo gek veel uitmaakt behalve wanneer styles in een browser zijn uitgeschakeld. Correct me if I’m wrong…

Voorbeeld:
http://tinyurl.com/774brsw

Ik kan helaas de code niet plaatsen. Ondanks de code tags op OMT maakt het forum er een bende van. Jammer….

[Bijdrager arri]

Wat op zich niet zo gek veel uitmaakt behalve wanneer styles in een browser zijn uitgeschakeld. Correct me if I’m wrong…

span (‘tekst-spanne’ binnen een lopende tekst) lijkt me in dit geval beter, omdat dat het een inline element is, terwijl div (division) een block-level element is, meer bedoeld voor de document structuur.

[Bijdrager Dr. Maddox]

Klopt maar in principe merk je er niet veel zolang je geen hoogte of breedte waarde geeft en het wordt gevalideerd toch? Ik vind div’s altijd lekker kort..

Dan nog, bedankt voor de uitleg. Deze zal ik eens als goede gewoonte gaan toepassen.

[Bijdrager Gates]

Er zijn meerdere opties, waarvan m.i. de toepassing afhangt van elk specifiek geval.

Wel zou ik voor span gaan i.p.v. een div. Ja, een div is valid html, maar in dit geval is het geen semantic html.

[Bijdrager Jakko Westerbeke]

Je zou ook inline-blocks kunnen gebruiken. Iets als:

<div style="display: inline-block; text-align: left; width: 50%">Geachte heer,</div><div style="display: inline-block; text-align: right; width: 50%">Zutphen, 2012</div>

(Niet getest, wellicht werkt het niet precies zoals bedoeld, maar dan heb je zelf tenminste ook nog wat te doen ;))

Het nadeel daaraan is echter wel dat oudere browsers geen inline-blocks kennen en de divs dus gewoon behandelen als normale blokken — d.w.z. ze onder elkaar zetten.

[Bijdrager arri]

Ervanuit gaande dat de document-content al is opgebouwd mbv. paragraph elements (<p></p>) en headers (<h…></h…>), is @nickybbb’s eerste suggestie nogsteeds de beste..


<p>Geachte heer … <span style="float:right;">zutphen, 13 januari 1998</span></p>