I’m trying to move the text you see in the image below as indicated in the picture. But due to my basic knowledge of CSS I’m having a tough time. Does anyone know how I can move the text? I have included the CSS below if anyone wouldn’t mind taking a stab at it.
The CSS code
#homepageBoxCont {
height: 117px;
clear: both;
padding: 10px 10px 10px 10px;
width:617px;
}
#homepageBoxCont ul {
list-style: none;
margin: 0;
padding: 0;
}
#homepageBoxCont ul li {
float: left;
width: 138px;
height: 117px;
position: relative;
margin-right: 8px;
margin-left: 8px;
}
#box1{ background: url(file:///C|/Users/Runner/Desktop/Dev%20Files/images/play1.png) no-repeat 0 0; }
#box1{ background: url(file:///C|/Users/Runner/Desktop/Dev%20Files/images/play2.png) no-repeat 0 0; }
#box3{ background: url(file:///C|/Users/Runner/Desktop/Dev%20Files/images/play3.png) no-repeat 0 0; }
#box4{ background: url(file:///C|/Users/Runner/Desktop/Dev%20Files/images/play4.png) no-repeat 0 0; }
a.readMore { background: url(file:///C|/Users/Runner/Desktop/Dev%20Files/images/187.gif) no-repeat scroll 100% 50% transparent;
font-size: 11px;
font-style:bold;
font-weight: bold;
color:#12fb00;
padding-right:35px;
width:100%;
text-align: inherit;
vertical-align: bottom !important;
}
The HTML portion
<div id="homepageBoxCont">
<ul>
<li id="box1"><a class="readMore">Random Video</a></li>
<li id="box2"><a class="readMore">Some CEO</a></li>
<li id="box3"><a class="readMore">Window</a></li>
<li id="box4"><a class="readMore">Fancy Cases</a></li>
</ul>
</div>