Форум PHP программистов > CSS перенос картинки наверх заголовка

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: CSS перенос картинки наверх заголовка

segazav

3.01.2017 - 23:59

Добрый вечер!

Есть такой кусок кода:


<td height="80" class="no_img"><?php include("blocks/logotip.php");?></td>
         <td width="100%" align="center" class="text_b">
           <h1 class="text_big">Заголовок</h1></td>

Вместо

<?php include("blocks/logotip.php");?>

из базы вставляется картинка и она находится слева от заголовка, т.к. находится в соседнем столбце таблицы.

Как записать в CSS, чтобы при уменьшении размера экрана до нужного размера, картинка находилась над заголовком, по центру заголовка.

Пока я придумал в CSS только отключение картинки:

@media screen and (max-width: 320px) {.no_img{display:none;}}

sergeiss

4.01.2017 - 00:05

У тебя жуткий коктейль... Табличная верстка, инлайновые стили и нормальные стили. При таком подходе ничего хорошего не получишь.

Сделай это на дивах и используй только нормальные, полноценные стили. Никаких инлайн-стилей! Тут не получится просто прописать что-то в стилях, нужно менять весь подход.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

segazav

4.01.2017 - 13:24

К сожалению перейти к дивам очень проблематично!
Что значит "инлайновые стили"?

Так вроде работает:

<td height="80" class="no_img"><?php include("../blocks/logotip.php");?></td>
         <td width="100%" align="center" class="text_b"><div hidden align="center" class="yes_img"><?php include("../blocks/logotip.php");?></div>
           <h1 align="center" class="text_big">Заголовок</h1>

CSS стили:

@media screen and (max-width: 767px) {.no_block{display:none;}}
@media screen and (max-width: 609px) {.no_img{display:none;}.yes_img{display:block;}}

Но правильный ли такой подход?

sergeiss

4.01.2017 - 14:16

Цитата (segazav @ 4.01.2017 - 13:24)

Что значит "инлайновые стили"?

Это вот эти вот (выделил жирно красным):

Цитата

<td height="80" class="no_img"><?php include("../blocks/logotip.php");?></td>
<td width="100%" align="center" class="text_b"><div hidden align="center" class="yes_img"><?php include("../blocks/logotip.php");?></div>
<h1 align="center" class="text_big">Заголовок</h1>

Эти стили надо внести в классы.
Проблема инлайновых стилей в том, что они имеют наивысший приоритет. И если ты захочешь что-то сменить, то придется править это во всем коде. А если прописано правильно, то изменяешь только в одном-двух местах в файле стилей.

У тебя изначально прописано, что определенные объекты находятся в ячейках таблицы. Ячейки не могут друг над другом встать. А с дивами ты можешь как угодно обращаться.

В данном случае можно прописать одну и ту же картинку в 2-х местах и за счет стилей их включать-выключать при разных размерах. Только правильно пропиши эти стили. Визуально это будет выглядеть так, как ты хочешь. Но это - изврат! И я тебе такого не советовал

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

Быстрый ответ:

Здесь расположена полная версия этой страницы.