http://www.sam-designs.com/OdinMS/ When you hover over the navigation, they go to the very left of the screen. I set the divs to have a left of 0, surely if it's placed in my container - it shouldn't go to the very left, but the left of the container? Any way to fix this?
Well, the first thing you can do is axe that stupid macromedia javascript, as that's easily 2/3rds the 'problem' right there. As to the positioning problem though, you need to set whatever container is around your menu items to position:relative so that position:absolute is based off the top corner of that container instead of the page. Then you can lose the wasted DIV around the h1, change the menu to a a list, use better semantic markup like opening and closing your paragraphs properly (since just using <p> is invalid given your doctype) Though part of the problem could just be that you are calling menuHTML.js TWICE. Really, this should be all the code that layout needs in the HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="screen.css" media="screen, projection" /> <title>OdinMS - Beta Testing Now!</title> </head><body> <div id="container"> <h1>OdinMS - Beta Testing Now!</h1> <ul id="mainMenu"> <li> <a href="#" id="mainMenuHome">Home<span></span></a> </li><li> <a href="#" id="mainMenuDownload">Download<span></span></a> <ul> <li><a href="#">Game Download</a></li> <li><a href="#">Screenshots</a></li> <li><a href="#">Video</a></li> </ul> </li><li> <a href="#" id="mainMenuRanking">Ranking<span></span></a> <ul> <li><a href="#">Overall Rankings</a></li> <li><a href="#">World Rankings</a></li> <li><a href="#">Job Ranking</a></li> <li><a href="#">Fame Ranking</a></li> </ul> </li><li> <a href="#" id="mainMenuAccount">Account<span></span></a> <ul> <li><a href="#">Login</a></li> <li><a href="#">Register</a></li> </ul> </li><li> <a href="#" id="mainMenuForum">Forum<span></span></a> </li> </ul> <div id="contentWrapper"><div id="content"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus velit odio, convallis at, porta nec, consequat in, sapien. Nullam tristique massa vel mauris. Maecenas sit amet felis. Sed fringilla nisi sed orci. Vestibulum id enim. Aliquam eget augue non sem congue condimentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin metus mauris, pretium vitae, tempus nec, vehicula eget, diam. Praesent ac nulla ac quam adipiscing semper. Phasellus et urna non elit euismod tristique. </p><p> Duis vel sem. Etiam fringilla libero sed metus. Cras sit amet nibh. Suspendisse potenti. Suspendisse turpis. Integer ultrices auctor tortor. Vivamus in justo vitae elit euismod vehicula. Aliquam eu nisl a turpis luctus interdum. Aliquam quam odio, accumsan fermentum, porttitor et, fermentum a, diam. Quisque accumsan consequat nunc. Praesent urna libero, placerat eget, adipiscing id, laoreet vitae, erat. </p><p> Pellentesque fermentum lorem sed justo. Curabitur non turpis a ligula mollis sollicitudin. Vivamus aliquam nibh ut ante. Vivamus cursus accumsan massa. Pellentesque sit amet dolor at elit tincidunt accumsan. Duis molestie iaculis libero. In vehicula ante ut urna. Maecenas tristique, augue sed luctus condimentum, metus nulla faucibus massa, et tristique mauris sem quis eros. Integer non ligula eget diam ullamcorper adipiscing. Nulla dolor pede, consectetuer id, iaculis in, tincidunt eget, nunc. Praesent sem metus, rhoncus nec, interdum ut, tempus vel, mi. Quisque et nibh vel metus tincidunt scelerisque. Morbi nulla metus, fermentum a, accumsan eu, molestie quis, eros. </p><p> Morbi sagittis. Morbi tempus. Cras bibendum. Praesent aliquet condimentum metus. Sed vitae sapien adipiscing erat gravida aliquet. Duis sodales sollicitudin turpis. Pellentesque ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec est nulla, ullamcorper nec, condimentum non, porttitor eget, massa. Cras lacinia interdum mi. Nulla ac magna. Maecenas quis mauris. </p><p> Etiam non metus eu odio laoreet egestas. Fusce at justo sed sem dictum convallis. Duis feugiat convallis urna. Etiam mattis, justo a congue semper, enim est tempus nisl, ac ultricies pede urna eget odio. Vivamus nonummy venenatis eros. Praesent pulvinar. Proin hendrerit scelerisque ipsum. Duis nisi. Morbi blandit arcu ac neque. Nunc mauris lacus, consectetuer eget, sodales nec, tincidunt vitae, tellus. Mauris sit amet arcu. Morbi velit elit, vulputate vel, tincidunt ac, ornare sit amet, felis. Vestibulum molestie, ipsum at egestas aliquet, nibh enim feugiat nibh, sed adipiscing risus velit id enim. Aliquam interdum purus in metus. Integer laoreet justo id nisl. Phasellus luctus diam sit amet enim cursus auctor. </p><p> Morbi sit amet arcu at lorem blandit convallis. Duis elementum nibh pretium ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque gravida quam suscipit mi. Donec a odio. Aliquam lacinia tincidunt nisi. Suspendisse lacus. Nulla tempus leo ut felis. Ut tortor. Nullam nonummy consectetuer nulla. Aenean aliquet purus nonummy est. Proin risus. Proin auctor dolor tincidunt leo. Sed facilisis sem a sem pretium ultrices. Etiam consequat. Pellentesque rhoncus mollis nibh. </p><p> Aliquam eget magna sit amet arcu scelerisque vehicula. Etiam a risus sit amet felis hendrerit varius. Praesent nec velit eu nunc consequat rhoncus. Curabitur commodo, elit nec accumsan sollicitudin, nibh lacus euismod neque, et pulvinar nisi sapien sed metus. Sed rhoncus. Nullam viverra. Nullam non tortor. Aenean vel leo a enim facilisis viverra. Ut ante. Mauris felis elit, tempus suscipit, adipiscing vitae, congue vitae, enim. Morbi id sapien. Fusce ipsum sapien, facilisis vitae, iaculis et, consectetuer eget, quam. Quisque non lectus ut felis commodo ornare. Donec luctus est id orci. Phasellus vulputate. Vestibulum et odio ac sapien porta rhoncus. Integer justo. Sed pulvinar, dui vel posuere ornare, metus nisl eleifend nisl, ac lobortis sapien lorem venenatis velit. Ut elit. </p> </div> <div id="sideBar"> Login etc etc. </div> </div> <div id="footer"> © Odin MS </div> </body></html> Code (markup): If I have time later I'll toss together the CSS that would make it work.
Ah okay, i feel really bad at coding now. I guessed using that javascript was the best way - but then come to think of it, you'd be using :hover etc? Also, i was going to change the sidebar to the left side, not the right - if that makes any difference. Anyway, thanks in advance for the help.
NOW he tells me - as I've got my rewrite done - that's ok, I called it #sideBar and it's a simple matter to reverse the math since I made the content area 'theoretically' dynamic width. (though right now it's constrained to #container) I ended up splitting the top body shading into it's own DIV, then tiling a smaller section of the ziplines. This means you don't have to worry if the page get's taller than 7000px Setting a margin bottom on that div equal to it's height slides #container up over it. I also made #container a 100% min-height, so you need to keep in mind the math for a fixed height footer - padding the bottom of both columns to make sure it doesn't overrun. This way if the content is too short, the footer will stay at the bottom of the page. Ok, here it is, columns reversed: http://battletech.hopto.org/for_others/sam_designs/odinms/template.html As always the directory: http://battletech.hopto.org/for_others/sam_designs/odinms is unlocked so you can grab the gory bits and pieces. You'll notice I combined the menu images down to a single file, bringing the image count to just four files at less than 9k, down from the 25k of your original. The menu is pureCSS in everything except IE6/earlier, which is implemented using csshover2.htc - meaning we can feed all browsers the same CSS/HTML with only IE6/earlier needing to deal with the overhead - the one behavior call makes the CSS not validate, but it's a small price for keeping things simple. Validates XHTML 1.0 Strict, tested working fine in IE 6 & 7, Firefox, Safari and Opera - minor layout issue in IE 5.5 that frankly isn't worth the hassle of trying to fix The code is also set up so that you could unconstrain #container for either a fluid or semi-fluid layout if desired - I usually try to use code that can handle that so if I decide to reskin in the future, I don't have to touch the HTML Which I believe is the POINT of CSS The menu I styled as a flat old-school inline dropdown - if you want it to span wide as a single row, that's fairly easy to implement. (Personally - I like them to come straight down) Hope this helps.
Thank you so much, i wish i could give you something in return. I hope you enjoy the christmas holiday.
I managed to get it in a single row dropdown - but it doesnt look good: 1. I had to set a width of 500px so it would become a single row. 2. The links seem to have un-wanted space where Anyway to fix this?