Модераторы: Illuminaty

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> позиционирование элементов на экране, с помощью div или table 
:(
    Опции темы
Valeria
Дата 30.1.2007, 15:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: нет
Всего: нет
Нужно два столбца,с линией сверху и между ними. как сделать? может проще таблицу использовать?
PM MAIL ICQ   Вверх
japanes
Дата 30.1.2007, 15:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: 7
Всего: 7
а почему бы и не использовать?
PM MAIL   Вверх
Valeria
Дата 30.1.2007, 15:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: нет
Всего: нет
странно у меня получилось с div, практически подобрала вручную значения.
Код

#header {
position: relative;
width: 100%;
height: 8%;
top: 0;
right: 0;
bottom: auto;
left: 0;         
}
#sidebar {
 position: relative;
        width: 150px;
        height: auto;
        top: 3%;
        right: 150px;
        bottom: 100px;
        left: 0;
}
#main {
position: relative;
        width: auto;
        height: auto;
        top: auto;
        right: 0;
        bottom: 100px;
        left: 220px;
}

вот так вот если написать, то выравнивание правильное в левом и правом столбцах. только не знаю,как вертикальную линию между ними нарисовать

Добавлено @ 15:56 
с линией все хуже вставляю div со стилем в sidebar, линия рисуется,а все что в main съезжает вниз?! знаю что это из-за relative,только что с этим делать?!
Код

.sr_line {
border-top-color: white;
border-right-color: silver;
border-bottom-color: white;
border-left-color: white;
border-style: solid;
border-width: 1px;
height: 1000px;
}
PM MAIL ICQ   Вверх
japanes
Дата 30.1.2007, 16:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: 7
Всего: 7
Код

<div style="width:100px; border:1px solid red; float:left;">1</div>
<div style="width:100px; border:1px solid green; float:left;">2</div>
<div style="width:100px; border:1px solid orange; float:left;">3</div>
PM MAIL   Вверх
Valeria
Дата 30.1.2007, 16:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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

float - хорошая вещь,не знала! спасибо! smile 
выровнялось вроде,только кое-что неровно,буду разбираться!
PM MAIL ICQ   Вверх
japanes
Дата 30.1.2007, 16:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: 7
Всего: 7
но, для верстки на дивах с float:left; необходимо, что бы все дивы имели это свойство, иначе криво будет отображаться в ФФ и Опере.
Код

<div style="height:100px; border:1px solid red;">
<div style="width:100px; height:200px; border:1px solid black; float:left;">&nbsp;</div>
<div style="width:100px; height:200px; border:1px solid blaue; float:left;">&nbsp;</div>
</div>

и
Код

<div style="min-height:100px; border:1px solid red; float:left;">
<div style="width:100px; height:200px; border:1px solid black; float:left;">&nbsp;</div>
<div style="width:100px; height:200px; border:1px solid blaue; float:left;">&nbsp;</div>
</div>

эти два примера смотреть в Опере или Файрфоксе
PM MAIL   Вверх
SelenIT
Дата 31.1.2007, 01:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401
Цитата(japanes @  30.1.2007,  16:24 Найти цитируемый пост)
иначе криво будет отображаться в ФФ и Опере.

Увы, именно так положено по стандарту...
Альтернатива float-у для контейнера в этом случае - вставка в конец пустого div-а с clear:left (или, "для верности", clear:both). Но так, как во втором примере japanesа - изящнее и имхо правильнее.


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
Valeria
Дата 1.2.2007, 11:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: нет
Всего: нет
появилась такая проблема:экран я разбила на две части и сделала так чтобы ширина их была в процентах от экрана. и вроде все хорошо,но когда меняю размеры окна содержимое вылезает за границы?! как быть ? smile

Добавлено @ 11:41 
кстати,у меня IE6,работает все нормально!у другого человека IE7 - съезжает!
PM MAIL ICQ   Вверх
japanes
Дата 1.2.2007, 12:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: 7
Всего: 7
как съезжает?
PM MAIL   Вверх
Valeria
Дата 1.2.2007, 12:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: нет
Всего: нет
ну,граница между блоками меняется вместе с экраном! а поля остаются того же размера! и кстати,в FF тоже также!
PM MAIL ICQ   Вверх
japanes
Дата 1.2.2007, 13:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: 7
Всего: 7
код в студию (желательно только проблемного участка)
PM MAIL   Вверх
Valeria
Дата 1.2.2007, 15:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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

граница между блоками меняется вместе с экраном

с этим я разобралась,поставила свойство min-width. видимо FF просто так ширину не поддерживает,в IE7 еще не проверяла.
только теперь вкладки также съезжают  smile 
попробую исправить,не получится напишу!с кодом! 
PM MAIL ICQ   Вверх
Valeria
Дата 1.2.2007, 15:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: нет
Всего: нет
как сделать,чтобы при уменьшении экрана элементы не съезжали?!?!!?
какое свойство нужно?!
у меня везде position:relative float:left! вот элементы и съезжают вниз экрана?! 
PM MAIL ICQ   Вверх
japanes
Дата 1.2.2007, 17:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: 7
Всего: 7
положи всю свою наработку в блок:
Код

<style>
div#container
{
min-width:800px;//width:800px;
}
</style>
<div id="container">
 тут твой код
</div>


Это сообщение отредактировал(а) japanes - 1.2.2007, 17:29
PM MAIL   Вверх
SelenIT
Дата 1.2.2007, 18:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401
Все-таки вместо хаков с комментариями (как в примере выше), * html, подчеркиванием (_width) и т.п. в наши дни лучше использовать conditional comments. Особенно в свете набора оборотов 7-ым IE...


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0642 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.