Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Old 11-24-2008, 06:04 AM Float Nav to right
Junior Talker

Posts: 2
Name: Rachel Roberts
Trades: 0
Hi all

Newish to CSS so this might be an easy question.

I'm need a horizontal naviagtion that positioned on thr right inside a colored bar that streches the full width of the browser/container. I'm wrote this CSS which works finr until I use float:right and the navigation drops below the gray bar

Code:
<style type="text/css">
		#content {
			margin-top:50px;
			padding:10px;
			background-color:gray;
		}
		#nav{		
			display:inline;
			float:right;
		}
		#nav li{
			display:inline;
		}
		#nav a{
			padding:10px 5px 10px 5px;
			text-decoration:none;
			color:white;
		}
		#nav a:hover{
			background-color:white;
			color:gray;
		}
	</style>
</head>

<body>
	<div id="content">
		<ul id="nav">
			<li><a href="#">Home</a></li>
			<li><a href="#">About us</a></li>
			<li><a href="#">Products</a></li>
			<li><a href="#">FAQs</a></li>
			<li><a href="#">Contact us</a></li>
		</ul>
	</div>
</body>
</html>
this is an image of how the nav should look, but I need the nav floated over to the right while keeping the gray bar the full width of the window.
Attached Images
File Type: gif Picture-1.gif (3.1 KB, 3 views)

Last edited by rRoberts; 11-24-2008 at 06:07 AM..
rRoberts is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 11-24-2008, 06:18 AM Re: Float Nav to right
chrishirst's Avatar
Missing! presumed drunk.

Posts: 41,517
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
need a link to the page so we can see ALL the code. You can't debug pictures

lose the display:inline on #nav and give it a fixed width for a start.
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
A foolish consistency is the hobgoblin of little minds
Thought for today:- I SEO the only industry where all the cowboys are Indians?
chrishirst is offline
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 11-24-2008, 06:29 AM Re: Float Nav to right
Junior Talker

Posts: 2
Name: Rachel Roberts
Trades: 0
I'm having problems with my server at the moment

this is all the code if you can help.

Code:
<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>untitled</title>
	<style type="text/css">
		#content {
			margin-top:50px;
			padding:10px;
			background-color:gray;
			}
			#nav{           
				width:600px;
				
			}
 			#nav li{
				display:inline;
			}
			#nav a{
				padding:10px 5px 10px 5px;
				text-decoration:none;
				color:white;
			}
			#nav a:hover{
				background-color:white;
				color:gray;
			}
	</style>
</head>

<body>
	<div id="content">
		<ul id="nav">
			<li><a href="#">Home</a></li>
			<li><a href="#">About us</a></li>
			<li><a href="#">Products</a></li>
			<li><a href="#">FAQs</a></li>
			<li><a href="#">Contact us</a></li>
		</ul>
    </div>
</body>
</html>

  </style>
</head>
rRoberts is offline
Reply With Quote
View Public Profile
 
Old 11-24-2008, 06:38 AM Re: Float Nav to right
Skilled Talker

Posts: 88
Trades: 0
yeah we need to see the page so we can help otherwise we can't really do much, by default a widths are 100% unless specified. It looks like you need a clear however you can do this by giving the ul a height aswell but a clear works best.
__________________
Graham Barnes


Please login or register to view this content. Registration is FREE

Last edited by xpguy; 11-24-2008 at 06:59 AM..
xpguy is offline
Reply With Quote
View Public Profile
 
Old 11-24-2008, 06:51 AM Re: Float Nav to right
chrishirst's Avatar
Missing! presumed drunk.

Posts: 41,517
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
posting the code is quicker than trying to explain
HTML Code:
<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>untitled</title>
	<style type="text/css">
		#content {
			margin-top:50px;
			padding:10px;
			background-color:gray;
			}
			#nav{           
				width:90%;
				float:right;
				list-style-type:none;
				text-align:right;
				background-color:gray;
			}
 			#nav li{
				display:inline;
			}
 			#content #clearnav{
				clear:both;
			}
			#nav a{
				padding:10px 5px 10px 5px;
				text-decoration:none;
				color:white;
			}
			#nav a:hover{
				background-color:white;
				color:gray;
			}
	</style>
</head>

<body>
	<div id="content">
		<ul id="nav">
			<li><a href="#">Home</a></li>
			<li><a href="#">About us</a></li>
			<li><a href="#">Products</a></li>
			<li><a href="#">FAQs</a></li>
			<li><a href="#">Contact us</a></li>
		</ul>
		<div id="clearnav"></div>
		
Content goes here
    </div>
</body>
</html>

  </style>
</head>
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
A foolish consistency is the hobgoblin of little minds
Thought for today:- I SEO the only industry where all the cowboys are Indians?
chrishirst is offline
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Reply     « Reply to Float Nav to right
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.65426 seconds with 13 queries