Dit is een topic in Community » Forum » Pro » Web ontwikkeling

xhtml: vraag over uitlijnen van tekst

scd

scd op 25 januari 2012 #

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.

nickybbb op 25 januari 2012 #

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

Dr. Maddox

Dr. Maddox op 25 januari 2012 #

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....

arri

arri op 25 januari 2012 #


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.

Dr. Maddox

Dr. Maddox op 25 januari 2012 #

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.

Gates

Gates op 25 januari 2012 #

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.

Jakko Westerbeke

Jakko Westerbeke op 25 januari 2012 #

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.

arri

arri op 28 januari 2012 #

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>

Je kunt alleen reageren met een gratis OMT account.
Log in of registreer.

Inloggen

Over dit topic

Gestart op 25 januari 2012 door scd

Laatste reactie door arri

Reageer op dit topic