Уловки с макетом CSS
Я впервые экспериментирую с макетами css, и мой опыт работы с CSS очень прост. Я хочу получить макет из двух столбцов: левая панель и содержимое. Я нашел это:
#leftcontent
{
position: absolute;
left: 10px;
top: 10px;
width: 170px;
border: 1px solid #C0C0C0;
padding: 2px;
}
#centercontent
{
position: absolute;
margin-left: 181px;
border:1px solid #C0C0C0;
top: 10px;
//fix IE5 bug
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 181px;
}
Это отлично отображается в firefox, но содержимое в IE8 выходит за пределы правой части экрана, я полагаю, исходя из длины #leftcontent. Как я могу это исправить?
Это, вероятно, довольно простое исправление, но я экспериментировал и искал исправления, но это предположительно должно сработать. Я ценю любую помощь.
Ответы 6
Используйте стол. Он больше подходит для задачи, проще в реализации и намного надежнее в разных браузерах.
Я действительно против этого. Таблицы предназначены для табличных данных. Это было их прямое предназначение и то, для чего они подходят. Если дело в дизайне, используйте CSS - если возможно, не меняйте HTML вообще.
Таблицы состоят из одной или нескольких строк столбчатых данных, когда я смотрел в прошлый раз. Если у вас несколько столбцов, значит, у вас есть таблица. Зачем заставлять DIV действовать как таблицы, если таблицы изначально поддерживаются?
Но что тогда делать, если вы хотите превратить их в две строки вместо двух столбцов? С помощью плавающих div вы можете изменить макет страницы, просто отредактировав CSS, и вам не придется менять HTML. HTML предназначен для содержимого, CSS - для макета.
@ Джереми, милый соломанин. Что, например, вы делаете, если хотите перейти с двух столбцов на три? Да, вы редактируете HTML, поскольку DIV существуют в HTML. «HTML для содержания; CSS для верстки» идеалистичен, и его невозможно полностью реализовать.
На самом деле это не так уж и сложно, и мне это очень помогло. Взгляните на исходный код моего сайта. HTML - это все элементы <div>, <span> и <li> с содержимым внутри, а CSS содержит весь макет.
Жаль, что у меня не было 100 очков репутации, чтобы проголосовать за этот ответ
Недавно я сделал макет с использованием таблиц, потому что в то время это казалось проще. Мне просто пришлось снова поменять его на div. Мой совет: не делайте этого, если ваши данные не являются табличными.
@andyk. Конечно. Это как если бы император спрашивал, должен ли он в следующий раз надеть красный или синий. Кто-то должен встать и указать, что в прошлый раз он ничего не надевал и в следующий раз не наденет.
@andyk, не беспокойся, просто заработай 100 репутации и возвращайся. На этот раз я стараюсь хотя бы -20. РЖУ НЕ МОГУ.
@Jeremy: нет, CSS не содержит всего макета. Каждый DIV в вашем HTML - это решение по макету. Невозможно, чтобы макет содержал только CSS.
Попробуйте csszengarden.com. Вы можете изменить весь макет страницы, выбрав разные таблицы стилей CSS.
@Jeremy, я знаю csszengarden, поскольку это впечатляющая демонстрация того, чего можно достичь с помощью CSS. Это, безусловно, не позволяет изменить весь макет. Например, "Ресурсы" всегда появляются после "Архивов", поскольку они ограничены HTML-кодом в элементе div связанного списка.
@Jeremy, csszengarden смешивает содержимое с CSS, заменяя текст изображениями. Я использую этот сайт как пример плохого использования CSS.
Я бы посоветовал переместить элемент #leftcontent влево, а затем установить отступ элемента #centercontent для компенсации:
#leftcontent {
float: left;
width:170px;
border:1px solid #C0C0C0;
padding: 2px;
}
#centercontent {
margin-left: 181px;
border:1px solid #C0C0C0;
}
похоже, это вызывает тот же эффект в ie8, он даст горизонтальную полосу прокрутки
Установите ширину на #centercontent. Будь то процент или размер в пикселях, это то, что вы ищете.
Для этого используйте свойство float. Отличный учебник для поплавков - Плавучий. Вот как будет выглядеть ваш CSS с плавающей запятой:
#leftcontent {
float: left;
margin-left: 10px;
margin-top: 10px;
width: 170px;
border: 1px solid #C0C0C0;
padding: 2px;
}
#centercontent {
float: left;
margin-left: 10px;
border: 1px solid #C0C0C0;
margin-top: 10px;
}
Затем, если вы хотите, чтобы div отображался под этими div, вам придется использовать этот CSS:
#contentbelow {
clear: both;
}
Кроме того, вы должны установить ширину для #centercontent, поскольку для плавающих элементов всегда требуется явная ширина.
То, что другие говорили о float, должно помочь. Кроме того, нужно проверить две вещи:
- Вы пытались настроить
overflowдля левого содержимого, чтобы браузер лучше понимал, что делать, когда что-то не помещается в разрешенное вами пространство. - Вы искали, какой элемент вызывает переполнение левой стороны? Некоторые элементы просто невозможно обернуть, и если они слишком широкие, они заставят ширину всего div растянуться, чтобы разместить их.
Мой любимый метод разметки столбцов - использовать float: left и right.
colwrapper имеет ширину 40em, margin-...:auto делает div центрированным (во всем, кроме IE4 или IE5, по какой-то причине)
footer появляется после обоих столбцов из-за clear:both.
Это хорошо масштабируется, когда вы увеличиваете размер шрифта (ctrl and + or -), и вы можете легко вкладывать столбцы внутри столбцов (чтобы сделать макет из 3 столбцов, вы делаете то же самое, но помещаете два div внутри #colleft и перемещаете влево / вправо их)
#colwrapper{
width:40em;
margin-left:auto;
margin-right:auto;
}
#colleft{
float:left;
width:10em;
}
#colright{
float:right;
width:30em
}
#footer{
clear:both
}
И HTML:
<div id = "colwrapper">
<div id = "colleft">
left column!
</div>
<div id = "colright">
right column!
</div>
<div id = "footer">
footer!
</div>
</div>
У вас есть набор доктайпов? (и в качестве примечания обратите внимание, что IE8B2 по-прежнему имеет серьезные сбои при рендеринге.