Css Knopf Schiebetüren

Question

Ich versuche, einen Knopf mit der CSS 'Schiebetüren' Technik zu stylen, aber es funktioniert nicht richtig. Ich habe im Moment nur Zugang zu Firefox 3, so dass dieses Problem in anderen Browsern nicht auftreten kann, aber ich möchte es auch für Firefox zu lösen.

Hier ist ein Bild von dem, was das Problem ist:

http://img131.imageshack.us/img131/3559/buttons.png

Wie Sie die zweite Seite sehen kann niedriger als die erste von einem Pixel und ist auch nicht auf die rechte genug. Hier ist der Code, den ich verwende:

button 
{ 
    font-weight: bold; 
    border: none; 
    background: top left url(../images/blue_button_left.gif) no-repeat #24AADF; 
    color: #FFFFFF; 
    height: 25px; 
} 

button span 
{ 
    display: block; 
    height: 25px; 
    background: top right url(../images/blue_button_right.gif) no-repeat; 
    position: relative; 
} 


<a href="http://localhost"><button class="important" type="button"><span>Register</span></button></a> 
<button type="submit"><span>Submit</span></button> 

Wie behebe ich dieses Problem? Ich habe versucht, die Spannweite mit top: -1px rechts: -3px zu positionieren, aber dann ist der Text falsch ausgerichtet.

Danke.

Answer 1

Versuchen Sie, die Polsterung für die Taste auf Null gesetzt werden, und dann das Spiel mit der padding-left und Breite den Text in der platzieren richtiger Ort.

button { padding:0; padding-left:5px; width:90px; /* total width:95px */ } 
button span { ... } 

Wenn Sie im HTML-Block Anzeige aussehen: padding auf die gesamte Breite des Objekts hinzugefügt wird, und der Hintergrund beginnt in dem Polsterbereich und die rechte Hälfte ist

gepolstert

aber bitte beachten , dass Button-Elemente sind NICHT geeignet für die Einbettung anderer Knoten innerhalb (wie span). Sie können OK im Browser arbeiten, aber IE kann Ihr Leben wirklich hart machen (nicht zu erwähnen, dass, soweit ich weiß, es nicht gültig ist)

Answer 2

http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

Ich habe Schiebetüren nur Türen auf einem div Hintergrund, und der Code von dieser Seite funktionierte perfekt.

Answer 3

Formularelemente wie Schaltflächen sind immer schwer zu gestalten und mit kleinen Fehlern wie diesen durchsetzt.

Anstatt die Klasse auf das Schaltflächenelement selbst anzuwenden, versuchen Sie vielleicht, den Stil der Schaltfläche auf ein zusätzliches span-Element innerhalb der eigentlichen Schaltfläche anzuwenden.

Kurz:

button { 
background: white; 
border: 0; 
} 

button div { 
    font-weight: bold; 
    border: none; 
    background: top left url(../images/blue_button_left.gif) no-repeat #24AADF; 
    color: #FFFFFF; 
    height: 25px; 
} 

button div div { 
    height: 25px; 
    background: top right url(../images/blue_button_right.gif) no-repeat; 
    position: relative; 
} 

Und HTML:

<button type="submit"><div><div>Submit</div></div></button> 

Answer 4

Ich benutze DIVs anstelle von Tasten und habe eine Funktion, um sie zu bauen Ort.Es endet wie folgt aussehen:

alt text http://fb.staging.moveable.com/samplebutton.gif

Inline-Skriptaufruf:

<script type='text/javascript'>makeButton("Log in","login()")</script> 

---

Code:

function makeButton(text,action) {  
    document.writeln("<a class='titleGen' href='javascript:// "+action+"' onclick='"+action+";return false'><div class='btn'><div class='btnLeft'></div><div class='btnMiddle'><div class='btnText'>"+text+"</div></div><div class='btnRight'></div></div></a>") 
} 

css:

a.titleGen, .btnText, .btnGText { 
    text-decoration:none 
} 
a.titleGen:hover, .btnText:hover, .btnGText:hover { 
    text-decoration:none 
} 

.btn { 
    height:22px; 
    display:inline; 
    cursor:pointer; 
    margin-right:5px; 
} 
.btnLeft { 
    background-image:url(/images/bg_btnLeft.gif); 
    width:3px; 
    height:22px; 
    float:left; 
} 
.btnRight { 
    background-image:url(/images/bg_btnRight.gif); 
    width:5px; 
    height:22px; 
    float:left; 
} 
.btnMiddle { 
    background-image:url(/images/bg_btnMiddle.gif); 
    width:auto; 
    height:22px; 
    float:left; 
} 
.btnText { 
    color:#ffffff; 
    font-weight:bold; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px; 
    padding-top:2px; 
    padding-left:10px; 
    padding-right:10px; 
}