<MyRusakov.ru />

Создание движка на PHP и MySQL 2.0

Создание движка на PHP и MySQL 2.0

Видеокурс "Создание движка на PHP и MySQL 2.0" научит Вас создавать профессиональные движки для сайтов на PHP и MySQL с использованием ООП и паттерна MVC.

В курсе разобрана вся теория по структуре движка: как всё устроено, какие должны быть объекты, какая у них иерархия и как они взаимодействуют между собой.

В практической части будет создан движок с чистого листа. Будет создано ядро, все адаптеры, все вспомогательные классы, а также классы для работы с объектами базы данных. И чтобы курс был максимально полезным, будет создан движок для сайта MyRusakov.ru.

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

Подписавшись по 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>
Профиль Ответить