Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Post an Article
Welcome To Ask or Share your Answers For Others

Categories

html - "Top" and "Bottom" don't work in @media

0 votes
171 views
in Technique[技术] by (71.8m points)

html - "Top" and "Bottom" don't work in @media

I've tried to make adaptive design of site for iPad. So, i have a problem with left-sidebar and top-nav. Between it and header have a little gap. I had wanted to fix it using "top" in @media, but this function doesn't work.

In common style this function works great. So,if anybody can, please write me what mistake I made

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    .topnav {
        top: 50%;
    }
    
    aside {
        min-width: 17%;
        min-height: 100%;
        bottom: 30px;
    }
}


aside { /*Sidebar*/
    padding: 5% 0.5%;
    margin: 0% auto;
    position: fixed;
    left: 0;
    float:left;
    list-style-type: none;
    width:15%; 
    background-image: url(images/side.PNG);
    background-repeat:repeat-y;
    background-size: 75%;
    height: 100%;
    top: 10%;
    z-index: -2;
}

aside li {
    font-family: Verdana, Arial , "sans-serif", helvetica;
    font-size: 11px;
    margin-bottom: 10px;
    width: 140px;
    font-weight: 700;
    text-align: left;
    line-height: 15px;
    
}


.topnav {
    margin:6.2%;
    margin-left: 20%;
    overflow: hidden;
    width: 100%;
    height: 2.5%;
    top: 0%;
    position: fixed;
    background-color: red;
    text-align:center;
    z-index: 2;
    
}

/* Navigation links */
.topnav a {
    margin:0 auto;
    display:inline;
    margin-left:3px;
    line-height: 12px;
    font-size: 11px;
    font-weight: 700;
    float:left;
    font-family: verdana, "sans-serif", helvetica, arial;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 5px 10px;
    text-decoration: none;
    z-index: 3;
}
<!DOCTYPE html>
<html lang="ru">
    <head>    
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Новости - Анонсы</title>
    </head>
<body>
     <header>
    <img src="images/headerfinal.png" class="Header" alt="Header">
    </header>
    <nav>
    <div class="topnav"> <!--Верхнее меню -->
  <a href="#top">Новости</a>
  <a href="#top">О Суде</a>
  <a href="#top">Решения КС РФ</a>
  <a href="#top">Заседания КС РФ</a>
  <a href="#top">Контакты</a>
    </div>
    </nav>
    
    <section> <!-- Основной текст -->
<h3 class="News">Новости - Анонсы</h3>
<br>
<br>
<p>10 ноября 2017 года Конституционный Суд РФ провозгласит Постановление по делу о проверке конституционности Федерального закона ?О внесении изменений в отдельные законодательные акты РФ в части совершенствования законодательства о публичных мероприятиях?</p>
<br>
<p>( <a href="#top">подробнее...</a>)</p>
<br>
<p>7 ноября 2017 года Конституционный Суд РФ провозгласил Постановление по делу о проверке конституционности ряда положений Закона Республики Крым ?Об особенностях регулирования имущественных и земельных отношений на территории Республики Крым?</p>
<br>
<p>( <a href="#top">подробнее...</a>)</p>

<br>
    <a href="#top">Посмотреть все новости</a>
<br>
    </section>
    <aside> <!-- Меню слева -->
<ul>
<br>
<br>
<br>
<li><a href="#top">Новости</a></li>
<li><a href="#top">О Суде</a></li>
<li><a href="#top">Решения КС РФ</a></li>
<li><a href="#top">Заседания КС РФ</a></li>
<li><a href="#top">Контакты</a></li>
</ul>
<br>
<img src="images/gerb.gif" alt="Герб РФ" align=center>
    </aside>
<br>
<br>
    <footer>
        <hr style="border:1px; height:1px; width: 70%; margin-left: 270px; background-color:black">
    <img src="images/footer.PNG" class=footerline alt="Footer">
        <a href="index.html">?Конституционный Суд Российской Федерации, 2008-2017</a>
    </footer>
</body>
</html>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Media queries have no influence over specificity. The normal rules of the cascade apply.

Both your rulesets have the same selector (.topnav), so they are equally specific. The means that rules are applied in order.

First top is set to 50%;, then the second rule sets it to top: 0%;.

Change the order of your rules.


与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界，一个免费开放的程序员编程交流平台！开放，进步，分享！让技术改变生活，让极客改变未来！ Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

1.4m articles

1.4m replys

5 comments

56.9k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...