Help me with my header please

Discussion in 'HTML & Website Design' started by aim_high, Mar 20, 2008.

0
  1. #1
    I am trying to do the samething on shoemoney.com, how the header is overlayed on top of the header image. My code works for firefox but not internet explorer. it just doesnt show up in ie. can someone help me make it work for ie?

    heres my code so far.

    the css:

    #header { height:124px; width:971px; position:relative; color:#000; margin-bottom:0px; float:left; padding:0; top: 1px; }

    #header h1 { text-indent:-10000px; margin:0; padding:0; }

    #header h1 a { display:block; background:url(images/logo.gif) no-repeat left top; width: 971px; height:124px; margin-top 10px; margin-left:3px; z-index: 1; position: relative;}

    #headerbanner {display: block; position:absolute; margin-left: 500px; margin-top: 35px; z-index: 2; float:left;


    the html:
    <body>
    <div id="wrap">
    <div id="header"><h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
    </div>

    <div id="headerbanner">
    <iframe src="ad code" style="height: 60px; width: 468px; border: none;" height="60" width="468" scrolling="no" frameborder="no">Your browser does not support IFrames</iframe>
    </div>


    thanks
     
    aim_high, Mar 20, 2008 IP
  2. aim_high

    aim_high Peon

    Messages:
    167
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    someone please
     
    aim_high, Mar 21, 2008 IP
  3. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #3
    what do you mean by header ovelayed on the top of the header image i looked on shoemoney but still don't see what it is you want? you want an image in the background the an ad and menu buttons over the top??
    If this is the case then you would have everything inside a header div, and set a background image for this div in the css. So in the case of something like Shoemoney it would probably be:

    <div id="header>
    <div class="ad">Advertisement Code</div>
    <ul id="menu">menu <li></li> etc.. </ul>
    </div>

    and CSS would be something like

    #header { width: 100%; background:url your image; }
    .ad {float right: width: 320px; (or ad size)}
    #menu { the css for your menu would go here..
     
    wd_2k6, Mar 21, 2008 IP
  4. aim_high

    aim_high Peon

    Messages:
    167
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    the ad doesnt show up in ie :(
     
    aim_high, Mar 21, 2008 IP
  5. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Here copy this and view it in IE, is this what you want:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css" media="screen">
#wrap {width:100%; margin-top: 10px;background-color:#FFCC33;}
#header { width: 100%;}
#header h1 {margin-left:3px; float:left; margin:0; padding:0;}
.ad {float: right; width: 320px; border: 5px solid #000; }
.clear {clear:both;}
#menu { float:right; width: 300px; border: 5px solid #000;}
</style>
</head>

<body>
<div id="wrap">
<div id="header">
<h1>Blogname and Blog info</h1>
<div class="ad">Advertisement Image<br /> Adverisement Image</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
    Code (markup):
     
    wd_2k6, Mar 22, 2008 IP