Как с CSS получить нужную верстку DIV-ами

Статус
В этой теме нельзя размещать новые ответы.

t0wer

BlackHerald
Регистрация
24 Июн 2008
Сообщения
743
Реакции
440
Верстаю в быстром темпе сайт. Встал на одной загвоздке так, что не могу никуда съехать.
Нужна помощь...

Суть вот в чем:
- имеем три блока вывода колонок DIV-ами на главной странице
(это рис. 001)
001.jpg
Нужно получить при нажатии кнопки в меню переход на второстепенную страницу в которой левый и правый блоки не выводятся, а центральный растягивается влево и вправо на всю длину.
(это рис. 002)
002.jpg
Общая длина блока (в которых находятся 3 колонки) - 1000 px
левый блок - 200 px
центральный блок - 600 px
правый блок - 200 px
 
для центрального блока
Код:
width:1000px;
margin:0 auto;
для левого и правого
Код:
display:none;
 
Удаляем боковые блоки ручками из html или если не хотите удалять, то пишем display:none;
Для среднего блока задаем ширину в 1000 px
 
в вашем варианте тогда не выводится на главной два блока (левый и правый)
темплейт
Код:
 <div id="container">
 
    <div id="lbnew">$block_left</div>
    <div id="mcnew">$message $block_center $modules $block_down</div>
    <div id="rbnew">$block_right</div>
 
</div>
css
Код:
#container {
    width: 1001px;
}
#lbnew {
    display: none;
}
#mcnew {
    width: 1000px;
    margin: 0 auto;
}
#rbnew {
    display: none;
}

Чтобы понять что и как...
верстаю для этой - kasseler-cms
нужно для отображения форума описать блоки

вот главная Для просмотра ссылки Войди или Зарегистрируйся
вот второстепенная Для просмотра ссылки Войди или Зарегистрируйся

Вот главная страница
Код:
<div id="container">
<div id="lbnew">$block_left</div>
<div id="mcnew">$message $block_center $modules $block_down</div>
<div id="rbnew">$block_right</div>
</div>
Вот второстепенная страница
Код:
<div id="container">
<div id="mcnew">$message $block_center $modules $block_down</div>
</div>
Нужен CSS для корректного отображения страниц
 
для внутренних страниц нужно добавить новый класс mcnew2:
Код:
<div id="container">
<div id="mcnew2">$message $block_center $modules $block_down</div>
</div>

Код:
#container {
width: 1001px;
}
 
mcnew2{
margin:0 auto;
}

display:none; соответсвенно убираем, т.к. правый и левые блоки уже убраны в шаблоне
 
ставишь вот так
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>

левый float: left;
правый float: right;
.middle {
overflow: hidden;
}
 
ширину у флоатов не забудь тока и у контейнера тоже ширина должна быть. Порядок важен!
 
ширину у флоатов не забудь тока и у контейнера тоже ширина должна быть. Порядок важен!
все норм, только центральный блок 600 пикс. как на главной, так и на форуме.
вот что получается:
главная list001.jpg
форум list002.jpg
 
зашел на сайт, там все таблицами сверстано. Для таблиц нет такой проблемы
 
вопрос решен дивами) да, с таблицами нет такого гемороя) но кто ищет легких путей ;)
еще раз всем спасибо, вопрос закрыт!
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху