aero

зачтено! я же сказал, что картинок много и они все разные, так что бонусный вопрос остается в силе!

Всех с праздником! Есть значит слой такого вида: <div> Text1 <img class="FLL" src="/pic.gif" width="200" height="200"> Text2 Text3 Text4 </div> style.css: IMG.FLL {float:left;} Все отображается правильно, а именно: Название новости, а под ним: слева картинка, справа текст. только, если высота Text2,3,4 выше высоты картинки. Вопрос, как сделать, чтобы слой заканчивался по нижнему краю картинки, а не сразу под текстом? (новостей (слоев) много, и картинки разных размеров, текст бэкграунда и цвет слоя разный) И, бонусный вопрос, к предыдущему. Чтобы еще текст центрировался по вертикали относительно картинки. Но это наверно слишком круто... Заранее спасибо за возможный ответ

ZoNT какая версия? IE6,7 Opera 9, FF 2.0 - все в порядке.

В общем, нашло на меня вчера вдохновение, и я его довел до ума. Результат можно посмотреть здесь: http://fischer.su/ Eсли надо, чтобы при наведении двигалась еще и левая кнопка, то надо заменить #header li на #header a и добавить #header li {display:inline;} Всем удачи!

Уважаемые Господа! Вот два примера из той самой статьи, в первом background ездит в ИЕ7, во втором ездит в ИЕ6. Есть ли возможность одновременной работы в обоих браузерах? На первый взгляд, достаточно проставить span в варианте 10 и все должно заработать, но у меня ничего не выходит, бэкграунд в ИЕ6 по-прежнему не ездит . Заранее спасибо всем ответившим. Пример 10: http://www.id-as.com/arts/ala/slidingdoors2/v1/ex10.html HTML: <div id="header"> <ul> <li id="nav-home"><a href="#">Home</a></li> <li id="nav-news"><a href="#">News</a></li> <li id="nav-products"><a href="#">Products</a></li> <li id="nav-about"><a href="#">About</a></li> <li id="nav-contact"><a href="#">Contact</a></li> </ul> </div> CSS #header { float:left; width:100%; background:#DAE0D2 url("bg.gif") repeat-x bottom; font-size:93%; line-height:normal; } #header ul { margin:0; padding:10px 10px 0; list-style:none; } #header li { float:left; background:url("left_both.gif") no-repeat left top; margin:0; padding:0 0 0 9px; border-bottom:1px solid #765; } #header a { float:left; display:block; width:.1em; background:url("right_both.gif") no-repeat right top; padding:5px 15px 4px 6px; text-decoration:none; font-weight:bold; color:#765; } #header > ul a {width:auto;} /* Commented Backslash Hack hides rule from IE5-Mac */ #header a {float:none;} /* End IE5-Mac hack */ #header a:hover { color:#333; } #home #nav-home, #news #nav-news, #products #nav-products, #about #nav-about, #contact #nav-contact { background-position:0 -150px; border-width:0; } #home #nav-home a, #news #nav-news a, #products #nav-products a, #about #nav-about a, #contact #nav-contact a { background-position:100% -150px; padding-bottom:5px; color:#333; } #header li:hover, #header li:hover a { background-position:0% -150px; color:#333; } #header li:hover a { background-position:100% -150px; } Пример 8а: http://www.id-as.com/arts/ala/slidingdoors2/v1/ex8a.html HTML: <div id="header"> <ul> <li><a href="#"><span>Home</span></a></li> <li id="current"><a href="#"><span>News</span></a></li> <li><a href="#"><span>Products</span></a></li> <li><a href="#"><span>About</span></a></li> <li><a href="#"><span>Contact</span></a></li> </ul> </div> CSS: #header { float:left; width:100%; background:#DAE0D2 url("bg.gif") repeat-x bottom; font-size:93%; line-height:normal; } #header ul { margin:0; padding:10px 10px 0; list-style:none; } #header li { display:inline; margin:0; padding:0; } #header a { float:left; background:url("left_both.gif") no-repeat left top; margin:0; padding:0 0 0 9px; border-bottom:1px solid #765; text-decoration:none; } #header a span { float:left; display:block; background:url("right_both.gif") no-repeat right top; padding:5px 15px 4px 6px; font-weight:bold; color:#765; } /* Commented Backslash Hack hides rule from IE5-Mac */ #header a span {float:none;} /* End IE5-Mac hack */ #header a:hover span { color:#333; } #header #current a { background-position:0 -150px; border-width:0; } #header #current a span { background-position:100% -150px; padding-bottom:5px; color:#333; } #header a:hover { background-position:0% -150px; } #header a:hover span { background-position:100% -150px; }