[HTML]tekst door gedeelte plaatje

[-Japser-]

Hee,
Is het mogelijk om door een gedeelte van een plaatje tekst te zetten? Het is namelijk een rond .gif plaatje en in dreamweaver selecteer je het toch als een vierkant plaatje. Daar zit dus witte achtergrond(op het plaatje nog) en kan dus best tekst.
Hoe doe ik dit

[NMe]

http://www.w3schools.com/css/css_positioning.asp

[CrashOne]

Kan op verschillende manieren, met een z-index die hoger ligt dan je plaatje of je plaatje als background van een element gebruiken en de tekst in het element.

[-Japser-]

Hmm, mijn website is helemaal opgebouwd uit css, en div in html. Ik kan dus in de css een nieuwe div aanmaken 'plaatje' ofzo, whatever. Maar wat zet ik daar dan in? En tussen de <div plaatje> </div> in de html de tekst?

[We Are Borg]

Gewoon iets als

HTML:

[img]"jouwplaatje.gif"[/img]
<p id="iets">Tekst voor het plaatje</p>

En dan met css de #iets positioneren zodat het over het plaatje heen valt

Edit: ah op die manier, begreep het verhaatje dan niet

[ Voor 27% gewijzigd door We Are Borg op 22-04-2006 20:14 ]

[Verwijderd]

Ik denk dat japser hier bedoeld dat zijn tekst over het witte gedeelte van de achtergrond van het plaatje gaat en op het moment dat hij bij de rand van het rondje is afbreekt. Enige probleempje is dat dat volgens mij niet kan

[ Voor 18% gewijzigd door Verwijderd op 22-04-2006 20:14 ]

[-Japser-]

Ok hier een voorbeeldje, misschien wat makkelijker. Dit is met photoshop gefixt, maar ik heb dus liever geen plaatje, maar 'echte' tekst.
De vraag dus; hoe krijg ik het plaatje zo dicht bij de tekst?
---

---

[Trinsec]

http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm

Dit wat je wou? Het verhaaltje deed me hieraan denken.

[-Japser-]

Trinsec schreef op zaterdag 22 april 2006 @ 23:16:
http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm

Dit wat je wou? Het verhaaltje deed me hieraan denken.

Ja ik geloof dat dit is wat ik zoek! Alleen na dit lange verhaal gelezen te hebben, en engels niet bepaald mijn sterkste punt is, ben ik er nog niet achter welke code's ik nu waar nodig heb...

[BasieP]

-Japser- schreef op zaterdag 22 april 2006 @ 23:07:
Ok hier een voorbeeldje, misschien wat makkelijker. Dit is met photoshop gefixt, maar ik heb dus liever geen plaatje, maar 'echte' tekst.
De vraag dus; hoe krijg ik het plaatje zo dicht bij de tekst?
---
[afbeelding]
---

heb je het linkje wat je eerste replier neergezet heeft al gelezen?

wat in het geval wat jij zegt ook kan is dit:

HTML:

<div id="logodiv">
  hier du sje text
</div>

Cascading Stylesheet:

#logodiv {
  background: white url(img/logo.gif) no-repeat left bottom;
  min-height: 100px; /*hoogte van je logo*/
}

[doeternietoe]

maar dan heb je gelijk een leuk probleem te pakken: min-height werkt niet in internet explorer. Je moet dus eigenlijk in die div een transparant plaatje van 1px * 100px zetten die zorgt voor die min-height van 100px.

[ Voor 3% gewijzigd door doeternietoe op 22-04-2006 23:36 ]

[-Japser-]

BasieP schreef op zaterdag 22 april 2006 @ 23:27:
[...]


heb je het linkje wat je eerste replier neergezet heeft al gelezen?

wat in het geval wat jij zegt ook kan is dit:

HTML:

<div id="logodiv">
  hier du sje text
</div>

Cascading Stylesheet:

#logodiv {
  background: white url(img/logo.gif) no-repeat left bottom;
  min-height: 100px; /*hoogte van je logo*/
}

Hmm deze werkt niet bij mij? De tekst blijft gewoon boven het plaatje en gaat er dus niet langs..

[BasieP]

-Japser- schreef op zaterdag 22 april 2006 @ 23:37:
[...]


Hmm deze werkt niet bij mij? De tekst blijft gewoon boven het plaatje en gaat er dus niet langs..

lezen...
jeez doe eens wat moeite voor je eigen site.. code copy pasten van een forum is natuurlijk leuk, maar misschien is het beter dat je het leert begrijpen, en zo je eigen code maakt.

(btw: de code werkt prima, maar je gebruikt hem niet goed)

[JHS]

doeternietoe schreef op zaterdag 22 april 2006 @ 23:35:
maar dan heb je gelijk een leuk probleem te pakken: min-height werkt niet in internet explorer. Je moet dus eigenlijk in die div een transparant plaatje van 1px * 100px zetten die zorgt voor die min-height van 100px.

Aangezien IE height behandelt als min-height moet je alleen maar een height: 100px; in een met conditional comments geïnclude CSS bestand zetten..

[-Japser-]

Het is nu in zo verre gelukt, dat het de tekst door het plaatje gaat, maar de tekst mag wat naar rechts, zoals op het voorbeeldje. Een div align right of center wordt er niet mooier op. Het liefst doe ik het zoals het voorbeeldje. Hoe kan ik dit nog het best doen?
Oh trouwens ipv 'div id' heb ik 'div class' en dat werkte wel. Weet niet of dat veel uitmaakt?

[ Voor 5% gewijzigd door -Japser- op 23-04-2006 12:10 ]

[JHS]

Align is geen CSS property . Ik snap eerlijkgezegd niet precies wat je bedoelt, maar misschien kan je kijken naar het meegeven van padding?

Het verschil tussen id's en classes is dat een id maar één keer mag voorkomen op een pagina, waarmee je dus zeker weet dat je bij een selectie m.b.v. een id maar één item terugkrijgt. Als het met een class wel werkt, komt dat waarschijnlijk doordat je in je CSS een class selecteerd.

Te horen aan de reacties die je geeft zou ik eerlijkgezegd je willen aanraden een aantal basis CSS tutorials door te nemen .

[-Japser-]

Hmm ja, ik heb het nu opgelost maar met een beetje een 'vieze' oplossing. Namelijk een x aantal ' ' in de html (wat inmiddels een php bestand is geworden) gezet, wat dus de tekst ook opschuift en ik het voorbeeldje krijg...

[André]

Beste -Japser-, dit is eigenlijk wel heel erg basic. Je kunt zelf ook dingen proberen, en als je er dan echt niet uit komt kun je alsnog een vraag stellen. Over dit onderwerp is echt genoeg te vinden.