css positionering
11 oktober 2007 - 07:07   
geplaatst door: pakito
Heyhey, ik ben geen css crack en zoek hoe je afbeeldingen moet positioneren met css. Het is voor de website (nu in testversie) op http://www.konijnmetpluimen.be/kristofdevos

Nu  zie je dat alle afbeeldingen van de telefoondraad en de vogels die erop zitten in tabellen zitten, maar die wil ik weg.

Maar hoe moet mijn css file en mijn html er dan uitzien als ik bvb beeld_01.jpg op 100px van boven en 100 px van links wil plaatsen?

css positionering
11 oktober 2007 - 08:25    reactie #1
geplaatst door: Kapotlood
Positioneren op de pixel precies kun je doen met margins:
#divnaampje {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin: 2px 4px 6px 7px;
  background: #e2e2e2 url(/link/naar/plaatje/.jpg) left top no-repeat;
}

De 1-a-laatste regel werkt als volgt: 2px van boven, 4px van rechts,
6px van onder en 7px van links. Je gaat als het ware met de klok mee dus ;-)

De laatste regel is waar je je plaatje inzet. #e2e2e2 is een kleurnummer voor
het geval het plaatje niet geladen wordt/kan worden. Na de link naar het plaatje
zie je "left top" wat betekent (hoe kan het ook anders) dat het plaatje linksboven
in de div staat. No-repeat spreekt voor zich; het plaatje herhaalt zichzelf niet.

Succes! :)

Mvg,
Joram

css positionering
11 oktober 2007 - 08:49    reactie #2
geplaatst door: pakito
Merci joram! Ik denk dat ik ongeveer kan volgen.
Dit moet dus in de css-file.

Wat typ ik dan in de html om hiernaar te verwijzen? (Wss een domme vraag, maar ben er niet echt in thuis …)

css positionering
11 oktober 2007 - 08:54    reactie #3
geplaatst door: Kapotlood
<div id="divnaampje"></div>
Eventueel met een tekst in tussen die 2 tags ;)

Maar als je er zo weinig vanaf weet is het echt handig om je er
een beetje in te verdiepen. De 2 dingen die ik nu opschreef zijn
heel basic, maar wel echt heel makkelijk te leren. Ik denk dat
als je er even een uurtje voor uit trekt om dit soort dingen door
te nemen, dat je al een heel eind kan komen ;)

- www.alistapart.com (wat meer geavanceerd)
- http://www.htmldog.com/ (beginners materiaal)

Succes :)

(Bewerkt door joram om 8:55, 11-10-2007)

css positionering
11 oktober 2007 - 09:05    reactie #4
geplaatst door: pakito
Merci Joram, je bent m'n nieuwe persoonlijke god  :worship:
css positionering
11 oktober 2007 - 09:26    reactie #5
geplaatst door: willem169
Ware het niet dat het nogal overbodig is eerst alle margins op 10px te zetten, en vervolgens (regel 5) aan alle margins stiekum toch een andere waarde toe te kennen. Overigens kom je zo -denk ik- ook aardig in de knoop met het positioneren van de andere vogels.

Wat je kunt doen is ze absoluut positioneren. Zoek op position:absolute;

[url]http://helder-reclame.nl[/]
css positionering
11 oktober 2007 - 10:31    reactie #6
geplaatst door: Kapotlood
Willem, het was een voorbeeld van de soorten margins die je hebt,
niet een specifieke waarde van wat hij moet gebruiken ;)

p.s.: Goh, nu al een god? Eerst werd ik ereburger... en nu al God? :happy: Gossie, hahaha

(Bewerkt door joram om 10:39, 11-10-2007)

css positionering
11 oktober 2007 - 23:17    reactie #7
geplaatst door: pakito
This should do the trick:

http://www.konijnmetpluimen.be/kristofdevos

Bedankt voor de hulp!

css positionering
12 oktober 2007 - 07:16    reactie #8
geplaatst door: pakito
… En nog een vraagje dat aansluit bij het eerste …

Ik zou zo linksboven een afbeelding willen plaatsen die duidelijk maakt dat je op de vogeltjes moet klikken. Die afbeelding moet zo'n 3 seconden blijven staan en dan naar wit (witte afbeelding?) faden en ook wit blijven.

Kan dat ook met CSS?

css positionering
12 oktober 2007 - 08:48    reactie #9
geplaatst door: Kapotlood
Nee :)

Wat jij wilt is een soortevan effect/film, en daar heb je of Flash voor
nodig, of JavaScript (of AJAX, een XML/JavaScript combo).

Het is wat hogere wiskunde als je niet te bekend bent met die dingen,
maar je zou via Google eens moeten zoeken naar jQuery of Moo.fx
Dit zijn code-bibliotheken die je relatief makkelijk kan gebruiken.
Ook zijn er bakken met tutorials en voorbeelden te vinden die gebruik
maken van deze 2 bibliotheken.

- http://markc.renta.net/jquery/ bijvoorbeeld ;)

css positionering
12 oktober 2007 - 17:57    reactie #10
geplaatst door: pakito
thank you god :cool:
css positionering
12 oktober 2007 - 19:30    reactie #11
geplaatst door: Steve07
Je kan ook een animated gifje maken dat eerst jouw boodschap weergeeft en daarna wit wordt.

(Bewerkt door Steve07 om 19:30, 12-10-2007)
css positionering
12 oktober 2007 - 20:56    reactie #12
geplaatst door: pakito
Steve07, zo simpel dat ik er niet aan had gedacht! :thumbs-up: