Ответить на тему  [ Сообщений: 15 ] 
На страницу 1, 2  След.
проблемы с адаптивной версткой 
Автор Сообщение
Новичок

Зарегистрирован: 23 ноя 2014, 20:03
Сообщений: 50
Пол: женский
Репутация: 0
Добавить пункт репутацииВычесть пункт репутации
Сообщение проблемы с адаптивной версткой
Всем добрый день!

Есть трехколоночный сайт. Давно назревала роблема адаптивной верстки. Приступила... :( Ничего не выходит!

1. В html прописала так :
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="mystyle3.css" type="text/css" rel="stylesheet"/>
<link href="mystyle3.css" rel="stylesheet" media="only screen and (max-width: 768px)"/>

2. В конце css так :
#footer a:hover {
color: #FF69B4; /* Цвет ссылки при наведении на нее курсора мыши */}


@media screen and (max-width:768px) { body{

width: 768px; height: 100%;
}
}
.wrapper {

max-width: 768px
}
.content {
float:none;
width:60%
}
.left, .right{
background: green;width:40%;float:left;
}
.content{
background: red
}
.footer, .header {

width:100%}

Но... Ничего не меняется! Открыт сайт, нажимаю F12, потом справа на значок мобильного устройства, задаю 768, а все на месте! При этом сохраняются все значения css, которые написаны ДО медиазапроса.
Предполагаю, что я что-то неправильно подключила. Думаю так, потому что я задала другие цвета фону в медиа, а он не меняется. Уж не говорю про размеры... :(
Помогите, пожалуйста!


15 фев 2017, 08:42
Профиль Отправить личное сообщение
Профи

Зарегистрирован: 21 окт 2010, 15:36
Сообщений: 957
Откуда: Саратовская область, г.Энгельс
Пол: мужской
Репутация: 848
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: проблемы с адаптивной версткой
А можно увидеть весь код в том числе и html?

_________________
Не всё валидно, что не видно.


15 фев 2017, 13:37
Профиль Отправить личное сообщение
Новичок

Зарегистрирован: 23 ноя 2014, 20:03
Сообщений: 50
Пол: женский
Репутация: 0
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: проблемы с адаптивной версткой
http://pozdravlyay.com/


15 фев 2017, 14:37
Профиль Отправить личное сообщение
Профи

Зарегистрирован: 21 окт 2010, 15:36
Сообщений: 957
Откуда: Саратовская область, г.Энгельс
Пол: мужской
Репутация: 848
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: проблемы с адаптивной версткой
1. У Вас подключены 2 одинаковые таблицы стилей. - Для чего?
• Если Вы хотите вынести адаптивные стили в отдельный файл, то нужно создать таблицу стилей с другим именем и в атрибуте media у тега link указать, при каких условиях подгружать эту таблицу стилей.
• Если Вы хотите чтобы все стили были в одном файле, то пользуемся директивой @media.

2. Теперь о самом css-файле.
• Кусок вашего кода:
...
@media screen and (max-width:768px) { body{

width: 768px; height: 100%;
}
} <--- вот тут ваши адаптивные стили закрылись и всё остальное будет отрабатывать в обычных условиях.
.wrapper {
...
• У Вас, для структурyых блоков, в html коде, заданы идентификаторы (id - #). Ну а в ваших же, не состоявшихся, адаптивных стилях вы используете селекторы класса (class - . ) :wink:

_________________
Не всё валидно, что не видно.


15 фев 2017, 16:08
Профиль Отправить личное сообщение
Новичок

Зарегистрирован: 23 ноя 2014, 20:03
Сообщений: 50
Пол: женский
Репутация: 0
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: проблемы с адаптивной версткой
По второму вопросу ясно! Совсем из головы выскочило! Чувствовала ведь, что дело в чем-то простом, но важном!

А по первому вопросу есть вопрос :) Я хочу прописать в одном файле css. Значит получается, что строку <link href="mystyle3.css" type="text/css" rel="stylesheet"/> писать не надо?
Оставить только <link href="mystyle3.css" rel="stylesheet" media="only screen and (max-width: 768px)"/>


15 фев 2017, 16:49
Профиль Отправить личное сообщение
Профи

Зарегистрирован: 21 окт 2010, 15:36
Сообщений: 957
Откуда: Саратовская область, г.Энгельс
Пол: мужской
Репутация: 848
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: проблемы с адаптивной версткой
Если вы оставите только строку:
Код:
<link href="mystyle3.css" rel="stylesheet" media="only screen and (max-width: 768px)"/>

то сайт у Вас, при просмотре на больших экранах, останется без стилей :)
Оставляем только:
Код:
<link href="mystyle3.css" type="text/css" rel="stylesheet"/>

_________________
Не всё валидно, что не видно.


15 фев 2017, 17:16
Профиль Отправить личное сообщение
Новичок

Зарегистрирован: 23 ноя 2014, 20:03
Сообщений: 50
Пол: женский
Репутация: 0
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: проблемы с адаптивной версткой
Большое спасибо! Вечером все в доме стихнет, сяду пробовать :)

Вы наверно всегда первым отзываетесь :)


15 фев 2017, 18:08
Профиль Отправить личное сообщение
Новичок

Зарегистрирован: 23 ноя 2014, 20:03
Сообщений: 50
Пол: женский
Репутация: 0
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: проблемы с адаптивной версткой
Нарисовалась проблема!
Сделала пробный css, присвоила номер 6 ( в нем скопировала все, вниз добавила media ) и попробовала подключить не к Главной, а к странице http://pozdravlyay.com/cartoon.html

В html написала <link href="mystyle6.css" type="text/css" rel="stylesheet"/>

В итоге получилось, что сайт взял свойства только media, а то, что прописано в css до media не работает. То, что сайт поплыл - надо мозгами шевелить, на это не обращайте внимания!


16 фев 2017, 08:22
Профиль Отправить личное сообщение
Профи

Зарегистрирован: 21 окт 2010, 15:36
Сообщений: 957
Откуда: Саратовская область, г.Энгельс
Пол: мужской
Репутация: 848
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: проблемы с адаптивной версткой
Она бы не нарисовалась, если бы Вы внимательно читали моё сообщение (пункт 2) :wink: Ну да ладно, я тоже невнимательностью болею :)
И так: нужно перенести фигурную скобку со строки 161 в самый конец css файла - туда, где заканчиваются адаптивные стили (скриншоты ниже).
И приучите себя определённым образом форматировать код, чтобы всё было ясно и понятно. В дальнейшем будет меньше проблем ;)


У вас нет доступа для просмотра вложений в этом сообщении.

_________________
Не всё валидно, что не видно.


16 фев 2017, 12:39
Профиль Отправить личное сообщение
Новичок

Зарегистрирован: 23 ноя 2014, 20:03
Сообщений: 50
Пол: женский
Репутация: 0
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: проблемы с адаптивной версткой
Благодарочка!

Все подключилось! Осталось шаблон исправить.


16 фев 2017, 16:11
Профиль Отправить личное сообщение
Показать сообщения за:  Сортировать по:  
Ответить на тему   [ Сообщений: 15 ]  На страницу 1, 2  След.
   Похожие темы   Автор   Ответов   Просмотров   Последнее сообщение 
Нет новых непрочитанных сообщений в этой теме Как сделать страницу сайта со своей версткой, темой и т.д.

в форуме Drupal 6

Modik

1

1438

13 июн 2011, 08:36

dakanca Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме Помогите с версткой сайта!!!

в форуме CSS И ВЕРСТКА

Mr.Diablo

2

779

25 фев 2010, 20:23

Apxu Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме Помогите с версткой плиз.

в форуме CSS И ВЕРСТКА

hopen

8

1077

30 сен 2013, 00:12

Hoto Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме проблема с блочной версткой!!!!

в форуме ФОРМИРОВАНИЕ СТРУКТУРЫ САЙТА И ВОПРОСЫ ПО ФУНКЦИОНИРОВАНИЮ СТАНДАРТНОЙ СБОРКИ JOOMLA

alex7

7

641

02 июн 2010, 08:39

alex7 Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме подскажи те с версткой

в форуме CSS И ВЕРСТКА

maracana11

4

863

01 фев 2012, 20:35

maracana11 Перейти к последнему сообщению


Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 2


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Перейти: