Help with text position problem : )

1

hi ,
i need help here very simple coding fix, i upload screenshot below ,please view. Thanks

try this code ! : ) HERE–> https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic

<style>

.alltextsize a{text-decoration: none;
display: block !important ;
font-family: sans-serif;}

.rank{ 
display: block !important ;
font-weight: 800 ;
font-family: sans-serif ;
color: #CBC9C9;
border: 4px solid #222;
border-radius: 5px 5px 0px 0px ;
border-bottom: 5px solid #FF5512 ;
border-top: 5px solid #FF5512 ;
padding-left: 5.4px ;
    width: 16.4px;
    display: inline-block;
    height: 19.1px;
    float: left;
    font-size: 19px;
    margin-right: 6.4px;
    font-weight: bold;
    color: #222;}
    
  span.picname {
    font-weight: 600 ;
   margin-top: -25px ;
    font-size: 15px;
    color: #958E8E ;
    margin-left: 4px;}
    
    .top100rank {
    display: block !important ;
  border-radius: 14px 14px 0px 0px;
    border: 1px solid #545555;
    box-shadow: 0 0 8.5px #343434;
border-top: 8.5px solid #343434 !important;
background: #f7f7f7 !important;
    padding: 18px;}

span.justapicture {     margin: 13.6px;
    margin-top: 4.38px !important;
font-size:12px ;
font-weight: 600 ;
color: #61280C;}

.top100 li {
display: block !important ;
border: 3px solid #222 ;
margin-bottom: 2px;
    overflow: hidden;
    padding: 6px 4px; }
    
</style> 


<section class="alltextsize">
<section class="top100" 
<div class="textwidget"><ul class="top100rank">
<li><a title="picturee1" href="/download/pic-1/"><span class="rank">1</span> <img src="https://wac.edgecastcdn.net/001A39/prod/item/A8fP9mKNENfP6N3site/2356L.png" width="50" height="50" /> <span class="justapicture">categories1</span> <span class="picname">Amazing Picture 1</span></a></li>


<li><a title="Picturee2" href="/download/pic2/"><span class="rank">2</span> <img src="https://wac.edgecastcdn.net/001A39/prod/item/A8fP9mKNENfP6N3site/2356L.png" width="50" height="50" /> <span class="justapicture">categories 2</span> <span class="picname">Amazing Picture 2</span></a></li>
</ul>
</div>
</section>
2

.picname {
position: relative;
bottom: 4vh;
right: 10vw;
}

Use this to your styles and it should work . It will position the text where it needed. But careful because you have to work with media queries if you want it to be responsive on smaller screens.

1 Like
3
  • wrap your spans (.picname, .justapicture) in a div
  • display those spans as block or use a block-type element (eg. div, heading or paragraph)
  • float the img
  • add .clearfix in each container – li (or use li’s parent to add style on each li)

css:

.top100rank img {
  float: left;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

html:

<li class="clearfix">
  <a title="picturee1" href="/download/pic-1/">
    <span class="rank">1</span>
    <img src="https://wac.edgecastcdn.net/001A39/prod/item/A8fP9mKNENfP6N3site/2356L.png" width="50" height="50" />
    <div>
      <div class="picname">Amazing Picture 1</div>              
      <div class="justapicture">categories1</div>
    </div>
  </a>
</li>
  • adjuststyle…
1 Like