kent666

вот вариант который был изначально (блочный) <button class="button" type="submit"> <div class="left-side"></div> <div class="middle-side">Add to cart</div> <div class="right-side"></div> </button> и css button.button { border: none; background: transparent; margin: 10px; float: right; cursor: pointer; padding: 0; z-index: 1; //min-width: 150px; /* hack for IE7 */ } button.button div.left-side { background: url('../img/submit-left.png') no-repeat; width: 11px; border: none; padding: 0; float: left; height: 29px; } button.button div.middle-side { background: #7F8B69; height: 23px; color: #fff; font-size: 14px; min-width: 20px; padding: 6px 5px 0 5px; border: none; float: left; } button.button div.right-side { background: url('../img/submit-right.png') no-repeat; width: 11px; border: none; padding: 0; float: left; height: 29px; } button.button:hover div.left-side { background: url('../img/submit-left-hover.png') no-repeat; } button.button:hover div.middle-side { background: #695C4E; } button.button:hover div.right-side { background: url('../img/submit-right-hover.png') no-repeat; } В ИЕ7 ширина родительского блока не корректно считаеться, по этому я приделал костылик //min-width: 150px; /* hack for IE7 */

Всем привет. Помогите пожалуйста. столкунлся с такой проблемкой. Поручили мне сделать шаблон кнопки (резиновой) фактически состоящей из 3-х частей 1) это левая часть в ней рисунок вида < 2) резиновая часть для текста 3) правая часть с рисунком вида < То есть условно <:текст:< Хотел я это сделать 3-мя блоками внутри главного блока 3 блока с float: left все как бы нормально за исключением того что в ИЕ 3 вложенные блока переносяться каждый на отдельную строку Прочитал в нете что это глюк ИЕ7 что он не правильно считает ширину родительского блока В результате пришлось верстать ТАБЛИЦЕЙ. Вот что то на подобии <button id="basket_checkout" class="button" name="checkout" type="submit"> <table> <tbody> <tr> <td class="left-side"></td> <td class="middle-side">Checkout</td> <td class="right-side"></td> </tr> </tbody> </table> </button> css button.button { border: none; background: transparent; margin: 10px; float: right; cursor: pointer; padding: 0; } button.button table { border: none; padding: 0; } button.button table td.left-side { background: url('../img/submit-left.png') no-repeat; width: 11px; } button.button table td.middle-side { background: #7F8B69; height: 29px; color: #fff; font-size: 14px; vertical-align: middle; padding: 0 5px; text-transform: uppercase; } button.button table td.right-side { background: url('../img/submit-right.png') no-repeat; width: 11px; } button.button:hover table td.left-side { background: url('../img/submit-left-hover.png') no-repeat; } button.button:hover table td.middle-side { background: #695C4E; } button.button:hover table td.right-side { background: url('../img/submit-right-hover.png') no-repeat; } подскажите как это можно правильно а главное валидно под ИЕ7 сделать при помощи блоков. Заранее спасибо за то что уделили своё время

Вроде бы сработало

Похоже никак, а что именно вы хотите сделать, может быть возможно попытаться другим способом? Просто в правую колонку попадает content (это может быть разные элементы) которые могут содержать что угодно. Но если они нормально смотрятся к примеру в header то попадая в content искажаются, при чем довольно сильно. Не красиво смотриться элемент в котором по середине щель в 200px

даже http://jsfiddle.net/DQCFW/ видно что на внутренний блок с clear:both влияет левая "плавающая" колонка. Только как отменить влияние внешних плавающих блоков

тогда она уже не будет резиновой да кода не так уж и много div #left { float: left; width: 200px; } div #right { margin: 0 0 0 220px; }

всем привет. Сделал шаблон сайта из 2-х колонок ( 1 статическая, вторая резиновая) на первой колонке float: left; width: 300px; вторая margin-left: 400px; но если во второй колонке появляется контент со свойством clear:both, то блок кидает вниз на уровень окончания перовой колонки. Как сделать так что бы clear:both работал только на уровне второй колонки (то есть на содержимое не влияли плавающие элементы вне блока)

Всем привет. Наткнулся на такую проблему с тегом <tr>. Его надо генерировать при первом проходе цикла в перед тегом td (<tr>), а после второго прохода цикла за тегом td (</tr>). Одномерный массив надо вывести в виде таблицы (хотя бы в 2 колонки) при помощи только CSS ранее делал вот где то так $column = 1; foreach ($fields as $key => $value) { if ($column%2) { echo '<tr>'; } echo '<td>'; echo $value; echo '</td>'; if ( ! $column%2) { echo '</tr>'; } $column++; } Возможно это сделать не прибегая к php а используя только CSS (валидным под ИЕ7)

Спасибо ребята!!!

xeLL немного не так. Мне надо что бы правый блок был фиксированным. а левый - резиновым. а у тебя наоборот

Всем привет. Простенький вопросик. Как сделать 2 блока внутри родительского, так что бы правый блок имел фиксированную ширину, а левый блок был резиновый и занимал всю остальную ширину блока. Заранее спасибо

да нет как раз. В моем случае (в мозиле так точно) body имеет равную блоку wrapper

Всем привет. есть такой вопросик У меня есть div дочерний body Мне нужно сделать так что бы он даже пустой был на весь экран. а при наполнении контентом тоже увеличивался мой вариант не работает корректно. При открытии документа он отображается на весь экран. но при добавлении контента его высота отается неизменной. В данном диве находиться фон сайта. Подскажите пожалуйста вариант как это можно обойти

Спасибо!

Всем привет. Ворост довольно таки простой. но все же есть верстка <div class="wrapper"> <div class="header" id="header"> <div class="logotips"></div> <div class="header-right"> <div class="top-menu"> <ul> <li>first</li> <li>second</li> <li>third</li> <li>fourth</li> </ul> </div> <div class="bottom-menu"> <ul> <li>first</li> <li>second</li> <li>third</li> <li>fourth</li> </ul> </div> </div> </div> и есть css #header{ background: green; height: 90px; min-width: 1000px; margin: 0 15%; position: relative; } .header .logotips { height: 90px; width: 330px; float: left; background: grey; } .header-right { background: black; height: 90px; padding: 0 0 0 330px; } .header-right .top-menu { height: 50px; } .header-right .top-menu ul { margin: 20px 0 0 10px; } .header-right .top-menu ul li { display: block; float: left; background: green; margin: 0 10px 0 0; } .header-right .bottom-menu { height: 40px; background: white; } но margin в top-menu делает отступ не от .header-right .top-menu a от body Получаеться вверху шапки щель в 20px в чем ошибка?