Jump to content

Maus

Newbie
  • Posts

    6
  • Joined

  • Last visited

Everything posted by Maus

  1. Возникла проблема с @Media запросами - они просто не применяются! Вот HTML код страницы: <!DOCTYPE html> <html><head><title>Black Hog Games</title><meta charset="utf-8"><link type="text/css" rel="StyleSheet" href="/_st/my.css" /><link type="text/css" rel="StyleSheet" href="/Black_Hog_Games/styles/CSS_1024x600.css" /><link type="text/css" rel="StyleSheet" href="/Black_Hog_Games/styles/CSS_1280x800.css" /><link type="text/css" rel="StyleSheet" href="/Black_Hog_Games/styles/CSS_1280x1024.css"><link type="text/css" rel="StyleSheet" href="/Black_Hog_Games/styles/CSS_1366x768.css" /> <link type="text/css" rel="StyleSheet" href="/Black_Hog_Games/styles/CSS_1440x900.css" /> <link type="text/css" rel="StyleSheet" href="/Black_Hog_Games/styles/CSS_360x640.css" /><link rel="icon" href="/Black_Hog_Games/images/favic.ico" type="image/x-icon"> <body id="pages"> </body> И не один из привязных документов не работает! Работает только <link type="text/css" rel="StyleSheet" href="/_st/my.css" /> Вот пример кода одного из CSS документов со стилями - остальные такие точно, только цифры другие: @media screen and (min-width: 1280px) and (min-height: 1024px) { #Menu{ display: block; width: 100%; height: 50px; position: absolute; top: 36%; left: 0%; z-index:2;} #Text1 { font-family: Georgia, Arial, Tahoma; font-size: 250%; color: #097AAA; padding-top: 0px; text-align: center;} #Text2 { font-family: Georgia, Arial, Tahoma; font-size: 40px; color: #097AAA; padding-top: 10px; text-align: center;} #Text3 { font-family: Georgia, Arial, Tahoma; font-size: 17px; color: #FFFFFF; padding-top: 25px; padding-left: 15px; height: 115px; width: 840px;}} И в результате ничего Но когда я просматриваю свой сайт через http://quirktools.com и ставлю соответствующие разрешение то все работает Вот на 2 скриншоте Text1 зачеркнут и применен Text1 @Media Так почему же в браузере у меня это не происходит, что не так ? В чем ошибка?
  2. Так каким же образом мне синхронизировать отображение @Media, что бы при нужном разрешении экрана выдавался нужный стиль?
  3. В том то и дело что в один все не влезет - он и так огромен а эти стили это еще + где-то 6000-7000 строк все вместе - приходиться делить на части
  4. Требуется что бы в зависимости от разного разрешения экрана менялись элементы на сайте, при этом я пытался привязать несколько CSS к одному HTML: <!DOCTYPE html> <html><head><title>Black Hog Games</title><meta charset="utf-8"> <link type="text/css" rel="StyleSheet" href="/_st/my.css" /><link type="text/css" rel="StyleSheet" href="/Black_Hog_Games/styles/CSS_1024x600.css" /><link type="text/css" rel="StyleSheet" href="/Black_Hog_Games/styles/CSS_1024x768.css" /> Документы привязались и все шло хорошо, пока не потребовалось межу ними переключаться: При проверке возникала путаница - включался не тот CSS, а самый первый - CSS_1024x600.css, а иногда подключеные CSS вообще отключались и работал только самый стандартный -/_st/my.css. Как сделать что бы в зависимости от размера экрана включался нужный CSS? Вот код CSS: @media only screen and (max-width: 1024px), and (max-height: 600px){ #Menu{ display: block; width: 100%; height: 50px; position: absolute; top: 27%; left: 0%; z-index:2;} #Home { display: block; width: 130px; height: 40px; float:left; padding-top: 2px; padding-left: 40px; }} @media only screen and (max-width: 1024px), and (max-height: 768px){ #Menu{ display: block; width: 100%; height: 50px; position: absolute; top: 20%; left: 0%; z-index:2;} #Home { display: block; width: 125px; height: 35px; float:left; padding-top: 2px; padding-left: 35px; }} В добавок ко всему он вместо @media only screen and (max-width: 1024px), and (max-height: 600px){ отображает @media only screen and (max-width: 1024px), not all
  5. Действительно - поменял их местами вот так : #Home { display: block; width: 160px; height: 45px; float:left; padding-top: 2px; padding-left: 30px; } @media only screen and (max-width: 1000px){#Home { display: block; width: 130px; height: 30px; float:left; padding-top: 2px; padding-left: 10px; }} И все работает - спасибо вам большое!
  6. Ребята - при верстке появилась такая проблема: У меня не работает @Media запросы - они просто перечеркиваются! Но если их вручную включить а ненужные выключить - все выглядит отлично! (Картинка сжимается и в общем все работает) Так как же мне сделать что-бы оно само отключало обычный тег и включало @Media при условии (max-width: 1000px)??? Вот код: HTML: <div id="Menu"><a href="http://blackhoggames.clan.su/" ><img src="/Black_Hog_Games/images/BottonHome.png" id="Home" class="Botton"></a> </div> </Menu> CSS: @media only screen and (max-width: 1000px){#Home { display: block; width: 130px; height: 30px; float:left; padding-top: 2px; padding-left: 10px; }} #Home { display: block; width: 160px; height: 45px; float:left; padding-top: 2px; padding-left: 10px;}
×
×
  • 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