[resten]

Ok so heres the story:

I've just started web designing and coding sites in general and have learned alot in the past week. Now for the past 3 days I have been working on a portfolio site just for the fun of it. But I'm having a problem with the navigation, if you resize your browser window for the site the navigation gets completely messed up. Now if anyone could help me with this issue, I would really appreciate it.



Diego Ripley

[seoplus]

Hi resten, this is an interesting problem. A few suggestions, I believe you're having difficulty with the positioning because you are setting the height and width of each link in pixels but the top/left positions as percentages, so the images are overlapping each other. It's generally best to choose one and stick with it. Your mouseovers also don't seem to be working but I think that may be because you're rollover images as dictated in the CSS are missing. You're navigation is also extending above the main content box when the window height is too small. To avoid this I would advise using a structure like this:

<div id=container>
<div id=navigation style="float:left; width:30px;">
menu
</div>
<div id=contentContainer style="float:right; width: 600px;">
logo and content blocks
</div>
</div>

Creating a container for the entire site will keep everything lining up right. Also, in your HTML file you have a spar <ul> tag at the top. Hope this helps a little!

Chris Taylor - Catdynamics Australia
-------------------------------------
Increase Web Site Traffic
Website Marketing Tools
Internet Business Development
Free Webmaster Tools
Free Internet Marketing Course

[jameszxcv]

i would not suggest positioning the nav absolute in the first place, but im not sure if you had to?

well anyway first i would

*{
margin:0;
padding:0;
}

this will take away default brower margin, padding .

body{
position:relative;
}


i would also position the nav from top : ??px using px, i find it easier to work out how much room things need etc.

#home {
background: url(home.gif) no-repeat;
position: absolute;
top: 0px;
left:25.2%;
height:90px;
width:29px;
}

#contact {
background: url(contact.gif) no-repeat;
position: absolute;
top: 80px;
left:25.2%;
height:90px;
width:29px;
}

#work {
background: url(work.gif) no-repeat;
position: absolute;
top:150px;
left:25.2%;
height:90px;
width:29px;
}

#about {
background: url(about.gif) no-repeat;
position:absolute;
top:230px;
left:25.2%;
height:90px;
width:29px;
}



looks better like that and the nav does not move when browser is resized
if you are going to use *{marin:0;} part you are going to have to position things again.