Joomla.it Forum

Joomla! 1.0.x (versione con supporto terminato) => Le voci di Joomla.it (solo per versione Joomla 1.0.x) => I Template di Joomla 1.0.x => : eddiweb 16 May 2008, 09:02:00

: Testo su immagine
: eddiweb 16 May 2008, 09:02:00
Salve ragazzi. è possibile far apparire su una foto un testo tipo questo che vedete sul sito http://www.mbox.joomlaitalia.com/ oppure qui http://www.coratolive.it/  ?
: Re: Testo su immagine
: eddiweb 16 May 2008, 10:04:22
ragazzi ho risolto. è un gioco di css...

questo mi permette di creare un riquadro opaco sull'immagine dentro il quale ci andrò a mettere il testo.
:
.riquadropaco {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-SIZE: 20px; BACKGROUND: #003333;

FILTER: alpha(opacity=70); LEFT: 1px; PADDING-BOTTOM: 5px; WIDTH: 400px; PADDING-TOP:

10px; POSITION: absolute; TOP: 150px; HEIGHT: 90px; moz-opacity: .4; opacity: .70
}

Solo che questo riquadro viene creato in una posizione assoluta della pagina web. Vorrei che questo riquadro venga applicato in una determinata posizione dell'immagine per tutte le immagini che visualizzo nella pagina. cioè è possibile ad esempio stabilire la posizione della DIV .riquadropaco rispetto alla DIV che contiene l'immagine? grazie
: Re: Testo su immagine
: websitter 18 May 2008, 22:55:17
Music Box utilizza il Fps (FrontPaheSlideShow) sviluppato da http://demo.joomlaworks.gr/

oppure http://www.frontpageslideshow.net/

insieme di java+css che lo fa funzionare


Per il sito di esempio coratolive:

Al box azzurro viene applicato questo css:


.testoquadro {
   font-weight: bold;
   font-size: 20px;
   left: 1px;
   width: 400px;
   color: #fff;
   position: absolute;
   top: 200px;
   height: 80px;
   text-decoration:none;
   padding:10px;
   overflow:hidden;
}


a quello sport:


.testoquadroSport {
   font-weight: bold;
   font-size: 15px;
   left: -5px;
   width: 180px;
   color: #333;
   position: absolute;
   top: 162px; height:
   60px; text-decoration:none;
   padding:10px;
   font-family:Arial, Helvetica, sans-serif;
}

mentre il test interno:

.testoquadroSport a {
   color: #333; text-decoration:none;
}