![]() |
|
Модераторы: Illuminaty |
![]()
|
|
| agx |
|
|||
|
Новичок Профиль Группа: Участник Сообщений: 44 Регистрация: 11.3.2005 Репутация: нет Всего: нет |
Подскажите, можно ли сверстать страницу, содержащую меню с закладками, несколько колонок текста и прочее, что обычно присутствует на главной странице сайта, не используй тега <table>?
Вроде, я слышал о так называемой div-верстке. Проблема в том, что после тега <div> происходит автоматический переход на новую строку (может, это можно как-то отключить?), тоесть разместить несколько div-ов (к примеру, пунктов меню) в одной строке не удается, как можно было бы сделать, используя таблицу. Может быть, нужно использовать позиционирование тега <div>? |
|||
|
||||
| agx |
|
|||
|
Новичок Профиль Группа: Участник Сообщений: 44 Регистрация: 11.3.2005 Репутация: нет Всего: нет |
С помещение нескольких div-ов в одну строку, кажется, разобрался (нашел здесь: http://forum.vingrad.ru/index.php?showtopic=64776), но где можно прочитать попобробнее про свойство float? А то я такое раньше не встречал...
|
|||
|
||||
| Ciber SLasH |
|
|||
![]() Эксперт ![]() ![]() ![]() Профиль Группа: Участник Клуба Сообщений: 1813 Регистрация: 9.11.2004 Где: С.-Петербург Репутация: 15 Всего: 67 |
В спецификации CSS: официальная (EN): http://www.w3.org/TR/CSS21/visuren.html#floats неофициальная (перевод официальной): http://loc.stack.ru/projects/CSS2/cover.html |
|||
|
||||
| agx |
|
|||
|
Новичок Профиль Группа: Участник Сообщений: 44 Регистрация: 11.3.2005 Репутация: нет Всего: нет |
Ciber SLasH Спасибо.
Добавлено @ 08:18 А если требуется сделать две колонки, используя два div, помещенных в одну строку, то как сделать так, чтобы длина одного из них была всегда такой же, как длина другого? В примеру, слева отображается текст, размещенный в <div>, а справа - панель меню, также размещеная в <div>. Как сделать, чтобы блина обоих была одинаковой, если изначально не известна длина текста и количество пунктов в меню? |
|||
|
||||
| agx |
|
||||||
|
Новичок Профиль Группа: Участник Сообщений: 44 Регистрация: 11.3.2005 Репутация: нет Всего: нет |
Так, с растягиванием разобрался: добавить к div-ам стиль height: 100%.
Но тогда как сделать так, чтобы div-ы с float: left/right не перекрывали нижележащие теги, если их длина превышает ту, что задана div-ом, в котором они находятся? К примеру:
стили заданы так:
Получается, что содержимое тегов <div class="info"> и <div class="control"> перекрывает то, что расположено ниже тега <div class="content">. Как этого избежать? Добавлено @ 08:43 Кстати, обнаружил, что если прописать
То в в мозилле работает так, как надо, но IE это не понимает.:-( |
||||||
|
|||||||
| agx |
|
|||
|
Новичок Профиль Группа: Участник Сообщений: 44 Регистрация: 11.3.2005 Репутация: нет Всего: нет |
Все, нашел решение! Оказывается, нужно было просто немного повнимательне снецификацию CSS читать. :-) Еще раз ОГРОМНОЕ спасибо Ciber SLasH!
Нужно было у нижележащего тега прописать
|
|||
|
||||
| kira |
|
|||
|
Новичок Профиль Группа: Участник Сообщений: 27 Регистрация: 20.6.2005 Репутация: нет Всего: 1 |
agx
Посмотри http://www.csszengarden.com/. Там все страницы сверстаны только с помощью CSS. Отличные примеры того, как надо делать. |
|||
|
||||
| agx |
|
|||
|
Новичок Профиль Группа: Участник Сообщений: 44 Регистрация: 11.3.2005 Репутация: нет Всего: нет |
kira Спасибо!:-)
|
|||
|
||||
| Naruvi |
|
|||
![]() Новичок Профиль Группа: Участник Сообщений: 32 Регистрация: 9.6.2005 Где: Москва Репутация: нет Всего: 1 |
||||
|
||||
| Greendrake |
|
|||
|
Опытный ![]() ![]() Профиль Группа: Участник Сообщений: 364 Регистрация: 14.7.2005 Репутация: 3 Всего: 6 |
Поясните, за что так <table> не в моде?
|
|||
|
||||
| lovermann |
|
|||
![]() Опытный ![]() ![]() Профиль Группа: Участник Сообщений: 285 Регистрация: 28.12.2004 Где: Прага Репутация: нет Всего: 8 |
Стоит заметить, что вёрстка сайта на чистых DIVах может принести немало хлопот в виду того, что разные броузеры по-разному интерпретируют CSS. И сами стили на месте не стоят -- постоянно разрабатываются новые фичи -- броузеры просто не успевают. Если FireFox можно хоть завтра начать понимать сегодняшнюю новинку в CSS, то IE -- фиг два, надо ждать следующей версии (а они сами знаете, раз в 3 года появляются).
Таблица в этом плане выгоднее в том смысле, что не возникает проблем различного понимания таблиц броузерами - тут всё стандартно, можно сказать. |
|||
|
||||
| Naruvi |
|
|||
![]() Новичок Профиль Группа: Участник Сообщений: 32 Регистрация: 9.6.2005 Где: Москва Репутация: нет Всего: 1 |
Вот отличная статья про верстку с пом. div и table на 3 странице есть резюме
http://webz.priop.ru/jumper.php?goto=115 Это сообщение отредактировал(а) Naruvi - 17.11.2005, 09:58 |
|||
|
||||
| DENNN |
|
|||
|
Эксперт ![]() ![]() ![]() ![]() Профиль Группа: Участник Клуба Сообщений: 3878 Регистрация: 27.3.2002 Где: Москва Репутация: 1 Всего: 43 |
Просто отдельные личности усердствуют, пытаясь быть крутыми |
|||
|
||||
| Blaga |
|
|||
![]() ЛамМер++ ![]() ![]() Профиль Группа: Участник Сообщений: 429 Регистрация: 15.11.2005 Где: г. Иркутск Репутация: нет Всего: 4 |
Вообще Стоит ли использовать имеено тег DIV может быть его просто стоит поменять на тег Span ??? этот тег (SPAN) не переводит на следующую строку а у него просто автободбор ширины в смысле как текст занимает так и этот блок. Попробуй использовать этот тег РЕКОМЕНДУЮ
-------------------- |
|||
|
||||
| Kevin |
|
|||
![]() Новичок Профиль Группа: Участник Сообщений: 32 Регистрация: 20.11.2005 Репутация: нет Всего: 2 |
Blaga, это не верно с точки зрения семантики, все равно, что через CSS сделать тег <strong> курсивом, а <em> жирным, можно, но не логично, то же и со SPAN.
Если тебе так хочется сделать чтобы DIVы не переносились сделай так: div {display:inline} Это сообщение отредактировал(а) Kevin - 20.11.2005, 10:14 |
|||
|
||||
![]()
|
| 0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей) | |
| 0 Пользователей: | |
| « Предыдущая тема | Вёрстка веб-сайтов | Следующая тема » |
|
|
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности Powered by Invision Power Board(R) 1.3 © 2003 IPS, Inc. |