Header continues to shift!

[Blappy]

Hey everyone! =D

So we’re modifying a template we purchased to better suit our needs. We created a “banner” style logo for the very top of the site.

In case you were wondering, the site is –

http://www.sweet-retail.com

You will notice that when you zoom all the way out, that the two images finally line up just fine. BUT when you try to zoom IN to make the background fill the screen the header does not resize and begins to shift over….

I am guessing that the issue lies within margin and sizing settings or something to that effect.
Ultimately what we are trying to do is have the site load up at a suitable size so that the header and flash video can be used properly…..

Here is the section of code I have been struggling with;

/*

---

structure—*/
#body { background:#06090b;}
.main {
width:3176px;
position:relative;
margin:0 auto;
padding:0 0 0 0;
}

/*

---

header—*/
.header {position:static;}
.clear{ width:100%; overflow:hidden;}
.clear1{ clear:both;}
.br{ display:block;}
.fright{ float:right !important;}
.fleft{ float:left;}

.row-logo h1{ display:block; margin:3px 0 0 0; position:absolute;}
.row-logo h1 a{ display:block; position:absolute; cursor:pointer;}

.tail-row-logo{ background:#030303 url(../images/tail_row_logo.gif) 0 0 repeat-x; height:360px;}

***********The line above was where I increased the useable area for the “banner”.

.tail-row-menu{ background:#141414 url(../images/tail_row_menu.gif) 0 0 repeat-x; border-bottom:1px solid #000000;}
.tail-content{ background:url(../images/wrapper_main.jpg) center top no-repeat; width:100%;}

.row-logo .fleft{ width:480px;}
.row-logo .fright{ width:257px;}

.row-top-menu .fleft{ width:937px;}
.row-top-menu .fright{ width:85px; height:39px;}

Really hoping to get some insight on this – thanks in advance for any help!

Cheers

Josh

[Blappy]

Correction – it is not “everything” it is only the top graphic that seems to move around. The background image does not move at all – which is what is intended. What I’m trying to accomplish is to have the top image stay in place.

[TheDoc]

Holy hell – I’m going to ignore all of the things on the site that make me hurt and try to help you here…

Why do you have a width of 3176px? You haven’t actually set the logo to be in a position, either. Simply by giving it a position of ‘absolute’ doesn’t do anything – you need to set it’s position using ‘top and ‘left’/’right. Example:

.some-class { position: absolute; top: 10px; left: 100px; }

This would be 10px from the top and100px from the left of it’s parent container that needs to be position: relative;.

[Blappy]

I had set the width to such a high value to match the dimensions of the background image – though it only worked when zoomed out entirely. TheDoc, your information was very good I beleive I can see where I was going wrong here. By not giving the logo a specific position it just slots it into the block and moves it around.

You have solved my problem and thank you sooooooo much for explaining the logic behind it! So very helpful – especially for someone like me who has little experience with CSS.

Props to TheDoc

PS – what else “makes you hurt” on the site? Other than the shoddy filler graphics xD

[TheDoc]

Problems:

1. Using flash. Sound + Usability flaws, etc. – these are bad things! With today’s technology, you really should have no need to be using flash here.
2. 3000+px Width. This is totally unnecessary. just because your image is that big doesn’t mean you need to have a div that big. I would take the text off of the background and use that as your H1 and just have the background fill the window.

Being unable to use my mouse’s scroll wheel in the flash area is unbelievably frustrating.

Your logo alone is over 1mb – this is way too much for a single image on a website.

I’m sure I could keep on going to nitpick, but I’m sure if you spend a bit of time looking at today’s standards you’ll see ways to improve!

[Author]

Posts