Понедельник, 23 Декабря 2024, 14:57

Приветствую Вас Гость

[ Новые сообщения · Игроделы · Правила · Поиск ]
  • Страница 1 из 1
  • 1
Поверх картинки - номер
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
  • Страница 1 из 1
  • 1
Поиск:

Все права сохранены. GcUp.ru © 2008-2024 Рейтинг