Forums

Eraser35

My website has a nav bar at the top of the page that spans horizontally 100% the width of the screen. I have buttons on the left-hand side (i.e. Home, About, Blog, Contact) and a Login button on the far-right hand-side of the screen. I am trying to center a particular button in the middle of the this nav bar (let's call it "X"). I want it to look something like this:

<--Home--About--Blog--Contact----------X--------------------Login-->

I have successfully got button X to be centered, however, in doing so this button seems to affect the functionality of the other buttons on the nav bar in such a way that I can no longer rollover or click on any of the other nav bar links on the left or right-hand side.

Here is my CSS for button X, maybe you can recommend a better way of accomplishing this centering, so that I do not lose the functionality of the other buttons.

#buttonX a {
	background: url(../images/x.png) no-repeat 0 50%;
	padding: 0 0 0 35px;
	text-decoration: none;
}

#buttonX {
	font-size: 1.3em;
	position: fixed;
	text-align: center;
	top: 0;
	width:100%;
	margin: 0 auto;
	list-style: none;
	line-height: 2em;
	height: 100%;
}

AshtonSanders

It looks like you are stretching #buttonX over all of the other links... That could definitely "cover up" clickable links...

I would use absolute positioning to make just the link stay in the middle... something like this:


#buttonX a {
   background: url(../images/x.png) no-repeat 0 50%;
   padding: 0 0 0 35px;
   text-decoration: none;
width: 115px;
position:absolute;
top: 100px;
left: 50%
margin-left: -75px;
}

treehouse : what would you like to learn today?

Forums

Issues Centering Link On Header Nav Bar