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

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Верстка div (float: left;) и 100% ширины. 
V
    Опции темы
N0dwis
Дата 6.12.2007, 10:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Пишу движок для сайта. Использую обычную трехколоночную верстку. А проблема вот в чем: дело в том, что правая и левая колонки могут быть, а могут и не быть, в зависимости от настроек движка. Но т.к. ширина всех div-ов, представляющих колонки задается жестко, то колонки-то пропадают, но на их месте просто пустота. А мне хотелось бы, чтобы центральная часть растягивалась вправо либо влево, или сжималась (если обе крайних колонки есть). Ширину 100% задать не получается, это воспринимается, как 100% ширины содержащего блока, а не свободного места.
Единственное решение, которое я придумал, это генерация таблицы стилей из скрипта, но получается опять смешивание php и html, чего хочется избежать.
В общем суть вопроса такая - сверстать при помощи div трехколоночную страницу, при этом любой из крайних столбцов (либо оба) может быть удален, а центральная часть растянется на его место.

вот структура html
Код

<div id="general">
    <!-- левая полоса -->
    <div id="left"></div>
    <!-- Центральная полоса -->
    <div id="main"></div>
    <!-- правая полоса -->
    <div id="right"></div>
</div>


вот кусок моего css
Код

/* содержащий блок */
#general
{
    width: 1000px;
    height:20px;
    top: 150px;
    margin-left: auto; /* Отступ слева */
    margin-right: auto; /* Отступ справа */
}

/* колонка слева */
#left
{
    width: 200px;
    float: left; 
    margin: auto;
}


/* основное содержимое */
/* эта часть должна растягиваться */
#main
{
    width: 570px; 
    float: left;
    vertical-align: top;
    text-align: left;
}

/* колонка справа */
#right
{
    width: 200px;
    float:right;
    margin-left: - 200px;
}



Это сообщение отредактировал(а) N0dwis - 6.12.2007, 10:43
PM MAIL   Вверх
N0dwis
Дата 6.12.2007, 10:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Хм, только что обнаружил - любой параметр стиля из таблицы стилей можно перекрыть при помощи атрибута "style" элемента! Т.е. если я задать такую таблицу стилей
Код

#main
{
    width: 570px; 
    float: left;
    vertical-align: top;
    text-align: left;
}


А в html файле что-то типа
Код

   <div id="main" style="width: 770px;"></div>

то изменится только ширина элемента main (свойство width), а я думал, что внедренная таблица полностью перекрывает внешнюю!
Это так или нет?
PM MAIL   Вверх
SelenIT
Дата 6.12.2007, 11:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


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


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

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



Для одиночных свойств - так. Но для сокращений составных свойств (напр. font или background) нужно указывать все их составляющие, иначе то, что явно не указано, будет сброшено к дефолтам (по-моему). Если переопределять только то, что нужно (напр. font-size или background-position) все с гарантией будет нормально.


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


прапор творюет
****
Награды: 1



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

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



обращаемся к первоисточникам
CSS - каскадные таблицы стилей

в чём принцип каскадности?
в том, что стили могут перекрываться.

вначале смотрятся базовые настройки CSS браузера

2. смотрятся стили: <link href="lib/indexstyle.css" media="screen" rel="stylesheet" type="text/css" />
, т.е. подгружаемая таблица

3. стили внутри
<style>
</style>
на самой странице

4. атрибут style="" любого тега

что касется тегов типа <font >, то это разметка HTML, если внутри будет тег <span style="">, то span забьёт font,
но честный совет, теги font и т.п. лучше держаться подальше, и чем выше ты сумеешь переметить стили, т.е. в идеале в отдельный файл, тем проще с последующей перестройкой дизайна

и конечно, что-то наследуется, а что-то нет (читаем мануалы к css)
PM MAIL WWW   Вверх
N0dwis
Дата 6.12.2007, 14:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



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


 




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


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

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