4

I have a menu system which uses an image 170px wide by 1px tall (repeated indefinite) It has a 10px border on the left, but a 30px border on the right.

is there a way to center the text, but accounting for the extra 20px on the right side?

Fiddle SiteCode: http://jsfiddle.net/jgallaway81/AXVT5/1/

Relevant Code: 

.menubuttonthin {margin-left:0px; margin-top:0px; margin-bottom:0px; width:170px; height:30px; display:block; line-height:30px; font-family:courier; font-size:small; color:#C8C8C8; text-decoration:none; font-weight:900; background-image: url(../_pic-lib/lcars-frame-button-thin.png); }

<a href="http://www.fccorp.us/index.fccorp.php" class="menubuttonthin"> FCCorp.US Story </a>

As you can see, I don't have the links div'd, because they are encapsulated by a div that created the menu area box. Also, I've tried margining and padding both sides, but all that does is increase the size of teh box, throwing off the background image so it doesn't match up to the background image of the site.

J.D.
  • 89
  • 1
  • 1
  • 10
  • 3
    Please include your code. You may have to use padding, text-indent ...etc. But to help you, instructions are not clear enough. Sorry! – madhushankarox Mar 08 '13 at 01:25
  • 1
    negative margin is probably the best choice here – Josh Mar 08 '13 at 01:29
  • Sorry, was trying to do this a bit more generically. I had to learn how to use jsfiddle, but here you go: http://jsfiddle.net/jgallaway81/AXVT5/1/ I had to upload my images to imageshack.us because my hosting service doesn't allow hotlinking of the images. the images are normally hosted in my own domain. As for the result, there is one minor quirk which I attribute to the rendering engine at JSF, since it renders perfectly when the site loads. – J.D. Mar 08 '13 at 13:49

3 Answers3

8

Place your text in a <div> and use the following style for it:

text-align:center; 
margin-right:-20px;

For example, if you want to use inline style:

<div style="text-align:center; margin-right:-20px;">

</div>
Christian Stewart
  • 15,217
  • 20
  • 82
  • 139
Ron
  • 886
  • 13
  • 39
4

If I'm understanding you're question, one approach would be to do something along these lines:

CSS;

foo {
    width: 130px;
    padding: 0 30px 0 10px;
    text-align: center;
}

HTML:

<div class="foo">Whatevs</div>

That'll confine the contents of the div to just the non-border area.

ultranaut
  • 2,132
  • 1
  • 17
  • 22
1

Okay, one opinion... I'm a real idiot.

Answer:

It wasn't until madhushankarox mentioned text-indent that the answer came to me. Reduce the size of the link area to eliminate the difference between both sides as far as the text-centering was concerned, but then use padding to increase thesize to ensure the entire button image was displayed.

.menubuttonthin { padding-right:10px; width:160px; }

(only included the changes) width was shrunk from 170px to 160px, which created the centering; the padding increased teh size of the box, showing the last 10px of the background (button) image

Thanks for all the help!

Course, after I posted this, I realized that Ultranaut was right all along. Sorry about that. I checked your answer as the right one. Thanks.

J.D.
  • 89
  • 1
  • 1
  • 10