1 Востаннє редагувалося FakiNyan (03.11.2014 22:14:45)

Тема: Як приклеєти <img>, котрий в <a> до верху <td>?

Власне, назва теми.
Маю такий кід

<td>
<a href="?view=product1"><img src="/shop/images/1.png" alt="image1"/></a>
<span class="title">Notebook 1</span>
<span class="price">100</span>
</td><td>

І от тре, аби картинка впритул приклеїлась до вершечку тега td.
А то зара виглядає ось так

Прихований текст

http://не-дійсний-домен/cC0De/32b6878398.png

Ось CSS

table {
    border-collapse: separate;
    border-spacing: 32px 15px;
}

td {
 height: 280px;
 width: 200px;
 background: darkgoldenrod;  
 vertical-align: text-top;
}

td img {
    width: 100%;
}

td .title,td .price {
    padding: 5px;
    font-size: 18px;
    display: block;
    text-align: center;
}

td .price {
    text-align: left;
}

2

Re: Як приклеєти <img>, котрий в <a> до верху <td>?

CSS сам писав?

3

Re: Як приклеєти <img>, котрий в <a> до верху <td>?

quez написав:

CSS сам писав?

угу, а що, все дуже погано? xD

4

Re: Як приклеєти <img>, котрий в <a> до верху <td>?

можливо, треба поставити мінусовий margin зверху для картинки

5

Re: Як приклеєти <img>, котрий в <a> до верху <td>?

Cyan написав:

можливо, треба поставити мінусовий margin зверху для картинки

може бути

6

Re: Як приклеєти <img>, котрий в <a> до верху <td>?

нєє, ніфіга

7

Re: Як приклеєти <img>, котрий в <a> до верху <td>?

Можна подумати в сторону position: relative;, тоді властивостями top, left, bottom, right можна задавати таку позицію, як вам треба.

8

Re: Як приклеєти <img>, котрий в <a> до верху <td>?

Ярослав написав:

Можна подумати в сторону position: relative;, тоді властивостями top, left, bottom, right можна задавати таку позицію, як вам треба.

та я пробував, там для кожної картинки тре по своєму буде рухати його

9

Re: Як приклеєти <img>, котрий в <a> до верху <td>?

table {
    border-collapse: collapse;
}

нє?

10

Re: Як приклеєти <img>, котрий в <a> до верху <td>?

koala написав:
table {
    border-collapse: collapse;
}

нє?

нє, зовсім нє

11

Re: Як приклеєти <img>, котрий в <a> до верху <td>?

то у вас одну картинку таки вийшло помістити зверху чи ні?
і картинки часом не у форматі png?

12

Re: Як приклеєти <img>, котрий в <a> до верху <td>?

Cyan написав:

то у вас одну картинку таки вийшло помістити зверху чи ні?
і картинки часом не у форматі png?

в png, але там нема ніякої прозорості, якщо ви про це. Там просто перша картинка норм приклеїлась, тому що у неї розміри інші

13

Re: Як приклеєти <img>, котрий в <a> до верху <td>?

FakiNyan написав:
Cyan написав:

то у вас одну картинку таки вийшло помістити зверху чи ні?
і картинки часом не у форматі png?

в png, але там нема ніякої прозорості, якщо ви про це. Там просто перша картинка норм приклеїлась, тому що у неї розміри інші

екперименти показали, що картинка приклеюється акурат зверху, незалежно від її розмірів, тому не треба на них спихувати
варіант, запропонований Ярославом, здається найбільш оптимальним в даному разі

14

Re: Як приклеєти <img>, котрий в <a> до верху <td>?

А може просто відмовитися від vertical-align: text-top; і поставити фіксовану висоту малюнка?

15

Re: Як приклеєти <img>, котрий в <a> до верху <td>?

Я ж вам кажу, тоді для кожної картинки тре буде своє значення top приписувати, а мені тре, аби вони всі конвеєром клеїлись.
От вам пруф, якщо не вірите, картинки мають різні розміри.

Прихований текст

http://не-дійсний-домен/cCSbT/f11ae010f6.png

16

Re: Як приклеєти <img>, котрий в <a> до верху <td>?

koala написав:

А може просто відмовитися від vertical-align: text-top; і поставити фіксовану висоту малюнка?

Так картинка має ж свої ті, пропорції. І якщо її висота 100, а ми поставимо 150, то вона збільшиться не тільки в висоту, а й в ширину. І тоді весь блок буде мати більшу ширину, а якщо зробити блоку
overflow: hidden; (ну чи як там),
то шматок картинки зникне і буде не гарно.

17

Re: Як приклеєти <img>, котрий в <a> до верху <td>?

a {
    display: inline-block;
    vertical-align: top;
}
Подякували: FakiNyan1

18

Re: Як приклеєти <img>, котрий в <a> до верху <td>?

FakiNyan написав:
koala написав:

А може просто відмовитися від vertical-align: text-top; і поставити фіксовану висоту малюнка?

Так картинка має ж свої ті, пропорції. І якщо її висота 100, а ми поставимо 150, то вона збільшиться не тільки в висоту, а й в ширину. І тоді весь блок буде мати більшу ширину, а якщо зробити блоку
overflow: hidden; (ну чи як там),
то шматок картинки зникне і буде не гарно.

Поставте її в div і дайте тому div-у фіксовану висоту.

Подякували: FakiNyan1

19

Re: Як приклеєти <img>, котрий в <a> до верху <td>?

koala написав:
FakiNyan написав:
koala написав:

А може просто відмовитися від vertical-align: text-top; і поставити фіксовану висоту малюнка?

Так картинка має ж свої ті, пропорції. І якщо її висота 100, а ми поставимо 150, то вона збільшиться не тільки в висоту, а й в ширину. І тоді весь блок буде мати більшу ширину, а якщо зробити блоку
overflow: hidden; (ну чи як там),
то шматок картинки зникне і буде не гарно.

Поставте її в div і дайте тому div-у фіксовану висоту.

та мені вже штука пана Key'a допомогла xd