SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    In your browser!
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to approach CSS navigation design?

    I want to design a horizontal navigation bar which will prompt 4 different tabs, "Home", "Projects","Contact", "About Me", etc. Now how do i know what css i have to specifically design?
    This is what i have so far:
    HTML Code:
    <style>
    			*{
    				margin:0px;
    				padding:0px;
    			}
    			.navigation{
    			
    			}
    			.navigation ul{
    			
    			}
    			.navigation ul .AboutMe{
    			
    			}
    			.navigation ul .Projects{
    			
    			}
    			.navigation ul .Home{
    			
    			}
    			.navigation ul .AnotherTab{
    			
    			}
    			.navigation ul .Contact{
    			
    			}
    		</style>
    	</head>
    	<body>
    		<div id="body_wrapper">
    			<nav class="navigation">
    				<ul>
    					<li class="AboutMe"><a href="">About Me</a></li>
    					<li class="Projects"><a href="">Projects</a></li>
    					<li class="Home"><a href="">Home</a></li>
    					<li class="AnotherTab"><a href="">Another Tab</a></li>
    					<li class="Contact"><a href="">Contact</a></li>
    				</ul>
    			</nav>
    			<section>
    				<article>
    				
    				</article>
    			</section>
    		</div>
    	</body>
    How can i design them correctly? I hope you guys understand what im asking! Any hint is appreciated!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,111
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by AndreeU17 View Post
    How can i design them correctly?
    It really depends on how you want them to look. Do you have a design in mind?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    In your browser!
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It really depends on how you want them to look. Do you have a design in mind?
    Honestly I'm looking for a simple design, like a black navigation bar with a color hover effect that's all.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,111
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by AndreeU17 View Post
    Honestly I'm looking for a simple design, like a black navigation bar with a color hover effect that's all.
    OK, here's a basic suggestions for you: (online version: http://codepen.io/pageaffairs/pen/glcmn )

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <style>
    
    	html, body, div, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img, form, fieldset, legend, label, textarea, span, em, strong, sub, sup, cite, table, tbody, td, tfoot, th, thead, tr, tt, dl, dt, dd, ol, ul, li {margin: 0; padding: 0;}
    	.wrapper {width: 960px; margin: 0 auto;}
    	.navigation ul{list-style: none; background: #111; overflow: hidden;}
    	.navigation ul li {float: left; border-right: 1px solid #e7e7e7;}
    	.navigation ul li a {display: block; padding: 10px 20px; color: #fff; text-decoration: none;}
    	.navigation ul li a:hover, .navigation ul li a:focus {color: #111; background: #fff;}
    
    </style>
    </head>
    <body>
    	<div class="wrapper">
    		<nav class="navigation">
    			<ul>
    				<li class="AboutMe"><a href="">About Me</a></li>
    				<li class="Projects"><a href="">Projects</a></li>
    				<li class="Home"><a href="">Home</a></li>
    				<li class="AnotherTab"><a href="">Another Tab</a></li>
    				<li class="Contact"><a href="">Contact</a></li>
    			</ul>
    		</nav>
    		<section>
    			<article>
    			
    			</article>
    		</section>
    	</div>
    </body>
    </html>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    In your browser!
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    OK, here's a basic suggestions for you: (online version: http://codepen.io/pageaffairs/pen/glcmn )

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <style>
    
    	html, body, div, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img, form, fieldset, legend, label, textarea, span, em, strong, sub, sup, cite, table, tbody, td, tfoot, th, thead, tr, tt, dl, dt, dd, ol, ul, li {margin: 0; padding: 0;}
    	.wrapper {width: 960px; margin: 0 auto;}
    	.navigation ul{list-style: none; background: #111; overflow: hidden;}
    	.navigation ul li {float: left; border-right: 1px solid #e7e7e7;}
    	.navigation ul li a {display: block; padding: 10px 20px; color: #fff; text-decoration: none;}
    	.navigation ul li a:hover, .navigation ul li a:focus {color: #111; background: #fff;}
    
    </style>
    </head>
    <body>
    	<div class="wrapper">
    		<nav class="navigation">
    			<ul>
    				<li class="AboutMe"><a href="">About Me</a></li>
    				<li class="Projects"><a href="">Projects</a></li>
    				<li class="Home"><a href="">Home</a></li>
    				<li class="AnotherTab"><a href="">Another Tab</a></li>
    				<li class="Contact"><a href="">Contact</a></li>
    			</ul>
    		</nav>
    		<section>
    			<article>
    			
    			</article>
    		</section>
    	</div>
    </body>
    </html>
    Thanks That is simple and nice I will use it has a reference to build and play around with navigation , etc Thanks

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,111
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    No worries. You're welcome. Good luck with your experiments, and let us know how you go.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

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