We help IT Professionals succeed at work.

Website Navbar Layout & Positioning Issues

Luuker
Luuker asked
on
376 Views
Last Modified: 2012-05-11
I am trying to re-create a website that has major issues. I have created the main layout for the most part but am having issues with the navbar layout and positioning. I am using Expression Web 4 to assist me in the creation of this site. I have attached the image of what it should look like in the open Expression web window. I have also attached the entire HTML code for this page. I have created a new web page for this posting so nothing is sensitive.

Please, copy this code and help me figure out what I have to do to get the menu bar on 1 line like the preview window in Expression Web.

P.S. I will be moving all the CSS to external style sheets after the site is built. I left it in for this post.

Thank you for any and all help!!!

 
<!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
#container {
	width: 1024px;
	height: 800px;
	margin-right: auto;
	margin-left: auto;
	background-color: #CCCCCC;
}
#navbar {
	padding: 0px;
	margin: 0px;
	width: 795px;
	height: 45px;
	background-color: #38AFC3;
	float: right;
}
#navbar ul {
	margin: 0px;
	height: 44px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #FFFFFF;
}
#navbar li {
	height: 24px;
	border-left-style: solid;
	border-left-width: 1px;
	border-left-color: #FFFFFF;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	padding: 15px 5px 7px 6px;
	color: #F9F9F9;
	text-transform: uppercase;
	list-style-type: none;
	font-weight: bold;
}
body {
	padding: 0px;
	background-color: #308393;
	margin: 0px;
}
#columnLeft {
	width: 229px;
	height: 761px;
	float: left;
	background-color: #333333;
}
</style>
</head>

<body style="margin: 0px auto 0px auto">

<div id="container">
	<div id="columnLeft"><br />
	</div>
	<div id="navbar">
		<ul>
			<li>Home Page</li>
			<li>Programs</li>
			<li>Scholarships</li>
			<li>Enrollment</li>
			<li>Donations</li>
			<li>Volunteer</li>
			<li>About Us</li>
			<li>Contact Us</li>
		</ul>
	</div>
</div>
	
</body>

</html>

Open in new window

This is how Expression Web sees the code This is how the code appears in ANY web browser.
Comment
Watch Question

Commented:
change your #navbar li

font-size: 14px;

to

font-size: 13px;

or

font-size:12px;

Author

Commented:
I did that. I have had the font all the way to 12 and the line will move up. The problem is, I still have a huge dead space on left side of navbar. The original site is using 14px as well.
 
Here is the navbar on the live site that I am trying to rebuild.
Live website navbar
Notice there is no dead space on the left side. That is also the way it shows in my new code in Expression Web viewer window. But somehow, it appears that there is a huge amount of padding on the left side. Changing the font size will not give me the result I am looking for.

Thank you though!

Author

Commented:
Here is what it looks like when it is 12px. I didn't want you to think I hadn't tried.

 12px font
I need to remove the space from the left side of the bar.

Commented:
Ok, add:

padding-left: 0px;

Open in new window


in your original #navbar ul

toss my previous change
Top Expert 2010
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Top Expert 2010
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
I am not exactly sure why, but that fixed the problem!

Thank you so much!!!
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.