Jump to content

Nav bar stuck to top.


veritas762
 Share

Recommended Posts

I am wondering if you guys could help me with a little something. I'm very new to the coding area of everything and I was wondering how to get the nav bar on top of the website.

img{position:left,top;}body	{	background-color:#333333;	}<!--#navbar ul {	float:center;		margin:1;		padding: 5px;		list-style-type: none;		text-align: center;		background-color:purple;		} #navbar ul li {	height:50px;	float:center;		display:inline;		} #navbar ul li a {	float:center;		text-decoration: none;		padding: .2em 1em;		color: #fff;		background-color: #000;		} #navbar ul li a:hover {	float:center;		color: #000;		background-color: #fff;		} --> 

This is the style code for what I am working on. I'm trying to find out if there is a way to get the nav bar to push to the top of the page, sorta like invision board has with the profile bar.

Link to comment
Share on other sites

Can you post the HTML which goes with it please? There are some errors such as float: center which isn't correct. If you post the HTML i'd be more than happy to sort it out for you. Regards, Lab.

Link to comment
Share on other sites

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><link rel="stylesheet" href="sample.css" type="text/css" /></head><body><div id="navbar">  <ul>	    <li><a href="#">Home</a></li>	    <li><a href="#">...</a></li>	    <li><a href="#">...</a></li>	    <li><a href="#">...</a></li>    <li><a href="#">...</a></li>    <li><a href="#">...</a></li>    <li><a href="#">...</a></li>    <li><a href="#">...</a></li>  </ul></div></body></html>

Here you go. Constructive criticism is welcome as I am VERY new to this but please be nice :)

Link to comment
Share on other sites

I cleaned up your code a bit and made a few additions. I hope this is what you were after......

html, body{	 margin:0;	 padding:0;}img{	 position:left,top;}body{	 background-color:#333333;}#navbar ul {	 margin:1px;	 padding: 5px;	 list-style-type: none;	 text-align: center;	 background-color:purple;}#navbar ul li {	 height:50px;	 display:inline;}#navbar ul li a {	 text-decoration: none;	 padding: .2em 1em;	 color: #fff;	 background-color: #000;}#navbar ul li a:hover {	 color: #000;	 background-color: #fff;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><link rel="stylesheet" href="sample.css" type="text/css" /></head><body>	 <div id="navbar">		  <ul>			   <li><a href="#">Home</a></li>			   <li><a href="#">...</a></li>			   <li><a href="#">...</a></li>			   <li><a href="#">...</a></li>			   <li><a href="#">...</a></li>			   <li><a href="#">...</a></li>			   <li><a href="#">...</a></li>			   <li><a href="#">...</a></li>		  </ul>	 </div></body></html>

Link to comment
Share on other sites

Also is there a way that i can get the link buttons to the right while leaving the whole bar stretch across the top? I would like to try and get a logo inside the nav bar. I just tried the float option but i think im doing it wrong.

Link to comment
Share on other sites

He took out your float: center declarations. Also on the html,body element, he took off the margin and padding. Either html or body has a slight margin by default. Kind regards, LC.

Link to comment
Share on other sites

How do i get the buttons that are the link to go to the right? I want to put a logo on the left and put the link button for the pages while leaving the bar to stretch from side to side and leave it pushed on top.

Link to comment
Share on other sites

You can float your image left and then set your UL to display text to the right:

html, body{		 margin:0;		 padding:0;}img{		 position:left,top;}body{		 background-color:#333333;}#navbar{    background-color: purple;}#logo{    float: left;}#navbar ul {		 margin:1px;		 padding: 5px;		 list-style-type: none;         text-align: right;}#navbar ul li {		 height:50px;		 display:inline;}#navbar ul li a {		 text-decoration: none;		 padding: .2em 1em;		 color: #fff;		 background-color: #000;}#navbar ul li a:hover {		 color: #000;		 background-color: #fff;}

HTML:

<div id="navbar">        <img src="yourlogo.png" alt="Logo" id="logo" />				  <ul>						   <li><a href="#">Home</a></li>						   <li><a href="#">...</a></li>						   <li><a href="#">...</a></li>						   <li><a href="#">...</a></li>						   <li><a href="#">...</a></li>						   <li><a href="#">...</a></li>						   <li><a href="#">...</a></li>						   <li><a href="#">...</a></li>				  </ul>		 </div>

Hope this helps. Regards, Lab.

Link to comment
Share on other sites

Yes you can edit the padding values on the anchors (<a>):

#navbar ul li a {		 text-decoration: none;		 padding: 1em 2em;		 color: #fff;		 background-color: #000;}

Try these values and see what you think. Regards, Lab.

Edited by Labtec
Link to comment
Share on other sites

Yes you can edit the padding values on the anchors (<a>):
#navbar ul li a {		 text-decoration: none;		 padding: 1em 2em;		 color: #fff;		 background-color: #000;}

Try these values and see what you think. Regards, Lab.

Thanks that worked. Where would I edit the text size?
Link to comment
Share on other sites

You can do it in the exact same place.

#navbar ul li a {		 text-decoration: none;		 padding: 1em 2em;         font-size: 16pt; /*for example*/		 color: #fff;		 background-color: #000;}

Regards, Lab.

Edited by Labtec
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...