simplify your code structure
div id="title" Translucent2
li a href="#" About
li a href="#" Portfolio
li a href="#" Services
li a href="#" Contact
the less than and greater than signs don’t translate well so they have been dropped, I’m sure there is a way to do it but I don’t know it
- style the page in CSS, do a reset CSS, then position the page elements within the wrapper using margins, padding, etc. absolute positioning is usable but not usually used. positioning the title and menu should be easy using margins and padding and text-align right in the case of the menu. the positioning of the content should be easy to set up as well usnig a background image placed where you want it and then placing the text to its right.
CSS Tricks animated BG menu using sprites
this example uses sprites for menu images and does some fancy fading in and out but can be done without that.
- do an IE6 fix, images do not translate kindly in IE6, watch out for your use of the hover function in IE6 as well, I don’t believe it works in IE6, perhaps calling for some jquery code to get around it
this page is a fairly simple design and should not be that difficult to code
and get reasonably the same looking in the various browsers
I guess I agree with some of the presenters on Net Tuts, etc who tell you to start with the HTML code, then add CSS and jquery to style your page and make the menu items work or sliders work.