Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 364
  • Last Modified:

Website Navbar Layout & Positioning Issues

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.
0
Luuker
Asked:
Luuker
  • 3
  • 2
  • 2
2 Solutions
 
jmnfCommented:
change your #navbar li

font-size: 14px;

to

font-size: 13px;

or

font-size:12px;
0
 
LuukerAuthor 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!
0
 
LuukerAuthor 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.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
jmnfCommented:
Ok, add:

padding-left: 0px;

Open in new window


in your original #navbar ul

toss my previous change
0
 
remorinaCommented:
Hi Luuker,
You need to modify your #navbar class as below "Remove the width and the float"

#navbar {
	padding: 0px;
	margin: 0px;
	height: 45px;
	background-color: #38AFC3;
}

Open in new window

Cheers!
0
 
remorinaCommented:
You may as well update the below classes to fix the missing right white border for the last element.

#navbar ul li:first-child {
    border-left:solid 1px #fff;
}
#navbar li {
	height: 24px;
	border-right:solid 1px #fff;
	float: left;
	font:bold 14px Arial, Helvetica, sans-serif;
	padding: 15px 5px 7px 6px;
	color: #F9F9F9;
	text-transform: uppercase;
	list-style-type: none;
}

Open in new window

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

Thank you so much!!!
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now