Solved

position image and text using css

Posted on 2012-12-22
6
255 Views
Last Modified: 2013-01-02
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.

<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>

Open in new window


This is what I would like it to look like:
finished look but cleaner
0
Comment
Question by:NeilT
  • 3
  • 2
6 Comments
 
LVL 75

Expert Comment

by:käµfm³d 👽
ID: 38715810
Like this?

...

            #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;
                width: 40%;
            }

...

            #download .pairwrap div img {
                position: relative;
                display: inline;
                left:-2px;
                z-index:1;
            }
...

Screenshot
0
 
LVL 3

Author Comment

by:NeilT
ID: 38715864
no, image needs to go in the darker box on the left of each text

like this: downloads
0
 
LVL 1

Expert Comment

by:memecece
ID: 38716125
NeilT looking at the code would you not split the image and the text into two different divs instead of the one?

For example:

<div id="container">
<div class="item">
<div class="image"><img src="" /></div><div class="title">Catering...</div>
</div>
</div>

Open in new window


If done this way the image should (if the css is correct) have a darker background. Hope this helps
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 3

Author Comment

by:NeilT
ID: 38725154
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
0
 
LVL 1

Accepted Solution

by:
memecece earned 500 total points
ID: 38725478
Is this what you are looking for?

 Screenshot of page with changes
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
0
 
LVL 3

Author Closing Comment

by:NeilT
ID: 38735937
Superb, many thanks
Neil
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now