Problema sovrapposizione elementi html

[DanieleSestri]

Ciao a tutti,

ho questo problema :

Ho appena iniziato ad usare Bootstrap e devo fare un'immagine la quale é sovrapposta una fascia in trasparenza con delle scritte varie. Questo é il codice per costruire quest'immagine:

<div class="row">
                    <div class="col-sm-4">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <img src="images/4.jpg" alt="..." style="max-width: 100%; max-height: 100%; align:center;">
                            </div>
                        </div>
                        <p style="padding:10px; position: relative; top: -11em; width: 100%; height: 5em; text-align: center; background: rgba(246, 246, 246, 0.90);">
                            <strong style="color: red; font-size: 22px;">Dresses</strong><br>
                            <strong style="color: black; text-decoration: underline">Shop Now</strong>
                        </p>
                    </div>
                </div> 

e allego la foto di quello che il browser interpreta.Immagine.jpg

Come potete vedere dalla foto lo spazio tra una riga e un'altra é immenso. Questo perché la fascia che risulta spostata sull'immagine ha lasciato lo spazio occupato ( vuoto )( io ho usato top: -11 em per sovrapporlo).

Quindi la mia domanda é questa: come posso liberare questo spazio in modo tale che lo spazio tra le due righe sia giusto? Nella seconda immagine della prima riga ho tolto apposta il top: -11em; per far vedere.

[Prill]

Ciao, occorre vedere il css relativo ai vari div (poi: è necessaria l'altezza sul paragrafo?)

[DanieleSestri]

Immagine.jpg

<div class="col-sm-4">
                            <div class="panel panel-default" style="margin-bottom: 0px;">
                                <div class="panel-body">
                                    <img src="images/5.jpg" alt="..." style="max-width: 100%; max-height: 100%; align:center;">
                                </div>
                            </div>
                            <p style="padding:10px; position: relative; width: 100%; top: -11em; text-align: center; background: rgba(246, 246, 246, 0.90);">
                                <strong style="color: red; font-size: 22px;">Dresses</strong><br>
                                <strong style="color: black; text-decoration: underline">Shop Now</strong>
                            </p>
                        </div> 

[Prill]

lo spazio sarà generato da margini o padding dei div interessati (row e figli), ma non possiamo saperlo se non ci mostri il css

[DanieleSestri]

Ciao Prill, grazie della risposta. In effetti l'altezza del paragrafo é inutile e togliendola non é cambiato nulla come puoi vedere. I css di questi div sono interni a bootstrap. cerco di postarci i css delle varie classi
Codice PHP:

.col-sm-4 { width:33.33333333%; position:relative; min-height:1px; padding-right:15px; padding-left:15px; }

.panel { margin-bottom:20px; background-color:#fff; border:1px solid transparent; border-radius:4px; -webkit-box-shadow:0 1px 1px rgba(0,0,0,.05); box-shadow:0 1px 1px rgba(0,0,0,.05) }

.panel-body{ padding:15px; }

.panel-default>.panel-heading { color:#333; background-color:#f5f5f5; border-color:#ddd; }

.panel-default{ border-color:#ddd; }

.panel-title{ margin-top:0; margin-bottom:0; font-size:16px; color:inherit;}

[DanieleSestri]

.row{margin-right:-15px;margin-left:-15px} 

[Prill]

Il problema è creato dal paragrafo. Prova modificandolo così:

<p style="padding:10px; position: absolute; bottom: 2em;...

regola secondo le tue esigenze il valore di bottom aumentandolo se necessario

meglio sarebbe poi portare la dichiarazione di stile in linea nel css

[DanieleSestri]

Immagine1.jpgil problema iniziale é risolto GRAZIE!! ma si é presentato quest'altro problema. Posso fare per modificare la larghezza della fascia senza perdere l'effetto responsive?

<div class="row">                        <div class="col-sm-4">                            <div class="panel panel-default" style="margin-bottom: 0px;">                                <div class="panel-body">                                    <img src="images/4.jpg" alt="..." style="max-width: 100%; max-height: 100%; align:center;">                                </div>                            </div>                            <p style="padding:10px; position: absolute; bottom: 3em; height: 5em; width: 100%; text-align: center; background: rgba(246, 246, 246, 0.90);">                                <strong style="color: red; font-size: 22px;">Dresses</strong><br>                                <strong style="color: black; text-decoration: underline">Shop Now</strong>                            </p>                        </div>                    </div> 

[Prill]

Hai dei margini laterali negativi sul div row, che non è chiaro a cosa servano. Ma lasciandoli e adeguando il div assoluto:

css:

.fascia {
position:absolute;
left:15px;
right:15px;
bottom:3em;
width:auto;
text-align:center;
background:rgba(246, 246, 246, 0.90);
color:#000;
font-weight:bold;
} 
.fascia .uno {
font-size:22px;
color: #f00;
display:block
}
.fascia .due {
text-decoration:underline;
}

html:

<div class="fascia"> <span class="uno">Dresses</span> <span class="due">Shop Now</span></div>

ho inserito un div al posto del paragrafo perché al suo interno puoi inserire altri elementi blocco. Naturalmente puoi ripristinarlo, e reinserire l'interruzione di riga, puoi cambiare il nome delle classi. E' solo un esempio per semplificare il codice portando anche il css fuori

[DanieleSestri]

Grazie sei stato fenomenale!