Window Resize Problem

HTML & CSS
1

Hello guys ran into a problem coding with CSS.

The problem lies here.


#nav{
	list-style:none; /* must be set to none */
	font-weight:bold;/* font of the nav menu */
	
	[B]margin-left:200px;/[/B]* shifts whole nav menu 220px from the left */
	margin-bottom:10px;/* 10 px from the bottom */
	width:50%;
	
	z-index:5;/* sets nav menu ontop of all others */
	
}

The margin left makes the window keep the 200px on resize however I want it fixed to a certain position when I resize the window, I can’t use auto because it aligns the menu all the way to the left and I need it to be 200px over by default.

So in essence i need a window variable that updates upon window resize. how can I code this?

pic attached.

Uploaded with ImageShack.us

2

Hi Undermine2k. Welcome to SitePoint. :slight_smile:

You could set that left margin to % rather than px to allow it to resize. But to be honest, I suspect there are more issues that just this. There are probably more reliable strategies still, but to advise properly, it would be better for us to see a live link or at least the full page code.

3

Thanks for your response, I uploaded the site and take a look at when you min and maximize it and how the menu bar moves.

I just want it to stay in one place.

Website

4

OK, good. First thing you need to do is complete that menu. You can’t have list items on their own. You must wrap them in <ul> tags.

<div id="nav">
[COLOR="Red"]<ul>[/COLOR]
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">HTML 5</a>
    <ul>
    <li><a href="#">Jquery</a></li>
    <li><a href="#">Paper.js</a></li>
    </ul>
  </li>
  <li>
    <a href="#">CSS</a>
    <ul>
    <li><a href="#">Drop-Down Menu's</a></li>
    <li><a href="#">Plug-in's</a></li>
    </ul>
  </li>
  <li>
    <a href="#">XML </a>
    <ul>
    <li><a href="#">Introduction</a></li>
    <li><a href="#">Basic XML</a></li>
    <li><a href="#">Markup with XML</a></li>
    <li><a href="#">Document Object Model</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Contact</a>
    <ul>
    <li><a href="#">E-Mail</a></li>
    <li><a href="#">Telephone</a></li>
    </ul>
  </li>
[COLOR="Red"]</ul>[/COLOR]
</div>

Then in the CSS, put this:

#nav > ul {
  margin: 0 auto;
  width: 778px;
}
5

that pretty much makes the whole menu disappear and if I change some of the css options the menu becomes vertical stacked instead of horizontal

6

OK, so more styles need to be amended down the line. But you must have those <ul> tags at the start and end, as otherwise your code is invalid and unreliable. Put that code in and then we can fix the other issues.

7

Ok I did as you said, the formatting needs to be corrected now but I have no idea how to fix it.

Demifire

8

OK, can’t quite remember how you wanted this to appear, but try replacing the nav styles with these for a start:

#nav ul {
     font-weight: bold;
     list-style: none outside none;
     margin-left: 20%;
     z-index: 5;
}

#nav ul li {
     float: left;
     position: relative;
}

#nav a {
     background: none repeat scroll 0% 0% #4C4D51;
     border: 1px solid #575C5F;
     color: #FFFFFF;
     display: block;
     font-size: 11px;
     font-weight: bold;
     margin-right: 10px;
     padding: 5px 20px;
     text-decoration: none;
     text-transform: uppercase;
}

#nav a:hover {
     background: none repeat scroll 0% 0% #666666;
     color: #00FFCC;
     text-decoration: underline;
}

#nav ul {
     background: none repeat scroll 0% 0% rgba(255, 255, 255, 0);
     left: -9999px;
     list-style: none outside none;
     margin-left: 0px;
     margin-top: 25px;
     position: inherit;
}

#nav ul ul li {
     float: none;
     padding-top: 1px;
}

#nav ul a {
     white-space: nowrap;
}

#nav li:hover ul {
     left: auto;
}

#nav li:hover a {
     background: none repeat scroll 0% 0% #000000;
     text-decoration: underline;
}

#nav li:hover ul a {
     text-decoration: none;
}

#nav li:hover ul li a:hover {
     background: none repeat scroll 0% 0% #333333;
}

#nav > ul {
     margin: 0pt auto;
     width: 778px;
}

But keep a copy of how everything was at the start, too.

9

Awesome job, that’s exactly what I wanted. One more little thing, how can i make all the header boxes containing (HOME, HTML5 ,CSS ,) the same size as you can see it’s formatting the box size based on the widest drop down box element.

Once again thanks alot.

update:Demifire

10

Yes, I had a feeling you’d want that. (I couldn’t remember if they were all the same width before.)

You could add these styles:

#nav ul ul {position: absolute;}
#nav ul li {width: 120px;}
#nav ul li li {width: 100%;}

You may be able to incorporate some of these with existing styles: it’s just easier to write them separately when I’m testing this.

You can alter the width of the top level LIs. I just chose 120px.

I can’t guarantee this will work in all browsers, though. IE tends to be a real pain. Perhaps try these styles first, and then we can see how to deal with rubbish browsers. I’ve only tested this in Firefox, and need the changes to be online befre I can test other browsers.