it-swarm.com.de

HTML-CSS-Schaltflächenpositionierung

Ich habe 4 Buttons in einem Header div. Ich habe sie alle mit Rändern oben und links in CSS platziert, sodass sie alle in einer Zeile nebeneinander liegen. Nichts Außergewöhnliches.

Jetzt versuche ich eine Aktion auszuführen, wenn der Button gedrückt wird und der Button-Text etwas nach unten verschoben wird.

Ich verwende diesen 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 Beispiel:

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

Diese Schaltflächen funktionieren auch im Hintergrund einer Kopfzeile. Ich bin sicher, dass dies etwas mit diesen Einstellungen zu tun hat:

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

Es funktioniert gut, aber das einzige Problem ist, dass alle anderen Schaltflächen ihren Text auch nach unten verschieben. Warum das? Erkläre ich nicht eindeutig, dass ich nur #btnhome verwenden möchte? Alle Tasten haben völlig unterschiedliche IDs. Alle Schaltflächen haben die gleichen CSS-Einstellungen mit Ausnahme der Ränder. Was muss ich bearbeiten?

Vielen Dank.

3
user1880779

wie ich es erwartet habe, ja, weil das gesamte DOM-Element nach unten gedrückt wird. Sie haben mehrere Möglichkeiten. Sie können die Schaltflächen in separate divs und float setzen, damit sie sich nicht gegenseitig beeinflussen. Die einfachere Lösung besteht darin, die :active-Schaltfläche auf position:relative; zu setzen und top anstelle von Rand oder Zeilenhöhe zu verwenden. Beispiel Geige: http://jsfiddle.net/5CZRP/

7
kennypu

versuchen Sie stattdessen, die Änderung der Zeilenhöhe in eine Änderung der Ränder- oder Polsteroberflächen zu ändern

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

Bearbeiten: Sie können auch versuchen, einen Bereich innerhalb der Schaltfläche hinzuzufügen 

<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>

Dann stylen Sie das 

#btnhome span:active { padding-top:25px;}
1
Simon Martin
[type=submit]{
    margin-left: 121px;
    margin-top: 19px;
    width: 84px;
    height: 40px;   
    font-size:14px;
    font-weight:700;
}
0
Balaji Narendra

Verwenden Sie Ränder anstelle der Zeilenhöhe und wenden Sie dann den Schaltflächen Float an. Standardmäßig werden sie als inline-block angezeigt. Wenn Sie eine nach unten drücken, wird die Bohrungslinie mit ihm nach unten gedrückt. Float behebt das:

#header button {
    float:left;
}

Hier ist eine funktionierende jsfidle .

0
nienn