|
Поверх картинки - номер
|
|
| andarky | Дата: Четверг, 27 Ноября 2014, 11:58 | Сообщение # 1 |
старожил
Сейчас нет на сайте
| у меня готова табличка с изображениями
но теперь надо номера поставить на каждой внизу справа
КАК? это сделать без лишней писанины
Гуглил тему- попадаю на CSS3 примеры.
Там всё сложно - т.е. надо много изменений в код вносить
а у меня вот что:
Код <td><div align="center"> <table width="900" border="0"> <tr> <th scope="col"><div align="center"><img src="content/bl_su_1_02.png" alt="sushi" width="288" height="239"></div></th> <th scope="col"><div align="center"><img src="content/bl_su_1_04.png" alt="sushi" width="288" height="239"></div></th> <th scope="col"><div align="center"><img src="content/bl_su_1_05.png" alt="sushi" width="288" height="239"></div></th> </tr> <tr> <th scope="col"><div align="center"><img src="content/bl_su_1_06.png" alt="sushi" width="288" height="239"></div></th> <th scope="col"><div align="center"><img src="content/bl_su_1_07.png" alt="sushi" width="288" height="239"></div></th> <th scope="col"><div align="center"><img src="content/bl_su_1_08.png" alt="sushi" width="288" height="239"></div></th> </tr>
у меня только вот что я смог придумать идея:
Код <td background="**_image.png">
и всем ячейкам прописать размеры...
но может быть есть идеи лучше?
Моя страничка по дизайну
GameDev//Design//3D
Ютубчик
|
|
|
| |
| iwsby | Дата: Четверг, 27 Ноября 2014, 13:18 | Сообщение # 2 |
был не раз
Сейчас нет на сайте
| табличная и дивная верстка вместе, чудеса))
переведи все в блочную верстку и будет тебе легче сделать при помощи css тегов position, top,left, right и bottom
|
|
|
| |
| lvovand | Дата: Четверг, 27 Ноября 2014, 13:25 | Сообщение # 3 |
|
старожил
Сейчас нет на сайте
| можно задать тегам <th> ширину и высоту картинок, картинки сделать фонами, ну и останется просто текст выровнять внизу и справа и написать
Разработка и продвижение сайтов. Дизайн
|
|
|
| |
| andarky | Дата: Четверг, 27 Ноября 2014, 14:53 | Сообщение # 4 |
|
старожил
Сейчас нет на сайте
| lvovand,
ну я то так и думал...
Моя страничка по дизайну
GameDev//Design//3D
Ютубчик
|
|
|
| |
| lvovand | Дата: Четверг, 27 Ноября 2014, 16:51 | Сообщение # 5 |
|
старожил
Сейчас нет на сайте
| Цитата andarky (  ) ну я то так и думал...
ага, это я не дочитал вначале, ну а в чем тут особо сложности. Хотя идея с позиционированием блоков может и лучше, но если уже все таблицей сверстано, а позиционирование не задавалось, то фоном сделать картинки проще
Разработка и продвижение сайтов. Дизайн
|
|
|
| |
| TheModo | Дата: Среда, 28 Января 2015, 12:53 | Сообщение # 6 |
|
был не раз
Сейчас нет на сайте
| как вариант с таблицей:
Код <td class="img"> <img src="simple.jpg" alt="Пример подписи/номера" /> <span>#1</span> </td>
и CSS:
Код .img {
position : relative;
width : 100%; /* для IE 6 */
}
span {
position: absolute;
bottom: 100px;
right: 0;
}
Сообщение отредактировал TheModo - Среда, 28 Января 2015, 12:53 |
|
|
| |
| andarky | Дата: Среда, 04 Февраля 2015, 18:57 | Сообщение # 7 |
|
старожил
Сейчас нет на сайте
| как мне корректировать стиль?
т.е. он у меня прописан перед ХЕАДом:
<style>
.example2 {
display:inline-block;
position:relative;
Код
}
.example2 span {
display:inline-block;
position:absolute;
top:160px;
left:140px;
/* Оформление текста */
color:#FFF;
font-family:Impact;
font-size:30px;
/* Фон */
background-color:rgba(0,0,0,.4);
padding:10px 30px;
font-weight: normal;
}
</style>
но бывают исключительный ситуации, когда надо номер по правому краю
или чуть ниже, или выше...
ну не писать же мне для каждой мелочи стиль?!
вот пример элемента:
Код <div class="example2"> <img src="/content/menu/cennik.png" class="nomerok"> <span>1999</span> </div>
я хочу наконец-то портфолио себе сделать по-нормальному
Моя страничка по дизайну
GameDev//Design//3D
Ютубчик
Сообщение отредактировал andarky - Среда, 04 Февраля 2015, 18:57 |
|
|
| |
