Due immagine centrata contemporaneamente

[Katherine]

Ciao a tutti.

Avrei la necessità di centrare due immagini contemporaneamente, in modo che stiano affiancate ma al centro della pagina. E' possibile?

Qui un esempio
vampirediaries-love.net/2011/08/6-nuove-still-per-lepisodio-3x01-the-birthday/

Penso, forse, che sia necessario mettere le immagini in un "contenitore" centrato di larghezza opportuna e poi normalmente allineate affiancate...Ma concretamente come si fa?

Grazie

[vnotarfrancesco]

Cosi Katherine?




Valerio Notarfrancesco

[Katherine]

Esatto

Come dovrei fare?

[vnotarfrancesco]

Allora, la prima cosa è togliere tutti quei paragrafi.
Ogni coppia di immagini va dentro un contenitore div al quale assocerai queste regole di stile: margin: auto; text-align: center;

Alle immagini togli la classe "alignleft" e attribuisci loro un'altra classe con lo stile margin-right: 20px;

Dovrebbe diventare quindi:

<div class="divimgkat">
<img class "imgkat" src="url" alt="bla bla bla" width="223" height="159" title="bla bla bla">
<img class "imgkat" src="url" alt="bla bla bla" width="223" height="159" title="bla bla bla">
</div>

Valerio Notarfrancesco

[Katherine]

Vediamo se ho capito bene:

Creo un nuovo div nel css:

#nome margin: auto;
text-align: center;

E poi sempre nel css

.alignnome {
margin-right: 20px;
}

E' corretto?

[vnotarfrancesco]

Esatto.
Solo che al div non assocerei un id ma una classe perché si ripete più volte all'interno della tua pagina, quindi non #nome ma .nome.


Valerio Notarfrancesco

[Katherine]

Sembra non funzionare. Nel css ho inserito

.nome margin: auto;
text-align: center;

.alignnome {
margin-right: 20px;
}

Nell'articolo ho inserito

<div class="divnome">
<img class "nome" src="ht tp://www.vampirediaries-love.net/blog/wp-content/lg-gallery/Terza%20stagione/Episodio%2001%20stagione%203/08.jpg" alt="bla bla bla" width="223" height="159" title="bla bla bla"><img class "nome" src="ht tp://www.vampirediaries-love.net/blog/wp-content/lg-gallery/Terza%20stagione/Episodio%2001%20stagione%203/08.jpg" alt="bla bla bla" width="223" height="159" title="bla bla bla">
</div>

Ho sbagliato qualcosa?

[vnotarfrancesco]

Ma è sempre la stessa pagina che hai indicato nel primo post (2011/08/6-nuove-still-per-lepisodio-3x01-the-birthday/)?
Io vedo ancora la vecchia struttura con i paragrafi e non con il div.


Valerio Notarfrancesco

[Katherine]

No, sto facendo le prove su una pagina prova...in cui ho inserito solo quel codice.

vampirediaries-love.net/prova/

[vnotarfrancesco]

C'è un errore nel css perché io leggo:

.nome margin: auto;
text-align: center;

Mancano le parentesi graffe e il nome della classe è sbagliato. Prova così:

.divnome {
margin: auto;
text-align: center;
}

Valerio Notarfrancesco

[Katherine]

Funziona, almeno su Firefox. Devo provare gli altri browser ma spero non dia problemi. Grazie

[vnotarfrancesco]

Prego.
Funziona anche con Safari su Mac. Per motivi estetici distanzierei le due immagini mettendo alla prima un margine a destra di 20px (margin-right: 20px.


Valerio Notarfrancesco