Pinguin

Чудеса, но на этот раз глючит Опера 9.26, а в IE 6 всё нормально. Вот эта страница отображается нормально, как просили: http://www.trinity-bridge.221b.ru/index.htm Обратите внимание, что поле контента отстоит от нижней рамки на 10 px (bottom: 10px;), независимо от разрешения экрана. Теперь делаем невинную вещь: вставляем в контент ещё одну картинку с обтеканием. И всё - поле контента уезжает вниз за край экрана: http://www.trinity-bridge.221b.ru/index2.htm В IE 6 при этом всё нормально, но это, видимо, оттого, что для IE там прописаны костыли, по совету Searcher: *height: expression(parentNode.offsetHeight - 165 + 'px'); *width: expression(parentNode.offsetWidth - 344 + 'px'); Кто-нибудь знает, отчего это происходит? Лично у меня подозрение, что собака зарыта во float, т.к. если его убрать, всё снова отображается верно.

Ура! Сделал. http://www.trinity-bridge.221b.ru/ Там, конечно, ещё есть над чем поработать, но по сабжу вроде разобрались. Не-не, именно параметр "HTML" в CSS - у меня его не было. Когда поставил - картинка в IE сразу появилась. Ширина хоть и фиксированная, но задать expression для неё пришлось - иначе разъезжалось. Цифру для ширины высчитал аналитически, а вот для высоты высчитать так и не удалось - поставил от фонаря, так и не поняв, что же она означает. Потому я вас и спрашивал, откуда эти цифры берутся. Большое вам спасибо за помощь! Вот только гонорара и мне не светит - я макет бесплатно взялся делать, из доброго отношения.

"Только"? Да это "только" - единственный цимус, который есть в вашем примере. *height: expression(parentNode.offsetHeight - 100 + 'px'); *width: expression(parentNode.offsetWidth - 202 + 'px'); Ну и ещё html в CSS. С такими костылями прокрутка в IE появилась, только выглядит всё, конечно, неправильно. Будьте джентльменом до конца, объясните, плиз, что эти параметры означают - 100 и 202? У меня-то ширина макета не в %, а 1000px. А ширина контента 660 px. (Я просто подозреваю, что мне эти знания понадобятся только на один раз) UPD. Вот так выглядит ваше решение в моём варианте: http://www.trinity-bridge.221b.ru/index5.htm

Я как раз сегодня об этом писал. Вертикальная полоса прокрутки должна появляться только у слоя с контентом. Шапка и меню должны висеть сверху неподвижно.

Не вижу я на форуме ничего по теме, всё вокруг да около. Наверно, стоит уточнить кое-что: 1. Body не должен иметь полос прокрутки никогда. 2. Весь макет имеет фиксированные размеры, кроме поля контента, которое должно растягиваться до низа экрана, а если контент не вмещается - иметь полосу прокрутки.

Вполне возможно. Вот только бы знать, что искать... Если не трудно, ткните носом в ссылку.

Помогите, пожалуйста, разобраться. Сделал макет: http://www.trinity-bridge.221b.ru/index.htm Заточен был под 1024х768, вроде всё ничего. Посмотрел на большом разрешении - захотелось растянуть дизайн по вертикали, чтобы внизу не было пустого места. Ширина макета 1000 px, высота 99%. Проштудировал вот это: http://htmlbook.ru/content/?id=95 Что-то не работают у меня эти рецепты. Один рецепт воплощён здесь: http://www.trinity-bridge.221b.ru/index2.htm В Опере выглядит нормально, хотя в Dreamweaver стало не видно ничего. А в IE6 показывает только фон и ни одного объекта. Можно ли сделать универсальный код, или без хаков не обойтись? body { background-color: #0B2F6F; background-image: url(texture/BodyFill.png); width: auto; height: auto; font-family: "Times New Roman", Times, serif; font-size: 14px; color: #000000; text-align: center; overflow: visible; left: 0px; top: 0px; margin: 0px; padding: 0px; } p { margin: 0mm; } h1 { font-size: 18pt; background-position: left center; text-indent: 15pt; background-image: url(texture/h1.gif); background-repeat: no-repeat; color: #333366; } .imgRight { float: right; border: 3px ridge #FFFFFF; margin-left: 15px; margin-bottom: 15px; cursor: default; } #main { width:1000px; z-index:0; overflow: hidden; position: absolute; border-bottom-width: 2px; border-bottom-style: ridge; border-bottom-color: #003366; border-right-width: 2px; border-left-width: 2px; border-right-style: ridge; border-left-style: ridge; border-right-color: #003366; border-left-color: #003366; left: 50%; visibility: visible; height: 99%; margin-left: -502px; background-image: url(texture/top.png); background-repeat: repeat-x; background-position: -6px 0px; } #BandLeft { position:absolute; left:26px; top:0px; width:210px; height:100%; z-index:3; visibility: visible; overflow: hidden; } #BandBottom { left: 0px; top: 297px; background-image: url(texture/BandBott.png); background-repeat: no-repeat; position: absolute; height: 342px; width: 210px; z-index: 2; visibility: visible; } #Address { color: #FFFFFF; position: absolute; top: 285px; left: 0px; text-align: center; visibility: visible; width: 100%; cursor: text; z-index: 3; } #menu { position: absolute; left: 333px; top: 0px; z-index: 5; margin: 0px; padding: 0px; visibility: visible; } #menu dt { float: left; width: 113px; display: block; left: 0px; top: 76px; position: relative; font-weight: bold; text-align: center; } #menu a { text-decoration: none; display: block; background-position: 0px -25px; color: #FFFFFF; } #menu a:hover, #menucurr { color: #99CCFF; font-weight: bold; background-color: #333366; display: block; } #Title { background-image: url(texture/title.png); background-repeat: no-repeat; height: 24px; width: 351px; position: absolute; left: 442px; top: 0px; visibility: visible; z-index: 6; } #MainCont { text-indent: 10pt; vertical-align: top; text-align: justify; width: 660px; border: 4px inset #6699CC; background-color: #CCCCCC; background-image: url(texture/ContFill.png); padding-top: 20px; padding-bottom: 20px; padding-left: 30px; padding-right: 30px; overflow: auto; position: absolute; visibility: visible; z-index: 4; right: 10px; cursor: text; top: 105px; bottom: 10px; }