Tigrish
-
Posts
4 -
Joined
-
Last visited
Tigrish's Achievements
Explorer (1/14)
0
Reputation
-
Наложение div-ов с прозрачными картинка друг на друга
Tigrish replied to Tigrish's question in HTML Coding
Вот это код под копи-паст. Там очень хорошо виден отступ внизу. Никак не могу понять откуда он берется. <!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> -
Билась над этой проблемой всю ночь, но работать корректно оно не хочет. Есть 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"); } Причем большая картинка (id='big_main_foto') имеет серую рамочку, которая идет вокруг этого отступа. Есть еще одна неприятная мелочь. В ИЕ6 #actual5 не хочет позиционироваться к левому краю, а упорно стоит ровно посередине. Картинку скриншота можно глянуть здесь. Оранжевая закладка это #actual5. (В ИЕ6 она находиться точно на лбу у девушки Confused )Текст можно надо поднять на картинки, но для этого надо увеличить значение его позиции bottom: до 150 (примерно), а это высота всего отступа, которого не должно быть. Кто может помочь разобраться?! Буду очень благодарна.
-
~Kitty~, спасибо. Это помогло. Решение оказалось таким простым, а я убила на этот баг 2дня. А контент у меня и так был в дивы зашит, просто убрала все для упрощения кода.
-
Помогите, пожалуйста, устранить баг. В IE над картинками menu_top и content_top появляеться полоса фона. Никак не могу прижать картинки к верхнему краю. В Firefox и Opera все работает отлично. Вот код: <!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"> <head> </head> <body> <table width="720" border="0" cellpadding="0" cellspacing="0"> <col width="195" valign="top"> <col width="525" valign="top"> <tr> <td style="background: #aff7fa" valign="top"> <img src="images/menu_top.jpg" style="position: relative; top: 0px; border: 0px;" width="195" height="13" alt=""> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </td> <td style="background: #ffffff" valign="top"> <img src="images/content_top.jpg" style="margin: 0px; border: 0px;" width="525" height="13" alt=""> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </td> </tr> <tr> <td> <img src="images/menu_bot.jpg" border="0" width="195" height="5" alt=""> </td> <td> <img src="images/content_bot.jpg" border="0" width="525" height="5" alt=""> </td> </tr> </table> </body> </html> Как можно решить эту проблему?