Hosting & Domaining Forum

Hosting & Domaining development => Programming Discussion => Topic started by: kpripper on Aug 30, 2022, 01:43 AM

Title: CSS, I like it
Post by: kpripper on Aug 30, 2022, 01:43 AM
Hello, I have a problem
I can't write CSS in any way so that the text appears at the bottom of the image and it looks good


<html>
<div class="test">
                         <a target="_blank">
      <img src="images/55551556.jpg" width="200" height="200">
    </a>
    <span class="desc"<p>55551556</p><span>
</div>
</html>

css
div gallery {
   margin: 5px
   border: 1px solid #ccc;
   float: left;
   width: 200px
   height: 200px;
   position: relative;
   line-height: 200px
}
div.gallery:hover {
   border: 1px solid #000;
}
div.gallery img {
   width: 100%
   height: auto;
   vertical-align: up;
}
span.desc {
   left: 0;
   top: 0;
   text-align: bottom;
   position: absolute;
   bottom: 0;
   right: 0;
   width: 100%
   height: 100%;
}



I'm bad at CSS
i set the bottom parameter but the text is somewhere at the bottom not at the top.
Title: Re: CSS, I like it
Post by: mickyrobert on Aug 30, 2022, 02:03 AM
You have a block element <p>...</p> inserted into the inline <span...>...<span>, what is not logical. Another span is both opening, but there is no closing one. Without elementary concepts in layout, you will not be able to clearly ask a question, and we will not be able to help you correctly.

Try like that:

<html>
<div class="test">
<a target="_blank"><img src="images/55551556.jpg" width="200" height="200"></a>
<br>
<span class="desc">55551556</span>
</div>
</html>

or this:

<html>
<div class="test">
<a target="_blank"><img src="images/55551556.jpg" width="200" height="200"></a>
<p><span class="desc">55551556</span></p>
</div>
</html>


There are many options depending on the task.