Center My Css Navigation Bar?

[zachruss92]

Hello, I am currently making a website for my father, I have most of the errors worked out, but i want to center the actual links in my navigation bar. The website is Best Gutter & Roofing Service and next is the CSS tags within the website. The navbar is an inline unordered list. Also if anyone can give me suggestions on how to improve my website or a good place to continue my education would be greatly appreciated

#nav {		width: 100%;	float: left;	margin: 0;	padding: 0;	border-radius: 25px;	background-color: black;	border: #ccc double 5px; }}	#nav li {	text-align:center;	list-style: none;	float: left; }#nav li a { 	padding: 8px 15px;	text-decoration: none;	font-weight: bold;	color: #069;	border-radius: 25px; 	border: 3px outset #ccc; }#nav li a:hover {	color: orange;	background-color: #069; 	border: inset 3px #ccc; 	} 	#nav li a:active {border: inset 3px #ccc;background: #069;}

[Spunky]

I am actually here seeking pretty much the same thing.Right now my solution is to set a width to the ul and set margin: 0 auto. Setting margin: 0 auto is a very effective way to center elements.This works fairly well only I was hoping if someone could tell me if it would be possible to achieve this without having to set the width. For any element. Even if it was a div just wrapping text. How do you make an element the minimum size of it's contents? I could have sworn I have achieved this before way long ago and I feel like Ive just forgotten how to. Or maybe Im just remembering wrong. I want to do it this way, without specifying the width of the wrapping element, because what if the contents inside at some point change? I still want the whole thing centered, but without anything getting squished.Like, no matter how wide the contents are, the wrapping element will always stay center, even if it hardly looks so because it is as wide as the webpage, if I really want to add a certain effect with the width then I would specify it.I hope I am explaining this decently enough..I feel like I sound confusing lol.EDIT: A good example of something basic to explain what I want to achieve is, take an image and wrap a div around it. The width, naturally, already has a set width. The div, I want it to automatically shrink around the image, so that it is the same dimensions. So all I would have to do is set the margin: 0 auto. But maybe this isn't possible, because you cant set the margin: 0 auto to an image and have it centered, unless you need to specify the width in the CSS as well...never tried that..

[dsonesuk]

add extra div around menu, remove <br /> (should never use br to cause new line for element in layout, use in text only, (as it produces different results in different browsers)<div id="nav"><div> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About us</a></li> <li><a href="services.html">Services</a></li> <li><a href="refrences.html">Refrences</a></li> <li><a href="manufacturers.html">Manufacturers</a></li> <li><a href="gallery.html">Photo Gallery</a></li> <li><a href="contact.html">Contact</a></li> <li/> </ul></div> <hr color="black"/> then use this css styling

#nav {background-color:black;border:5px double #CCCCCC;clear:both;margin:0 auto;overflow:hidden;padding:0;text-align:center;width:100%;}#nav div {float:left;left:50%;position:relative;margin-bottom:5px;}#nav hr {clear:both;}#nav ul {list-style-image:none;list-style-position:outside;list-style-type:none;padding:0;}#nav li {float:left;list-style-image:none;list-style-position:outside;list-style-type:none;margin-left:auto;margin-right:auto;position:relative;right:50%;}

[dsonesuk]

@spunky if you are trying to centre a image, using margin:0 auto; it won't work because it is a inline element, you would have to assign text-align:center; to parent element to achieve this, or change the image to block element, THEN use margin: 0 auto;.if you definitely require a div container to surround the the image, you would have to use float, and if you use float you have to use a similar solution to menu alignment above.

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">#image_outer_con{text-align:center; overflow:hidden;}#image_outer_con #image_inner_con{position:relative; left:50%;float:left;}#image_inner_con .image_surround{position:relative; right:50%; }#centre_inline_img {text-align:center;}#centre_block_img img{ display:block; margin: 0 auto;}</style></head><body><div id="image_outer_con"><div id="image_inner_con"><div class="image_surround"><img src="myimage.jpg" width="296" height="221" /></div></div></div><div id="centre_inline_img"><img src="myimage.jpg" width="296" height="221" /></div><div id="centre_block_img"><img src="myimage.jpg" width="296" height="221" /></div></body></html>

[zachruss92]

I understand what you are saying but this is a list that is floated inline. How can i center this?Thanks

@spunky if you are trying to centre a image, using margin:0 auto; it won't work because it is a inline element, you would have to assign text-align:center; to parent element to achieve this, or change the image to block element, THEN use margin: 0 auto;.if you definitely require a div container to surround the the image, you would have to use float, and if you use float you have to use a similar solution to menu alignment above.

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">#image_outer_con{text-align:center; overflow:hidden;}#image_outer_con #image_inner_con{position:relative; left:50%;float:left;}#image_inner_con .image_surround{position:relative; right:50%; }#centre_inline_img {text-align:center;}#centre_block_img img{ display:block; margin: 0 auto;}</style></head><body><div id="image_outer_con"><div id="image_inner_con"><div class="image_surround"><img src="myimage.jpg" width="296" height="221" /></div></div></div><div id="centre_inline_img"><img src="myimage.jpg" width="296" height="221" /></div><div id="centre_block_img"><img src="myimage.jpg" width="296" height="221" /></div></body></html>

[dsonesuk]

Err? I explained how to in post #3

[Spunky]

Err? I explained how to in post #3

I implemented the code you changed into zach's code and it does work. Pretty much accomplishes what I want it to, because if you add another list item, the nav bar is still centered without having to alter the CSS. There is just one thing I dont understand. That extra div you put in without a class or id, the placement of it is really off. If you put a border around it, its flying off to the right. Why?Is what is making this task accomplishable the relative positioning? I don't usually like to use relative positioning much, so am a little confused how this makes it work. I get that one thing is set to left: 50% and the other is right: 50% et voila centered but, is that the only way to accomplish this?I understand what you said about margin: 0 auto not working for an image unless it is a block item, but why doesn't it work if I make <ul> a block item?EDIT: I did a test on an image.

img #test {	display: block;	margin: 0 auto;}<img src="images/GaylordLogoPort.jpg" width="300" height="152" alt="Gaylord Building Logo" id="test" />

I used a pre-existing image that I was originally having a div wrapped around it center it. Again, this div has a set width when I use margin: 0 auto to center it, so if the image were to change size, I would also need to alter the CSS. Is there any way to do this without having to alter the CSS?

[dsonesuk]

relative positioning is not bad, it's the use of position absolute, is where problems occur between different browsers, and because its used with fix width, and height its not as fliud, as when using float, margin and padding to get desire layout.menus using unordered list, can be centered by given the parent ul a fixed width and use margin: 0 auto; the only draw back, is that you have to adjust width, if adding removing li tags or if fluid li/anchor width elements you change the menu text, you will have to remember to adjust the parent width to truly centre within the the page.Post #3 is used mainly for centering ul menu, but! the same method can be use for image and div container as shown in post #4, as for border problem try this.The outer parent container must have text-align: center; the other two must both be position: relative; and one with property left: 50%; and other right: 50%; this is the minimum required to centre the required element, the rest is additional to achieve the end result as in border.the float of 'image_inner_con' forces it to be the same size as image and will adjust on resize of image, but because it is position left 50% of the full width of browser screen, making its left edge in dead centre of screen, using the border on this will make show to the right of image.because 'image_surround' is within 'image_inner_con' the right 50% will force it and the image within it half the width of this img element width, to the left, and now making it dead centre.

#image_outer_con{text-align:center; overflow:hidden;}#image_outer_con #image_inner_con{position:relative; left:50%;float:left;} /*float forces container to be same size as image*/#image_inner_con .image_surround{position:relative; right:50%; border:3px solid red;overflow: hidden;} /* overflow forces container to wrap round floated element*/#image_inner_con .image_surround img { float:left;} /*remove white space problem*/

<div id="image_outer_con"><div id="image_inner_con"><div class="image_surround"><img src="myimage.jpg" width="296" height="221" /></div></div></div>

[Spunky]

Post #3 is used mainly for centering ul menu, but! the same method can be use for image and div container as shown in post #4, as for border problem try this.

Try what? I couldn't see any difference in the code you put below other than you added an overflow. I put in overflow: hidden on the div with the border thats floating off to the right but it only tried forcing all of the links in that div thats off to the right. And putting the overflow in the div thats postioned 50% right only gives issue to the border on the links. (Still using/looking at zach's code.)The technique in post #3 however is new to me, and I would love to make good use of this, only, I want that border fixed and not stuck on the right. Here is the exact code I am using, as you had given in post #3.

#nav {background-color:black;border:5px double #CCCCCC;clear:both;margin:0 auto;overflow:hidden;padding:0;text-align:center;width:100%;}#nav div {float:left;left:50%;position:relative;margin-bottom:5px;border: 1px solid red;}#nav hr {clear:both;}#nav ul {list-style-image:none;list-style-position:outside;list-style-type:none;padding:0;}#nav li {float:left;list-style-image:none;list-style-position:outside;list-style-type:none;margin-left:auto;margin-right:auto;position:relative;right:50%;}#nav li a { 	padding: 8px 15px;	text-decoration: none;	font-weight: bold;	color: #069;	border-radius: 25px; 	border: 3px outset #ccc; }<div id="nav"> 			<div>			<ul> 			<li><a href="index.html">Home</a></li> 			<li><a href="about.html">About us</a></li> 			<li><a href="services.html">Services</a></li> 			<li><a href="refrences.html">Refrences</a></li> 			<li><a href="manufacturers.html">Manufacturers</a></li> 			<li><a href="gallery.html">Photo Gallery</a></li> 			<li><a href="contact.html">Contact</a></li> 			<li><a href="contact.html">Contact</a></li> 			<li></li> 	 		</ul> 			</div>			<br /> 			<hr color="black" /> <table id="phone">

I took out the overflows but when I tried putting them in I put one in "#nav div" (forced all links into the screwed up div) and in "#nav li" (because you had put the overflow in the element with the right 50% - all that did was screw up the border-radius in "#nav li a"So again I ask, try what? Still confused how to fix the border issue.The code in your last post for images however does work. Border and all. Dreamweaver doesn't like it, but it shows up in browser fine. I like this technique because now, if I want to change the image, since the size of it will probably also change, I wont need to also go in the CSS and change the width.

[Spunky]

Ok. I guess you don't know how to fix the border issue. It's your exact code I am using, and it's messy. Like the idea of it, but its sloppy so I cant use it.

[dsonesuk]

Ok. I guess you don't know how to fix the border issue. It's your exact code I am using, and it's messy. Like the idea of it, but its sloppy so I cant use it.

???? As far as i know the border issue WAS fixed, in my last post, i had thought of another way, but now! you can xxxxxx.

[Spunky]

???? As far as i know the border issue WAS fixed, in my last post, i had thought of another way, but now! you can gfy.

Excuse me? And did you not see MY post AFTER that asking you to elaborate because I was confused what you were talking about?