How to place icons in a header div without using negative margins?

**rubbed** · Feb 12, 2012 16:42

Hi guys,

I have 2 divs within a wrap to create my menu box.

Div 1= MenuBoxHeader
Div 2= MenuBoxContent

I have an H2 Tag that has a background image attached to it which I place in Div 1 to make my header.

I have multiple menu boxes on my site, and I want to place different icons in some of those headers.

Code:

h2 { 
background-image: url(img/tab.gif);
background-repeat: none;
font-size:16px; 
font-weight:200;
height:auto;
color:white;
font-family:Helvetica;

}



#menuboxheader { 
  background:none;
  height:auto;
  text-align:center;
  line-height:25px;
  width:auto;
  color:white;
  margin-left:10px;
  margin-top:15px;
  float:left; 
  
 }

.menuboxcontent {
  background:#140324;
  margin-top:1px;
  height:263px;
  text-align:center;
  width:185px;
  color:black;
  font-size:14px;
  }

Code:

<div id="menuboxheader">
			<h2>Title Here</h2>
			<div class="menuboxcontent">
			</div>
		
	</div>

I want to place an image next to the H2 tag, which already has an image defined as its background.

I placed this code in but had to use negative margins to get it to align beside the h2 tag text.

Code:

.menuboxTwitterIcon{
  background:url(img/twitter.jpg) no-repeat scroll 0 0;
  margin-top:1px;
  height:500px;
  text-align:center;
  width:50px;
  color:black;
  font-size:14px;
  margin-left:15px;
  margin-top:-10px;


	<div id="menuboxheader">
			<h2>Rakeback</h2>
			<div class="menuboxTwitterIcon">
			</div>
			<div class="menuboxcontent">
			
			</div>
		
	</div>

How can I do this without using negative margins to align it up as it seems messy.
Been doing a lot of trial and error and cannot figure it out!

**ralph.m** · Feb 12, 2012 17:15

Originally Posted by rubbed

I want to place an image next to the H2 tag, which already has an image defined as its background.

You have various options, but the simplest is probably to place the icon in the HTML:

Code:

<h2><img src="/images/icon.gif" alt=""> Rakeback</h2>

**rubbed** · Feb 12, 2012 17:48

I tried that but it broke up all my columns and unaligned everything, even though it was a 3px x 3px image.
I put in an img class for it and tried to use margin-left and top to center it but it then unaligned my header tab, pushing it away for every pixel I tried to move it by.

**ralph.m** · Feb 12, 2012 17:55

We'd probably need to see a live link to help more with this, as there are clearly lots of factors involved.

**webexp** · Feb 12, 2012 17:58

You can always use the align and hspace attribute. <img src="xx" align="left" alt="xx" hspace="5" />

**dresden_phoenix** · Feb 13, 2012 00:49

Astated before, it's hared to say w/o seeing all the components ( teh CSS, HTML and image)

There are many ways to handle this; however, the previous suggestion seems logical, except I would FLOAT:LEFT the IMG. you can use negative margin-left vaules to position the image horizontally.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
	<head>
		<title></title>
		<style type="text/css">
h2 { 
background-image: url(img/tab.gif);
background-repeat: no-repeat;
font-size:1em; /* for accessibily reasons you should avoid px  for font sizes*/
font-weight:200;
color:#ccc;/*change back to white*/
font-family:Helvetica;
}

h2 img{float: left; padding:0; margin-right: -16px; /* 1/2 width of image*/ }


#menuboxheader { 
  text-align:center;
  line-height:1.5625;
  color:white;
  margin-left:10px;
  margin-top:15px;
  float:left; 
  border: 1px solid #ccc;
  
 }

.menuboxcontent {
  background:#140324;
  margin-top:1px;
  height:263px;
  text-align:center;
  width:185px;
  color:black;
  font-size:14px;
  }
  
  
  		</style>
	</head>
	<body>
		<div id="menuboxheader">
				<h2><img src="http://img.informer.com/icons/png/32/218/218430.png">Rakeback</h2>
				<div class="menuboxcontent"></div>
				</div>	
	</body>
</html>

You could even use make a class for each icon, and use :

Code:

h2:before{ content: url(http://img.informer.com/icons/png/32/218/218430.png); float: left; padding:0; margin-right: -16px; /* 1/2 width of image*/ }

That way you dont dirty your mark up.
You could also just wrap "Rakeback" in a SPAN give it DISPLAY:BLOCK and PADDING-LEFT:width of your icon; and then apply the icon as a bg image for the SPAN the neat thing about that is that you could vertically center the image to your text automatically, if desired.

User Tag List

Thread: How to place icons in a header div without using negative margins?

Thread Tools

Display

How to place icons in a header div without using negative margins?

Bookmarks

Bookmarks

Posting Permissions