Jump to content
  • 0

Резиновые кнопки


XprogeR
 Share

Question

Доброго времени суток, сложилась интересная ситуация:

Код HTML:

<td id="buttons">

<div class="button_left">

<div class="button_right">

<div class="image_div">

<div class="button_content">

Текст кнопки

</div>

<img src="./images/arrow.png" alt="" class="button_icon"/>

</div>

</div>

</div>

</td>

Код CSS:

#buttons{

}

.button_left{

background: url(../images/button_left.png) no-repeat left;

height: 28px;

color: white;

margin-left: 3px;

float: left;

}

.button_right{

background: url(../images/button_right.png) no-repeat right;

height: 28px;

color: white;

}

.button_content{

background: url(../images/button_mid.png) repeat-x;

height: 28px;

font-size: 120%;

color: white;

padding: 0 10px;

padding-top: 4px;

float: left;

}

.image_div{

background: url(../images/button_mid.png) repeat-x;

margin: 0px 4px;

height: 28px;

overflow: visible;

}

.button_icon{

text-decoration: none;

margin-top: 10px;

border: none;

}

Код java script:

if($.browser.webkit==undefined){

$(".image_div").each(function(){

$(this).css("width",$(this).innerWidth()+"px");

$(this).css("min-width",$(this).innerWidth()+"px");

});

}

Проблема заключается в том что при слишком узком окне изображение находящиеся в .image_div вылетает за пределы дива и создается эффект как будто на кнопках нет этой "иконки", подозреваю это случается из-за того что явно не задана ширина дива. В Chrom и Safari это можно побороть используя свойство overflow, но в остальных браузерах приходиться извращаться прибегая к скрипту, а именно, устанавливать размер картинки явно.

Проблема которую нужно решить: У заказчика по какой-то причине эти злосчастные кнопки все равно исчезают! 0_о...

Я конечно понимаю экстрасенсов здесь нет но я уже скоро с ума сойду, подскажите хоть что-то! =(

UPD: Решение пришло пока писал тему, пошел проверил работает:

Код java script:

if($.browser.webkit==undefined){

$(".image_div").each(function(){

$(this).css("width",$(this).innerWidth()+"px");

$(this).css("min-width",$(this).innerWidth()+"px");

if($(window).width() <= 1024){

$(this).css("width",($(this).innerWidth()+12)+"px");

$(this).css("min-width",($(this).innerWidth()+12)+"px");

}

});

}

Дело в том что если разрешение слишком маленькое, то страница формируется с уже существующим багом и нужно увеличить ширину дива с картинкой для того, чтоб она стала на место.

Edited by XprogeR
Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0
Можно было попробовать min-width для страницы задать.

В том-то все и дело что задан, но все равно возникает эта ошибка, скорее всего в большом кол-ве кода что-то упустил.

Edited by XprogeR
Link to comment
Share on other sites

  • 0
скорее всего в большом кол-ве кода что-то упустил

Не обязательно. Когда мне дизайнеры в первый раз притащили вёрстку на jQuery, с ней тоже возникли проблемы в некоторых браузерах. Я немного покопался, а потом удалил весь jQuery и больше никогда им не пользовался.

Link to comment
Share on other sites

  • 0

Вы что сума сошли скриптом такие вещи делать? Это чисто верстка.

Не обязательно. Когда мне дизайнеры в первый раз притащили вёрстку на jQuery, с ней тоже возникли проблемы в некоторых браузерах. Я немного покопался, а потом удалил весь jQuery и больше никогда им не пользовался.

странно звучит вёрстка на jQuery. Это как?

чтото типа

jQuery('#header').css({
width: '100%',
overflow: 'hidden',
position: 'relative',
zIndex: 10
})

Так чтоли?

Ну JS не для этого предназначен (jQuery в частности)

У меня, как выразился s0rr0w, jQuery головного мозга :) я покорен этой библиотекой. Главное правильно применять, впрочем как и всё.

Edited by mishka2
Link to comment
Share on other sites

  • 0
Вы что сума сошли скриптом такие вещи делать? Это чисто верстка.

странно звучит вёрстка на jQuery. Это как?

чтото типа

jQuery('#header').css({
width: '100%',
overflow: 'hidden',
position: 'relative',
zIndex: 10
})

Так чтоли?

Ну JS не для этого предназначен (jQuery в частности)

У меня, как выразился s0rr0w, jQuery головного мозга :) я покорен этой библиотекой. Главное правильно применять, впрочем как и всё.

Я с вами абсолютно согласен, но в днном случае я не нашел более подходящего решения. Тем боле использование JS в вёрстке в общем я старюсь минимизировать так как считаю это совсем не правильным подходом, но бывают такие ситуации что по другому не выкрутишься, спасибо нашим доблестным программистам браузеров, ну или кому там.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy