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 4 of 4
  1. #1
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts

    Help Styling HTML5 Navigation

    Hey guys!

    I'm trying to style my navigation menu using HTML5 tags and references only. The hard part, however, is wrapping my head around how to translate the old way of navigation styling to the newer way of doing it. Example:

    Old Styling Syntax:
    Code:
    <nav>
        <ul>
            <li></li>
            ...etc...
        </ul>
    </nav>
    New Styling Syntax:
    Code:
    <nav>
        <a href="#">TEXT</a>
    </nav>
    Although I know that it's perfectly acceptable to use a "ul" inside of the "nav" element, I don't want to. Needless to say that because of that I'm having a couple issues that I can't quite figure out.
    1. How do I place my navigation text on 2 lines?
    2. Where ("nav" or "nav a") do I place my line-height and other "li" info?
    3. Is giving the menu links a set width and height as simple as just declaring them when used in this context?
    4. How do I place my links at the bottom of the "nav" element container (margin did nothing for me)?


    My code thus far:
    Code:
    <nav>
        <a href="#">OUR COMPANY</a>
        <a href="#">OUR WINES</a>
        <a href="#">FOOD PAIRINGS</a>
        <a href="#">SHOP ONLINE</a>
        <a href="#">CONTACT US</a>
    </nav>
    
    nav {
    	width: 960px;
    	height: 90px;
    	text-align: center;
    	background: #552d97 url('images/bg-nav.png') no-repeat center top;
    	margin: 0;
    	padding: 0;
    }
    
    nav a {
    	color: #000000;
    	background: #ffffff;
    	text-decoration: none;
    	margin: 0px;
    	padding: 13px 13px;
    }

  • #2
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts
    So far I've gotten this far, but still need some help for centering the text vertically and also spacing. I wanted the boxes to be 90 pixels wide, but line-height seems to make the text break out of the boxes due to there being 2 lines of text.

    Code:
    <nav>
    	<a href="#">OUR COMPANY</a>
    	<a href="#">OUR WINES</a>
    	<a href="#">FOOD PAIRINGS</a>
    	<a href="#">SHOP ONLINE</a>
    	<a href="#">CONTACT US</a>
    </nav>
    
    nav {
    	width: 960px;
    	height: 90px;
    	text-align: center;
    	background: #552d97 url('images/bg-nav.png') no-repeat center top;
    	margin: 0;
    	padding: 0;
    }
    
    nav a {
    	float: left;
    	width: 108px;
    	height: 38px;
    	line-height: 40px;
    	color: #000000;
    	background: #ffffff;
    	text-decoration: none;
    	border: 1px solid #660033;
    	margin: 50px 0;
    	padding: 0;
    }
    Last edited by Psionicsin; 11-09-2011 at 03:53 PM.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Good morning Psionicsin,
    Maybe this would be easier if contained in a ul?

    Try this -
    Code:
    nav {
    	width: 960px;
    	text-align: center;
    	background: #552d97 url('images/bg-nav.png') no-repeat center top;
    	overflow: auto;
    }
    
    nav a {
    	height: 38px;
    	margin: 50px 0 0;
    	padding: 5px 10px;
    	display: inline-block;
    	color: #000000;
    	background: #ffffff;
    	text-decoration: none;
    	text-align: center;
    	border: 1px solid #660033;
    }
    Your margin did not work originally because of collasping margins.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Good morning Psionicsin,
    Maybe this would be easier if contained in a ul?
    Good afternoon. I know that a "ul" would have been more than sufficient lol. But one thing that has always bugged me since the mass use of HTML5 started is that we have a cool new "Nav" element for navigation...but it SEEMED to not really be much use (in it's current form).

    People are still using lists inside of them and, in my personal opinion, you might as well just be using a div if that's the case. So I went searching on W3S hoping to find some further clarification when I found this example: http://www.w3schools.com/html5/tag_nav.asp

    After seeing this I decided to make a mock-site for a fictional wine company, and using JUST this navigation template to see how far and fancy I could get with styling it. Think of it sort of as a self-challenge? I dunno.
    Code:
    <nav>
      <a href="#">Menu Element</a>
      <a href="#">Menu Element</a>
      <a href="#">Menu Element</a>
      <a href="#">Menu Element</a>
      <a href="#">Menu Element</a>
    </nav>
    As it turns out you can get pretty far. That and, in my opinion, I think it's nice to look at your CSS and not see 9-10 ugly ul, li, li a. I always hated that and always got lost in my coding after a while. Having just "nav" and "nav a" is far more prettier


  •  

    Posting Permissions

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