Navigation Menu Bar - Centered

Hi my name is Aida Boling and I am on here trying to meet new friends as well as trying to build an e-commerce website. I am originally an illustrator and my husband and I built a clothing business. At first, I was hard to communicate to manufacturers without any digital documents. So, I learned how to convert my manual artwork to digital platforms. Now that I have mastered this I am trying to get in the world of Web Design which will help me save money. I was fortunate to find www.daniweb.com a while ago but I was so busy raising a son (who we thought for a short while had Asperger Syndrome but all it was was delayed speech, now you cannot get him to shut up, lol), working part-time teaching, illustrating a book, and fading in and out of this community. Let's just say I was busy literally. Now that I have mastered Adobe products I am ready to take on a new challenge and take this web designing full-time. Please don't judge me if I ask a gazillion of the same questions. It is just in my nature of the unknown. Once I am good, I promise I'll return the favor.

Thank you for taking out the time to read about me and I am ready to meet and add friends on Twitter, Facebook and here!

First Question:
I set up a website template and I need to tweak the navigation menu bar to have it centered on the web page. Anyone could help?

mundee

Newbie Poster

11 posts since Mar 2010

Reputation Points: 10

Solved Threads: 0

9 Months Ago

Hi mundee,

Welcome to Daniweb! To start, you need a good foundation in HTML and CSS. I recommend the following tutorials: HTML Dog , Mozilla , Google , and of course anything that the W3C has to say.

Unfortunately without seeing the markup from the template I can't give you an exact answer. However, a widely used technique for centering elements is by giving the margin property a value of 0 auto . For example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<style type="text/css">
		
		#whatever { 
			width: 70%;
			margin: 0 auto;
		}
		
		</style>
	</head>
	
	<body>
	
	<div id="whatever">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>
	
	</body>
	
</html>

If you need a better explanation or help with something, feel free to ask.

Regards
Arkinder

Arkinder

Posting Pro in Training

454 posts since Nov 2010

Reputation Points: 113

Solved Threads: 59

9 Months Ago

I am using a template that only allows me to tweak the external CSS document end of it. I attached the codes this time. As you can see the navigation element needs to be corrected to so that way I can center it. What should I edit on here? BTW, yes, I am familiar with HTML, but I agree with jumping on some tutorials to get better at it.

I am guessing I would have to enter something here:

/* navigation */

.sf_region3 .sf_navigation .widget {
margin: 0;
}

.sf_navigation h3 {
display:none;
}

.sf_navigation {
clear:both;
margin: 0;
padding:0;
width: 95%;
}

.sf_navigation:after {
content: " ";
display: block;
clear: both;
visibility: hidden;
font-height: 1px;
margin: 0px;
padding: 0px;
}

.sf_navigation ul {
margin: 0;
padding:0;
}

.sf_navigation ul:after {
content: ".";
display: block;
visibility: hidden;
height: 0;
font-size: 1px;
clear: both;
}

.sf_navigation ul li {
list-style: none;
margin: 0;
padding: 0;
white-space: nowrap;
float:left;
}

.sf_navigation ul li a {
text-decoration: underline;
padding: 3px 15px 3px 0;
display: block;
}

.sf_navigation ul li a:hover {
text-decoration:none;
}

But where??? Lol.

h1, h2, h3, h4, h5, h6 {  
	margin: 10px 0;  
}

body {
	font-family: "Times New Roman", Times, FreeSerif, serif;
	margin: 0;
}

.sf_outer_wrapper {
	margin: 10px;
}

.sf_wrapper {	
	width: 100%;
	padding: 5px 0;	
}

/* main */

.sf_pagetitle {
float:left;
width:100%;
}

.sf_content {
	float:left;
	margin-top:10px;
	width:100%;
}

/* sidebar Left */

.sf_region3 {
	float: left;	
	width: 180px;
	overflow: hidden;
	margin: 0;
	position: relative;
}

.sf_region3 .widget {
	margin: 20px 0;
}

/* sidebar Right */

.sf_region7 {
	float: right;	
	width: 180px;
	overflow: hidden;
	margin: 0 10px;
}

.sf_region7 .widget {
	margin: 20px 0;
}

/* navigation */

.sf_region3 .sf_navigation .widget {
	margin: 0;
}

.sf_navigation h3 {
	display:none;
}

.sf_navigation {
	clear:both;		
	margin: 0;
	padding:0;	
	width: 95%;	
}

.sf_navigation:after {
	content: " ";
	display: block;
	clear: both;
	visibility: hidden;
	font-height: 1px;
	margin: 0px;
	padding: 0px;
}

.sf_navigation ul {	
	margin: 0;
	padding:0;	
}

.sf_navigation ul:after {
	content: ".";
    display: block;
    visibility: hidden;
    height: 0;
    font-size: 1px;
    clear: both;
}

.sf_navigation ul li {
	list-style: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;		
	float:left;		
}

.sf_navigation ul li a {	
	text-decoration: underline;	
	padding: 3px 15px 3px 0;
	display: block;
}

.sf_navigation ul li a:hover {
	text-decoration:none;
}

/* subnav */
.sf_navigation .subnav {	
	background-color: #eee;	
	float: left;
	left: -999em;
	list-style-type: none;
	margin: 0;
	padding: 0;
	position: absolute;	
	width: 150px;
	z-index:1000;	
}

.sf_navigation .subnav li {
	float: left;
	width: 150px;
	margin: 0;
	padding: 0;
	white-space: normal;
}

.sf_navigation .subnav li a {
	display: block;
	padding: 2px 5px;
	margin: 0;
	width: 140px;
}

.sf_navigation .subnav li a:hover {		
}

#Nav1 li:hover ul,
#Nav1 li.sfhover ul {
	left: auto;
}

#Nav1 iframe {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	filter: progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=0);
}

#Nav1 li:hover,
#Nav1 li.hover {
	position: static;
}

/* End Navigation */


/* Footer */

.sf_region10 {
	clear: both;
	text-align: center;	
	padding: 40px 0;
	margin-left: 15%;	
}

.sf_banner {
	padding: 20px 0;
	font-size: .75em;
}

/* Other */

.form_button {
	padding: 5px 0px;
}

a:link {
	text-decoration: underline;
}

a:visited {
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

mundee

Newbie Poster

11 posts since Mar 2010

Reputation Points: 10

Solved Threads: 0

9 Months Ago

Yes, try this.

.sf_navigation {
    clear:both;
    margin: 0 auto;
    padding:0;
    width: 95%;
}

Regards
Arkinder

Arkinder

Posting Pro in Training

454 posts since Nov 2010

Reputation Points: 113

Solved Threads: 59

9 Months Ago

I have to tell you, I was just about to say thanks because I just inserted auto next to every margin, until I got the right selector. Thank you so much again. I am getting the hang of this.

mundee

Newbie Poster

11 posts since Mar 2010

Reputation Points: 10

Solved Threads: 0

This question has already been solved

You