Image Div Problem

[djafactor]

Hi,

I'm developing v3.0 of my website and am having some problem with layering a rollover image over the bg.

Site: http://www.electricpixel.org/design

Basically it's the "ELECTRIC PIXEL" logo/image in the left corner of the page. I basically made a div id="logo" and gave it the following parameters in the css file:

#logo {
position: relative;
text-align: center;
z-index: 0;
top: 101px;
left: -313px;
}

The reason I am doing this is I want the logo part to stay on the top layer so the iframe below it will load without cutting the logo. I also want the website centered on the page so this is making it a bit tricker. I have all the positioning and functionality working fine for the roll over but this causes the "MEDIA" link in the center of the banner to break.

When looking at the design view of the code in dreamweaver I see that the bounding box of div= logo is stretching over the "MEDIA" link button. If you resize the browser to shrink the width this seems to move the div that allows the rollover to work. I tried giving the div=logo a size, however when I do this it seems to change from a relative position to a absolute or fixed position. You can see that the CONTACT US button on the upper right is working and it is on the same X axis as the MEDIA button.

I think the main problem is that width of my div is too large but changing it causes the problems mentioned above.

any help is appreciated.

Amit

[Medyman]

I'm not sure I understand what your problem is. In IE7 I'm able to see a rollover on the media button.

The problem I see is that when you resize the browser, the logo shifts the left.

Maybe this general logic will help you out.

<div id='container'>
    <div id='header'>
        <div id='logo'><img src='logo.png'></div>
    </div>
    <iframe></iframe>
    <div id='menu'>MENU</div>
    <div id='footer'>FOOTER</div>
</div>

Now, container can be floated in the absolute center using a technique like this: http://www.milov.nl/code/css/verticalcenter.html.

Next, header should have a CSS value of position:relative.

Lastly, you can use absolute positioning on the elements within the header (logo, media button, contact us, etc...). You don't have to use it for all the elements but I suggest you do so that everything is constant when you resize. Note: absolute position is relative to the header div (i.e. top:1px is 1 pixel from the top of the header div not the page).

That should fix your problems. Sorry I can't help more but your HTML is way too hard to read.

Perhaps get rid of the table? You're already using CSS...why not go all the way?