Hey, I'm new to coding PSD's and stuff. I'm trying to code a layout, but I have no idea how to code navigation like this: Could someone please give me some pointers on how to do this? Thanks, Alex
You would cut up the image and place them as links next to each other. Or you could take the words out of the image and then position divs over the right spots. There will usually be more than one way to do something when building a website
Alex, I'm not sure if you posted an image of the navigation in your post, it looks as though you might have, but I cannot see it. What I suggest is the semantic method, using an unordered list and applying the proper CSS to it. If you need help with the css for creating the navigation, I can point you in the direction of a few good resources that can help you get started. If you run into any issues with it, I can help you out some. Let me know, Patrick
Thanks for the replies. Sorry, the image is down, but it's basically tab navigation... If you could show me some good resources, then I'd be extremely happy. Twistedspikes: Is one of those a more correct way to do it?
We'll all tell you what Monkey said. Slicing a PSD is easier for people who've never built a site before, but it's not the best way to build a site. The pages tend to be bigger (in filesize) and are not efficient. However, you'd then might as well learn to code from the beginning. If you'll never make another website ever again, then maybe it is better to just slice and dice-- because you won't get the result you want right off the bat when you're first starting to learn semantic coding. You'd have to decide which path you're going to take. If you want to learn to code decent web pages, go to the library and look for Build Your Own Web Site the Right Way using HTML and CSS by Ian Lloyd. It tells you how to do everything, right from scratch, and after you've been doing it a while, you can take any PSD and build a site that looks just like it (that's what you do-- any actual images which need to be copied, copy them, but otherwise you are building the site and making it look like the PSD... NOT building from the PSD). If you stick with the slice and dice, Image Ready certainly seems to do it all for you. Most people here use it in combination with Dreambeaver. Most tabs/links/menus: <ul id="menu"> <li><a href="somepage">first link</a></li> <li<a href="another page">second link</a></li> <li><a href="final page">third link</a></li> </ul> Code (markup): There are other ways to do it, but this is like the most basic menu. You then use CSS to change the appearance. You can also use images, the best manner so far being the Sliding Doors with CSS Sprites (search that and you'll find the A List Apart article). With just one image, you can get a menu like this one: http://battletech.hopto.org/for_others/pixelcommander/template.html The above site was made by deathshadow on this forum after looking at what another guy wanted (there was a site, but deathshadow rewrote it). Check out the menu. It's one image, and looks awesome when you hover.