Hiya all,

I have this basic css menu that I have been messing around with, but I can't seem to figure out how to place it where I want it on the page. And after placement to make sure it doesn't move around when resizing the browser window. Both those things are eluding me and it seems like I should know how to do this lol. Any assistance would be appreciated. Basically I'm trying to remove the menu that's on the Accessories of the World site at the moment and replace it with a CSS menu. That part I can do, but it defaults to the top left corner and I'm unsure if I should just alter a number somewhere or if there are other settings involved. Here's the code from the menu and the css if that helps: Couldn't upload it so here's the text, sorry for such a long set of code

HTML CODE:

<div class="menu">

<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>

<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->

<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>

<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;</a>

<!--[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;
<table><tr><td>
<![endif]-->

<ul>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
<li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="index.html">MENUS</a>

<!--[if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif]-->

<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>

<!--[if lte IE 6]>
<a href="../layouts/index.html">LAYOUTS
<table><tr><td>
<![endif]-->

<ul>
<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
<li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../boxes/index.html">BOXES</a>

<!--[if lte IE 6]>
<a href="../boxes/index.html">BOXES
<table><tr><td>
<![endif]-->

<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>

<!--[if lte IE 6]>
<a href="../mozilla/index.html">MOZILLA
<table><tr><td>
<![endif]-->

<ul>
<li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
<li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
<li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
<li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
<li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
<li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
<li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../ie/index.html">EXPLORER</a>

<!--[if lte IE 6]>
<a href="../ie/index.html">EXPLORER
<table><tr><td>
<![endif]-->

<ul>
<li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
<li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
<li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../opacity/index.html">OPACITY</a>

<!--[if lte IE 6]>
<a href="../opacity/index.html">OPACITY
<table><tr><td>
<![endif]-->

<ul>
<li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
<li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
<li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
<li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">&lt; HOVER/CLICK</a>

<!--[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">&lt; HOVER/CLICK
<table><tr><td>
<![endif]-->

<ul class="left">
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>
</ul>

</div>


miki_css_menu.css CODE:

/* common styling */
.menu {
font-family: arial, sans-serif;
width:750px;
height:100px;
position:relative;
font-size:11px;
z-index:100;
}

.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#000;
width:104px;
height:20px;
text-align:center;
color:#fff;
border:1px solid #fff;
background:#710069;
line-height:20px;
font-size:11px;
overflow:hidden;
}

.menu ul {
padding:0;
margin:0;
list-style: none;
}

.menu ul li {
float:left;
position:relative;
}

.menu ul li ul {
display: none;
}


/* specific to non IE browsers */
.menu ul li:hover a {
color:#fff;
background:#36f;
}

.menu ul li:hover ul {
display:block;
position:absolute;
top:21px; left:0;
width:105px;
}

.menu ul li:hover ul li a.hide {
background:#6a3;
color:#fff;
}

.menu ul li:hover ul li:hover a.hide {
background:#6fc;
color:#000;
}

.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover ul li a {
display:block;
background:#ddd;
color:#000;
}

.menu ul li:hover ul li a:hover {
background:#6fc;
color:#000;
}

.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:105px;
top:0;
}

.menu ul li:hover ul li:hover ul.left {
left:-105px;
}


dropdown_ie.css CODE:

.menu ul li a.hide, .menu ul li a:visited.hide {
display:none;
}

.menu ul li a:hover ul li a.hide {
display:none;
}

.menu ul li a:hover {
color:#fff;
background:#36f;
}

.menu ul li a:hover ul {
display:block;
position:absolute;
top:21px; left:0;
width:105px;
}

.menu ul li a:hover ul li a.sub {
background:#6a3;
color:#fff;
}

.menu ul li a:hover ul li a {
display:block;
background:#ddd;
color:#000;
}

.menu ul li a:hover ul li a ul {
visibility:hidden;
}

.menu ul li a:hover ul li a:hover {
background:#6fc;
color:#000;
}

.menu ul li a:hover ul li a:hover ul {
visibility:visible;
position:absolute;
left:105px;
top:0;
color:#000;
}

.menu ul li a:hover ul li a:hover ul.left {
left:-105px;
}

Ok I "think" I got the positioning part of it being an absolute setting and playing with the number values for top/left/right/bottom etc., but I still have an issue with the resizing of the browser making it not stay in place and it moves around. Any ideas on how to make it stay in one spot and not conform to browser size settings?

Here's a link to my test page so you can see what I mean if you minimize the size of your browser it will alter the placement of the menu. This even moves around depending on the size of the HTML window when I preview it so it's hard to position it this way lol.

http://accessoriesoftheworld.com/indexmenutester.html

I'm lost on this part for CSS, to do it with an image inside the HTML it was easy I just added this on my North Baldwin site (in signature) and I have images all over the page positioned perfectly with this:

<div><IMG style="Z-INDEX: 100; POSITION: absolute; TOP: 585px; RIGHT: 800px LEFT: 450px" border=0 alt=""
src="myimages/readingsmall.jpg" width=149 height=209></div>

But I tried adding the same setup in the CSS for the Menu and although it will allow me to place it basically where I want it, I can't get it to stay put on resizing of the browser window. Tried adding a "right" setting, but that didn't help.

In the css part, .menu: remove the relative positioning and write margin: auto; instead.

That is, if you want to have the menu in the middle.

Hiya Inger,

Not quite sure I follow you.

I did alter the code as mentioned above so that the position isn't set to relative at the moment but is, even though I have the above problem with the moving around on the screen thing on resizing, it does put the menu where I want it kind of lol:

.menu {
font-family: arial, sans-serif;
width:750px;
height:100px;
position:absolute; top: 260px; left: 400px;
font-size:11px;
z-index:1000;
}


I tried removing the position: relative; setting and replacing it with the margin: auto setting but that just puts it into the middle of the page which still moves around on browser sizing. I tried having absolute in the position and then adding the margin: auto setting to the position element, but that didn't work either.

Sorry, I guess I'm just not sure exactly what you mean.

I changed the styling for .menu to this:

.menu {
font-family: arial, sans-serif;
width:750px;
height:100px;
margin: auto;
font-size:11px;
z-index:100;
}

I have tried resizing the screen window from 800x600 to 1456x886, and it stays smack in the middle all the time.

yes I tried to change it to that code, but if you have your browser not maximized it makes it move back and forth if you make your browser window smaller (meaning if you manually resize your browser with the drag and drop at the bottom right)

I have it changed to that right now so you can see what I mean:

http://accessoriesoftheworld.com/indexmenutester.html

I want to put it in a specific spot and it doesn't ever move no matter what you do with the browser sizing. With the dhtml menu that I have on my main site at the moment, it has built in anchors that it uses. I would love to know how to do that in code if it isn't something super difficult to do. Allows you to attach it to a specific spot in your site and all the positioning is done with the program. That's the problem that since it's all done with the program, I have no idea how they positioned it lol.

With the FF browser I have (latest version), if I drag the right side back and forth, the menu stays in the middle, and so does the rest of the contents too.

Are you wanting to put it inside the rounded corner box further down the page?

if so....

move the div id=menu to inside the div id=header and remove the positioning code from the menu css