CODEWITHSUNDEEP
css
user1902133
user1902133

Reputation: 73

Button won't get wider?

Just created this menu that was supposed to look like this

http://gyazo.com/8afc87a69d0d859f9069bbcaa1547745.png

I have used min width for each button and max width if the text of the button gets too long. i have a gradient bg-repeat for the buttons

but whenever the text gets bigger, this is what happens (the last button):

http://gyazo.com/44852f4b9b7b5fce3e8d156f469a6852.png

This is my HTML code I use for each button:

<div class="menubutton"><span class="menupadding">hofffffffffffme</span></div>

And this is the css:

.menubutton {
  background-image: url("../img/buttonbg.png");
  background-repeat: repeat-x;
  min-width: 82px;
  height: 55px;
}

.menupadding {
  position: absolute;
  padding: 16px;
  margin-left: 7px;
}

How do I make it so if the text of the menu buttons ever passes the width limit, the button will automatically get wider? I tried width: auto but it just messes up.

Thanks.

Upvotes: 0

Views: 491

Answers (4)

Jacqui Dorrough
Jacqui Dorrough

Reputation: 134

Try this:

HTML:

<span class="menubutton">hofffffffffffme</span>

CSS: 

.menubutton {
   background:url(../gnome.png) repeat-x;
   height: 55px; /* adjust as needed; seems really high */
   padding: 16px 16px 16px 16px; /* adjust sub values to position txt correctly */
}

Using span for the text will allow the background image to grow depending on the width of the text. You can use "margin" values in your css for .menubutton to adjust the positioning.

Upvotes: 0

riverstorm
riverstorm

Reputation: 548

I can´t figure out exactly why, but using a SPAN and a DIV to wrap the same element, is not a good thing. I always use a list for my menus.

<ul class="menu">
  <li>Button 1</li>
  <li>Button 2</li>
</ul>

Then you can use this in your css:

.menu li {
  background-image: url("../img/buttonbg.png");
  background-repeat: repeat-x;
  float:left
  min-width: 82px;
  height: 55px;
}

See if it works!

Upvotes: 0

berty
berty

Reputation: 2206

I think this is due to .menupadding's absolute position. It's rendered independently of .menubutton's width.

Try avoiding .menupadding's absolute position.

Upvotes: 1

user1726343
user1726343

Reputation:

The .menupadding span is not actually affecting the layout of its parent at all. If you didn't have the min-width on the div, the button would simply collapse to zero width. The solution is to not use absolute positioning on the span:

.menupadding {
    padding: 16px;
    margin-left: 7px;
}

Upvotes: 2

Related Questions