Centrare immagine con didascalia a scompara (e didascalia)


Centrare immagine con didascalia a scompara (e didascalia)

Messaggio Da saxismawe il Ven 15 Giu 2018 - 17:11

Buonasera amici,
avrei piacere di inserire nel mio portale le immagin i con didascalia a scomparsa, l'effetto (a parer mio) è molto bello!

Diciamo che, a grandi linee, ci sono riuscito ma.... mentre viene centrata la didascalia nell'immagine, l'l'immagine non viene centrata nel topic.
quale potrebbe essere la possibile soluzione tenendo presente che il css relativo è questo:
Codice:
.classe_img_con_didascalia {
float: left;
position: relative;
overflow: hidden;
 }
.classe_img_con_didascalia p {
position: absolute;
left: 0;
bottom: 0;
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
color: #fff;
display: none;
width: 100%;
padding: 10px;
 }
.classe_img_con_didascalia:hover p {
display:block;
}

e il codice html questo:
Codice:
[center]<div class="classe_img_con_didascalia"><img src="https://i.servimg.com/u/f26/19/63/65/31/b__p10.jpg" width="600" height=389"><p>[size=18][i]Bruno Lauzi con Gino Santercole[/i][/size]</p></div>[/center]

questo l'esempio:

Bruno Lauzi con Gino Santercole


Qui vediamo l'immagine al centro come la vorrei!
La didascalia viene sotto chiaramente perché manca il css, altrimenti verrebbe in basso nell'immagine con scritta bianca e sfondo nero centrata!

Da me invece si vede così:



Sicuramente il problem è nel css ma dove esattamente? Non so lavorare con il css.

Grazie per il vostro aiuto


Ultima modifica di saxismawe il Dom 17 Giu 2018 - 15:47, modificato 1 volta
avatar
saxismawe
*****

Sesso : Maschio
Età : 67
Messaggi : 729
Località : Toscana


http://www.italiacanora.net/
saxismawe è stato ringraziato dall'autore di questo topic.

Re: Centrare immagine con didascalia a scompara (e didascalia)

Messaggio Da MattiaDes il Sab 16 Giu 2018 - 18:45

Ciao happy sì, l'errore sta nel CSS.

Rimuovi questa parte: float: left; altrimenti l'intero div verrà allineato a sinistra


avatar
MattiaDes
Amminattivo
Amminattivo

Sesso : Maschio
Età : 22
Messaggi : 3650
Località : Modena, Italy


http://www.habbolifeforum.com
MattiaDes è stato ringraziato dall'autore di questo topic.

Re: Centrare immagine con didascalia a scompara (e didascalia)

Messaggio Da saxismawe il Dom 17 Giu 2018 - 10:52

Grazie MattiaDes, era proprio quello!

Ma adesso è sorto un nuovo problem, la didascalia viene centrata ma il nero va oltre l'immagine sia a destra che sinistra.
E' possibile far si che occupi solo la parte dell'immagine? La cosa migliore sarebbe che il "nero" occupi sempre la parte della discalia, l'immagini non sono sempre uguali cambiano di volta in volta e la didascalia potrebbe essere più lunga o più corta!

Questo è come viene adesso:



Grazie
avatar
saxismawe
*****

Sesso : Maschio
Età : 67
Messaggi : 729
Località : Toscana


http://www.italiacanora.net/
saxismawe è stato ringraziato dall'autore di questo topic.

Re: Centrare immagine con didascalia a scompara (e didascalia)

Messaggio Da MattiaDes il Dom 17 Giu 2018 - 16:00

Mmmh bel problemino, purtroppo se la dimensione delle immagini cambia di volta in volta non credo ci sia una soluzione unica, ma bisogna adattarla in base alla larghezza dell'immagine.

La riga con il testo ha larghezza 100%, in modo che si adatti automaticamente e riempa l'intera larghezza dell'immagine. Noi però all'immagine non abbiamo impostato una larghezza e quindi "occupa" tutta la larghezza del topic.

Una soluzione può essere questa, ovvero la specifica della larghezza:

Codice:
[center]<div class="classe_img_con_didascalia" style="width: 598px;"><img src="https://i.servimg.com/u/f26/19/63/65/31/b__p10.jpg" width="600" height=389"><p>[size=18][i]Bruno Lauzi con Gino Santercole[/i][/size]</p></div>[/center]

Risultato:

Bruno Lauzi con Gino Santercole



avatar
MattiaDes
Amminattivo
Amminattivo

Sesso : Maschio
Età : 22
Messaggi : 3650
Località : Modena, Italy


http://www.habbolifeforum.com
MattiaDes è stato ringraziato dall'autore di questo topic.

Re: Centrare immagine con didascalia a scompara (e didascalia)

Messaggio Da saxismawe il Dom 17 Giu 2018 - 17:25

Stra-urka MattiaDes, benissimo!

Grazie mille
avatar
saxismawe
*****

Sesso : Maschio
Età : 67
Messaggi : 729
Località : Toscana


http://www.italiacanora.net/
saxismawe è stato ringraziato dall'autore di questo topic.

Re: Centrare immagine con didascalia a scompara (e didascalia)

Messaggio Da MattiaDes il Dom 17 Giu 2018 - 21:25

:bene: :zen: buona serata, archivio come risolto


avatar
MattiaDes
Amminattivo
Amminattivo

Sesso : Maschio
Età : 22
Messaggi : 3650
Località : Modena, Italy


http://www.habbolifeforum.com
MattiaDes è stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Torna in alto

- Argomenti simili

 
Permessi di questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum