[HTML] Nummer op plaatje plaatsen

[Verwijderd]

Ik wil bovenop een image element een nummer kunnen zetten in een webpage.
Op die manier spaar ik véél Photoshop werk uit, en kunnen de nummers makkelijk gewijzigd worden.

Ik dacht dit te doen met CSS, maar ik stoot tegen een probleempje ...

Aangezien de plaats van de nummer relatief gegeven wordt t.o.v. het plaatje dacht ik dus

code:

position: relative;

te moeten gebruiken. Maar dan blijft de oorspronkelijke plaats leeg, i.p.v. te worden opgevuld met de andere plaatjes.

Bij

code:

position: absolute;

wordt de oorspronkelijke plaats mooi opgevuld, maar dan krijg ik die nummer onmogelijk in alle mogelijke omstandigheden boven die image ...

Iemand een idee ?

P.S. : Page wordt geschreven in PHP, moest dat iets kunnen helpen aan de zaak

[Willem]

Doe even wat verduidelijken met een URL ofzo?
Dit is een beetje weinig info..

Image in een <div> en andere <div> daarin floaten kan ook (met relative idd)

[Verwijderd]

Probleem

Het probleem situeert hem dus rechts bij de thumbnails.
Der staan ook nummertjes op de plaatjes zelf (onder de CSS nummers "1" dus momenteel), maar die gaan eraf als het lukt met CSS
De plaatjes rechts zouden allemaal direct onder elkaar moeten komen, vertikaal gecentreerd.

[ Voor 73% gewijzigd door Verwijderd op 22-07-2004 00:48 ]

[smokalot]

ik weet niet of t haalbaar is qua setup die je nu hebt, maar php met gd is voor dit soort dingen erg makkelijk. volgens mij zal het ook niet veel performance vragen.

dan hoef je clientside helemaal niets over iets anders heen te plakken, omdat je het gewoon IN het plaatje doet.

[T-MOB]

Het kan aan mij liggen natuurlijk, maar ik zie het "probleem" niet. Ik zie drie plaatjes onder elkaar met allemaal een zwart blok met nummer 1. Zowel in IE als in FF...

...overigens hoef je geen tables in divs te plaatsen om de boel op te maken.

[ Voor 23% gewijzigd door T-MOB op 22-07-2004 00:55 ]

[Verwijderd]

T-MOB schreef op 22 juli 2004 @ 00:50:
Het kan aan mij liggen natuurlijk, maar ik zie het "probleem" niet. Ik zie drie plaatjes onder elkaar met allemaal een zwart blok met nummer 1. Zowel in IE als in FF...

...overigens hoef je geen tables in divs te plaatsen om de boel op te maken.

Hmmm, hier niet ...
Getest op :
Windows : IE
Linux : Konqueror, Firefox, Opera

[Verwijderd]

smokalot schreef op 22 juli 2004 @ 00:47:
ik weet niet of t haalbaar is qua setup die je nu hebt, maar php met gd is voor dit soort dingen erg makkelijk. volgens mij zal het ook niet veel performance vragen.

dan hoef je clientside helemaal niets over iets anders heen te plakken, omdat je het gewoon IN het plaatje doet.

Hmmm, daar had ik nog niet van gehoord ...
Maar momenteel draait de site hier thuis, en ik vind zo niet direct een debian package daarvan voor php5
En binnen een klein maandje komt hij te draaien op de server van de school waar ik zit, en ik weet niet of ze gd daar hebben draaien ...

[Grijze Vos]

Je kunt em toch ff zelf compilen, zo gedaan. GDLib moet je btw apart installeren voordat je php her configureert en installeert.

[Verwijderd]

Grijze Vos schreef op 22 juli 2004 @ 01:02:
Je kunt em toch ff zelf compilen, zo gedaan. GDLib moet je btw apart installeren voordat je php her configureert en installeert.

Maar dan is mijn probleem er terug als ik hem verplaats naar de server van de school ...

[Helmet]

Grijze Vos schreef op 22 juli 2004 @ 01:02:
Je kunt em toch ff zelf compilen, zo gedaan. GDLib moet je btw apart installeren voordat je php her configureert en installeert.

Gd zit standaard in PHP, voeg maar eens --with-gd toe aan je ./configure en deze zal (mits de juiste libraries aanwezig zijn) geinstalleerd worden!

[Verwijderd]

K, found a package
Dus ga het toch maar es proberen

Maar als iemand toch weet hoe een element relatief te positioneren zonder de oorspronkelijke plaats open te houden, laat mij weten!
want zal het in de toekomst toch nodig gaan hebben voor een ander idee'tje

[Grijze Vos]

Helmet schreef op 22 juli 2004 @ 01:05:
[...]


Gd zit standaard in PHP, voeg maar eens --with-gd toe aan je ./configure en deze zal (mits de juiste libraries aanwezig zijn) geinstalleerd worden!

hmz, zou kunnen.

* Grijze Vos checkt zn config...
...
...
klopt. Mja, ik upgrade naar php5, en iemand anders had de gd install voor 4 gedaan, dus ik wist et niet zeker. Bij mij was ie iig los installed voordat php erop ging.

[Verwijderd]

Het is gelukt!
Hartelijke dank om mij gd te leren kennen

[crisp]

position:relative wordt in de flow geplaatst, er vervolgens uitgehaald en verplaatst
position:absolute wordt geplaatst t.o.v. zijn containing body - dat is of het document element, of een containing blocklevel element dat relatief of absoluut geplaatst is.

[zubauza]

Verwijderd schreef op 22 juli 2004 @ 00:36:
Bij

code:

position: absolute;

wordt de oorspronkelijke plaats mooi opgevuld, maar dan krijg ik die nummer onmogelijk in alle mogelijke omstandigheden boven die image ...

probeer de div waarin het nummer staat

code:

z-index: 1

mee te geven, dat zorgt ervoor dat de div boven de rest van de pagina schuift,

zie ook http://www.w3schools.com/css/pr_pos_z-index.asp

[crisp]

kwestie van volgorde:

HTML:

<div style="position:relative">
  <img src="plaatje.gif" />
  <div style="position:absolute;left:0px;top:0px">nummertje</div>
</div>

[zubauza]

t klinkt een beetje stom maar 0px is hetzelfde als 0

*narf*

[krvabo]

zubauza schreef op 22 juli 2004 @ 13:53:
t klinkt een beetje stom maar 0px is hetzelfde als 0

*narf*

<table height="10"> is hetzelfde als <table height=10>, maar staat veel duidelijker.
Ik hoop dat ze dat in css3 er weer uithalen en zorgt dat iedereen goede css blijft schrijven, anders wordt het weer net zo bij html 4.01 (en gelukkig niet meer in xhtml)

[zubauza]

krvabo schreef op 22 juli 2004 @ 14:22:
<table height="10"> is hetzelfde als <table height=10>, maar staat veel duidelijker.
Ik hoop dat ze dat in css3 er weer uithalen en zorgt dat iedereen goede css blijft schrijven, anders wordt het weer net zo bij html 4.01 (en gelukkig niet meer in xhtml)

nu haal je twee dingen door elkaar...

<table height="10"> = <table height=10> omdat een getal geen string is

style="top: 0px" = style="top: 0" omdat je een maat in bijv. px, inch en cm kunt opgeven en omdat 0 px = 0 inch = 0 cm = 0

verder was de opmerking niet erg serieus bedoeld

offtopic:
nuttige table van 10px hoog

[krvabo]

zubauza schreef op 22 juli 2004 @ 14:28:
[...]

nu haal je twee dingen door elkaar...

<table height="10"> = <table height=10> omdat een getal geen string is

style="top: 0px" = style="top: 0" omdat je een maat in bijv. px, inch en cm kunt opgeven en omdat 0 px = 0 inch = 0 cm = 0

verder was de opmerking niet erg serieus bedoeld

offtopic:
nuttige table van 10px hoog

Dat is dan denk ik een kwestie van voorkeur.
Ikzelf vind dat je alles in quotes en in eenheden moet aangeven.

offtopic:
en die table was een voorbeeld

[BtM909]

krvabo schreef op 22 juli 2004 @ 14:56:

Ikzelf vind dat je alles in quotes en in eenheden moet aangeven.

offtopic:
en die table was een voorbeeld

Grappig, maar de bedoeling van een standaard is toch duidelijkheid. Er mag, in principe, geen discussie ontstaan of een bepaalde waarde nou px, em of % is. Waarom zou je dat met absoluut 0 ook doen? Of is 0px niet hetzelfde als 0pt?

[Verwijderd]

zubauza schreef op 22 juli 2004 @ 09:14:
[...]


probeer de div waarin het nummer staat

code:

z-index: 1

mee te geven, dat zorgt ervoor dat de div boven de rest van de pagina schuift,

zie ook http://www.w3schools.com/css/pr_pos_z-index.asp

Dat helpt niet, want het stond al op 1

[crisp]

ik heb mezelf gewoon aangeleerd alles consequent te doen, dus als ik met pixels werk geef ik ook 0 de toevoeging px - dat scheelt weer als ik later besluit dat alle 0px toch 10px moet worden en ik een regular-expression search-replace in vi loslaat op het bestand

[Verwijderd]

px er achter is wel degelijk van belang. Ligt er maar net aan welk doctype je gebruikt. Het kan echt verschil uitmaken hoor!

[Grijze Vos]

crisp schreef op 22 juli 2004 @ 19:27:
ik heb mezelf gewoon aangeleerd alles consequent te doen, dus als ik met pixels werk geef ik ook 0 de toevoeging px - dat scheelt weer als ik later besluit dat alle 0px toch 10px moet worden en ik een regular-expression search-replace in vi loslaat op het bestand

vim is zo relaxed.

[zubauza]

Verwijderd schreef op 22 juli 2004 @ 19:04:
Dat helpt niet, want het stond al op 1

z-index werkt alleen in combinatie met position

z-index: <groter getal dan bij andere divs> zou moeten werken

[Verwijderd]

zubauza schreef op 22 juli 2004 @ 20:57:
[...]

z-index werkt alleen in combinatie met position

z-index: <groter getal dan bij andere divs> zou moeten werken

Nee, echt niet, de originele plaats wordt nog steeds vrij gehouden ...

[Verwijderd]

Wat hebben mensen van een design opleiding altijd met van die gecentreerde sites.
heb werkelijk nog nooit een site van zo iemand gezien die er niet zo ongeveer uit zag.
is dat verplicht van school uit ofzo?

verder is je prboleem zeer simpel op te lossen met de combo div's + CSS.
verder ben ik ook van mening dat tabellen gebruiken voor layout zwaar passe is, maar dat is een andere discussie.

in ieder geval, ik had tijd te veel dus hier is mijn oplossing.
div/css boomerang site oplossing
de site is CSS valid, en redelijkewijs xHTML valid.
eenigste echte foute is dat ik vergeten was een <ul> rond de <li>'tjes te zetten.

de oplossing is met deze opstelling dat men simpelweg de nummers op absolute zet qua position en the plaatjes op relative.
ze dan via top. bottom, left, right laten overlappen en klaar is kees.

[crisp]

Verwijderd schreef op 25 juli 2004 @ 03:52:
[...]
in ieder geval, ik had tijd te veel dus hier is mijn oplossing.
div/css boomerang site oplossing
de site is CSS valid, en redelijkewijs xHTML valid.
[...]

Je bent alleen vergeten 'm in crappy IE te testen - daar vallen je nummertjes buiten de plaatjes

[Verwijderd]

Thx StratoS_V2.0!
Buiten het feit dat ik die cijfertjes heb opgelost met php-gd kan uw oplossing mij zo te zien wel veel leren ivm CSS
De code is stukken overzichtelijker met die div's ipv met table's.
Ik ben gewoon van table's te gebruiken doordat we dat zo hebben geleerd op school ...

En wat het site design betreft : Nja, misschien wat cliché, maar de meeste sites zijn kwa design wel in een of ander hokje te duwen hoor
De reden voor mijn keuze is redelijk eenvoudig, ik wil gewoon niet te veel op 1 pagina hebben. Want zo kan ik beter de aandacht vestigen op het belangrijkste. En mensen zienn het meestal niet zitten om een pagina met veel op te beginnen lezen, dat motiveert niet echt ...
De afmetingen zijn eerder arbitrair gekozen om ook op kleinere resoluties goed en volledig zichtbaar te zijn.

edit:
Hmmm, vind table's toch een stuk accurater werken dan div's met CSS ...
Heb die CSS trouwens altijd al wat tricky gevonden. Doet het de ene keer wel, de andere keer niet. De overerving in niet Ie browsers durft ook al es mank lopen. En die positionering met CSS vind ik ook maar niet.

Thx StratoS_V2.0, uw oplossing gaat trouwens volledig de mist in bij het resizen van het venster tot iets smaller dan de site-inhoud.

[ Voor 23% gewijzigd door Verwijderd op 25-07-2004 21:03 ]