SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by rubbed View Post
    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>

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    We'd probably need to see a live link to help more with this, as there are clearly lots of factors involved.

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Location
    Utah
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can always use the align and hspace attribute. <img src="xx" align="left" alt="xx" hspace="5" />

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •