Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS - Horizontal Navigation w/ Logo - Help!

    Hello,

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

    HTML:

    Code:
    <!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" />
    <title>
    	Cerebus Clothing
    </title>
    </head>
    <body>
    <img src="images/cerebuslogo.jpg"></img>
    <ul>
    <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>
    </ul>
    
    
    
    
    
    
    </body>
    </html>
    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.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Have a look at the start of this explanation of a horizontal css menu - 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.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •