czemu nie mogę ustawić napisu w divie z zdjęciem?

Question

Mam problem, staram sie wykonać na swojej stronie obrazek z wysuwającą sie informacją jak na wideo

Kurs CSS odc. 5: Efekty hover, transition, transform - obrazek number 3

 

Jednak z jakiegoś powodu nie mogę ustawić aby napis był na dole pod zdjęciem - macie pomysły co robię źle? Wiem że żle mam dopasowaną klasę - przykleja sie do głównego diva a nie do diva zdjecia wstawiam wam dany fragment kodu, może ktoś dopatrzy sie mojego błedu  pierszy jest HTML a poźniej CSS

 
 

<div class="podstrona">
 <h2><center> Światła, kamera, akcja! </center></h2>
 
 <p style="text-indent: 3%;">Witaj w części związanej z filmem, w tym miejscu będę starał się publikować matreriały powiązane w jakiś sposób z kinem, aktorami, festiwalami oraz wszystkim co powiązane z filmem i twórczością fimową. </p>
 </div>

<div class="content1">

<div class="art1" ><center><a href="#"><img src="jedzenie.png" width="800" height="500"></center>

<div class="contwart">
 <a href="#"> <p>Tutaj będa się znajdowały pierwsze słowa artykułów... Więcej informacji Tutaj będa się znajdowały pierwsze słowa artykułów... Więcej informacjiTutaj będa się znajdowały pierwsze słowa artykułów... Więcej informacjiTutaj będa się znajdowały pierwsze słowa artykułów... Więcej informacjiTutaj będa się znajdowały pierwsze słowa artykułów... Więcej informacjiTutaj będa się znajdowały pierwsze słowa artykułów... Więcej informacjiTutaj będa się znajdowały
<strong></br>CZYTAJ DALEJ &rarr;</strong> </p></a></div>
</div>
</div>

<div class="content1">

<div class="art1" ><center><a href="#"><img src="jedzenie.png" width="800" height="500"></center>

<div class="contwart">
 <a href="#"> <p>Tutaj będa się znajdowały pierwsze słowa artykułów... Więcej informacji Tutaj będa się znajdowały pierwsze słowa artykułów... Więcej informacjiTutaj będa się znajdowały pierwsze słowa artykułów... Więcej informacjiTutaj będa się znajdowały pierwsze słowa artykułów... Więcej informacjiTutaj będa się znajdowały pierwsze słowa artykułów... Więcej informacjiTutaj będa się znajdowały pierwsze słowa artykułów... Więcej informacjiTutaj będa się znajdowały
<strong></br>CZYTAJ DALEJ &rarr;</strong> </p></a></div>
</div>
</div>

 

 

 

</div> <!-- koniec content-->

 

 

CSS
 

.content1
{
    border: dashed 5px red;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    padding-top: 20px;
    padding-bottom:10px;
    
}

.art1
{
    border: solid 5px red;
    width:800px;
    display:block;
    margin-left: auto;
    margin-right: auto;
    
}

.contwart
{
    position:relative;
    display:block;
    margin-left: auto;
    margin-right: auto;
    background-color:green;
border: dashed 5px red;
}
.art1 .contwart
{
    position:absolute;
    display: block;
    width: 800px;
    height:auto;
    left:0px;
    top:833px;
    right:0px;
    
}

 

Answer 1

Div .art1 nie ma ustawionej pozycji relatywnej (po dopisaniu position: relative; napis jest na dole pod zdjęciem, wszystko działa).

Comments

tak już mi się udało ale dzięki - już męczyłem się z tym długo i nic nie wychodziło więc myślałem że czegoś oczywistego nie widzę :)