HTML CSS Button Positioning

Question

I have 4 buttons in a header div. I have placed them all using margins top and left in css so they are all next to each other in one line. Nothing fancy.

Now I'm trying to do an action when the button is pressed the button text moves down a little bit.

I'm using this code in CSS :

    #btnhome:active{
    line-height : 25px;
}

HTML :

<div id="header">           
        <button id="btnhome">Home</button>          
        <button id="btnabout">About</button>
        <button id="btncontact">Contact</button>
        <button id="btnsup">Help Us</button>           
        </div>

Button CSS example :

#btnhome {  
    margin-left: 121px;
    margin-top: 1px;
    width: 84px;
    height: 45px;   
    background: transparent;
    border: none;
    color: white;   
    font-size:14px;
    font-weight:700;
}

Also those buttons work on a header background, I'm sure it has something to do with these settings :

#header {
    background-image: url(images/navbar588.png);
    height: 48px;
    width: 588px;
    margin: 2em auto;   
    }

It works well but the only problem is that the all other buttons also move their text down? Why Is that? Aren't I clearly clarifying that I want to use #btnhome only? All the buttons have completely different ID's. All buttons have the same CSS settings except the margins. What do I need to edit?

Thank you very much.

Could you show the html for the other buttons. I would agree that your CSS does look like it should only apply to an item with an ID of btnhome — Simon Martin
– Simon Martin, Commented Dec 21, 2012 at 23:51
I think it might be because you're setting line-height, and thus the whole DOM gets pushed down. but we would need to see the HTML to be sure. personally, I'd just use margin-top: 25px — kennypu
– kennypu, Commented Dec 21, 2012 at 23:52
Lack of code is the path to the Dark side. Lack of code leads to anger... Anger leads to hate... Hate leads to suffering... — user188654
– user188654, Commented Dec 21, 2012 at 23:53
@SimonMartin I'm sorry guys, I have updated with more extra juicy code for you! — user1880779
– user1880779, Commented Dec 21, 2012 at 23:58
It's not that the text is being moved down, but the entire button. It just seems that way because of the transparent background and no border. — sooper
– sooper, Commented Dec 22, 2012 at 0:04

kennypu · Accepted Answer · 2012-12-22 00:10:39Z

10

as I expected, yeah, it's because the whole DOM element is being pushed down. You have multiple options. You can put the buttons in separate divs, and float them so that they don't affect each other. the simpler solution is to just set the :active button to position:relative; and use top instead of margin or line-height. example fiddle: http://jsfiddle.net/5CZRP/

answered Dec 22, 2012 at 0:10

kennypu

6,1332 gold badges24 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Simon Martin · Accepted Answer · 2012-12-22 00:06:45Z

1

try changing that line-height change to a margin-top or padding-top change instead

#btnhome:active{
margin-top : 25px;
}

Edit: You could also try adding a span inside the button

<div id="header">           
    <button id="btnhome"><span>Home</span></button>          
    <button id="btnabout">About</button>
    <button id="btncontact">Contact</button>
    <button id="btnsup">Help Us</button>           
</div>

Then style that

#btnhome span:active { padding-top:25px;}

edited Dec 22, 2012 at 0:06

answered Dec 21, 2012 at 23:59

Simon Martin

4,2317 gold badges61 silver badges95 bronze badges

2 Comments

user1880779 Over a year ago

I have tried that, also check the updated question, It has one more valuable clue!

user1880779 Over a year ago

I have tried with span and your code but nothing happened. Then I tried with line height and your span way : and still all the texts from buttons moved. '#btnhome span:active { line-height:25px;}'

nienn · Accepted Answer · 2012-12-22 00:21:40Z

0

Use margins instead of line-height and then apply float to the buttons. By default they are displaying as inline-block, so when one is pushed down the hole line is pushed down with him. Float fixes this:

#header button {
    float:left;
}

Here's a working jsfidle.

edited Dec 22, 2012 at 0:21

answered Dec 21, 2012 at 23:58

nienn

2,2202 gold badges16 silver badges21 bronze badges

1 Comment

user1880779 Over a year ago

Yeah I did, same thing happens..That's why I tried alternatively with lineheight in the first place...

Nikolay Kostov · Accepted Answer · 2015-04-23 09:18:26Z

-1

[type=submit]{
    margin-left: 121px;
    margin-top: 19px;
    width: 84px;
    height: 40px;   
    font-size:14px;
    font-weight:700;
}

edited Apr 23, 2015 at 9:18

Nikolay Kostov

17.1k23 gold badges91 silver badges131 bronze badges

answered Apr 23, 2015 at 8:56

Balaji Narendra

997 bronze badges

Collectives™ on Stack Overflow

HTML CSS Button Positioning

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related