...

View Full Version : Layout Problem (Absolute beginner!)



baileyhsi
02-18-2009, 01:04 PM
Hello there,
For starters I have to say that I am an absolute beginner to web design so any excellent help you might be able to give might have to be spelt out for me. Also I did not build this site, I just need to make some changes to the layout and presentation then stick it back up.

Okay so the original site is here...

http://extra.shu.ac.uk/cetl/

What I needed to do was pull out the huge header image below the top banner (I have some graphic design experience) and replace it with something simpler and smaller which I did. The end result of this though is that because the left navigation menu has shifted up the page I now have a dead area that sits just below the header which does not allow me to access any links. Whatever I try to change this code that manages this area it either has no effect OR completely messes up the formatting of the entire page, especially the footer.

I haven't updated the live site with the changes but here are links to the css and html files which I hope are enough for you guys to look at.

http://www.mediafire.com/file/eymozynvy2z/newwebsitetest.html

http://www.mediafire.com/file/mmjmzqj5eme/style.css

I know there are many other problems with the website but if I can just get over this one obstacle I can get my head down and actually learn how to fix the other bugs! cheers for your help in advance

AmmO
02-18-2009, 03:27 PM
Ive looked at the site and cant see the problems you describe eveyrhting looks fine in IE7 and FF3

cincinnatiboy4867
02-18-2009, 03:38 PM
I don't see the problem either...

baileyhsi
02-18-2009, 04:37 PM
Nope its not on the live site! It works fine at the moment but if you look at the html/css link below I have removed the large image which causes the problem.

Fisher
02-18-2009, 04:40 PM
Change these two pieces in your CSS:

#header{
position:absolute;
top:0;
width:960px;
height:220px;
margin:0px 0px 0px 0px;
padding:0px 10px 0px 10px;
display:block;
overflow:hidden;
}

#page-navigation {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
position:relative;
z-index:11;
}

Your header is still set at the old size of 374px. Also, your #header-layout has a z-index of 10, so by giving the navigation a z-index of 11, it will work.

baileyhsi
02-18-2009, 05:12 PM
Bosh! Brilliant! Thankyou so much! Much appreciated!! :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum