<MyRusakov.ru />

Вёрстка сайта с нуля 2.0

Вёрстка сайта с нуля 2.0

Система "Вёрстка сайта с нуля 2.0" содержит в себе не только сами видеоуроки по адаптивной вёрстке сайтов с примерами, но и вспомогательную систему для более эффективного обучения.

Сам курс обучит Вас абсолютно с нуля HTML5 и CSS3, а также научит верстать сайты с помощью реальных примеров вёрстки. Обучение идёт от простого к сложному. В последнем разделе курса идёт обучение адаптивной вёрстке сайтов: Вы узнаете всю необходимую теорию, а также увидите пример реальной адаптивной вёрстки сайта.

Как итог, курс совмещает в себе всё, что нужно по HTML, CSS и адаптивной вёрстке сайтов, с наглядными примерами, с обучением от простого к сложному и без необходимости иметь начальных знаний, а благодаря вспомогательной системе психологически курс проходится очень легко, а на выходе Вы сможете сделать адаптивную вёрстку любого сайта любой сложности.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Форум сайта MyRusakov.ru

Позиционирование в ячейке таблицы
10.10.2013 00:26:42 Позиционирование в ячейке таблицы Сообщение #1
Дмитрий184

Дмитрий184

Мастер

Мастер

Дата регистрации:
29.06.2012 08:48:56

Сообщений: 225

Здравствуйте, Михаил!
Я сделал простую таблицу - одна строка в ней две ячейки - и решил в правой ячейке таблицы спозиционировать картинку (чтобы картинка всегда была влевом нижнем углу ячейки, при любой высоте ячейки). Задал ячейке таблицы position: relative, a картинке position: absolute. И возникла проблема, в браузере Firefox ячейка таблицы не понимает свойство position: relative Может подскажите, как сделать, чтобы ячейка таблицы понимала position: relative ? Ведь ячейки таблицы других браузеров это понимают.
Профиль Ответить
10.10.2013 12:09:23 Позиционирование в ячейке таблицы Сообщение #2
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Левый нижний угол:
td {
text-align: left;
vertical-align: bottom;
}
Профиль Ответить
10.10.2013 15:33:55 Позиционирование в ячейке таблицы Сообщение #3
Дмитрий184

Дмитрий184

Мастер

Мастер

Дата регистрации:
29.06.2012 08:48:56

Сообщений: 225

Спасибо за предложение, но в моем случае это не подходит. Т.к. применяя text-align: left; vertical-align: bottom; мы смещаем все содержимое ячейки.
А у меня идет так - вверху ячейки идет текст (в дальнейшем текст может добавляться - это увеличит высоту ячейки и еще текст может быть выровнен по правому краю). А картинка при любой высоте ячейки должна быть внизу, поэтому только этой картинке задается абсолютное позиционирование. Есть вариант, если создать две ячейки (одну для текста, вторую для картинки). Но может можно как-то ограничится одной ячейкой? Где-то читал, что можно применить скрипт, но практического примера работы скрипта не видел.
Профиль Ответить
10.10.2013 21:06:44 Позиционирование в ячейке таблицы Сообщение #4
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Тогда Ваш способ вполне правильный, но надо ещё указать bottom: 0;, помимо position: absolute; у картинки.
Профиль Ответить
11.10.2013 06:03:57 Позиционирование в ячейке таблицы Сообщение #5
Дмитрий184

Дмитрий184

Мастер

Мастер

Дата регистрации:
29.06.2012 08:48:56

Сообщений: 225

Для ячейки таблицы я задаю относительное позиционирование
td {
position: relative;
top: 0;
left: 0;
}

для картинки в ячейке таблицы - абсолютное позиционирование

img {
position: absolute;
right: 0;
bottom: 100px;
}

Но в браузере Firefox картинка выходит за пределы ячейки (хорошо видно, если уменьшить масштаб страницы и таблица имеет фиксированную ширину) В браузере Хром картинка позиционируется нормально.
Профиль Ответить
11.10.2013 12:04:17 Позиционирование в ячейке таблицы Сообщение #6
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

А если увеличивать, всё в порядке? Если так, то сделайте оптимально для ширины экрана в 1024px, а при увеличении всё должно сохраняться.
Профиль Ответить
11.10.2013 21:38:18 Позиционирование в ячейке таблицы Сообщение #7
Дмитрий184

Дмитрий184

Мастер

Мастер

Дата регистрации:
29.06.2012 08:48:56

Сообщений: 225

Картинка выходит за пределы ячейки в любом масштабе (и при уменьшении и при увеличении, и в состоянии покоя). Я пробовал применить разные варианты , но для браузера firefox ничего не сработало (в Хроме все работает как надо). Для Firefox (а значит для кроссбраузерности, вижу только один выход - это создать две ячейки - одна для текста, вторая для картинки.

Вот полный код примера, как у меня не работает позиционирование в ячейке таблицы - причина в том, что ячейка таблицы в Firefox не понимает относительное позиционирование.

<style type="text/css">
* {
padding: 0;
margin: 0;
text-align: left;
vertical-align: top;
}

#wrapper {
margin: 0 auto;
width: 900px;
border: 5px solid #008;
}

table {
width: 100%;
}

td {
padding: 10px 10px 60px;
outline: 1px solid #f00;
}

#left {
width: 60%;
}

#right {
width: 40%;
position: relative;
left: 0;
top: 0;
}

img {
position: absolute;
right: 0;
bottom: 0;
width: 48px;
height: 48px;
}
</style>
</head>

<body>
<div id="wrapper">
<table>
<tr>
<td id="left">
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.
</td>
<td id="right">
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
<img src="images/photo.png" alt="photo">
</td>
</tr>
</table>
</div>
</body>
Профиль Ответить