Joomla!NL - [opgelost] tekst op afbeelding of achtergrondafb.'n rounding geven

tekst op afbeelding of achtergrondafb.'n rounding geven

04 mei 2013 10:31

#1

Hallo,
Ik heb een afbeelding gemaakt 360x200 met een grijze achtergrond (d6d6d6) Hierin zou tekst moeten komen Ook zouden de bovenkant links en rechts een border-radius moeten krijgen van 20px. Dit heb ik opgelost door een achtergrond afbeelding te maken die boven de rondingen heeft. Hierin kan ik en heb ik tekst geplaatst. Omdat de site een achtergrond kleur heeft verschijnen witte rondingen om de hoeken. Als ik de achtergrond wit zou maken zijn deze verdwenen. Bij de foto's die ook de ronding hebben heb ik dat opgelost met css3 (border-radius 20px) en dit werkt prima, maar met de afbeelding waar de tekst in moet lukt dat niet. Wie kan mij een hint geven hoe ik dit kan oplossen? Ik ben voor alles in . En uiteraard heel hartelijk bedankt .
groet,
Jos

zie bijlage die meer duidelijk maakt

zjoskebest
Heeft onderwerp gestart
Regelmatige bezoeker van Joomla!NL
Berichten: 427

tekst op afbeelding of achtergrondafb.'n rounding geven

04 mei 2013 10:49

#2

Ik zie ze niet, maar al het je echt stoort dan zou je ipv een .jpg een transparante .png of .gif kunnen maken van die image, zodat die witte hoekjes transparant zijn.

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Astrid
Moderator + Technisch team
Berichten: 37456

tekst op afbeelding of achtergrondafb.'n rounding geven

04 mei 2013 13:36

#3

Hi Astrid, Helaas werkt dat niet zie bijlage. Dit had ik ook al geprobeerd.Het euvel was op de eerder gestuurde bijlage niet goed te zien omdat de achtergrond op wit was gezet. De bedoeling is dat de achtergrond licht grijs gaat worden zoals op de bijlage is te zien. De oplossing met CSS3 ronding is duidelijk te zien dat deze geen witte rondingen laat zien. Als het mogelijk is om border-radius van CSS3 ook voor achtergrond plaatjes kan worden toegepast is het euvel opgelost , maar dit is mij niet gelukt. Ook kan ik geen tekst inbrengen als de achtergrondafbeelding (met de halve ronding) een afbeelding is.
groetjes

Jos

zjoskebest
Heeft onderwerp gestart
Regelmatige bezoeker van Joomla!NL
Berichten: 427

tekst op afbeelding of achtergrondafb.'n rounding geven

04 mei 2013 14:56

#4

Hernoemen helpt niet als je er geen transparante afbeelding van maakt. Maar je zou het ook met css op kunnen lossen door er een class aan toe te voegen:

Code:

.grijs {
  border-radius: 20px 20px 0px 0px;
  box-shadow: 2px 2px 3px rgba(204, 204, 204, 0.75);
  background: linear-gradient(to left, #e9e9e9 0%, #cecece 100%) repeat scroll 0 0 transparent;
}

Moet je zelf nog even de definities voor de anders browsers erbij zoeken.
Dus i.p.v. dit:

Code:

<div style="background-image: url('/images/logo/ag.png'); background-repeat: no-repeat;">

wordt het dan dit:

Code:

<div class="grijs">

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Astrid
Moderator + Technisch team
Berichten: 37456

tekst op afbeelding of achtergrondafb.'n rounding geven

04 mei 2013 20:22 - 04 mei 2013 20:25

#5

Hi Astrid, Bedankt ! zo'n oplossing bedoelde ik eigenlijk, maar ik krijg nog niet de kleur grijs (gradient) in het stuk van de ronding. Het is toch de bedoeling om de afbeelding ag.png niet meer op te nemen.?

Dus krijg ik:

Code:

<div align="center">
<div style="width: 360px; text-align: center;"><a href="index.php?option=com_content&amp;view=article&amp;id=18&amp;Itemid=176"><img class="imagegallery" src="images/collectief/Shutters_woonkamer_sfeervol%20360x270.JPG" alt="Shutters woonkamer sfeervol 360x270" width="360" height="270" /></a> 
<div class="grijs"><a href="index.php?option=com_content&amp;view=article&amp;id=18&amp;Itemid=176"><strong><span style="font-size: 14pt; color: #00a2e8;">Comfort Line €240,- p/m<sup>2</sup></span></strong><span style="font-size: 10pt; color: #00a2e8;"> incl. BTW</span></a><br /><a href="index.php?option=com_content&amp;view=article&amp;id=18&amp;Itemid=176"><span style="color: #777777; font-size: 10pt;"><strong>inclusief inmeten en montage</strong></span></a></div>
<div style="border: 1px solid #e7e7e7;"><a href="index.php?option=com_content&amp;view=article&amp;id=18&amp;Itemid=176; background-color:#fff">Basic lijn maatwerk lindehouten shutters</a><br /><a href="index.php?option=com_content&amp;view=article&amp;id=18&amp;Itemid=176">voor toepassing indoor</a></div>
</div>
</div>

Edit Jelle. Ik heb de code tussen codetags geplaatst, volgende keer graag zelf doen.

zjoskebest
Heeft onderwerp gestart
Regelmatige bezoeker van Joomla!NL
Berichten: 427

tekst op afbeelding of achtergrondafb.'n rounding geven

05 mei 2013 10:10

#6

Heb je de volledige gradient definitie toegevoegd voor alle browsers?

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Astrid
Moderator + Technisch team
Berichten: 37456

tekst op afbeelding of achtergrondafb.'n rounding geven

05 mei 2013 12:59

#7

Hi Astrid,
Nee, ik denk niet dat ik het voor 100% goed heb want het resultaat is nog niet helemaal juist (zie b ijlage 1 en 2)
groet
Jos

Het gaat om de eerste afbeelding in collectie die is volgens de code die bijgesloten is , verwerkt. De andere hebben nog gewoon afgeronde foto's

www.jobo-advies.nl

zjoskebest
Heeft onderwerp gestart
Regelmatige bezoeker van Joomla!NL
Berichten: 427

tekst op afbeelding of achtergrondafb.'n rounding geven

05 mei 2013 13:23

#8

Klopt, maar je hebt de class niet toegewezen:

Deze afbeelding is verborgen voor gasten.
Login of registreer om deze te zien.

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Astrid
Moderator + Technisch team
Berichten: 37456

tekst op afbeelding of achtergrondafb.'n rounding geven

05 mei 2013 21:15

#9

Astrid Bedankt!!! het lijkt erop dat het werkt. Heb het nu uitgeprobeerd in localhost en dat ziet er goed uit.

Morgen op de site plaatsen.

fijne avond
groet
Jos

zjoskebest
Heeft onderwerp gestart
Regelmatige bezoeker van Joomla!NL
Berichten: 427

tekst op afbeelding of achtergrondafb.'n rounding geven

05 mei 2013 21:23

#10

Hallo,

Fijn dat het opgelost is.
Dank je wel voor de terugkoppeling.

Je kunt in de toekomst zelf na het terugkoppelen de topic sluiten door op de groene "opgelost" knop te klikken.

Groeten, Jelle

Voordat je een vraag post, gebruik eerst de zoekfunctie van ons forum eens.
Vragen uitsluitend via dit Forum.

Is je vraag opgelost? Dan kan je hem zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Jelle
Algemeen Moderator
Berichten: 13626

Laatste nieuws

Welkom bij Joomla!NL

opgelost tekst op afbeelding of achtergrondafb.'n rounding geven

tekst op afbeelding of achtergrondafb.'n rounding geven

tekst op afbeelding of achtergrondafb.'n rounding geven

tekst op afbeelding of achtergrondafb.'n rounding geven

tekst op afbeelding of achtergrondafb.'n rounding geven

tekst op afbeelding of achtergrondafb.'n rounding geven

tekst op afbeelding of achtergrondafb.'n rounding geven

tekst op afbeelding of achtergrondafb.'n rounding geven

tekst op afbeelding of achtergrondafb.'n rounding geven

tekst op afbeelding of achtergrondafb.'n rounding geven

tekst op afbeelding of achtergrondafb.'n rounding geven

Laatste forumberichten

Wil je Joomla!NL steunen?