immagine + titolo

[gasparirob]

scusate, sto impazzendo:

ho un titolo (<h1>) allineato al centro

adesso voglio inserire un'immagine alla sua sinistra e una alla sua destra
siccome queste due immagini potrebbero cambiare, vorrei rendere questa cosa abbastanza dinamica tramite o l'uso di css (meglio) o l'uso di include (se proprio non si puo fare con i css)

avete suggerimenti da darmi?

ps: sarebbe meglio se fosse possibile fissare uno spazio tra le immagini e il titolo
(spazio - immagine sx - spazio - titolo - spazio - immagine dx - spazio)
e che, rimpicciolendo la finestra, tutta la riga di cui sopra rimanga fissa (senza rimpicciolimenti di spazi o, peggio ancora, ritorni a capo)

[Mich_]

<div id="areaTit">
  <h1>
      [img]...[/img]
      titolo
      [img]...[/img]
  </h1>
</div>


CSS:
#areaTit {
  width: 100%;        /* necessita di definire la larghezza anche nel contenitore */
  text-align: center;  /* serve per IE (quirks) */
}
#areaTit h1 {
  margin: 0 auto;    /* spazi uguali ai lati del titolo */
  font: ...;
}
#areaTit img {
  margin: 0 5px;     /* spazio a dx e sin */
}

Dovrebbe andare bene, ma provalo nei vari brwoser.

[gasparirob]

dunque, si... il risultato che voglio è proprio quello... pero mi chiedevo se c'è un modo per cambiare le due immagini tramite css in modo da dover fare una sola modifica invece che modificare ogni singola pagina...

[Mich_]

Allora non ho capito.
Le immagini fanno parte del contenuto o sono degli sfondi (= degli abbellimenti)?
Perche` la cosa cambia (e molto).

Se le immagini sono sfondi: sono uguali o diverse?
Sono immagini che si possono ripetere in orizzontale?

[gasparirob]

le immagini fanno parte del contenuto... sono degli abbellimenti... e non si devono ripetere

praticamente come hai fatto tu prima...
ovviamente quella parte di codice andra ripetuta per tutte le pagine interessate... e a quel punto nasce la necessita di poter cambiare tutte le immagini in una volta sola, senza dover modificare una pagina alla volta

momentaneamente ho risolto mettendo l'immagine di sx e di dx in due file, riprendendoli con un' include
in questo modo, cambiando il src nei due file, effettuo il cambiamento di immagini per tutte le pagine...

pero non mi sembra un bel metodo... mi chiedo se ci sia un modo piu elegante (con i css, appunto)

spero di aver spiegato bene il problema...

[Mich_]

Piu` cerchi di spiegarti e meno capisco ...

Se le immagini fanno parte del contenuto (cioe` sono necessarie per capire bene il contenuto dellapagina) DEVI metterle con il tag <img>
Se sono degli abbellimenti DEVI inserirle come sfondi tramite CSS.
Questa e` una norma di semantica, e se la violi chi usa un browser non visuale non capisce la tua pagina.

Prima di poter individuare una soluzione occorre quindi capire la semantica del tutto, perche` le soluzioni ci sono, ma quale e` la soluzione migliore dipende da cosa si vuole ottenere.

[gasparirob]

Originariamente inviato da Mich_
Piu` cerchi di spiegarti e meno capisco ...

ehehehe, perfetto!!!

Originariamente inviato da Mich_
Se le immagini fanno parte del contenuto (cioe` sono necessarie per capire bene il contenuto dellapagina) DEVI metterle con il tag <img>
Se sono degli abbellimenti DEVI inserirle come sfondi tramite CSS.
Questa e` una norma di semantica, e se la violi chi usa un browser non visuale non capisce la tua pagina.

Prima di poter individuare una soluzione occorre quindi capire la semantica del tutto, perche` le soluzioni ci sono, ma quale e` la soluzione migliore dipende da cosa si vuole ottenere.

cosa intendi per "fanno parte del contenuto"?
le immagini in questione sono degli abbellimenti, ma non devono essere degli sfondi, devono essere proprio delle immagini (da non ripetere, ovviamente)
L'idea è molto banale: un titolo affiancato a sinistra e a destra da due immagini
Oggi sono le immagini ics e ipsilon, domani potrebbero essere le immagini beta e gamma... e non mi va di dover modificare ogni volta tutte le pagine (essendo, appunto, queste 2 immagini, uguali per TUTTE le pagine)...
tutto qua!

[Mich_]

Ripeto: c'e` una regola sematica molto semplice.
Le immagini di abbellimento vanno inserite come sfondi.
Le immagini che portano delle informazioni, vanno inserite con il tag <img>

Ad esempio uno schema su come arrivare in un certo posto e` un'immagine che ha informazioni;
la foto di una persona citata ha delle informazioni (non essenziali, ma che completano il testo);
anche il logo di una societa` ha delle informazioni ...

Invece il puntino "superfigo" non porta informazioni: sostituisce un puntino "normale", quindi va inserita come sfondo: non verra` stampata, non ha bisogno dell'attributo alt=""; in tal caso si tratta di abbellimento: se uno non lo vede non e` grave: capisce tutto il contenuto della pagina.

Qundi nel tuo caso devi inserire le immagini come sfondo.

Dal punto di vista semantico, le immagini sono:
- completamento titolo sinistro
- completamento titolo destro

Quindi potrebbero avere i nomi:
cTitoloSin.png
cTitoloDx.png

Cosa ci metti dentro quelle immagini puoi deciderlo di volta in volta.
In pratica puoi avere un archivio di immagini, e fare un link tra quei nomi specifici e due immagini a caso. Se vuo cambiare le immagini, basta che ridefinisci i link.
E` un'operazione che non comporta modifiche alle pagine, o al CSS; e` un'operazione che puo` essere realizzata anche in modo automatico da un progrmma che gira a tempi prefissati (ma che non comporta modifiche delle pagine Web.


Chiaramente con le considerazioni fatte all'inizio di questo post, sia la marcatura che il CSS vanno modificati.

<div id="areaTit">
  <h1>
      <span class="titSin">&amp;nbsp;</span>
      titolo
      <span class="titDx">&amp;nbsp;</span>
  </h1>
</div>


CSS:
#areaTit {
  width: 100%;        /* necessita di definire la larghezza anche nel contenitore */
  text-align: center;  /* serve per IE (quirks) */
}
#areaTit h1 {
  margin: 0 auto;    /* spazi uguali ai lati del titolo */
  font: ...;
}
#areaTit span {
  margin: 0 5px;     /* spazio a dx e sin */
}
#areaTit .titSin {
  width: ...px;
  height: ...px;
  background: url(cTitoloSin.png);
}
#areaTit .titDx {
  width: ...px;
  height: ...px;
  background: url(cTitoloDx.png);
}

[gasparirob]

dunque, premetto che mi funziona male, ma forse è perche devo impostare meglio qualcosa (mi si vede un quarto di immagine sx e niente della destra)
cmq come ragionamento è ok

se imposto width e heigth in auto, posso evitare di dover impostare larghezza e altezza ogni volta che cambio immagine, giusto? (ovviamente l'immagine dovra avere le dimensioni 'esatte')

[Mich_]

Il mio codice manca di varie parti, ed inoltre ci sono vari puntini in vari punti.
Avevo messo le dimensioni dei blocchi che contengono le immagini, perche` le immagini sono degli sfondi, e quindi non definiscono le dimensioni del blocco in cui sono contenute. Non puoi mettere le dimensioni automatiche.

Inoltre ho dimenticato di mettere agli span interni display: block; , altrimenti le dimensioni non hanno significato, e neppure i margini in certi browser.