Билась над этой проблемой всю ночь, но работать корректно оно не хочет. Есть 3 дива: 1 с нижней большой картинкой, второй с прозрачной картинкой-закладкой поверх 1 и 3 див с текстом и фоном прозрачным, который тоже поверх большой картинки. Они нормально друг на друга накладываются, НО при этом под большой картинкой появляется отступ равный по высоте двум нижним дивам (хотя сами дивы висят на месте). Отсуп есть во всех браузерах, включая IE6. Вот код: HTML: ... <td valign='top'> <div id='actual5'> <img src='img/actual5.png' width='171' height='99' border='0' /> </div> <div id='big_main_foto' width='100%' height='315'> <img src='img/news/img.png>' width='730' height='315' style='border: 1px solid #606060;' /> </div> <div id='text_in_grey_scale' width='100%' > text </div> </td> ... [css]#actual5, #big_main_foto, #text_in_grey_scale { position: relative; } #big_main_foto { z-index: 1; top: -101px; } #actual5 { z-index: 2; left: 0px;} #text_in_grey_scale { z-index: 3; bottom: 60px; left: 0px; height: 60px; background: url("/img/actual_greyscale.png"); } [/css] Причем большая картинка (id='big_main_foto') имеет серую рамочку, которая идет вокруг этого отступа. Есть еще одна неприятная мелочь. В ИЕ6 #actual5 не хочет позиционироваться к левому краю, а упорно стоит ровно посередине. Кто может помочь разобраться?! Буду очень благодарна.
Tigrish сделали бы четко - минимальный код для копипаста, чтоб можно было посмотреть, а так как гадать? Может там элементарно тегу A или другим надо margin & padding сделать 0? вообще интересно, дивы брать в A, по-моему это не везде корректно
sylex, про <a> поняла и убрала (он только на картинку распространяется, а я пока мучила дивы уже забыла про него). Картинку скриншота можно глянуть здесь. Оранжевая закладка это #actual5. (В ИЕ6 она находиться точно на лбу у девушки :? )Текст можно надо поднять на картинки, но для этого надо увеличить значение его позиции bottom: до 150 (примерно), а это высота всего отступа, которого не должно быть. Чем этот код не подходит для копи-паста? Картинки я ж не могу выслать...
верстка на дивах - это жесть, учитывая баги IE и кроссбраузерность вцелом. почитай http://softwaremaniacs.org/blog/category/web/primer/ Я решаю подобные вопросы так - каждый шаг проверяю в браузере.. разных.. в конце концов, иногда возникают моменты, когда решения нет, т.к. браузер понимает неверно его, в таком случае надо менять ccs для браузера, где существует проблема... отдавать другой стиль для, IE, например
igortik, спасибо за совет. Попробую поэкспериментировать. Самое жуткое, что ошибка видна во ВСЕХ браузерах.
для позиционирования там где надо контейнера я задаю position:absolute и правлю его координаты margin-left:-143px и т.д. ну и контейнер надо создавать так, чтобы понимать где он берет свое начало и откуда начнется отчет пикселов
Вот это код под копи-паст. Там очень хорошо виден отступ внизу. Никак не могу понять откуда он берется. HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> </title> <style type="text/css"> body { color: yellow;} img {margin: 0, padding: 0;} #actual5, #big_main_foto, #text_in_grey_scale { position: relative; /* Относительное позиционирование */ } #big_main_foto { top: -100px; } #big_main_foto { z-index: 1; } #actual5 { z-index: 2; left: 0px; top: 0;} #text_in_grey_scale { z-index: 3; color: #FFFFFF; top: -180px; left: 0px; height: 60px; background: url("http://www.oetv.lv/img/actual_greyscale.png"); padding: 15px 0 0 20px; text-align: left; font-size: 20px; font-weight: bold; } </style> </head> <body bgcolor='#000000' > <table width="730" border="1" cellspacing="0" align='center' cellpadding="0" > <tr><td valign='top' bgcolor='white'> <img id='actual5' src='http://www.oetv.lv/img/actual5.png' width='171' height='99' border='0' /> <a href='' style=' color: #FFFFFF;' id='big_main_foto'> <img src='http://www.oetv.lv/img/news/f_17524143.gif' width='730' height='315' style='border: 1px solid #606060;' /> </a> <div id='text_in_grey_scale' width='100%' > tekst </div> </td></tr> </table> </body> </html>
Насколько я помню свойство position:relative не убирает элемент из основного потока (как, например position:absolute). Таким образом последующие элементы выводятся так, как будто дивы остались на месте. Можно заменить css: [css] #actual5, #big_main_foto, #text_in_grey_scale { position: absolute;} #big_main_foto { top: 0px; left: 0px; z-index: 1;} #actual5 { z-index: 2; left: 0px; top: 0;} #text_in_grey_scale { z-index: 3; color: #FFFFFF; top: 255px; left: 0px; height: 60px; background: url("http://www.oetv.lv/img/actual_greyscale.png"); padding: 15px 0 0 20px; text-align: left; font-size: 20px; font-weight: bold; } [/css]
В общем решила вопрос следующим образом. Самый большой элемент (большую фотку) сделала-таки фоном от внешнего дива. Остальное разместила relative в этом блоке. С помощью js меняю картинку и текст. Ура! Все получилось.
Tigrish ну вот теперь все ясно да, верно подметил Volt(220), те блоки, которые position: relative - "не уходят" как бы. top: -180px; все портит вам, надо верстать по-другому
png в ie - жесть.. блин, сколько еще я напарываться буду на проблемы ie начиная с 6 версии... сегодня фиксил проблему со стрелками, по нажатию на которых в диве аяксом грузился контент, при этом стрелки (оба img) исчезали из потока при том, что они ни коим образом не находились в диве, где происходила инициация подгрузки контента. Пришлось разделять эти чудеса таблицами
V1T, почему? Чем они вредны? Их использование объясняется высокими требованиями к качеству дизайнерсой картинки. igortik, ровно столько пока все пользователи перейдут на нормальные версию. Но дело в том, что большинство компаний запрещает своим сотрудникам обновлять браузеры. Может из-за лицензии, может в целях безопасности. Но валидность к старым браузерам еще очень частое условия создания сайта.