CSS align afbeelding en paragraaf

[Nedra]

Het viel me laatst op dat, wanneer je een afbeelding naast een paragraaf zet dmv een float, deze aan de top nooit uitlijnen. De paragraaf begint altijd een aantal pixels onder de afbeelding. Wat is de meest nette manier om dat op te lossen? Hier een voorbeeldje bij jsfiddle - klik

HTML:

<img src="http://static.igossip.com/photos_2/august_2011/15_Minutes_Fame_nelson_haha.gif"/>
<p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst </p>

Cascading Stylesheet:

img {float:left;}
p {line-height:1.5em;}

[zwippie]

Als je de tekst naast het plaatje selecteert dan zie je dat de bovenkant van de selectie wél precies overeenkomt met de bovenkant van het plaatje. Het klopt dus eigenlijk wel precies. Als het je echt stoort zou ik het oplossen door de margin-top van het plaatje aan te passen, al heb ik geen idee of dat nou echt best practice is.

[Bosmonster]

Daar is niks aan te doen, dit komt door de line-height van de tekst.

Enige wat je kunt doen is symptoombestrijding en dat is de afbeelding ook een kleine marge aan de bovenkant geven

[Nedra]

Ah jammer. Ik dacht al zoiets maar had gehoopt op iets anders. Natuurlijk kan ik wel een margin of padding gebruiken maar er zijn weer andere afbeeldingen in de tekst die dat niet nodig hebben. Die moeten nu dus weer een aparte klasse hebben.
Nu nog zo een simpel iets waar ik geen nette oplossing voor heb; wanneer ik een paragraaf heb en daar direct op volgend een ' lees meer' link wil hebben voeg ik meestal de display:inline; property aan een paragraaf toe. Maar die doet 'text-align=justify' weer teniet. Zijn hier og nette oplossingen voor? voorbeeld

[OkkE]

Waarom zet je de <a> niet binnen de <p>?

[Nedra]

Zo zet het CMS 't standaard neer (de a nog met een span ervoor maar buiten de paragraaf). Ik denk inderdaad dat ik moet zorgen dat deze wel binnen de paragraaf staat, want een paragraaf die justified is, is natuurlijk een block-level element, display: inline doet dat teniet. maw, het is niet mogelijk iets achter de laatste regel van een paragraaf te zetten wanneer de text-align waarde ' justify' is..

[Bosmonster]

P's zijn altijd block-level elementen, dat moet je ook zo houden. Justify is slechts een property om je tekst uit te vullen (wat je op internet eigenlijk niet moet gebruiken met teksten uit een CMS).

[Nedra]

Waarom zou je een P een block level element moeten houden? En waarom zou je geen justify moeten gebruiken met teksten uit een CMS? Als de gebruiker voor de rest geen stijlmogelijkheid heeft en alles er uniform moet uit zien, lijkt het mij niet zo een probleem, of mis ik iets?

[Flowmo]

Nedra schreef op zaterdag 17 september 2011 @ 09:32:
Waarom zou je een P een block level element moeten houden? En waarom zou je geen justify moeten gebruiken met teksten uit een CMS? Als de gebruiker voor de rest geen stijlmogelijkheid heeft en alles er uniform moet uit zien, lijkt het mij niet zo een probleem, of mis ik iets?

Omdat paragrafen over de volledige breedte van een element horen te lopen. Net zoals je dat verwacht als je in Word aan het typen bent, dat de paragraaf de pagina volledige uitvult.

Justify is een persoonlijke keuze, in smalle kolommen is justify minder geschikt omdat je dan vaak lege gaten in je tekst krijgt. De ruimte tussen woorden varieert dan teveel per regel.

[geert1]

Het gebruik van justify kan in sommige gevallen prima zijn, maar het menselijk oog kan een tekst sneller lezen wanneer het niet uitgevuld wordt met deze optie. Vanwege twee redenen: als tekst niet justified is, zijn de regeleinden allemaal uniek en zo kan je oog makkelijk zien welke regel al gelezen is, en welke regel nu gelezen moet worden. Het is dus een herkenningsmiddel bij regelwissel. Daarnaast: door justified tekst zijn de afstanden tussen woorden variabel, wat de leessnelheid ook in negatieve zin beïnvloedt.

Alsnog kan er wel voor gekozen worden, maar ik zou het eerder doen voor een korte intro ergens waar het grafisch heel specifiek mooi moet lijken, dan in een gehele website.

Je initiële probleem is inderdaad de line-height zoals hierboven gezegt. Afhankelijk van het ontwerp van een site los ik dat in sommige specifieke gevallen wel eens op door de afbeelding ook iets lager te plaatsen. Maar vaak is het ook totaal niet storend. Ontwerpers en ontwikkelaars (en ook opdrachtgevers) willen nog wel eens te ver gaan met pixel-precisie, op een gegeven moment moet je ook de render-engine gewoon zijn gang laten gaan naar mijn mening. Hoewel ik over het algemeen wel voor een zeer net uitgewerkte website ben, zijn er toch grenzen.

[ Voor 5% gewijzigd door geert1 op 18-09-2011 18:02 ]