Hello,

I've come across a problem with my layout design. I'm currently using CSS styles to create my layout but i've come across a function problem with the design of the styles.

 

If you go on my test website: www.gamesdirectory.herobo.com/index.html and zoom in, you'll notice the footer and the header increase size so that it fits on the page. I'm trying to avoid this and have my website like:

 

www.gamespot.com

In which the content doesn't change but you end up zooming on a particular point.

Need help asap

Thanks in advance

take of the fixed positions you have, then the page should zoom rather than just your text.

take of the fixed positions you have, then the page should zoom rather than just your text.

Sorry for been rather of a n00b, but i'm fairly new to CSS.

 

I currently have this for my top header style:

 

.bannerhead {
background-color: #343434;
position: absolute;
width: 73%;
list-style-type: none;
vertical-align: middle;
cursor: auto;
height: 110px;
border-top-style: inset;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
z-index: 6;
text-align: center;
overflow: visible;
left: 13.5%;
}

 

So would i just remove the

	left: 13.5%;

 

As thats the positioning?

Nope, remove these

 

position: fixed;

 

From all your divs.

Nope, remove these

 

position: fixed;

 

From all your divs.

 

I removed them, but the positions of the divs changed completely, how would i go about moving them back into position?

 

So for my footer i have:

.footer {
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #FFF;
background-color: #1B1B1B;
width: 73%;
text-align: center;
left: 13.5%;
}

 

Although it has "Left:13.5%"

for some reason, its staying to the left of the screen, instead of been in the middle at 13.5%

Anyone know?

I've got all my positions correctly set up in the coding but when viewed on browser, there not in correct positions.

However if i add:

position: static;

or

position: absolute;

 

Then they are in their correct positions but then i have the zoom problem again..

 

Anyone know of how to fix this problem?

Thanks in advance.