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 5 of 5
  1. #1
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts

    css navigation menu

    I am trying to build a navigation menu in css and right now I want the text to appear in the middle (vertically speaking) of the menu bar and have a border wrap around it twice as big as the text.

    Here is a link to the site:


    http://paperlesswasp.com/tuts/

    The links are in blue so far, but I have had them working fine as black in the past, but that seems to no longer work.

    Here is my code for the links: (the class below is attatched to each anchor tag)

    Code:
    .nav_menu
    {
    	width: 400px;
    	background: #999;
    	height: 40px;
    	border: 1px solid #777;
    	border-width: 0px 2px 2px 2px;
    	display: block;
    	padding: 10px;
    	margin: 0 auto;
     }
    
    .nav_link
    		{
    			display: inline;
    			font-size: 20px;
    			color: black;
    			text-decoration: none;
    			text-align:center;
    			padding: 0px 5px 0px 5px;
    			border-width: 0px 1px;
    			border-style: solid;
    			border-color: transparent;
    		}
    
    			.nav_link:hover
    			{
    				color: #FFF;
    				border-color: #666;
    				background: silver;
    				height: 40px;
    			}
    I have tried wrapping <div> around the anchor tag to force a box bigger than the text, that had undesirable side effects.

    Any ideas on what I should do?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    Hello surreal5335,
    line-height will vertically center text, as long as it's only one line. Try making your CSS look like this -
    Code:
    .nav_menu {
    	width: 400px;
    	background: #999;
    	line-height: 40px;
    	border: 1px solid #777;
    	border-width: 0px 2px 2px 2px;
    	display: block;
    	padding: 10px;
    	margin: 0 auto;
     }
    That's not exactly a typical way of building a menu though. Have a look at some menu examples that might help you -
    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

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    @surreal5335: You should avoid the use of tables for making your layouts, which is a very bad practice. Read http://www.hotdesign.com/seybold/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New Coder
    Join Date
    Dec 2010
    Posts
    49
    Thanks
    0
    Thanked 1 Time in 1 Post
    i recently started building websites and that's what people say "not to use tables" what is the difference using tables and css?

  • #5
    Regular Coder
    Join Date
    Oct 2006
    Posts
    181
    Thanks
    1
    Thanked 6 Times in 6 Posts
    Information on why tbles are bad (for layout):
    http://www.hotdesign.com/seybold/
    Quote Originally Posted by Excavator
    write it for firefox then hack it for IE


  •  

    Posting Permissions

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