3 фиксированных столбца (верхний и нижний колонтитулы) с использованием DIV, NO Absolute DIV, IE friendly, все столбцы растягиваются одинаково - PullRequest
Новая
       6

3 фиксированных столбца (верхний и нижний колонтитулы) с использованием DIV, NO Absolute DIV, IE friendly, все столбцы растягиваются одинаково

1 голос
/ 06 июня 2010

Слева направо, идентификатор Col1 шириной 560 пикселей с отступом 10 пикселей, средний столбец, 250 пикселей шириной с отступом 5 пикселей и Col3 (боковая панель) имеет ширину 200 пикселей с заполнением 3 пикселя Цвет фона, независимо от длины текста в любом столбце, должен растягиваться по вертикали. Нет JavaScript (обходные пути jQuery), чтобы заставить его работать. Это должна быть чистая семантическая разметка с CSS. Каждый столбец должен иметь вложенный столбец цвета, в который будет помещаться содержимое. Столбец 1 должен быть выдающимся SEO, что означает самый высокий вложенный столбец для Google и других поисковых систем для сканирования. Я использовал макет «Святой Грааль», статьи в «A List Apart», и эти решения настолько запутаны, что толкают основные столбцы влево, а вложенные столбцы толкают их с отступом вправо. эти примеры, но их нельзя редактировать, просто изменив ширину в CSS или отступы и т. д. Не могли бы вы мне помочь?

1 Ответ

0 голосов
/ 06 июня 2010

Известные решения сложны, потому что, к сожалению, то, что вы описываете, просто нелегко сделать в pre-HTML5 / CSS3. Это не сумасшествие, это состояние искусства. Люди, которые разработали и описали решение в A List Apart, являются авторитетными экспертами в отрасли, чтобы выяснить это.

Наилучшие варианты, которые у нас есть, это либо использовать JavaScript для вычисления размера столбца и его размещения во время выполнения, либо довольствоваться ручной настройкой, необходимой для чисто CSS-решения. Для большинства сайтов я рекомендую использовать JS, так как хорошая разметка столбцов может считаться «улучшением» - семантическая разметка, расположенная вертикально, все еще читаема, оптимизирована для SEO, а клиенты с поддержкой JS могут постепенно улучшать эта разметка будет иметь красивую презентацию из трех колонок.

Если ваш сайт общедоступен и имеет типичное демографическое распределение, вы смотрите на ~ 90% с включенным JS, а остальные 10% привыкли к тому, что сайты не очень красивые или выглядят совершенно не правильно.

...