Member Avatar for mundee

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?

  • 2 Contributors
  • 4 Replies
  • 222 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by mundee

Dani AI

Generated

Good call by — centering the navigation container will center the block itself. That fixes layout when the nav has a fixed width, but floated list items inside will still hug the left edge. ’s change to the correct selector got the container centered; below are two practical alternatives that center the menu items themselves while keeping the existing dropdown (.subnav) behavior intact.

Use inline-block for top-level items (keeps dropdown CSS untouched):

/* apply only to the first level so subnav rules are untouched */
.sf_navigation { text-align: center; }
.sf_navigation > ul { display: inline-block; margin: 0; padding: 0; list-style: none; }
.sf_navigation > ul > li { float: none; display: inline-block; margin: 0 12px; vertical-align: middle; }

If you prefer modern CSS, flexbox is cleaner and avoids inline-block whitespace issues:

.sf_navigation > ul { display: flex; justify-content: center; gap: 12px; padding: 0; margin: 0; list-style: none; }
.sf_navigation > ul > li { float: none; }

Troubleshooting tips: change only the top-level selectors (use >). If inline-block gaps appear, either remove the whitespace in the HTML, or set font-size:0 on the parent and restore font-size on child anchors. Keep .sf_navigation .subnav (absolute positioned) unchanged so dropdowns continue to work. For responsiveness, allow wrapping or switch to a stacked mobile menu with a media query. Also consider semantic markup (a <nav> element or role="navigation") and keyboard focus styles so dropdowns work for keyboard users.

Recommended Answers

All 4 Replies

Member Avatar for Arkinder

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

Member Avatar for mundee

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;
}
Member Avatar for Arkinder

Yes, try this.

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

Regards
Arkinder

Member Avatar for mundee

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.