TalkPHP - Button

Page 1 of 2

Show 40 post(s) from this thread on one page

TalkPHP (http://www.talkphp.com/forums.php)

- XHTML, HTML, CSS (http://www.talkphp.com/xhtml-html-css/)

- - Button (http://www.talkphp.com/xhtml-html-css/1938-button.html)

Tanax

01-11-2008 06:54 PM

Button

1 Attachment(s)

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! :-D

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! :-D
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

1 Attachment(s)

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.

All times are GMT. The time now is 07:21 PM.

Page 1 of 2

Show 40 post(s) from this thread on one page