Tekstwolk met behulp van achtergrondafb. en padding een goed idee?

[flbos]

Hallo,

Ik heb een tekstwolk gemaakt (gif-plaatje). Deze tekstwolk wil ik weergeven op mijn website, in de tekstwolk moet tekst komen. Deze tekst wil ik graag in het design van de pagina vastleggen (en dus niet als vaste tekst in het plaatje). Dit wil ik, omdat het goed mogelijk is dat de tekst wijzigt en ik deze oplossing bovendien meerdere keren (met verschillende teksten) op mijn website wil laten terugkomen.

Ik gebruik dus een lege tekstwolk waar ik vervolgens tekst over heen wil zetten. Momenteel gebruik ik hiervoor de volgende opzet (voor de leesbaarheid even PHP tags gebruikt):

<table height="200" width="400" background="Afbeeldingen/ballon7.gif" cellpadding="0" style="background-repeat:no-repeat;">
<tr>
<td align="center" valign="top" style="padding-top:50px; padding-top:55px; padding-left:55px; padding-right:50px;">De tekst die in de wolk komt, normaal is deze langer.</td>
</tr>
</table>

Ik vroeg me af of er wellicht een betere opzet denkbaar is dat het gebruiken van de tekstballon als achtergrondplaatje in een tabel en vervolgens in de tabel de tekst te zetten.

Een tweede punt is dat ik mijn twijfels heb over het gebruiken van padding voor het op de plaats krijgen van de tekst. Ik heb weleens gelezen dat bijvoorbeeld IE 5.5 en eerdere versies de padding van de tabelafmetingen aftrekken, zodat niet alles meer past en er dus een stuk van mijn tekstwolk zal verdwijnen.

Zelf gebruik ik IE 6 en hierop ziet het er prima uit, iemand die ervaringen heeft met het padding probleem?

Verder hoor ik het natuurlijk graag als er een hele andere opzet is voor wat ik wil die sowieso beter is dan het bovenstaande.

Alvast bedankt!

 

[Egel]

<table height="200" width="400" cellspacing="0" cellpadding="0" style="background: fixed transparent url(Afbeeldingen/ballon7.gif) middle center no-repeat;">
<tr>
<td align="center" valign="top" style="padding: 50px 50px 0px 55px">De tekst die in de wolk komt.</td>
</tr>
</table>

Het kan ook met een div of een span bv.:

<div style="width: 400px; height: 200px; padding: 50px 50px 0px 55px; background: fixed transparent url(Afbeeldingen/ballon7.gif) middle center no-repeat;">De tekst die in de wolk komt.</div>

Het padding lijstje is top right bottom left, met de klok mee, door de bottom nul pixels te nemen heb je nog wat uitloop voor te lange tekst.

De padding is geen probleem met IE 4 hier, misschien bedoel je het feit dat IE bij de body tag de margin gebruikt als was het padding. Maar bij td, div en span doet het het goed. Padding gaat altijd af van de binnen ruimte, margin bepaalt de ruimte aan de buitenkant. Aan de tabel is nog cellspacing="0" toegevoegd, dat levert nog een paar extra pixels op.


Vr.Gr. Egel.

[edit: de width en height van de div waren omgedraaid]

 

[flbos]

Hartelijk bedankt voor deze info, hier kan ik nog eens iets mee!

Wat ik eigenlijk bedoelde met dat verhaal over die padding had ik hier vandaan:

http://www.bitstorm.org/edwin/cursus/css.html

Onder de kop 'Box kenmerken' staat een uitgebreid verhaal waarin onder andere staat:

De width en height bepalen de grootte van de inhoud van de box, niet van de box zelf. De diktes van de padding, border en margin komen dus bovenop de width en height! Anders gezegd: de width en height is exclusief de padding, border en margin.

Er is een probleem: Internet Explorer 5.5 en eerder houdt zich niet aan deze specificatie en probeert de complete box in de width en height te stoppen. Explorer 6, Netscape 6 en Mozilla houden zich wel aan de specificatie.

Kennelijk gaat dit in dit geval niet op? Omdat er ergens in dat verhaal stond dat elke HTML-element zich in een onzichtbare box bevond dacht ik dat dit ook voor mijn voorbeeld gold, maar kennelijk interpreteer ik dit helemaal verkeerd

Kan iemand me nog even toelichten waar ik de mist in ga met mijn redenatie?

Nogmaals bedankt!

 

[Egel]

De volgorde bij een box (in de breedte) is

margin border padding inhoud padding border margin

<span style="width: 400px; height: 200px; margin: 50px; border: 10px solid #f00; padding: 50px; background: #ddd"></span>

Met dit voorbeeld zie ik bij IE4 dat de 400px ingenomen worden door de
border padding inhoud padding border

De border staat bij IE4 binnen de breedte van 400px maar de margin staat er buiten. Hoe de latere versie van IE dat doet kun je controleren met het voorbeeldje.

Ben ff confused
http://www.w3.org/TR/CSS1#formatting-model
heeft het nog weer anders. Ik kijk het nog een keer na bij IE6 en Firefox.


Groet, Egel.

 

[flbos]

Begint me nu zelf ook een beetje te duizelen. Is er één goede manier die zowel voor ie5.5, ie5 als ie6 en ook firefox en ander veel gebruikte browsers werkt cq. hetzelfe resultaat levert?

 

[Egel]

Er is één goede manier:

een tabel.


Vr.Gr. Egel

edit: aangepast aan de verschillende weergave afhankelijk van de doctype bij IE

 

[flbos]

Bedankt!

Dus in principe zou dit altijd goed moeten gaan (ook bij eerdere versies van ie?):

<table height="200" width="400" background="Afbeeldingen/ballon7.gif" cellpadding="0" style="background-repeat:no-repeat;">
<tr>
<td align="center" valign="top" style="padding-top:50px; padding-top:55px; padding-left:55px; padding-right:50px;">De tekst die in de wolk komt, normaal is deze langer.</td>
</tr>
</table>

 

[Egel]

Ja! Dit zou goed horen te gaan.

IE4 heb ik gechecked en die doet hetzelfde als IE6, behalve dan bij de paragraaf die heeft ie small in de hoogte en 100% breed.

<table cellspacing="0" cellpadding="0" style="width: 400px; height: 200px; background: fixed transparent url(Afbeeldingen/ballon7.gif) middle center no-repeat;">
<tr>
<td style="padding: 50px 50px 0px 55px;">De tekst die in de wolk komt, normaal is deze langer.</td>
</tr>
</table>

Toch wel eens goed om uit te zoeken, ik wist ook nog niet dat het zo verschillend was.

Vr.Gr. Egel.

De bijlage is het html bestand met de gebruikte testboxjes.

 

[JPeetje]

Geplaatst door flbos
Begint me nu zelf ook een beetje te duizelen. Is er één goede manier die zowel voor ie5.5, ie5 als ie6 en ook firefox en ander veel gebruikte browsers werkt cq. hetzelfe resultaat levert?

Welkom in de wereld van webdesign, waar deze problemen voorkomen.

Maar het kan wel. Internet Explorer werkt de hele boel enorm tegen door zich op een heel aantal gebieden leuk aan z'n eigen standaarden te houden (of: gewoonweg niet aan de standaarden opgelegd door het W3C). Zo is dat ook hier het geval, het box model is een veel voorkomend probleem, vooral als je het zowel in IE 5, 6 en in Firefox werkend wil krijgen. Voor IE 6 en Firefox kun je een DOCTYPE specificeren, waardoor ze het beide goed doen. IE 5 leeft dit helaas OOK AL NIET goed na. Hierdoor heb je eigenlijk twee oplossingen, de gemakzuchte oplossing (een tabel) of de elegantere, maar iets uitdagendere oplossing: IE hacks.

In HTML en CSS kun je bepaalde trucjes toepassen dat alleen voor IE geld of alleen voor Firefox, denk hierbij bijv. aan '//' en '_'. Dit zijn IE hacks, iets waar je veeeeeel over kan vinden op internet. Ik zou zeggen, Google ff op IE hacks en je zult een oplossing kunnen bedenken die wat eleganter is dan de tabel(len) die je nu gebruikt

 

[flbos]

Bedankt voor de reacties, met de tabel kan het dus, maar kennelijk ook met ie hacks. Is dat laatste dan echt beter en waarom? Als het met een tabel goed werkt is het toch goed denk ik dan, of is dat toch een beetje te kortzichtig?

Ik heb eens even gekeken naar ie hacks. Ik maak me alleen een beetje zorgen over het feit dat dit misschien problemen op gaat leveren als er nieuwe browser versies uitkomen. Bijvoorbeeld hier lees ik daar ook het een en ander over:
http://www.quirksmode.org/blog/archives/2005/09/css_hacks_are_s_1.html

Wat is nu dus een betere oplossing: tabel of ie hacks? En waarom is een tabel geen elegante oplossing?

Positieve discussie dit, ik heb echt het gevoel dat ik hier verder mee kom!

 

[Egel]

Ik had juist het gevoel dat ik weer terug bij af was.

Goede opmerking van Jpeetje dat de DOCTYPE invloed heeft!

Zonder doctype of met
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
vervalt IE6 in backward compatibility mode en doet het hetzelfde als IE4.

Met doctype strict of transitional én loose.dtd
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
behandelt IE6 het bijna hetzelfde als Firefox.

http://www.w3.org/TR/REC-html40/struct/global.html#h-7.2


1) de table is het ene element dat hetzelfde blijft tussen de verschillende browsers, en versies daarvan,
2) je gebruikt een table zonder border dus dat speelt geen rol
3) de table zelf heeft geen padding, dat heeft de td waardoor het ook theoretisch de breedte van de table niet beinvloed

Het blijft voor mij dan een elegante oplossing.

Nadelen van de hacks lijken me dat ze kunnen verlopen omdat ze niet officieel gespecificeerd zijn en het is veeel werk. Maar ik ga ze nog wel eens een keer beter uitzoeken.


Vr.Gr. Egel.

 

[JPeetje]

Waarom een tabel minder elegant is: een tabel is bedoeld voor tabulaire data, niet om een tekstwolkje mee op te zetten.

Als je het echt niet anders op kan lossen, dan moet je een tabel gebruiken, maar hou er wel rekening mee waarvoor HTML-elementen bedoeld zijn. Dat noemt met de semantiek van je pagina.