How Do I Make a Horizontal Image List (UL)?

Envato Authors Video Authors
1

So here I am again, jumping through more and more hoops trying to get this template approved. Now navigation links can’t be setup any other way than in a list, which I have no idea how to do.

On this page: http://www.labusdesign.com/translucent2/index.html

Each of those 4 nav buttons in the top right need to be converted to an unordered list, I guess (right now they’re each in individual DIVs). Anyway, anyone have an ideas?

Thanks!

2

Style the list items with:

display: inline;
list-style: none;

And put in your original styling. :slight_smile:

3

Thanks, that did help. However, no matter what I do I cannot get the navigation to display correctly in all the different browsers, as pretty much none of them render lists the same way (and yes, I’ve tried CSS resets).

So, I’m just about done wasting my time with coded templates. If a template works perfectly in all browsers, and is fully W3C valid, then I don’t understand why I have to code it exactly how ThemeForest prefers.

So, I guess this means I’m permanently out for coded templates, and will be sticking to PSD only (unless any coders out there have any interest in this: http://themeforest.net/forums/thread/looking-for-a-partner-/16374 :slight_smile: ).

4
Thanks, that did help. However, no matter what I do I cannot get the navigation to display correctly in all the different browsers, as pretty much none of them render lists the same way (and yes, I've tried CSS resets).

Hey, if you reset margin, padding to zero, its pretty much the same. And if I’m not mistaken, it doesn’t have to look exactly the same in all browsers - just similar enough to the actual design, and properly rendered.

5

Some suggestions:

  1. simplify your code structure

    div id="title" Translucent2 
 <ul id="menu" 
    li   a href="#"  About 
    li   a href="#"  Portfolio
    li   a href="#"  Services  
    li   a href="#"  Contact 
/ul
div id="content" 
    h1  Welcome
    p  ..... 
/div

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

  1. 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
http://charles-harvey.co.uk/plugins/animatedbackground/

this example uses sprites for menu images and does some fancy fading in and out but can be done without that.

  1. 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.

good luck

Al

6
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

Use &lt and &gt to do it.

7

I tried the &gt and &lt but they did not seem to work
will try again some time

Al

8

blabus,

I sent you an email about this web page through your envato link, let me know what you think, did get the horizontal nav working, IE6 is next

Al