Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.
position image and text using css
Hi
I have the following code that apart from the CSS cannot be changed (the download div is created by a CMS system) and I want to get the download type images in the grey boxes but they keep going behind.
Also I would like the boxes to be the same height so if one took up 2-3 lines the other would also match.
This is what I would like it to look like:
I have the following code that apart from the CSS cannot be changed (the download div is created by a CMS system) and I want to get the download type images in the grey boxes but they keep going behind.
Also I would like the boxes to be the same height so if one took up 2-3 lines the other would also match.
<style>
#download {
margin: 2em 0 0 0;
padding: 0 0 0 0;
clear: both;
background: #fbfbfb;
border: solid 1px #ccc;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#download h2 {
margin: 0;
padding: 0.3em 1em;
font-size: 100%;
color: #fff;
position: relative;/*IE6*/
background-color:#06377B;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
height:24px;
padding: 9px 0 0 6px;
}
#download .pairwrap {
margin: 0 0 0 0;
overflow: hidden;
clear: both;
border-bottom:1px solid #f0f0f0;
position:relative;
background:#f0f0f0;
}
#download .pairwrap div {
padding: 0px;
float: left;
width: 200px;
display: inline;
overflow: hidden;
position: relative;
z-index:-1;
}
#download .pairwrap div.even {
padding: 5px;
margin-left:40px;
background:#fff;
position: relative;
z-index:0;
}
#download .pairwrap div.odd {
padding: 5px;
margin-left:40px;
background:#fff;
position: relative;
z-index:0;
}
#download a {
text-decoration: none;
border-left:#ff6600;
z-index:1;
}
#download a:hover {
text-decoration: underline;
}
#download .pairwrap div img {
position: absolute;
left:-2px;
z-index:1;
}
#download .pairwrap div.mediatext {
float: none;
display: block;
width: auto;
margin: 0 0 0 0px;
z-index:1;
}
</style>
<div id="download">
<h2>Downloads</h2>
<div class="pairwrap">
<div class="odd"> <img src="pdficon.gif" alt="" /> <a href="?id=9141" rel="external">Catering safety</a> </div>
<div class="even"> <img src="pdficon.gif" alt="" /> <a href="?id=4774" rel="external">Violence at work</a> </div>
</div> <div class="pairwrap">
<div class="odd"> <img src="pdficon.gif" alt="" /> <a href="?id=9141" rel="external">Catering safety</a> </div>
<div class="even"> <img src="pdficon.gif" alt="" /> <a href="?id=4774" rel="external">Violence at work</a> </div>
</div>
</div>
This is what I would like it to look like:
Asked:
-
3
2
1 Solution
NeilT looking at the code would you not split the image and the text into two different divs instead of the one?
For example:
If done this way the image should (if the css is correct) have a darker background. Hope this helps
For example:
<div id="container">
<div class="item">
<div class="image"><img src="" /></div><div class="title">Catering...</div>
</div>
</div>
If done this way the image should (if the css is correct) have a darker background. Hope this helps
the html code cannot be changed, only the css can unfortunately as the code is output from a part of the cms we do not have access to (we can overwride the CSS though
Is this what you are looking for?
If so what I did was I removed the float:left from the #download .pairwrap div{ } style and set left to -30px in the #download .pairwrap div img{} style. Hope this helps
If so what I did was I removed the float:left from the #download .pairwrap div{ } style and set left to -30px in the #download .pairwrap div img{} style. Hope this helps
Question has a verified solution.
Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.
Have a better answer? Share it in a comment.
Join & Write a Comment Already a member? Login.
Featured Post
This course teaches how to install and configure Windows Server 2012 R2. It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).
Tackle projects and never again get stuck behind a technical roadblock.
Join Now