Mettere testo di fianco ad un immagine [Era: Salute a tutti.]

[william.s]

Mi sono iscritto a questo forum perche intendo costruirmi letteralmente step by stem un mio sito web personale, semplice ma curato di dettagli, credo che l'iscrizione a questo forum sia neccessaria per arrivare a capire più rapidamente l'html, anche in previsione di ciò che intendo realizzare. (un sito meteo fotografico)

La prima difficoltà evidente che ho incontrato nell'inizio del mio percorso, è come mettere un link immagine, con affiancato un blocco testo che lo descrive.

Con un immagine semplice sono riuscito a trovare il codice con la tag "float" per posizionare a destra il mio blocco testo. Non sono però riuscito a fare altrettanto per l'affiancare lo stesso blocco testo a destra di un link immagine, come desidero fare.

Ad ogni tentativo che faccio non c'è nulla da fare, il testo viene messo di sotto! Mentre io voglio mtterlo a destra.

Sono impantanato qui da due giorni e purtroppo il tempo libero disponibile non è mai troppo. Qualcuno mi sa dire come si fa?

[Hobby]

Originariamente inviato da william.s
Mi sono iscritto a questo forum perche intendo costruirmi letteralmente step by stem un mio sito web personale, semplice ma curato di dettagli, credo che l'iscrizione a questo forum sia neccessaria per arrivare a capire più rapidamente l'html, anche in previsione di ciò che intendo realizzare. (un sito meteo fotografico)

La prima difficoltà evidente che ho incontrato nell'inizio del mio percorso, è come mettere un link immagine, con affiancato un blocco testo che lo descrive.

Con un immagine semplice sono riuscito a trovare il codice con la tag "float" per posizionare a destra il mio blocco testo. Non sono però riuscito a fare altrettanto per l'affiancare lo stesso blocco testo a destra di un link immagine, come desidero fare.

Ad ogni tentativo che faccio non c'è nulla da fare, il testo viene messo di sotto! Mentre io voglio mtterlo a destra.

Sono impantanato qui da due giorni e purtroppo il tempo libero disponibile non è mai troppo. Qualcuno mi sa dire come si fa?

Occhio al titolo non è conforme al regolamento.

Se fai una ricerca su html.it o con google puoi trovare dei bellimi tooltips che possono risolvere il tuo problema

http://javascript.html.it/script/ved...on-animazione/

http://cerca.html.it/cgi-bin/cerca.c...ova&gr=off&ul=

[LineaPixel]

Ma il testo con didascalia è inserito all'interno di un altro riquadro di testo?
La soluzione comunque dovrebbe essere di inserire tutto quanto in un tag div, dentro al quale inserisci l'immagine e il blocco di testo.
Al blocco di testo dovrai impostare float:right, come hai già capito.
dovrebbe essere sufficiente impostare display:inline come proprietà per fare in modo che stiano affiancati, se non basta, nel tag dell'immagine e della didascalia, il solo float

[william.s]

Cerco di farti capire meglio:

<div style="border: 0px solid #000">
[img]file:///C:/Documents%20and%20Settings/Utente/Desktop/cumulonembi.JPG[/img]


tutto quello che vuoi </p>
</div>

Con questo pezzo di codice io metto un immagine a sinistra e il testo compare a destra come in effetti vorrei. Si tratta però di un immagine semplice. Se ci passi il cursore sopra, non succede assolutamente nulla. Devo arrivare allo stesso obbiettivo con l'immagine che funziona da link, (cursore che diventa manina) il testo di fianco deve essere una breve introduzione di quello che tratterà la pagina alla quale accedi.

Non ho messo nessuna tabella..

Sono andato anche a sbirciare in altri siti con affinità per cercare di capire che tipo di stringa inserissero, ma non ci ho capito una cippa! C'è poco da fare, c'è bisogno di qualcuno che me lo spieghi, altrimenti qui non ne esco davvero mai più.

Vi allego anche un immagine per farvi capire ancora meglio.

[LineaPixel]

Vediamo:

<div style="display:block; width:12em"> 
  [img]........[/img]
  <span style="float:left; display:inline; margin-left:1em;">testo testo testo testo</span>
</div>

Prova così, è chiaro che qui le impostazioni sono solo di posizionamento e comunque sarebbe meglio usare una class css

[william.s]

Cos'è una class css?

[Hobby]

Originariamente inviato da william.s
Cos'è una class css?

Ecco un testo per definire la classe:

• Le classi Se abbiamo optato per un foglio di style, esterno o interno che sia, non è detto che dobbiamo necessariamente ridefinire tutti o alcuni elementi (tags) di Html, anzi, lasciamoli stare così come sono e creiamone di nuovi facendo uso delle classi, un sistema molto più comodo e pratico, ve lo assicuro; visto poi che se ne possono creare quante e quelle che ci pare, così facendo si sfrutteranno al meglio le potenzialità dei CSS (fogli di style).
  
  E' infatti possibile definire con estrema semplicità delle proprie classi di stile, saranno queste ad essere richiamate dall'interno dei vari elementi html. Pensate al fatto che lo stesso elemento potrebbe richiamare quando una classe quando un'altra, come dire: si ottengono dallo stesso elemento risultati completamente diversi a seconda di quale classe viene ad esso associata.
  
  Esempio: Definiamo una classe, per farlo è sufficiente editare un nome preceduto da un punto, quale nome? Non ha importanza, decidetelo voi, meglio se attinente con l'effetto che dovrà produrre in modo tale da essere ricordato con maggiore facilità quando avremo bisogno di adoperarlo.
  
  Vediamo praticamente come fare, immaginiamo di volere qualcosa che serva per la nostra firma, quella che di solito si mette a fine pagina. Creeremo una classe col nome firma che farà uso di un font piccolo e di colore rosso in stile italico.
  
  Richiamiamo dal nostro editor il file .css se si trattava di un foglio esterno, altrimenti portatevi all'interno della zona style posizionandoci fuori da eventuali parentesi graffe, possiamo descrivere la nostra classe firma assegnandole i vari attributi:
  
  
  
  
  
  .firma {
  font-family: Verdana,Arial,sans-serif;
  color: #ff0000;
  font-size: 10pt;
  text-align: center;
  font-weight: lighter;
  font-style: italic;
  }
  
  
  Da notare che fra il . (punto) iniziale e la scritta firma non ci sono spazi vuoti. Vediamo cosa fanno le singole voci inserite in questa nuova classe firma:
  
  
  
  font-family: Verdana,Arial,sans-serif;
  significa che adopererà il font verdana (il primo dichiarato), se questo non fosse installato sul PC del visitatore si cercherà Arial (il secondo dichiarato), nel caso mancasse anche quello si passerà a san-serif e così via, si possono specificare fino a tre fonts alternativi, nel caso in cui nessuno dei tre fosse installato verrà visualizzato quello standard di default.
  
  
  
  color: #ff0000;
  Colore rosso, si possono esprimere i colori in formato esadecimale, come in questo caso, facendoli precedere dal segno pound # (cancelletto), oppure scrivendo il relativo nome del colore in lingua inglese. Anche red avrebbe prodotto lo stesso risultato. (Su questa pagina potete trovare nomi e codici esadecimali per i colori più comuni)
  
  
  
  font-size: 10pt;
  Dimensioni del font: 10 punti, potevamo esprimere il valore anche in pixel o in centimetri o anche in altri modi che vedremo in seguito. In pixel forse è addirittura meglio che in punti perchè si adatterà perfettamente alla risoluzione video qualunque essa sia. Da notare che non ci sono limiti alle dimensioni come accadeva per il font dove come valore max era 7 (parliamo di html).
  
  
  
  text-align: center;
  Allineamento del testo, in questo caso centrato, si poteva scegliere fra destro, sinistro o giustificato; adoperando i relativi termini in lingua inglese: left, right, justify.
  
  
  
  font-weight: lighter;
  Consistenza del font, lighter; leggera, potevamo adoperare: normal, bolder, bold o anche numeri: 400, 500 ecc. ecc.
  
  
  
  font-style: italic;
  Stile Italico, avevamo a disposizione anche :normal, oblique.
  
  
  
  E adesso? Adesso la classe è pronta, non resta che richiamarla ogni volta che serve... Come?
  
  Semplice, ogni elemento (tag) di HTML supporta l'attributo class, quindi dovendo scrivere una parte di testo e volendo che questa parte faccia uso degli attributi appena inseriti nella classe firma, basterà assegnare "firma" all'elemento (tag) prescelto, nel nostro caso <p class="firma">.
  
  Tutto ciò che verrà scritto all'interno di questo paragrafo, rispetterà i parametri della classe, mi raccomando la relativa chiusura dell'elemento (tag) </p>
  
  Avrete certamente capito che a questo punto l'elemento html altro non è che un contenitore, per cui potremo continuare ad usare
  
  con classi diverse ed avere così paragrafi formattati in modo completamente diverso, basterà semplicemente cambiare il nome della classe facendogli richiamare una classe creata precedentemente. Da questo modo di lavorare la vera versatilità e potenza svolta dai fogli di style.
  
  Un esempio chiarirà meglio:
  
  <p class="firma">questo testo rispetta gli attributi della classe firma </p>
  
  Questo il risultato:
  
  questo testo rispetta gli attributi della classe firma
  
  Si possono addirittura combinare le varie classi nidificandole al loro interno grazie ai contenitori quali <span> </span>, la cosa però non sempre è fattibile e si raccomanda una certa dimestichezza onde evitare pasticci indecifrabili.
  
  Vi sarete resi conto che non è poi così difficile, possiamo creare tutte le classi che ci servono e battezzarle con i nomi che vogliamo per poi assegnare loro i parametri più svariati. Se all'interno del vostro sito, fatto di una o di cento pagine html, vi fosse anche una sola piccola parte di testo che non vi convince, sarà sufficiente assegnargli la giusta classe o crearne una nuova specifica che faccia al caso vostro.
  
  Ci sono anche classi più rigide pechè associate a priori ad un solo elemento, in questo esempio all'elemento
  
  paragrafo, facendo uso della stessa sintassi usata precedentemente per richiamare il nome della classe.
  
  p.sinistro {text-align: left; text-indent: 12px;}
  p.giustificato {text-align: justify; text-indent: 12px;}
  
  
  
  
  
  In questo caso possono essere usate soltanto dall'elemento
  
  
  
  <p class="sinistro"> Questo paragrafo è allineato a sinistra.
  
  NOTA Non è possibile associare più di una sola classe allo stesso elemento: <p class="sinistro" class="giustificato"> risulta errato.
  

Ma tu il testo al lato della foto lo vuoi che appaia solo quando passi il mouse sulla foto?

[ildanny]

ciao william.s, il tuo problema è facilmente risolvibile.
Devi inserire il tag o ancora, che serve per creare un link semplice o tramite un' immagine.


<div style="border: 0px solid #000">
[img]file:///C:/Documents%20and%20Settings/Utente/Desktop/cumulonembi.JPG[/img]


tutto quello che vuoi</p>
</div>


ciao ildanny

[william.s]

Grazie amico mio, il primo passo per la costruzione di questo benedetto sito si sta compiendo... riscontrerò altri 1000 problemi successivamente, quando esso sarà più sviluppato magari ve lo farò anche vedere, così mi dite che ne pensate, e magari mi date qualche consiglio.

In futuro intendo utilizzare anche i fogli css ma per quello aspetto ancora un pò.. direi che mi conviene.

Ancora grazie!

[ildanny]

di niente figurati !!!

lieto di esserti stato utile !!!!

se vuoi conoscere bene l' HTML e i CSS
ti consiglio di andare su www.w3c.org e leggerti le pagine che ti interessano,
altrimenti puoi sempre prendere una delle guide di HTML.it e se hai problemi rivolgerti al forum !!!


ciao ildanny