View Full Version : CSS - Horizontal Navigation w/ Logo - Help!

01-20-2013, 04:08 AM

I am trying to get my website to display correctly. I have a basic understanding of HTML5 & CSS3. I understand most things and need to research some things.

I haven't figured it out, but I am going to post just the HTML page of what I am trying to accomplish. Don't be afraid to post your method. I would like to see the different and best ways.

Example(Visual Look):

CEREBUS CLOTHING Shirts Pants Hats Shoes (Displayed links in blue for example.)


<!DOCTYPE html>
<!-- Designed & Coded: CBSAM -->

<html lang='en'>
<head charcode="UTF-8">
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
Cerebus Clothing
<img src="images/cerebuslogo.jpg"></img>
<li><a href="#">Long/Short Sleeve Shirts</a></li>
<li><a href="#">Pants/Shorts</a></li>
<li><a href="#">Excercise Clothing</a></li>
<li><a href="#">Hats</a></li>


I want to know how I would style the list to be horizontal with no bullets. I also want to know if I should use a wrapper for the logo image and navigation. The navigation bar will be lined up with the bottom of the image(logo). Image is 51 pixels in height.

01-20-2013, 10:10 AM
Have a look at the start of this explanation of a horizontal css menu (http://www.simonbattersby.com/blog/css-horizontal-menu-with-dropdowns/) - that should give you an idea of how to proceed.

As to adding a wrapper - as it stands there's no reason why you need one, but as you add elements to your page you may find it easier to add one. There is no hard and fast rule on this, other than not adding elements just for the sake of it.