Css زر أبواب منزلقة

Question

أنا أحاول أن نمط زر مع css 'انزلاق الأبواب' تقنية, لكنها لا تعمل بشكل صحيح.لقد حصلت على الوصول إلى فايرفوكس 3 في الوقت الراهن لذلك هذه المسألة قد لا تحدث في المتصفحات الأخرى ولكن أود لحل مشكلة فايرفوكس أيضا.

هنا صورة من المشكلة:

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

كما يمكنك أن ترى على الجانب الثاني أقل من الأول من قبل بكسل و أيضا لم ينته إلى الحق بما فيه الكفاية.هنا هو رمز أنا باستخدام:

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>

كيف يمكنني حل هذه المشكلة ؟ حاولت نسبيا المواقع span باستخدام أعلى:-1px الحق:-3px لكن النص هو سوء الانحياز.

شكرا

Answer 1

حاول وضع الحشو على زر الصفر ، ومن ثم اللعب مع الحشو اليسار و العرض إلى وضع النص في المكان المناسب.

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

إذا نظرتم إلى كتلة HTML display:الحشو يحصل إضافة إلى العرض الكلي للكائن و الخلفية يبدأ في منطقة الحشو و النصف الأيمن هو مبطن

ومع ذلك يرجى ملاحظة ، زر عناصر لا تناسب embeding أي العقد الأخرى داخل (مثل span).قد عمل طيب في المتصفح ، ولكن أي يمكن أن تجعل حياتك صعبة حقا (ناهيك عن أنه بقدر ما أعرف, إنه غير صالح)

Answer 2

HTTP: //www.oscaralexander كوم / دروس /-كيفية-جعل-مثير-أزرار مع css.html

وأنا فقط لم أبواب منزلقة على خلفية شعبة، ورمز من هذا الموقع وعملت تماما.

Answer 3

وعناصر النموذج مثل الأزرار هي دائما من الصعب على الأسلوب، ومليئة الأخطاء الطفيفة مثل هذه.

وبدلا من تطبيق فئة إلى عنصر الزر نفسه، وربما محاولة لتطبيق التصميم على الزر لعنصر فترة اضافية داخل الزر الفعلي؟

وباختصار:

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

وHTML:

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

Answer 4

أنا باستخدام DIVs بدلا من الأزرار وظيفة بناء عليها في المكان.ينتهي بها المطاف يبحث مثل هذا:

النص البديل http://fb.staging.moveable.com/samplebutton.gif

البرامج النصية المضمنة الاتصال:

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

---

كود:

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