Photoshop Website Coding-Part2

www.pixelfolife.com

This is the second part of coding our template that we created in the "Photoshop Website Design" series.

In this tutorial we create the navigation bar.

You can view the designing of this template here:
http://www.pixelforlife.com/website-design-tutorial/

Category:

Howto & Style

Tags:

• photoshop
• tutorial
• pixelforlife
• pfltuts
• website
• design
• game
• site
• call
• of
• duty
• world
• at
• war
• how
• to
• code
• css
• html
• xhtml
• dr

[scandalist1]

Why must you float the block elements to the left? I noticed that getting a horizontal nav is impossible without floating and was wondering why.

[pfltuts]

@scandalist1 Because list elements default to stacking vertically. You can either use "float: left" or "display: inline"

[t3hax0r]

Dude, shut up. Stop commenting on every video of this tutorial that you want the template or parts of the template. You're NEVER going to get the template. This is an example to show how to design and code. Do it yourself, lazy. And if you do want this template, you might as well pay the guy because you're doing nothing but whining about how you want the template.

[quinnnnman]

Dude I am having so much confusion with my nav bar, I specifically told the style sheet NOT TO repeat the buttons, yet the buttons are repeating anyway. I dont know what to do.

[STickyRiceism]

@Smidd1995 try checking your code again line 18,26 in source code is "ul" tag myself also got mistyping in "div" tag nice tutorial

[Smidd1995]

im so confused i have gone through every video at least 3 times, have the same code and the navigation buttons just do not show up... there are just bullet points (that shouldn't be because I used the code to go horizontal etc from the vid), however, in design view of sharepoint designer 07 (i know it's crap but its a school project & it's all they have) i can see the text (still in bullet points) so basically i have no idea

[bencilao]

hello, why is my navigation bar not under the header? i think i did everything you said here.

#navigation_bg { background: url(images/website/navbar.png) no-repeat 0 0; width: 900px; height: 58px; margin: 0 auto;

}

#navigation { float: left; margin-left: 50px; margin-top: 15px;}

ul#navigation {list-style: none; }

ul#navigation li {display: inline; }

ul#navigation li a { text-indent: -9999px; display: block; float: left; height: 22px; margin-left: 15px;

}

[rlins76]

Great tut!!

Short and sweet. I've learned a lot just with your tut.

Good job

[MacinTechReviews]

Can u make a Youtube layout this way?? lol

[EvenL33tland]

Very nice indeed, but it would be nice if you could show how to evenly distribute the buttons onto the navbar, so that they are not all towards the left.