| |
|
|
| | Здравствуйте!
Вот такая ерунда приключилась. Создаю обычную таблицу, делаю в ней все по центру, то есть все картинки. Затем подключаю стили, в которых прописана фишка для отображения превью картинки. То есть при наведении мышкой на картинку, поверх неё сразу показывается картинка чуть большего размера. Но беда в том, что после подключения стилей вся центровка пропадает, то есть таблица разъезжается, ячейки увеличиваются и картинки ровняются по левому краю. Ничего не могу с этим поделать, ломается весь дизайн. Подскажите что делать? В чем причина? Вот строчки которые пишем в документе к каждой картинке:
<ul class="hoverbox">
<li>
<a href="download.php?photo=<?echo $ph['id_store'];?>" target="_blank">
<img src="../Store/Photos/<?echo small.$ph['photo'];?>" border=0 width="150">
<img class="preview" src="../Store/Photos/<?echo preview.$ph['photo'];?>" border=0>
</a>
</li>
</ul>
|
а вот то что прописано в файле со стилями:
.hoverbox
{
cursor: hand;
list-style: none;
}
.hoverbox a
{
cursor: hand;
}
.hoverbox a .preview
{
display: none;
}
.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1000;
}
.hoverbox img
{
background: #fff;
border-color: #a6dcf5;
border-style: solid;
border-width: 0px;
color: inherit;
padding: 0px;
vertical-align: top;
}
.hoverbox li
{
background: #eaf8fe;
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 0px;
position: relative;
}
.hoverbox .preview
{
border-color: #a6dcf5;
}
|
| |
| |
|
|
| |
|
|
| |
для: Mefisto84
(01.03.2009 в 11:09)
| | | А чего вы удивляетесь/расстраиваетесь?
Сначала вы сделали клетку, достаточную, чтобы туда с трудом влезла мышь.
Затем мышь заменили львом. Клетка ваша волшебная - не сломалась вовсе, а увеличилась в размерах, чтобы лев в неё поместился. А вы почему-то недовольны :-)
Иными словами - вы сформировали таблицу, исходя из размеров видимого содержимого её ячеек, т.е. исходя из размеров маленьких картинок. Затем в эти же ячейки хотите "впихнуть" б_О_льшее по размерам содержимое. Разумеется, размеры таблицы поплывут.
Надо изначально сделать клетку таких размеров, чтобы в неё помещались и мышь, и лев. | |
| |
|
|
| |
|
|
| |
для: PAT
(01.03.2009 в 13:39)
| | | Хорошо, с этим понятно, спасибо.
Тогда у меня возникает еще один вопрос. При размещении фоток таким способом, получается что каждая следующая фотка "старше" предыдущей, то есть она может налезть на другую фотку, имею ввиду при наведении мыши. Вот как от этого можно избавиться? Грубо говоря что бы у всех маленьких изображений был z-index:0, у а всех превью 1. спасибо. | |
| |
|
|
| |
|
|
| |
для: Mefisto84
(03.03.2009 в 19:05)
| | | >что бы у всех маленьких изображений был z-index:0, у а всех превью 1
И чего именно вам не хватает, чтобы написанное здесь реализовать?
Смелости?
Не бойтесь, браузер не сломается.
Храбро пишите для картинок класса "превью" z-index: 1; а для маленьких z-index: 0; | |
| |
|
|
| |
|
|
| |
для: PAT
(04.03.2009 в 05:49)
| | | Не хватает? Наверное знаний не хватает, поэтому и обратился на форум за помощью, потому как уже неделю не могу ничего сделать. А на счет того что бы всунуть z-index в нужный класс...так куда я его только не пихал. Ничего не получается. | |
| |
|
|
| |
|
|
| |
для: Mefisto84
(04.03.2009 в 16:23)
| | | А на div-ах писать не пробовал? Я только пару дней назад разобрался, но к табличной вёрстке не вернусь. Если что, могу немного поподробнее написать... Жаль сканера нет, я бы из книжки пару страничек отправил. Отличное описание :) Можешь в интернете поискать: Мухамметов Г.В. "HTML и CSS самоучитель". Могу показать, что из этого получилось... :) | |
| |
|
|
