Button

Tanax · 01-11-2008, 06:54 PM

I wanna code a button, such as in the attached image.

But I can't get it to work :S
So yea, I'm hoping you can fix it

They have rounded corners, just incase you didn't see.
The ends, I've cut out, so they are 2px wide, and 28px high, each.
The actual gradient of the button, is 1px wide, and 28px high.

I want the button to expand in <-> ways, if I write more stuff in the button.

HTML Code:

<div class="button">

	<div class="button-background">

		<img src="left.png" style="float: left; margin: 0;" />
		<div class="button-content">
		Test
		</div>
		<img src="right.png" style="float: right; margin: 0;" />
	
	</div>

</div>

The problem is, how would it be done so that the button expands? Because when I first had no width specified, it expanded all over the screen, even if I had just a little text..

Code:

.button-background {
	width: 100%;
	height: 28px;
	background: url(gradient.png) top left repeat-x;
}

.button {
	
	width: 40px;
	
}

.button-content {
	
	padding-top: 3px;
	margin: 0;
	
}

It works somewhat how I want when I don't have the button-content there. But if I add it, the right end gets pushed down..

And also, I'm assuming that this ain't expanding if I write more text.. :S

RobertK · 01-11-2008, 07:06 PM

Uh... that's too many DIV elements for just a button.

The problem is that the more there are the more trouble browsers have because they compute/render differently. So, the work around to "too many divs" is to make the start/stop of the button to span elements. Like so:

HTML Code:

<div class="myButton">
  <span class="start"></span>
  My Button Text Here!!
  <span class="stop"></span>
</div>

css Code:

/* Just a sample, you'll have to edit
   it a little more than this.  But it should
   make a fine template for you. */
  .myButton {
    background: url('button-center.png') repeat-x;
    height: 23px; /* <- the height of your image */
  }
  .myButton .start {
    background: url('button-start.png') no-repeat;
    width: 2px;
  }
  .myButton .stop {
    background: url('button-start.png') no-repeat;
    width: 2px;
  }

I noticed the 2px border, so my suggestion is that you cut the leading and trailing two pixels of the border into -start/-stop images. Then the middle of that can be the repeating -center gradient. It'll be cleaner and easier to understand too.

Tanax · 01-11-2008, 11:53 PM

Hey! That worked, almost like I wanted xD

Current codes are

index.html

HTML Code:

<div class="myButton">
  
  	<span class="start">
  		<img src="left.png" />
	</span>
  	<span class="stop">
		<img src="right.png" />
	</span>
  
  	<span class="content">
  		My Button Text Here!!
  	</span>
  	
</div>

style.css

Code:

.myButton {
    background: url('gradient.png') repeat-x;
    height: 28px;
    width: 200px;
    text-align: center;
}

.myButton .start {
    width: 2px;
    float: left;
}

.myButton .stop {
    width: 2px;
    float: right;
}

However!
First, I can't get the text where I want. Right now the text is too far up.
I know it can be solved with padding, but WHERE would I put that?
I tried to put it in the content span.. but it doesn't work.
I tried to put it in the button class css, but that makes the images (the ends) to get padding too, which I don't want.

So that's 1 issue.

The 2nd issue, is that the box isn't expanding. If I don't set any fixed width, the button gets over the whole screen. If I set a width, it's that width all the time.. so how would I make it expanding depending on how much content inside?

Thanks for your help so far!

RobertK · 01-12-2008, 12:13 AM

Try:

CSS Code:

vertical-align: middle;

The other way is to give it a padding-top value.

Salathe · 01-12-2008, 12:26 AM

Set the line-height to be the same value as your height, that should help with the off-vertical-center text.

Tanax · 01-12-2008, 12:36 AM

vertical-align didn't work

But line-height did!

Thanks

Now it's just the issue with the expanding thing...

RobertK · 01-12-2008, 12:38 AM

Remove the width, and set the min-width to something like 32px. Don't forget right/left padding.

Tanax · 01-12-2008, 12:44 AM

Didn't work

RobertK · 01-12-2008, 12:50 AM

Oh yeah, I forgot divs like to take 100% the width. Try changing it to a paragraph element. You might have to reset padding/margins to get it to work perfectly.

Tanax · 01-12-2008, 12:55 AM

HTML Code:

<p class="myButton">
  
  	<span class="start">
  		<img src="left.png" />
	</span>
  	<span class="stop">
		<img src="right.png" />
	</span>
  
  	<span class="content">
  		
  	</span>
  	
</p>

Like that??

It didn't work either

RobertK · 01-12-2008, 01:08 AM

Took a minute to figure out, I had to stop and test rather than guess, but switch it back to a div (last time) and set this:

css Code:

.myButton {
  display: inline-block;

Salathe · 01-12-2008, 01:11 AM

Paragraphs and DIVs are both 'block elements' which, if a width is not specified, expand to fit their parent element (ie, the width of the page). You'll need to change the display property to inline in order to display the buttons inline (makes sense). Either that, or you can float the element. As far as I'm aware, our favourite browser (IE6) doesn't support inline-block.

Tanax · 01-12-2008, 01:19 AM

Still doesn't work :-S

Code:

.myButton {
    background: url('gradient.png') repeat-x;
    height: 28px;
    text-align: center;
    line-height: 28px;
    display: inline-block;
}

.myButton .start {
    width: 2px;
    float: left;
}

.myButton .stop {
    width: 2px;
    float: right;
}

.myButton .content {
	color: #FFF;
	font-family: verdana;
	font-size: 12px;
}

RobertK · 01-12-2008, 01:37 AM

#1 What's wrong now?
#2 What's your doctype?

For one thing, the third span in which you put your content is superfluous, so just remove it and its class.

Tanax · 01-12-2008, 02:08 AM

1. It still expands over the whole page... :-S

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

RobertK · 01-12-2008, 02:12 AM

That'd be the problem. With an XHTML 1.0 Transitional document you won't have that problem.

Gareth · 01-12-2008, 10:12 AM

What difference does the doc type actually have?

EyeDentify · 01-12-2008, 11:30 AM

@Gareth

The DOCTYPE tells the browser wich level off error mode to work in when it´s reading the HTML or XHTML code. Because certain versions of XHTML and HTML support different features and such.

And if that is´nt enough some JavaScript DOM related scripts don´t work in various DOCTYPE:s.

Thats my experience any way, correct me if im wrong.

/EyeDentify

Tanax · 01-12-2008, 12:06 PM

Okey, so exactly should the doctype be, in my case???

(never done anything with doctype before.. the doctype is automaticly generated when I create a new html file with my program..)

RobertK · 01-12-2008, 01:02 PM

Well, if you're using a visual editor you will have problems. This is why I gave up on Dreamweaver back in the MX days, it forced me to do things in ways I knew weren't the best.

Try searching for the option to change the project/file from HTML 4 into XHTML 1.0/1.1 Transitional. Otherwise, you'll just have to learn to do it by hand.