www.webdeveloper.com
Results 1 to 2 of 2

Thread: Navigation Bar Help

  1. #1
    Join Date
    Aug 2013
    Posts
    3

    Question Navigation Bar Help

    Hi again,

    Well to be very honest I do not know where i am heading in terms of learning HTML / CSS. I am watching every videos and reading very article that tells about web designing. Kind of learning in an unstructured way, something from here, something from here. My learning path is zig zag instead of following a proper structured way. May be this is one of a drawbacks of self learning that is you learn in an unorganized way.

    Any ways after my try at my basic template, I have tried doing some basic navigation bar. Here are the codes,

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<title>Basic Navigation</title>
    	<link rel="stylesheet" type="text/css" href="nav_css.css" />
    <style>
    *
    {
    	margin: 0px;
    	padding: 0px;
    }
    
    #navmenu ul{
    	background-color:green;
    	width:480px;
    	margin: 10px auto;
    	padding:10px;
    	list-style:none;
    	overflow:hidden;
    	
    }
    
    #navmenu ul li{
    	float:left;
    	width:120px;
    	line-height:30px;
    
    	}
    	
    #navmenu ul li a{
    	display:block;
    	background-color:yellow;
    	text-align:center;
    	border:2px solid red;
    	text-decoration:none;
    	font-size:9pts;
    	text-transform:uppercase;
    	color:black;
    }
    
    #navmenu ul li a:hover{
    	background-color:white;
    	color:blue;
    	text-decoration:underline;
    }
    
    #navmenuv ul{
    	background-color:green;
    	width:120px;
    	margin:10px auto;
    	list-style:none;
    	padding:10px;
    }
    #navmenuv ul li{
    	width:120px;
    	line-height:30px;
    	}
    
    #navmenuv ul li a{
    	display:block;
    	background-color:yellow;
    	text-decoration:none;
    	font-size:9pts;
    	text-align:center;
    	text-transform:uppercase;
    	border:2px solid red;
    	}
    	
    #navmenuv ul li a:hover{
    	background-color:white;
    	color:blue;
    	text-decoration:underline;
    }
    </style>
    
    </head>
    <body>
    <div id="navmenu">
    <ul >
    	<li><a href="#">Link1</a></li>
    	<li><a href="#">Link1</a></li>
    	<li><a href="#">Link1</a></li>
    	<li><a href="#">Link1</a></li>
    </ul>
    </div>
    <div id="navmenuv">
    <ul>
    	<li><a href="#">Link1</a></li>
    	<li><a href="#">Link1</a></li>
    	<li><a href="#">Link1</a></li>
    	<li><a href="#">Link1</a></li>
    </ul>
    
    </div>
    
    </body>
    </html>
    Please feel free to correct me and give me tips so that i can make it better.

    It is also a request to everyone out there to please let me know how i can learn HTML/CSS in a more organized way and how i should use my learning that is in practical sense. What should be my first step then the next and then the next and so on so forth. How i should start implementing my learning in practical. What i should start making initially so that i can see how much i have learnt.

    I hope it all makes sense to anyone and everyone reading my post. May be I am sounding a bit selfish and asking too much but to be very frank, i really want to learn webdesign and i do not mind begging for help from anyone and everyone. I hope i am not offending anyone.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,109
    You're right. Trying to learn HTML and CSS in bits and pieces is only going to lead to continuous frustration. Find an online course in HTML and CSS and give it an hour or two every day for a week or so and you'll be amazed at how things start to fall into place for you.
    Rick Trethewey
    Rainbo Design

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles