Buttons wont center

cant center buttons under picture

Page 1 of 1

3 Replies - 1980 Views - Last Post: 13 October 2008 - 03:55 PM

#1 Smurphy  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 35
  • View blog
  • Posts: 367
  • Joined: 07-July 08

Buttons wont center

Posted 13 October 2008 - 03:16 PM

Hello again I know this is something stupid I am missing but hey brain farts happen. So I have these buttons that will not center under the picture I have, I included a screen shot of the problem hope that helps. Thank in advance for the help. :D
<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
#container div{
padding-left:50px
}
#navigation a:link, #navigation a:visited{
color:#fff;
background-image:url(button.jpg);
background-repeat:repeat-x;
background-position:center;
border:2px outset #000000;
vertical-align:middle;

}
#navigation a:hover, #navigation a:active{
color:#000;
background-image:url(buttonbc.jpg);
background-repeat:repeat-x;
border:2px outset #000000;
vertical-align:middle;
}
body{
background-image:url(offbookbg.jpg);
padding-top:15px;
padding-left:40px;
}
#navigation {
height:45px;
font-family:verdana,ariel;
}
#navigation ul{
margin:0px;
padding:0px;
list-style-type:none;
}
#navigation ul li{
display:inline;

}
#navigation ul li a{
text-decoration:none;
float:left;
margin:12px 0;
padding:15px;
text-align:center;
}
</style>
</head>
<body>
<div id="container" align="center">
<div id="header">
<Img  width="885" height="200" src="lightoff.jpg" />
</div>
<div id="navigation" align="center">
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Season</a></li>
<li><a href="#">Celebration High</a></li>
</ul>
</div>
</div>
</body>
</html>

Attached Image

Is This A Good Question/Topic? 0
  • +

Replies To: Buttons wont center

#2 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1147
  • View blog
  • Posts: 7,134
  • Joined: 07-September 06

Re: Buttons wont center

Posted 13 October 2008 - 03:21 PM

I believe your problem is this line:
#container div{
padding-left:50px
}


That is adding a 50 pixel pad to the left side of the banner image, which you don't have mimicked in your navigation menu. So either (A) remove the padding from the container (above) or (B) add the padding to the navigation.

HTH
Was This Post Helpful? 1
  • +
  • -

#3 Smurphy  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 35
  • View blog
  • Posts: 367
  • Joined: 07-July 08

Re: Buttons wont center

Posted 13 October 2008 - 03:52 PM

Haha thank you, see I knew it was something stupid I missed :^: . I just needed a little bit more padding but now it is centered.
Was This Post Helpful? 0
  • +
  • -

#4 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1147
  • View blog
  • Posts: 7,134
  • Joined: 07-September 06

Re: Buttons wont center

Posted 13 October 2008 - 03:55 PM

Lol no problem :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1