[HTML/CSS] Afbeelding in tabelcel

[user109731]

Goedenavond,

Ik ben wat met HTML/CSS aan het prutsen en kom er niet uit. Ik heb een gradient afbeelding die ik eigenlijk precies in 1 tabelcel wil stoppen, dus dat de breedte van de afbeelding = de breedte van de tabelcel. De breedte van de tabelcel is niet vast ingesteld. Ik heb het volgende geprobeerd:

1. Stel afbeelding in als background van de cel --> alleen 1e deel van gradient wordt zichtbaar.
2. Zet afbeelding neer met <img... . --> Tabelbreedte varieert, dus width is niet in te vullen.

Kan dit eigenlijk wel? Ik kan in IE ook iets met DirectX doen, maar dat 'snappen' andere browsers niet.

Bij voorbaat dank

[Not Pingu]

Maar hoe groot is de gradient dan? Ik neem aan dat de inhoud van de table cell toch wel groot genoeg is om op z'n minst de hele gradient te laten zien?

Waarom zou je niet gewoon de width van de cell instellen, of met padding de cell minstens even breed maken als de achtergrond?

[Amras]

Je kan de width van de img toch op 100% zetten? Zo dus:

HTML:

[img]"jouwplaatje.jpg"[/img]

[user109731]

Dat werkt wel in FireFox, maar IE denkt dat hij de afbeelding op 100% moet weergeven, en om dat te bereiken maakt-ie de cel groter, met als gevolg dat ik een horizontale schuifbalk krijg.

EDIT: Is dat een IE-bug, of is het een fout van mij?

[ Voor 57% gewijzigd door user109731 op 02-08-2004 22:47 ]

[Barracuda_82]

Amras schreef op 02 augustus 2004 @ 22:42:
Je kan de width van de img toch op 100% zetten? Zo dus:

HTML:

[img]"jouwplaatje.jpg"[/img]

De TS wil de afbeelding in de achtergrond van een cell zetten, dus dan gaat deze redenatie helaas niet op.

Wat de TS kan doen is een heel smal plaatje maken van de gradient (1px breed) en dan alleen horizontaal laten herhalen in de cell (repeat-x), zo is je plaatje altijd netjes even breed als je cell.

[Not Pingu]

VB_programmer schreef op 02 augustus 2004 @ 22:43:
Dat werkt wel in FireFox, maar IE denkt dat hij de afbeelding op 100% moet weergeven, en om dat te bereiken maakt-ie de cel groter, met als gevolg dat ik een horizontale schuifbalk krijg.

EDIT: Is dat een IE-bug, of is het een fout van mij?

maar ik snap het ff niet. De cel mag dus niet even breed worden als het plaatje, maar je wilt wel het hele plaatje laten zien?

Als je niet wilt dat het plaatje de breedte van je cel beinvloedt, doe je hem als achtergrond zoals Barracuda_82 zegt (maar dan een plaatje van 1px hoog ).
Dat dit betekent dat je niet de hele gradient ziet als de cel daar te klein voor is, moet je dan op de koop toe nemen, of de padding van de cel zo instellen dat ie altijd op z'n minst zo breed is als het plaatje. Let wel dat een table cell eigenlijk geen height attribute mag hebben, dus dat werkt alleen in IE

Post anders eens een voorbeeld, dan weten we of we je uitleg goed begrijpen.

[edit] ik heb je startpost nog eens goed doorgelezen, maar wat jij dus wilt is dat de gradient meeschaalt met de cell? dat kan niet. Wat je echter wel kunt doen (en hiervoor ga ik er even vanuit dat je gradient aan het uiteinde overgaat in de achtergrondkleur van je table/pagina) is je background zo instellen:

code:

td
{
   background: url(gradient.gif) repeat-x top right;
}

Op deze manier wordt de gradient niet op de helft afgebroken als de cell te klein is, hij gaat altijd door vanuit de achtergrondkleur. net zover als ie kan.

[ Voor 22% gewijzigd door Not Pingu op 02-08-2004 23:53 ]

[Amras]

Barracuda_82 schreef op 02 augustus 2004 @ 22:52:
[...]


De TS wil de afbeelding in de achtergrond van een cell zetten, dus dan gaat deze redenatie helaas niet op.

VB_programmer schreef op 02 augustus 2004 @ 21:29:
2. Zet afbeelding neer met <img... . --> Tabelbreedte varieert, dus width is niet in te vullen.

Mijn oplossing zou dus wel moeten voldoen, en het werkt bij mij ook gewoon met een tabel van variabele breedte. Bijkomend voordeel is ook dat je de tag gebruikt die voor images bedoelt is en zo je document semantisch correct houdt. Als je echter nog tekst oid in die tabelcell wilt zetten kun je hem idd beter als background-image doen met een repeat-x.

[André]

Amras schreef op 03 augustus 2004 @ 08:52:

Mijn oplossing zou dus wel moeten voldoen, en het werkt bij mij ook gewoon met een tabel van variabele breedte. Bijkomend voordeel is ook dat je de tag gebruikt die voor images bedoelt is en zo je document semantisch correct houdt. Als je echter nog tekst oid in die tabelcell wilt zetten kun je hem idd beter als background-image doen met een repeat-x.

Dus jij beweerd dat een achtergrondplaatje semantisch niet correct is? En dat je een img tag gebruikt voor een plaatje heeft niets met semantiek te maken maar met de functionaliteit van die tag.

[Amras]

André schreef op 03 augustus 2004 @ 08:59:
[...]

Dus jij beweerd dat een achtergrondplaatje semantisch niet correct is? En dat je een img tag gebruikt voor een plaatje heeft niets met semantiek te maken maar met de functionaliteit van die tag.

Niet semantisch correct is misschien overdreven, maar als het mogelijk is kun je, lijkt mij, beter een img tag gebruiken dan een achtergrondplaatje. Een td is niet speciaal bedoeld om plaatjes weer te geven, een img tag wel.

[André]

Op het moment dat een plaatje alleen voor stijl (randen, borders, enz) gebruikt word is het beter om met CSS een achtergrondplaatje te gebruiken zodat tekst-browsers er geen 'last' van hebben en het plaatje tenminste geen onderdeel is van je document.

[Amras]

André schreef op 03 augustus 2004 @ 09:10:
Op het moment dat een plaatje alleen voor stijl (randen, borders, enz) gebruikt word is het beter om met CSS een achtergrondplaatje te gebruiken zodat tekst-browsers er geen 'last' van hebben en het plaatje tenminste geen onderdeel is van je document.

Zo had ik het nog niet bekeken, in het geval van de gradient van de TS ben je dus beter af met een achtergrondplaatje dmv CSS. Weer wat geleerd.

[user109731]

Bedankt voor alle reacties (en sorry voor mijn late reactie).
Misschien is het beter/duidelijker als ik ff een link geef: http://www.downloads4u.nl/nieuw/downloads.asp

Deze site ziet er hier in FireFox perfect uit. In IE ziet het er op PC1 soms wel goed uit, op PC2 niet.
Die gradient afbeelding staat ongeveer zo op de site:

HTML:

[img]"afb.jpg"[/img]

Iemand een idee hoe dit kan?

De TS wil de afbeelding in de achtergrond van een cell zetten

Tzou mooi zijn als dat kon, maar de <img-manier vind ik ook ok.

BVD

[ Voor 54% gewijzigd door user109731 op 03-08-2004 18:19 ]

[Verwijderd]

wellicht door die dubbele doctype die ie in quirks mode kiepert?

[user109731]

EDIT: Nee, het heeft niet geholpen, nog steeds probleem in IE6. Toch bedankt!

[ Voor 66% gewijzigd door user109731 op 03-08-2004 19:26 ]

[Not Pingu]

Ik zie eerlijk waar het verschil niet, en ik heb ff gekeken in IE6, IE5, Moz Firefox, Mozilla en Opera...

[user109731]

Gunp01nt schreef op 03 augustus 2004 @ 20:49:
Ik zie eerlijk waar het verschil niet, en ik heb ff gekeken in IE6, IE5, Moz Firefox, Mozilla en Opera...

Bedankt! Ik dacht dat het probleem opgelost was, en dat het aan die ene pc lag. Toch niet dus. Als ik dit doe, gooit ie hem weer door de war:

Ga naar Downloads4u.nl/nieuw/ -> open Extra>Internet-opties -> Klik op OK (geen annuleren!).

BVD


EDIT: Misschien is een screenshot handiger: http://www.downloads4u.nl/Nieuw/screenshot/screenshot.jpg

[ Voor 32% gewijzigd door user109731 op 04-08-2004 20:55 ]

[Not Pingu]

Verrek je pagina wordt ongeveer 3x zo breed als je dat doet. Dat heb ik nou nog nooit meegemaakt.

Verander voor de gein dit:

code:

<body leftmargin="0" rightmargin="0" marginwidth="0" topmargin="0" bottommargin="0" marginheight="0">

even in dit:

code:

<!-- Voeg aan je style toe -->

body
{
    margin: 0px;
}

<!-- Einde style -->

<body>

Je zou zeggen dat IE in de war raakt als je Internet options afsluit, en wat je daar in je body tag zet is volgens mij iets teveel van het goede.

Als ik je code in een lokaal bestand plak (dus zonder plaatjes erbij) gebeurt er niks raars. Misschien komt het doordat bij je titelbalk NOWRAP in de <td> staat, dat is op het oog het enige verschil met de rest.

Gebeurt dit trouwens ook als je die gradient als background doet ipv. als <img>?

[ Voor 69% gewijzigd door Not Pingu op 04-08-2004 20:59 ]

[user109731]

Verrek je pagina wordt ongeveer 3x zo breed als je dat doet.

Ja, inderdaad! Dus bij jou doet ie het ook? Dat 3x zo breed komt denk ik door die lange afbeelding, die is ong. 2000pixels.

Ik ga eerst die CSS-style uitproberen!

[user109731]

Gebeurt dit trouwens ook als je die gradient als background doet ipv. als <img>?

Dat kan niet, want die afbeelding is 2000 pixels lang, en dan zie ik alleen het eerste deel.
Misschien komt het wel door die lange afbeelding (gradient) dat IE vreemd doet? Nogmaals: FireFox doet t perfect!

[ Voor 4% gewijzigd door user109731 op 04-08-2004 21:02 ]

[Not Pingu]

Denk idd dat het daardoor komt ja. Maar waarom moet die gradient dan perse 2000 pixels zijn? Lijkt me eerlijkgezegd iets teveel van het goede om alleen te zorgen dat het op elke resolutie volledig in beeld komt, maargoed.
Normaliter kun je volstaan met een gradient van een paar honderd pixels breed die je gewoon als achtergrond zet en in dit geval rechts zou uitlijnen. Zo zou ik het tenminste doen.

Probeer anders dat nowrap eens uit je titelbalk te halen, misschien dat dat icm. de <img> van 100% breedte tot interpretatiefoutjes leidt.

[ Voor 16% gewijzigd door Not Pingu op 04-08-2004 21:14 ]

[user109731]

OK, bedankt. kga het proberen, kpost morgen wel of ie het deed!

EDIT: die gradient, hoe kun je die dan mooi in de achtergrond krijgen? ALs je 'm rechts zet, sluit ie links tog niet mooi aan? of is dat wel zo?

[ Voor 55% gewijzigd door user109731 op 04-08-2004 21:28 ]

[Not Pingu]

Jawel, zolang je die balk een background color geeft van dezelfde kleur als het linker-uiteinde van je gradient.

even voor de duidelijkheid:

Cascading Stylesheet:

background: #8aa6c8 url(gradient.gif) repeat-x top right;