Centering Help - Webmaster Forum - Web Design, Programming and SEO forums

10-10-2006, 11:58 PM

KewL

Status: OG
Join date: Apr 2006
Location: California
Expertise: Design, Music, Xhtml, Css
Software: Photoshop, Coda, FL Studio

Posts: 2,007

iTrader: 11 / 100%

KewL is an unknown quantity at this point

Centering Help

Hey everyone, we are trying to get the buttons on the navibar centered on all resolutions. As of right now you can only see it centered on 1024,768 or less.

http://www.skinwp.com/dev/index.php?...al_id=&cal_id=

Code:

	<div id="navigation" style="padding-left: 25%;">
<p>
<a href="{ipb.script_url}"><div class="nav_home"></div></a>
<a href="{ipb.script_url}act=Search&amp;f={ipb.input['f']}"><div class="nav_search"></div></a>
<a href="{ipb.script_url}act=Members"><div class="nav_members"></div></a>
<a href="{ipb.script_url}act=calendar"><div class="nav_calendar"></div></a>
<a href="{ipb.script_url}act=Help"><div class="nav_help"></div></a>
</p>
	</div>

CSS:
#navigation{
	background: url(<#IMG_DIR#>/navigation_tile.gif);
	height: 39px;
	padding: 0;
	margin: 0px auto 0px auto;
}

#navigation p{
	display: inline;
	margin: 0px auto 0px auto;
	padding: 0;
	text-align: center;
}

.nav_home{
	background: url(<#IMG_DIR#>/navigation_home.gif);
	height: 39px;
	width: 89px;
	padding: 0;
	margin: 0;
	float: left;
}

.nav_home:hover{
	background: url(<#IMG_DIR#>/navigation_home2.gif);
	height: 39px;
	width: 89px;
}

.nav_search{
	background: url(<#IMG_DIR#>/navigation_search.gif);
	height: 39px;
	width: 89px;
	padding: 0;
	margin: 0;
	float: left;
}

.nav_search:hover{
	background: url(<#IMG_DIR#>/navigation_search2.gif);
	height: 39px;
	width: 89px;
}

.nav_members{
	background: url(<#IMG_DIR#>/navigation_members.gif);
	height: 39px;
	width: 89px;
	padding: 0;
	margin: 0;
	float: left;
}

.nav_members:hover{
	background: url(<#IMG_DIR#>/navigation_members2.gif);
	height: 39px;
	width: 89px;
}

.nav_calendar{
	background: url(<#IMG_DIR#>/navigation_calendar.gif);
	height: 39px;
	width: 89px;
	padding: 0;
	margin: 0;
	float: left;
}

.nav_calendar:hover{
	background: url(<#IMG_DIR#>/navigation_calendar2.gif);
	height: 39px;
	width: 89px;;
}

.nav_help{
	background: url(<#IMG_DIR#>/navigation_help.gif);
	height: 39px;
	width: 89px;
	padding: 0;
	margin: 0;
	float: left;
}

.nav_help:hover{
	background: url(<#IMG_DIR#>/navigation_help2.gif);
	height: 39px;
	width: 89px;
}

10-11-2006, 05:11 AM

Andrew R

Status: Request a custom title
Join date: Dec 2005
Location: Arizona
Expertise:
Software:

Posts: 5,200

iTrader: 17 / 95%

Andrew R is on a distinguished road

Set a width to your main navigation div (which only includes the buttons) and add a set width. Then your margin properties will automatically center it.

10-11-2006, 05:19 AM

Dan Schulz

Status: I'm new around here
Join date: Oct 2006
Location: Aurora, Illinois
Expertise:
Software:

Posts: 15

iTrader: 0 / 0%

Dan Schulz is on a distinguished road

Try fixing the validation errors in your code first, then referesh in your browsers.
http://validator.w3.org/check?uri=ht...al_id=&cal_id=

Also check your stylesheet for any validation errors at http://jigsaw.w3.org/css-validator/ as well. I tried running your stylesheet through the validator, but it was just too long. Try moving it to an external file, link to it, and then run the link through the validator. If there are any errors or warnings, fix them, re-valdiate, and then check in your browsers.

10-11-2006, 06:28 PM

Steveh

Status: I'm new around here
Join date: Sep 2006
Location:
Expertise:
Software:

Posts: 8

iTrader: 0 / 0%

Steveh is on a distinguished road

Originally Posted by AndrewR

Set a width to your main navigation div (which only includes the buttons) and add a set width. Then your margin properties will automatically center it.

I tried setting the width as 100% for the div aswell as the p, but it's not centering. Keep in mind, the buttons are floated left.

10-11-2006, 06:31 PM

EEight

Status: Member
Join date: Sep 2006
Location: New York City
Expertise:
Software:

Posts: 230

iTrader: 0 / 0%

EEight is on a distinguished road

Try something like this for whatever is containing the buttons:

{
width: XXXpx;
position: relative;
left: 50%;
margin: 0 0 0 -ZZZpx;
}

XXX is the width of the container. ZZZ is half of XXX (don't forget the minus sign). What this does is position the left edge of the element exactly in the center of the page, and then nudges it to the left exactly half its own width.