Layer 4 copy

Upload your PSD file...

Take a quick look at the Guidelines to see how to prepare your PSD file


Please wait - we are now uploading and converting your file...


Wait! You can upload your PSD, but you aren't logged in! If you submit now, you won't get any of the cool Unlimited features. You'll just get plain XHTML and CSS DIVs. Create a new account to use all the great Unlimited features free for 2 weeks.

Real CSS Stylized Navigation Menus

Real CSS Stylized Navigation Menus

psd2css Online already has a number of menu features. But many people prefer CSS stylized text menus over the primarily graphical ones that psd2css Online does already. That's why we've added the first of a set of features to make creating CSS Stylized menus a breeze. Just create a layer in your Photoshop or GIMP web design, draw a box where you want the menu to appear, and name the layer with the _vlist1 Layer Naming Convention. That's it. Convert the PSD file at psd2css Online and see a vertical menu coded into the spot on your page you designated. In the HTML it's nothing but an unordered list:

  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>

You just change the href and whatever you want the link to say and your menu works. If you want to change the colors, or background colors, or any of that you can edit those in the CSS portion for that layer. As usual you can use the comments in the generated code to find the parts you want to edit.

The first Layer Naming Convention we're doing for this is _vlist1. 'v' for vertical and 1 means it's the first we've built for you. Soon we'll add more vertical and horizontal list styles and just number them. So (not yet, but soon) we'll have _vlist2, _vlist3, etc. and _hlist1, _hlist2, etc. They will all generated CSS styles for menu type lists.

The generated page from the tutorial is available here:
and the PSD file used is here:


Did you ever create any _hlist1 etc, as i have tried but with no success?


Why is it that when I create the lists that they only go over my pictures. Any other layer they dont show up, but as soon as it hits a picture it shows the remainder of the list? Could it be since i had layer options that I made into smart objects?



Doug, I'm not sure what you

Doug, I'm not sure what you mean exactly either, but I can tell you that smart objects were causing me many problems in the beginning that didn't make any sense until I figured out not to use them. One thing it does is make your file very big and secondly, it causes problems similar to what you are describing (visual overlapping, things not showing up).

Hi Doug - I'm not certain I

Hi Doug -

I'm not certain I understand. Can you post a link to your PSD? and/or a link to the page that was generated? Thanks.



I appreciate this has nothing to do with this subject but I can't really figure out where I SHOULD be posting this.

I have centered my website using '_center2' and that's fine, now I want to use a kind of dynamic/rolling background image for the white spaces either side of my site (using WordPress by the way) so I have tried both '_bodybg' and '_bodybg-rx' however the background only appears now on the right hand side (the left hand side is left blank). So basically the _bodybg is working absolutely fine, apart from the fact it only works on the right side of my website.

Is this a bug? I assume it is because my site is using '_center' and the '_bodybg' code doesn't know that I also need the left side to have background also.

Please advise on how I can fix this...


edit: sorry I have just found your forum...:/

copyright (c) 2009 psd2css Online, Inc.



User login

Become a Fan of our Facebook Page

Need help or have a question?

| Privacy | Terms of Use |

copyright (c) 2008, 2009, 2010, 2011 psd2css Online, Inc.
Patent Pending

Syndicate content