Jump to content
  • 0

проблемы с валидацией css в адаптивной верстке.


eleonore
 Share

Question

Имеются встроенные в основной css файл media queries:

@media screen and (min-width:200px) and (max-width:1024px)

@media screen and (min-width:200px) and (max-width:980px)

@media screen and (min-width:200px) and (max-width:768px)

@media screen and (min-width:200px) and (max-width:600px)

@media screen and (min-width:200px) and (max-width:480px)

При валидации сss нет ни одной ошибки!Кроме этих двух:

1.Ошибка разбора @media screen and (min-width:200px) and (max-width:875px) { #header{ font-size:10pt; } .gallery{ position:absolute; top:120px; right:70px; } }

2.Ошибка разбора @media screen and (min-width:200px) and (max-width:620px){ #navig ul{ margin:0; } ul.nav li{ float:none; width:200px; padding:10px; text-align:left; } ul.nav li:hover{ background:#e8f0f0; } ul.nav li.min{ display:none; } ul.nav li.width{ width:200px; } footer{ clear:both; background:url(images/footer_fon.png)0% 100% repeat-x; padding:0; margin-top:-165px; height:170px; position:relative; } footer p.one{ position:relative; height:103px; top:25px; } div.copyright{ position:absolute; bottom:5px; margin-left:10px; color:#dbe4e3; width:300px; font-size:10pt; } }

Кто-нибудь знает почему только эти два запроса не проходят валидацию?они ничем не отличаются по структуре от остальных.

Edited by eleonore
Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

  1. Медиазапросы срабатывают?
  2. На скрине и посте несоответствие - max-width:875(980)px; и max-width: 620(600)px;
  3. Вы задаете свойства для селектор типа + класс (div.copyright и подобное) - удалите селекторы типов (теги).
  4. Валидатор это программа которую создавали люди, которые могли допустить ошибки.

Пробовал воссоздать Вашу ситуацию. Добавил набор Ваших правил через медиазапросы в один файл:

  1. Когда находится два медиазапроса(на которых у Вас ошибка) - проходит валидацию
  2. Когда находится больше 2 ( пробовал 6 с разными условиями) - проходит валидацию

Может у Вас в условие для этих медиазапросов закрался кирилический символ/синтаксическая ошибка?

Edited by red4pony
  • Like 1
Link to comment
Share on other sites

  • 0

1.медиа запросы работают

2.извините,опечатка в разрешениях в тексте валидатора. ориентируйтесь на верхние значения.правильные разрешения 980 и 600, а не 875 и 620,но это значения не имеет,просто уточнила.

3.в других запросах все проходит валидацию(тег + класс)

ошибку 980 я исправила,оказывается был не закрыт медиа запрос.

а вот в 600 пока не нашла косяков...

  • Like 1
Link to comment
Share on other sites

  • 0

Попробуйте переписать сам медазапрос сначала, а потом вставите уже правила (свойства).


@media screen and (min-width:200px) and (max-width:600px) {
#navig ul{
margin:0;
}
ul.nav li{
float:none;
width:200px;
padding:10px;
text-align:left;
}
ul.nav li:hover{
background:#e8f0f0;
}
ul.nav li.min{
display:none;
}
ul.nav li.width{
width:200px;
}
footer{
clear:both;
background:url(images/footer_fon.png)0% 100% repeat-x;
padding:0;
margin-top:-165px;
height:170px;
position:relative;
}
footer p.one{
position:relative;
height:103px;
top:25px;
}
div.copyright{
position:absolute;
bottom:5px;
margin-left:10px;
color:#dbe4e3;
width:300px;
font-size:10pt;
}
}

Edited by red4pony
  • Like 1
Link to comment
Share on other sites

  • 0

Попробуйте переписать сам медазапрос сначала, а потом вставите уже правила (свойства).


@media screen and (min-width:200px) and (max-width:600px) {
#navig ul{
margin:0;
}
ul.nav li{
float:none;
width:200px;
padding:10px;
text-align:left;
}
ul.nav li:hover{
background:#e8f0f0;
}
ul.nav li.min{
display:none;
}
ul.nav li.width{
width:200px;
}
footer{
clear:both;
background:url(images/footer_fon.png)0% 100% repeat-x;
padding:0;
margin-top:-165px;
height:170px;
position:relative;
}
footer p.one{
position:relative;
height:103px;
top:25px;
}
div.copyright{
position:absolute;
bottom:5px;
margin-left:10px;
color:#dbe4e3;
width:300px;
font-size:10pt;
}
}

проблема решена,была опечатка в коде,спасибо вам за внимание!:-)а моя не внимательность меня погубит. :dash:

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy