[CSS] Image wordt niet getoond in de browser

[Arcane Apex]

Ik probeer al een tijdje een image met CSS in een <div> tag te verwerken, maar het plaatje verschijnt maar niet in de browser.

Hier is de code:

code:

<div style="background-image:url(backgroundGradient.png); width=95pt; height=300px; position:absolute; left:50px; top:-5px; z-index:0;"></div>

Geen idee wat hier fout aan is.
CSS-validator op w3c.org zegt echter wel dat width en height een parse-error veroorzaken, maar waarom? Width en height zijn toch toegestane CSS-attributen?
Echter als ik wat text tussen de open-div-tag en sluit-div-tag zet dan verschijnt er wel een stukje image.
Ik weet 100% zeker dat ik de url goed heb, immers het staat op mijn eigen server.
Het plaatje toont dus alleen (deels) als ik wat text tussen de div-tags zet.

[ Voor 11% gewijzigd door Arcane Apex op 21-02-2005 22:37 ]

[ToBe]

geen = maar :

daarnaast geef je hier aan dat de image in precies dezelfde folder staat als de CSS file, is dat wel zo?

[André]

code:

<div style="background-image: url('backgroundGradient.png'); width:95pt; height:300px; position: absolute; left: 50px; top: -5px; z-index: 0;"></div>

Zo moet het werken. Staat het plaatje in dezelfde map?

[Arcane Apex]

Ok, dat was een slordige fout, het plaatje werkt nu iig wel, alleen ipv een 95% breedte te hebben van de pagina is ie maar 10pt of 100px oid.

[André]

pt is ook geen %, pt is point. Maak er dan 95% van Overigens wijst die 95% naar de breedte van de div en niet van het plaatje

[Arcane Apex]

Ok nu toont bijna het volledige plaatje, maar zoals je al zei Andre...het plaatje wordt afgekapt bij het einde van de div.
Hoe krijg ik het voor elkaar zodat het plaatje proportioneel meeschaalt met de div?

[André]

Arcane schreef op maandag 21 februari 2005 @ 22:40:
Ok nu toont bijna het volledige plaatje, maar zoals je al zei Andre...het plaatje wordt afgekapt bij het einde van de div.
Hoe krijg ik het voor elkaar zodat het plaatje proportioneel meeschaalt met de div?

Door er een echt plaatje in te zetten die meerekt met de div, een achtergrondplaatje is niet te schalen.

[Arcane Apex]

Hoe bedoel je dat precies?
Door een background-repeat:no-repeat; als attribuut erbij te voegen?

[André]

Nee, een achtergrond plaatje kun je niet resizen, een <img> wel

[Arcane Apex]

Ik wilde juist proberen html zoveel mogelijk te ontwijken, maar dit is in dit geval dus niet mogelijk?

[André]

Waarom zou je html willen ontwijken? En wat voor plaatje is het dat het geresized moet worden? En hoe ziet dat er uit op hele grote schermen, kan het plaatje niet gewoon gecentreerd worden ofzo?

[faabman]

Arcane schreef op maandag 21 februari 2005 @ 22:48:
Ik wilde juist proberen html zoveel mogelijk te ontwijken, maar dit is in dit geval dus niet mogelijk?

Ontwijken . HTML moet je niet ontwijken, HTML moet je gebruiken waar het voor bedoelt is. Wanneer je een afbeelding in je site hebt staan die bij de content hoort (en dus niet bij de opmaak) dan kun je daarvoor gewoon <img /> gebruiken hoor... Voor opmaak-gerelateerde zaken gebruik je css...

[Arcane Apex]

Veel HTML tags zijn tegenwoordig deprecated en het wordt aangeraden CSS daarvoor in de plaats te gebruiken, om een voorbeeld te noemen is de bekende < B > tag en < CENTER >.
Vandaar dat ik zoveel mogelijk CSS wil proberen te gebruiken.
En de html proberen te beperken tot het minimum.

[ Voor 13% gewijzigd door Arcane Apex op 22-02-2005 01:54 ]

[Woudloper]

Arcane schreef op dinsdag 22 februari 2005 @ 01:46:
Veel HTML tags zijn tegenwoordig deprecated en het wordt aangeraden CSS daarvoor in de plaats te gebruiken, om een voorbeeld te noemen is de bekende < B > tag en < CENTER >.
Vandaar dat ik zoveel mogelijk CSS wil proberen te gebruiken.
En de html proberen te beperken tot het minimum.

Dat hangt er helemaal vanaf met welke DOCTYPE je wilt werken. Ik neem aan dat je graag wilt werken met het XHTML DOCTYPE, maar waarom ga je niet gebruik maken van HTML 4.01?

Overigens heb ik nog niet gezien dat het IMG tag deprecated was, deze behoort nog gewoon tot de ondersteunende tags en zoals faabman zegt, wanneer een afbeelding in de content hoort, moet je hiervoor gewoon een IMG tag gebruiken...

[JHS]

Arcane schreef op dinsdag 22 februari 2005 @ 01:46:
Veel HTML tags zijn tegenwoordig deprecated en het wordt aangeraden CSS daarvoor in de plaats te gebruiken,

Het hele punt is niet dat je minder html gaat gebruiken, maar dat je html gaat gebruiken waar dat voor nodig is . Zo is een center element niet nuttig, omdat het geen informatie over de structuur / inhoud leverd, maar kan een b element in sommige gevallen zelfs nog wel nuttig zijn! (Gevallen waar je het woord dikgedrukt wil maken, maar dat niet in andere elementen, zoals em, kan vatten) .
Als je graag wil werken zoals het hoort moet je proberen je html document zo in elkaar te zetten dat daar alleen, maar ook genoeg, informatie over de structuur / inhoud in staat. De vormgeving daarvan kan je dan doen met CSS .

---

Woudloper, waarom zou je met XHTM echt (compleet) anders moeten werken dan met HTML 4.01 ? Er zijn nog een paar extra elementen / atributes deprecated, maar niet echt noemenswaardig, dacht ik? Of misschien verder deze discussie maar weglaten, gezien het feit dat 'ie al 40 keer gevoerd is .

[Erkens]

JHS schreef op dinsdag 22 februari 2005 @ 09:14:
maar kan een b element in sommige gevallen zelfs nog wel nuttig zijn! (Gevallen waar je het woord dikgedrukt wil maken, maar dat niet in andere elementen, zoals em, kan vatten) .

je begon goed, alleen toen kwam je met de b-tag...
voor dingen die je wilt benadrukken gebruik je <strong>, die geeft namelijk aan dat iets benadrukt wordt. En in je CSS geef je aan dat het dikgedrukt moet worden (wat overigens de standaard waarde is van de meeste browsers)