Нет

Deidre, поставьте блоку #content {overflow: hidden;}.

aknur, основное: 1. Сайт сверстан не кроссбраузерно. В IE6, IE7 и Chrome присутствуют различные отличия от макета. Вообще не указаны настройки шрифта, то есть каждый пользователь увидит сайт в том виде, какие у него настройки шрифта в браузере. 2. Каркас верстки неустойчивый, в частности, футер не всегда находится внизу страницы (добавьте в колонки много текста, чтобы это увидеть), а также граница, разделяющая колонки, имеет высоту, зависящую от одной колонки. Если в правой колонке текста будет больше, чем в левой, то внешний вид изменится, чего быть не должно. 3. Нельзя использовать на странице больше одного атрибута «id» с одинаковым значением, потому что смысл этого атрибута в том, что элемент — единственный на странице. Если на странице присутствует несколько элементов с одинаковым оформлением, для обращения к ним используется атрибут «class». 4. Стили задаются преимущественно через CSS. У вас же в некоторых элементах присутствуют инлайновые стили (то есть прямо в теге через атрибут «style»), что никак не оправдано в данном случае. 5. Плохо продумана структура макета. Вместо основных заголовков страницы, которые представлены нестандартным шрифтом, используются просто теги «img». Для поисковых роботов в данной ситуации будет лучше воспользоваться техникой замены текста (в интернете о ней написано). Используются не по назначению теги «br». Для отступов существует CSS-свойсто «margin». В некоторых случаях присутствуют лишние элементы, без которых можно было бы обойтись с помощью правильного использования свойств CSS (например, div#line_center). 6. Устаревшие теги (например, «font») для лучшей совместимости с новыми версиями браузеров использовать не нужно. 7. Для графических элементов, несущих чисто декоративную функцию, предпочтительнее задавать фон через свойство «bаckground», нежели посредством тега «img». 8. Некоторые названия картинок недостаточно информативны, они не отражают того, для чего используются на сайте. Лишняя вложенная папка для одной картинки также не несет особого смысла. 9. Код HTML отформатирован неверно, что затрудняет его прочтение, если не использовать редакторы для форматирования. Это создает дополнительные проблемы тем, кто пожелает разобраться в вашем коде напрямую. 10. Достаточно много лишнего в CSS. Существуют сокращенные записи свойств, и ими необходимо пользоваться для удобства написания кода. Селектор вида «div#» не имеет смысла, ибо если атрибут «id» использован правильно, достаточно записать «#» для обращения к элементу. Многие свойства CSS используются неоправданно или неверно, в частности присутствует злоуптребление позиционированием и нерациональное использование отступов. Надеюсь, всё сказанное мною как-то вам поможет. По поводу того, какие вам почитать книги или какие посмотреть уроки — не знаю. На мой взгляд, достаточно любого справочника, где адекватно описаны все теги HTML и cвойства CSS, гугла и здравого смысла.

kentastik, если я правильно понимаю вашу задачу, то контейнеру нужно задать «text-align: center», а внутренним элементам — «display: inline-block». Могу рассказать подробно, как добиться кроссбраузерности и убрать появляющиеся между элементами отступы, но всё это легко можно найти в интернете и без меня.

Temiks, в IE6 это можно сделать с помощью expression. При этом во всех остальных браузерах JavaScript не нужен, достаточно псевдокласса hover. Подробнее, например, здесь.

kentastik, основному контейнеру, в котором находится всё остальное, задайте ширину и «margin: 0 auto;» (0 в данном случае — верхний отступ контейнера, можно задать любое значение, какое вам нужно).

Aurica, вы правы, свойство «zoom: 1» нужно для IE(6,7), оно задает hasLayout. Его лучше вынести из общего кода в отдельный файл CSS, который подключить с помощью условных комментариев для IE. Запись шрифта в общем виде выглядит так: font: font-style font-variant font-weight font-size/line-height font-family; Например: font: italic bold 75%/130% Georgia, "Times New Roman", Times, serif;

Aurica, вот вам пример. Если нужны пояснения, спрашивайте. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Сложный фон резинового блока</title> <style type="text/css"> html, body, div, p { margin: 0; padding: 0; } #wrap { width: 70%; margin: 75px auto; } #bottom, #top { height: 100px; opacity: 0.5; background: #09F; } #bottom { background: #093; } #text-wrap { zoom: 1; background: #306; padding: 20px; } #text { margin: -100px 0; position: relative; z-index: 2; } #text p { text-align: justify; font: 75%/130% Georgia, "Times New Roman", Times, serif; color: #555; } </style> </head> <body> <div id="wrap"> <div id="top"></div> <div id="text-wrap"> <div id="text"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mauris lectus, pellentesque ut gravida quis, viverra non purus. Suspendisse potenti. Mauris id nulla nulla, eu iaculis nunc. Praesent rutrum vestibulum purus, vehicula vulputate odio feugiat vitae. Proin at lacus arcu, eu aliquet urna. Nullam nec malesuada magna. Praesent congue, lectus in consectetur varius, diam ipsum consectetur mauris, ut mollis neque arcu id diam. Etiam quis mi quam. Praesent rutrum dignissim elit. Nulla quis justo vel arcu consequat laoreet nec vel felis. Etiam vitae imperdiet urna. Nullam ligula lorem, blandit vel aliquet sodales, semper at nibh. Sed ut elit non nibh aliquet dignissim id eget ante. Aenean ullamcorper feugiat feugiat. Aenean lacus neque, dignissim quis posuere a, semper vitae augue. Proin varius diam sed nulla egestas condimentum. In hac habitasse platea dictumst. Nullam ullamcorper mauris dui. Fusce vitae enim purus. Etiam imperdiet venenatis ligula, eu matnisi condimentum ac. Curabitur scelerisque justo felis, eu tempor orci. Vestibulum porttitor tempor pharetra. Mauris et tellus nisi, ut posuere est. Nullam dictum, nunc vel scelerisque condimentum, erat nisi luctus tortor, vel egestas elit purus at tellus. Duis ac augue lorem, nec laoreet purus. In commodo posuere mollis. Duis consequat ipsum vel risus pharetra ac condimentum ligula dignissim. Sed aliquam venenatis dolor, eget consectetur nunc varius in. Duis at tortor sem. Nam vel facilisis mi. Nulla facilisi. Pellentesque felis leo, iaculis sodales tincidunt id, hendrerit id sem. Vestibulum at quam arcu. Phasellus luctus posuere lacinia. Quisque urna nulla, pellentesque in interdum eget, auctor id justo. Aliquam nec nibh sapien, congue lacinia ipsum. Vivamus in urna sit amet diam consectetur varius. Morbi velit mi, euismod at iaculis non, porta vitae justo. Vestibulum dui urna, rhoncus id consequat nec, auctor non tortor. Nam nec nibh arcu. Mauris non purus et magna vestibulum adipiscing. Nulla sodales blandit urna at elementum. Mauris euismod lectus ut risus venenatis vel facilisis erat lacinia. In et diam ligula. Curabitur hendrerit consequat bibendum. Nullam nec neque lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mauris lectus, pellentesque ut gravida quis, viverra non purus. Suspendisse potenti. Mauris id nulla nulla, eu iaculis nunc. Praesent rutrum vestibulum purus, vehicula vulputate odio feugiat vitae. Proin at lacus arcu, eu aliquet urna. Nullam nec malesuada magna. Praesent congue, lectus in consectetur varius, diam ipsum consectetur mauris, ut mollis neque arcu id diam. Etiam quis mi quam. Praesent rutrum dignissim elit. Nulla quis justo vel arcu consequat laoreet nec vel felis. Etiam vitae imperdiet urna. Nullam ligula lorem, blandit vel aliquet sodales, semper at nibh. Sed ut elit non nibh aliquet dignissim id eget ante. Aenean ullamcorper feugiat feugiat. Aenean lacus neque, dignissim quis posuere a, semper vitae augue. Proin varius diam sed nulla egestas condimentum. In hac habitasse platea dictumst.</p> </div> </div> <div id="bottom"></div> </div> </body> </html>

Andrey589, нельзя начинать идентификаторы и классы с цифр, а также нужно указывать, в каких единицах вы задаете высоту. CSS отличается от написания атрибутов прямо в HTML.

Andrey589, в CSS нет свойства «align», поэтому его там прописать и нельзя. Для выравнивания блока с заданной шириной по центру экрана используется именно то, что вы написали — свойство «margin» со значениями auto справа и слева. Это означает, что браузер будет отступать от правого и левого края таким образом, чтобы значения были равны друг другу. Ошибок никаких не будет.

viv, верстка ужасна с точки зрения семантики. Классы и идентификаторы у вас отражают не смысл элемента, а его внешний вид. Как пример: #line, #podline, #hand, #usb, #key, .redcvet. Стоит только изменить на сайте цвета, убрать линию, поменять картинки — и никто уже не поймет, почему вы назвали всё это именно так. Поисковый робот не найдет на вашем сайте даже элементарного блока #content, название которого ясно говорит о том, что внутри него находится основное содержимое страницы. Почитайте, что такое семантическая верстка. Теги <br /> использовать для отступов не нужно, для этого существует свойство «margin» в CSS. То, что вы выводите с помощью кучи ссылок и <br /> — это ненумерованный список, для него есть соответстующие теги. И так далее. Плюс почитайте, почему нужно сохранять все документы в кодировке UTF-8 (NO BOM) и задавать размеры шрифта в относительных единицах. Если вам нужно что-нибудь более подробно, пишите личное сообщение.

viv, разница в отображении между Firefox и IE(7, 8) заключается в том, как выводятся заголовки. Поскольку вы не задали размер шрифта для заголовков, каждый браузер отображает их по умолчанию, и, соответственно, по-разному. Нужно задать размер шрифта для h1. IE6 не понимает русские буквы в домене, поэтому верстать под него вам, в общем-то, и не нужно.

viv, без полного кода страницы (HTML, CSS) сказать, в чем именно у вас проблема, достаточно сложно. Возможно, у вас в разных браузерах стоит разный масштаб страницы.

viv, IE6 удваивает значение mаrgin, совпадающее по направлению со значением float (например, у элемента со свойством «float: left» отступ «margin-left» будет в IE6 в два раза больше указанного в CSS). Чтобы этого избежать, нужно задать элементу «display: inline». Все браузеры, кроме IE6, это свойство проигнорируют, поскольку float делает элемент блочным независимо от свойства display, а IE6 станет отображать margin правильно. Условные комментарии не нужны.

Aurica, задайте #menu_wrapper высоту.

ShumNo, свойство «z-index» применяется только к позиционированным элементам.

Pinguin, HTML: <dl> <dt>Собеседник 1:</dt> <dd>– Реплика 1.</dd> <dt>Собеседник 2:</dt> <dd>– Реплика 2.</dd> <dt>Собеседник 3:</dt> <dd>– Реплика 3.</dd> </dl> CSS: dt { display: inline; line-height: 150%; } dd { margin: -20px 0 0 25%; }

Pinguin, возможно, я не понимаю вашей задачи, потому что не вижу, в чём проблема. Никаких дополнительных элементов, позиционирования и таблиц для того, чтобы построить диалог, не нужно. HTML: <dl> <dt>Собеседник 1:</dt> <dd>– Реплика 1.</dd> <dt>Собеседник 2:</dt> <dd>– Реплика 2.</dd> <dt>Собеседник 3:</dt> <dd>– Реплика 3.</dd> </dl> CSS: dt, dd { display: inline-block; margin-left: 10px; }

senistra, что вы подразумеваете под уменьшением размера страницы? Если уменьшение масштаба просмотра, то во всех браузерах всё масштабируется, ибо именно за этим масштаб и нужен. А если уменьшение размера окна браузера (или разрешения экрана), то ничего со страницей, содержащей элементы, размеры которых указаны в пикселях, произойти не должно.

Pinguin, в HTML4 (и XHTML) есть такой элемент, как список определений (definition list). Предназначен в том числе и для оформления цитат. По умолчанию элементы «dt» и «dd» являются блочными (display: block), поэтому они отображаются в две строки друг под другом. Чтобы они отображались в одну строку, их нужно сделать строковыми (display: inline), или строково-блочными (display: inline-block), в зависимости от конкретной ситуации. <dl> <dt>Собеседник 1:</dt> <dd>– Реплика 1.</dd> <dt>Собеседник 2:</dt> <dd>– Реплика 2.</dd> <dt>Собеседник 3:</dt> <dd>– Реплика 3.</dd> </dl>

HeadInSky, оберните первые два блока ещё одним, у которого пропишите «float: left» и «overflow: hidden».

Mr.Black, я смотрю на ваш сайт и вижу, что центральный блок больше никуда не съезжает. Очевидно, изменения есть у меня в FF. В IE лучше вообще не открывать. Чтобы сайт выглядел нормально везде, его нужно сверстать заново, предварительно изучив HTML и CSS. Быстрых решений тут нет.

Mr.Black, удалите «margin-left: 250px» у блока #content. При необходимости отступ можно подобрать, чтобы было ровно по центру.

Mr.Black, чтобы решить конкретно ту проблему, что на скринах, нужно у блока «#content» убрать «margin-left: 250px; margin-right: 250px;» и добавить «float: left». А чтобы таких проблем больше не возникало, нужно изучить, что такое float.

CEBEP, положение элемента «+» внутри рамки зависит от размера шрифта и того, как каждый конкретный браузер отображает данный шрифт. Добиться во всех браузерах одинакового отображения, равно как и одинакового поведения при увеличении размера шрифта, если «+» является элементом текста, невозможно. В качестве примера попробуйте посмотреть, как следующий код выглядит в разных браузерх и при масштабировании: HTML: <p>Lorem ipsum dolor sit amet<em>+</em></p> CSS: p em { display: inline-block; font: bold 120%/55% Arial; padding: 3px 2px 1px; margin-left: 5px; border: 2px solid #000; }