Centrare immagine con didascalia a scompara (e didascalia)


Centrare immagine con didascalia a scompara (e didascalia) Empty 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
saxismawe
saxismawe
# Troppo attivo #

Sesso : Maschio
Età : 68
Messaggi : 763
Località : Toscana


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

Centrare immagine con didascalia a scompara (e didascalia) Empty 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


Centrare immagine con didascalia a scompara (e didascalia) Z_user10

Centrare immagine con didascalia a scompara (e didascalia) 1300 Centrare immagine con didascalia a scompara (e didascalia) 2203 Centrare immagine con didascalia a scompara (e didascalia) 392
MattiaDes
MattiaDes
Amministratore
Amministratore

Sesso : Maschio
Età : 23
Messaggi : 3991
Località : Modena, Italy


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

Centrare immagine con didascalia a scompara (e didascalia) Empty 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:

Centrare immagine con didascalia a scompara (e didascalia) Errore10

Grazie
saxismawe
saxismawe
# Troppo attivo #

Sesso : Maschio
Età : 68
Messaggi : 763
Località : Toscana


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

Centrare immagine con didascalia a scompara (e didascalia) Empty 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



Centrare immagine con didascalia a scompara (e didascalia) Z_user10

Centrare immagine con didascalia a scompara (e didascalia) 1300 Centrare immagine con didascalia a scompara (e didascalia) 2203 Centrare immagine con didascalia a scompara (e didascalia) 392
MattiaDes
MattiaDes
Amministratore
Amministratore

Sesso : Maschio
Età : 23
Messaggi : 3991
Località : Modena, Italy


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

Centrare immagine con didascalia a scompara (e didascalia) Empty 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
saxismawe
saxismawe
# Troppo attivo #

Sesso : Maschio
Età : 68
Messaggi : 763
Località : Toscana


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

Centrare immagine con didascalia a scompara (e didascalia) Empty 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


Centrare immagine con didascalia a scompara (e didascalia) Z_user10

Centrare immagine con didascalia a scompara (e didascalia) 1300 Centrare immagine con didascalia a scompara (e didascalia) 2203 Centrare immagine con didascalia a scompara (e didascalia) 392
MattiaDes
MattiaDes
Amministratore
Amministratore

Sesso : Maschio
Età : 23
Messaggi : 3991
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


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