X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> как заставить float div следовать друг за другом?
vestavia
vestavia
Topic Starter сообщение 21.12.2007, 6:56; Ответить: vestavia
Сообщение #1


Здравствуйте! Я совсем новичок в HTML, прошу вашей помощи в двух вопросах.
1. Имеются 2 float left div. Первый отображается как и надо по левой границе страницы, а вот второй не следует за первым, а отображается ниже справа. Что нужно сделать, чтобы поставить второй div сразу же за первым?
HTML:
  <div class="div_buttons">
  <p><img src="pictures/home.gif" alt="H" width="95" height="30"></p>
  <p><img src="pictures/books.gif" alt="B" width="84" height="30"></p>
  <p><img src="pictures/articles.gif" alt="A" width="100" height="30"></p>
  <p><img src="pictures/about.gif" width="120" height="30"></p>
</div>
<div class="div_main">
  <H2 align="center">Welcome to site</h2>
  <p align="center"><img src="pictures/pic.JPG" alt="jpicture" width="222" height="251"></p>
</div>

CSS:
     .div_buttons{
    float: left;
    width: 120px;
    margin-right: auto;
    margin-left: auto;
}
.div_main {
    float: left;
    width: 310px;
    text-align: left;
    border: thin solid #CC3366;
    margin: auto;
    vertical-align: baseline;
    background-image: url(pictures/paper.jpg);
    background-repeat: repeat;
}
2. Как сделать видимыми границы и фоновый рисунок второго контейнера?

Я очень жду любых советов!!!
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 21.12.2007, 10:52; Ответить: Exterior
Сообщение #2


1. vestavia, что-то не совсем понятно как должен располагаться второй div относительно первого...
В вашем случае, второй div следует сразу за первым на одной линии, т.е. горизонтально (результат вашего кода без изменений):
[attachment=34997:screen1.gif]
Если же хотите сделать, чтобы второй div располагался под первым (вертикально), то тут несколько вариантов. Самые простые из них - это между тегами первого и второго дивов вставить <br> или <br clear="all">, получится вот это:
[attachment=34998:screen2.gif]

2. для отображения границ дива можно применить примерно следующий код:
.div_main {
border: solid;
border-width: 5px;
border-color: #CC3366;
}

хотя и границы и фоновый рисунок и так отображались во всех браузерах, что видно на изображениях выше.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
vestavia
vestavia
Topic Starter сообщение 21.12.2007, 17:45; Ответить: vestavia
Сообщение #3


Уважаемый Exterior, спасибо за ответ!! И прошу прощения за неясное изложение проблемы. Мне нужно, чтобы два дива располагались на одной линии - сначала див с кнопочками, а потом див основного содержимого. Почему-то в моем случае и ИЕ и МФ отображают див основного содержимого не на одной линии с первым, а сдвигают его вниз на правый нижний угол первого дива, получается лесенка. И ни фоновый рисунок, ни границы дива не отображаются вовсе. Если мой код у вас отобразил все правильно, то в чем тогда мне покопаться, чтобы было как у вас?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 21.12.2007, 18:02; Ответить: Exterior
Сообщение #4


vestavia, сделайте скрин того, что отображается у вас, лучше все-таки увидеть.
Несколько примерных вариантов выхода из положения:
1) если сайт, а точнее эти 2 блока, не задумываются быть "резиновыми", тогда можно убрать директиву float из обоих блоков и вписать точную позицию директивой position: absolute; top: 0px; left: 50px;
2) указать блокам фиксированную высоту и ширину (style="width: 150px; height: 70px") и поместить внутрь еще одного блока тоже с фиксированными высотой и шириной.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
vestavia
vestavia
Topic Starter сообщение 21.12.2007, 18:58; Ответить: vestavia
Сообщение #5


Вот сделала скрин, у меня дивы выглядят на экране так

[IMG]file:///C:/DOCUME%7E1/ADMINI%7E1/LOCALS%7E1/Temp/moz-screenshot.jpg[/IMG]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 21.12.2007, 19:18; Ответить: Exterior
Сообщение #6


vestavia, хм... Попробуйте еще такой вариан:
<table width="700" align="center" border="1">
<tr>
<td width="150" valign="middle"><div>меню_с_кнопками</div></td>
<td width="550" valign="middle"><div>со_всем_остальным</div></td>
</tr>
</table>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
vestavia
vestavia
Topic Starter сообщение 21.12.2007, 19:39; Ответить: vestavia
Сообщение #7


Уважаемый Exterior! Спасибо за подсказку с таблицей - конечно же, теперь все отображается как надо!
Только вот я сижу в полном недоумении... второй день уже репку чешу. Так красиво описываются плавающие контейнеры, я решила делать сайт с их помощью... А на поверку выходит, что у меня даже два контейнера не могут отобразиться последовательно на одной линии... да и впридачу границы с фоновыми отображениями исчезают куда-то. Где-то собака здорово порылась, а вот где... Как укротить эти злополучные дивы - ума не приложу.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 21.12.2007, 20:03; Ответить: Exterior
Сообщение #8


vestavia, ну с таблицами всегда проще. С дивами проблема одинаковости (кроссбраузерности) отображения сайта в разных браузерах, что вы имели место наблюдать. Однако, доказано, что сайт на дивах грузится (отрисовывается) быстрее, да и индексируется лучше, чем табличный.
Можете выложить код своей страницы с CSS - попробуем что-нибудь сделать...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
vestavia
vestavia
Topic Starter сообщение 21.12.2007, 20:25; Ответить: vestavia
Сообщение #9


Уважаемый Exterior, у меня эти плавающие контейнеры отображаются одинаково неверно "лесенкой" и без фонов/границ что в ИЕ, что в МФ. Вот это меня совсем смущает. Выходит, я сама говорю браузерам отображать именно так. А я, вроде, дивы плавающие на одну линию помещаю и фоны задаю. Или это только мне кажется.
Вот мой CSS для обоих дивов:

.div_buttons {
    float: left;
    width: 120px;
    border: 5px solid #CC3366;
    background-color: #00FFFF;
}

.div_main {
    float: left;
    width: 310px;
    border: solid;
    border-width: 5px;
    border-color: #002200;
    background-image: url(pictures/paper.jpg);
    background-repeat: repeat;
    text-align: center;
}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 21.12.2007, 20:44; Ответить: Exterior
Сообщение #10


vestavia, попробуйте во втором блоке указать следующее:
<div class="div_main" style="clear:right">
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Арбитражники, как ведете учет расходов и доходов?
12 Boymaster 1911 Вчера, 21:03
автор: MisterBit
Горячая тема (нет новых ответов) Как вывести деньги в Украине с заблокированного Юмани ?
29 freeax 4813 17.4.2024, 1:19
автор: sergio11
Горячая тема (нет новых ответов) Как вы отдыхаете от работы за компом
148 adw-kupon.ru 19712 8.4.2024, 10:37
автор: Skyworker
Открытая тема (нет новых ответов) Как вы бросили работу и перешли на заработок с сайтов?
18 uahomka 3104 5.4.2024, 5:53
автор: Skyworker
Горячая тема (нет новых ответов) Как бездомные хранят деньги?
81 metvekot 13657 31.3.2024, 12:44
автор: Boymaster


 



RSS Текстовая версия Сейчас: 20.4.2024, 1:27
Дизайн