Center CSS Buttons in Within a Class

millsi80 · 02-05-2009, 11:17 PM

Hi,

I have made a bunch of buttons each inside there own class (i.e #home, #other). All of the buttons are inside a class called nav. My question is how do I center the buttons without messing up nav or the rest of my site.

Thanks!

Excavator · 02-05-2009, 11:24 PM

Here's an example for you millsi80 - http://nopeople.com/CSS/menu-h_centered-ul/index.html
View the source to see how it's done.

millsi80 · 02-06-2009, 12:16 AM

Thanks for your response.

I added the text-align:center in the #nav class and I got the image below. It is not quite centered, but getting there

redspyder · 02-06-2009, 01:42 AM

hi millsi80,

Have you tried adding:

Code:

margin:0 auto;

to #nav ?

All the best - redspyder

millsi80 · 02-06-2009, 01:47 AM

I tried that and I am still getting the unbalance.

redspyder · 02-06-2009, 02:01 AM

Can you paste the code here ?

All the best - redspyder

millsi80 · 02-06-2009, 02:06 AM

Sure

Code:

<style type="text/css">
		
	body {
	margin:10px 10px 0px 10px;
	padding:0px;
	background-color: #000000;
	background-image: url();
		}
	
	#leftcontent {
		position: absolute;
		left:10px;
		top:50px;
		width:200px;
		background:#fff;
		border:1px solid #000;
		}

	#centercontent {
		background:#fff;
   		margin-left: 199px;
   		margin-right:199px;
		border:1px solid #000;
		voice-family: "\"}\"";
		voice-family: inherit;
   		margin-left: 201px;
   		margin-right:201px;
		}
		
	html>body #centercontent {
	margin-left: 350px;
	margin-right:350px;
		}

	#rightcontent {
		position: absolute;
		right:10px;
		top:50px;
		width:200px;
		background:#fff;
		border:1px solid #000;
		}
	
	#banner {
		background:#fff;
		height:40px;
		border-top:1px solid #000;
		border-right:1px solid #000;
		border-left:1px solid #000;
		voice-family: "\"}\"";
		voice-family: inherit;
		height:39px;
		}
	html>body #banner {
	height:100px;
	margin-left: 350px;
	margin-right: 350px;
	background-image: url(banner%20copy.jpg);
		}
		
	p,h1,pre {
		margin:0px 10px 10px 10px;
		}
		
	h1 {
		font-size:14px;
		padding-top:10px;
		}
		
	#banner h1 {
	font-size:14px;
	padding:10px 10px 0px 10px;
	margin:0px 10px 10px 10px;
	background-image: url(banner%20copy.jpg);
		}
	
	#rightcontent p {
		font-size:10px
		}
		
	#nav {
	background:#36384f;
	height:40px;
	border-top:1px solid #000;
	border-right:1px solid #000;
	border-left:1px solid #000;
	voice-family: "\"}\"";
	voice-family: inherit;
	height:39px;
	overflow:auto;
	text-align: center;
	margin:0 auto;
	
	
		}
		
	html>body #nav {
	height:45px;
	margin-left: 350px;
	margin-right: 350px;
	text-align: center;
	
		}
		
	p,h1,pre {
		margin:0px 10px 10px 10px;
		}
		
	h1 {
		font-size:14px;
		padding-top:10px;
		}
		
	#nav h1 {
	font-size:14px;
	padding:10px 10px 0px 10px;
	margin:0px 10px 10px 10px;
		}
		
 #home, #astro, #iss, #sat, #logo, #csa, #isa, #pic, #bib {
	height: 45px;
	display: block;
	float: left;
	
}
#home {
	background: url(homebutton.jpg) no-repeat 0 0;
	width: 107px
	
  }
	#home:hover { 
		background: #00f url(homebuttonover.jpg) no-repeat 0 0;
		width: 107px
	}    
#astro {
	background: url(astro.jpg) no-repeat 0 0;
	width: 120px
}
	#astro:hover {
	background: url(astroover.jpg) no-repeat 0 0;
	width: 120px;
	}

#iss {
	background: url(iss.jpg) no-repeat 0 0;
	width: 107px
}
	#iss:hover {
	background: url(issover.jpg) no-repeat 0 0;
	width: 107px;
	}
	
#sat {
	background: url(satellites.jpg) no-repeat 0 0;
	width: 120px;
}
	#sat:hover {
	background:url(satellitesover.jpg) no-repeat 0 0;
	width: 120px;
	}

#csa {
	background: url(csa.jpg) no-repeat 0 0;
	width: 107px
}
	#csa:hover {
	background: url(csaover.jpg) no-repeat 0 0;
	width: 107px;
	}
	
#isa {
	background: url(isa.jpg) no-repeat 0 0;
	width: 107px
}
	#isa:hover {
	background: url(isaover.jpg) no-repeat 0 0;
	width: 107px;
	}

#pic {
	background: url(pic.jpg) no-repeat 0 0;
	width: 107px
}
	#pic:hover {
	background: url(picover.jpg) no-repeat 0 0;
	width: 107px;
	}
	
#bib {
	background: url(bib.jpg) no-repeat 0 0;
	width: 145px
}

	#bib:hover {
	background: url(bibover.jpg) no-repeat 0 0;
	width: 145px;
	}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body>
<div id="banner">
  <h1>&nbsp;</h1>
</div>

<div id="nav">
<p style="text-align:center">
<a id="home" href="#" title="Home"></a>
<a id="astro" href="#" title="Astronauts"></a>
<a id="csa" href="#" title="Canadian Space Agency"></a>
<a id="isa" href="#" title="International Space Agency"></a>
<a id="iss" href="#" title="International Space Station"></a>
<a id="sat" href="#" title="Satellites"></a>
<a id="pic" href="#" title="Pictures"></a>
<a id="bib" href="#" title="Bibliography"></a>
</p>
</div>

jlhaslip · 02-06-2009, 03:03 AM

http://www.cssplay.co.uk/menus/centered.html

Uses a UL/LI configuration instead of simple anchors like navbar, but it works.

Excavator · 02-06-2009, 08:32 AM

Hello millsi80,
That's an interesting approach... I've never done it that way.

I took nav and centered that, have to give it a width to do it - the total width of all your buttons.
Make the background color come from #banner then, by moving it's closing tag down to include the #nav.
Change the margins on #banner h1 so the white background is back...

I didn't have the images so there are some background colors in there. Just copy/paste this whole bit into a new .html document to see it -

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
body {
	margin:10px;
	background: #000 url();
}
* {
	margin: 0;
	padding: 0;
	border: none;
}
#banner {
	background:#36384f;
	border-top:1px solid #000;
	border-right:1px solid #000;
	overflow: auto;
}
#banner h1 {
	font-size:14px;
	padding:10px 10px 0px 10px;
	background: #fff url(banner%20copy.jpg);
}
#nav {
	height:45px;
	border-top:1px solid #000;
	border-right:1px solid #000;
	border-left:1px solid #000;
	width: 920px;
	margin: auto;
}
#home, #astro, #iss, #sat, #logo, #csa, #isa, #pic, #bib {
	height: 45px;
	display: block;
	float: left;
}
		#home {
			background: #f00 url(homebutton.jpg) no-repeat 0 0;
			width: 107px
		}
		#home:hover { 
			background: #00f url(homebuttonover.jpg) no-repeat 0 0;
			width: 107px
		}    
#astro {
	background: url(astro.jpg) no-repeat 0 0;
	width: 120px
}
#astro:hover {
	background: url(astroover.jpg) no-repeat 0 0;
	width: 120px;
}
		#iss {
			background: url(iss.jpg) no-repeat 0 0;
			width: 107px
		}
		#iss:hover {
			background: url(issover.jpg) no-repeat 0 0;
			width: 107px;
		}
#sat {
	background: url(satellites.jpg) no-repeat 0 0;
	width: 120px;
}
#sat:hover {
	background:url(satellitesover.jpg) no-repeat 0 0;
	width: 120px;
}
		#csa {
			background: url(csa.jpg) no-repeat 0 0;
			width: 107px
		}
		#csa:hover {
			background: url(csaover.jpg) no-repeat 0 0;
			width: 107px;
		}
#isa {
	background: url(isa.jpg) no-repeat 0 0;
	width: 107px
}
#isa:hover {
	background: url(isaover.jpg) no-repeat 0 0;
	width: 107px;
}
		#pic {
			background: url(pic.jpg) no-repeat 0 0;
			width: 107px
		}
		#pic:hover {
			background: url(picover.jpg) no-repeat 0 0;
			width: 107px;
		}
#bib {
	background: #00f url(bib.jpg) no-repeat 0 0;
	width: 145px
}
#bib:hover {
	background: url(bibover.jpg) no-repeat 0 0;
	width: 145px;
}
</style>
</head>
<body>
    <div id="banner">
    	<h1>text here</h1>
                <div id="nav">
                    <p>
                        <a id="home" href="#" title="Home"></a>
                        <a id="astro" href="#" title="Astronauts"></a>
                        <a id="csa" href="#" title="Canadian Space Agency"></a>
                        <a id="isa" href="#" title="International Space Agency"></a>
                        <a id="iss" href="#" title="International Space Station"></a>
                        <a id="sat" href="#" title="Satellites"></a>
                        <a id="pic" href="#" title="Pictures"></a>
                        <a id="bib" href="#" title="Bibliography"></a>
                    </p>
                <!--end nav--></div>
    <!--end banner--></div>
</body>
</html>

millsi80 · 02-07-2009, 02:42 AM

Thanks everyone!