382 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+2 more
blabus says

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!

352 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 50+ members
  • Has sold $10,000+ on Envato Market
  • Had an item featured in an Envato Bundle
+6 more
danharper says

Style the list items with:

display: inline;
list-style: none;

And put in your original styling. :)

382 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+2 more
blabus says

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 :) ).

374 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+3 more
_rohan says
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.

353 posts
  • Has been part of the Envato Community for over 6 years
  • Has collected 1+ items on Envato Market
al_m473 says

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

2) 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.

3) 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

374 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+3 more
_rohan says
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.

353 posts
  • Has been part of the Envato Community for over 6 years
  • Has collected 1+ items on Envato Market
al_m473 says

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

Al

353 posts
  • Has been part of the Envato Community for over 6 years
  • Has collected 1+ items on Envato Market
al_m473 says

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

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by