VPF::Два div'а рядом, первый - "резиновый" по ширине

abb

Дата 24.4.2009, 17:11 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 5
Регистрация: 13.4.2009

Репутация: нет
Всего: нет

Добрый день!

Есть два div'а (стр. 3 и 5), которые нужно разместить в третьем (стр. 1) по ширине в одну линию, учитывая, что ширина первого неизвестна ("резина").
При добавлении стиля width:100% к первому, второй уходит ниже (не помещается), а без размера - первый не растягивается.

Код


<div style = "height:33px;">

    <div style = "height:33px; background-image:url(vl.bmp); background-repeat:repeat-x; float: left;"></div>
        
    <div style = "width:33px; height:33px; background-image:url(vu.bmp); float: left;"></div>
    
</div>

Как сделать так, чтобы они были в одну линию и первый нормально растягивался?

NDenis

Дата 24.4.2009, 17:33 (ссылка)

(голосов:1)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8

ширина второго известна? если да, то для резинового css-правила

Код


margin-right:-33px; /* ширина второго блока */
width:100%;

abb

Дата 24.4.2009, 18:20 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 5
Регистрация: 13.4.2009

Репутация: нет
Всего: нет

Не подходит, т.к. 1 и 2 div'ы наполнены фоном, который в этом случае накладывается друг на друга

bars80080

Дата 24.4.2009, 19:43 (ссылка)

(голосов:1)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

сделать таблицой табличную вёрстку

Violator

Дата 27.4.2009, 15:45 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15

abb,

Код


  .container {height:33px;}
  .left {height:33px; background-image:url(vl.bmp); background-repeat:repeat-x;}
  .right {width:33px; height:33px; background-image:url(vu.bmp); float:right}
  * html .right {position:relative; left:-3px; margin-right:-3px;}

Код


  <div class="container">
    <div class="right"></div>
    <div class="left"></div>
  </div>

ksnk

Дата 27.4.2009, 16:08 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Вот на таблицах

Код


table{border:0; border-collapse:collapse; }

table.container { width:100%;  table-layout:fixed;}
table.container th {height:33px; background-image:url(vl.bmp); background-repeat:repeat-x;}
table.container td {height:33px; background-image:url(vu.bmp); }

Код



<table class="container"><col width="auto"><col width="33px"><tr>
<th></th>
<td></td>
</tr></table>

При этом на медленной машине IE6 довольно заметно тормозит на плавающих и абсолютных элементах, а вот на табличных - летает smile

Violator, а к чему вот эта магия?

Код


* html .right {position:relative; left:-3px; margin-right:-3px;}

Это сообщение отредактировал(а) ksnk - 27.4.2009, 16:43

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Violator

Дата 27.4.2009, 16:26 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15

ksnk,
http://forum.vingrad.ru/index.php?showtopi...t&p=1781546

WebMast

Дата 27.4.2009, 17:02 (ссылка)

(нет голосов)

Загрузка ...

Front-end developer

Профиль
Группа: Участник
Сообщений: 105
Регистрация: 1.1.2009
Где: Беларусь

Репутация: 2
Всего: 2

Делаешь первый див с статичой шириной. Потом второму диву делаешь отступ от края..

Код


<div id="left">
Left
</div>
<div id="right">
Right
</div>

Код


#left{
float:left;
width:200px;
}
#right{
margin-left:210px;
}

Этот вариант должен работать ; ).

--------------------

Личный Блог Евгения ЖлобоРасширение vkleaner для Google Chrome

Violator

Дата 27.4.2009, 17:10 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15

WebMast,
в условии же написано первый - резиновый, при этом там используются бэкграунды которые я так понимаю должны сходится, так что маргин не должен быть больше длины первого, если же вы поставите маргин 200px вы всеравно столкнетесь с багом 3px в ИЕ6

WebMast

Дата 28.4.2009, 19:12 (ссылка)

(нет голосов)

Загрузка ...

Front-end developer

Профиль
Группа: Участник
Сообщений: 105
Регистрация: 1.1.2009
Где: Беларусь

Репутация: 2
Всего: 2

А если так?

Код


<div id="block">
<div id="left">
Left
</div>
<div id="right">
Right
</div>
</div>

Код


#block{
background:url('{bg-img-src}');
}
#left{
margin-right:210px;
background:none;
}
#right{
float:right;
width:200px;
background:none;
}

{bg-img-src} - путь к фоновому изображению. Который включает в себя и правый и левый дивы..

Не ругайтесь. Мне просто интересны разные пути решения..

--------------------

Личный Блог Евгения ЖлобоРасширение vkleaner для Google Chrome

Wowa

Дата 1.5.2009, 11:09 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Админ
Сообщений: 15017
Регистрация: 14.9.2000
Где: Винград

Репутация: 1
Всего: 290

А почему вы указываете height в диве? Он ведь не поддерживается в ИЕ.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »