Mible CSS未申請導航

我只是試圖修改我的網站的導航欄，以查找較小的設備。該網站應該保持iPad +分辨率的固定設計，然後對較小的分辨率進行響應。雖然移動大小特定的代碼適用於某些類（容器，主要等），但它們似乎不適用於導航div。你可以看到它是如何運作的當前位置：http://moore.whiterabbitstudio.us/Mible CSS未申請導航

這裏是一個搗鼓持久：http://jsfiddle.net/ursalarose/xAp72/ HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<body> 
<div class="container"> 
    <div class="main-hold"> 
    <div class="main"> 
     <div id="nav"> 
     <ul> 
      <li><a href="index.html" class="current">Home</a></li> 
      <li><a href="about.html">About Us</a></li> 
      <li><a href="gallery.html">Gallery</a></li> 
      <li><a href="process.html">Process</a></li> 
      <li><a href="testimonials.html">Testimonials</a></li> 
      <li><a href="contact.html">Contact</a></li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</div> 
</body>

CSS：

body 
{ 
    display: table; 
    margin: 0 auto; 
    letter-spacing: .1em; 
    text-align: center; 
    font-size: 16px; 
} 

* 
{ 
    margin:0;padding:0; 
} 

html,body 
{ 
    height:100%; 
} 

.container { 
    height: 100%; 
    display: table-cell; 
    vertical-align: middle; 
} 

.main-hold { 
    height:600px; 
    width:1000px; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    margin-top: 0px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
} 

.main { 
    height:540px; 
    width:900px; 
    background-position: left top; 
    margin-top: 0px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
} 

/* MOBILE DEVICES */ 
@media screen and (max-width: 950px){ 

.main-hold { 
    width:500px; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    margin-top: 0px auto; 
} 
.main { 
    width:100%; 
    background-repeat:no-repeat; 
    background-position:center top; 
    margin-top: 0px auto; 
} 
#nav { 
    margin: 20px auto 0 auto; 
    float:none; 
    width: 100%; 
} 
#nav ul { 
    list-style:none; 
    } 
#nav li { 
    width: 100%; 
    } 
#nav li a { 
    font-size: 14px; 
    text-decoration:none; 
    color:#888; 
    display: block; 
    text-align:center; 
    width: 100%; 
    height: 22px; 
    display: inline; 
    background-color:#CCC; 
    background-image: none; 
    padding-right: 0px; 
    padding-top: 6px; 
    -o-transition:.5s; 
    -ms-transition:.5s; 
    -moz-transition:.5s; 
    -webkit-transition:.5s; 
    transition:.5s; 
} 
#nav li a:hover, #nav li a.current { 
    background-color:#FFF; 
} 

} 


/* NAVIGATION */ 
#nav { 
    float: left; 
    height: 250px; 
    width: 168px; 
    margin-top: 60px; 
} 
#nav ul { 
    list-style:none; 
    } 
#nav li { 
    width: 168px; 
    height: 28px; 
    display: block; 
    margin-bottom: 8px; 
    } 
#nav li a { 
    font-size: 14px; 
    text-decoration:none; 
    color:#888; 
    display: block; 
    text-align: right; 
    width: 148px; 
    height: 22px; 
    display: block; 
    padding-right: 20px; 
    padding-top: 6px; 
    -o-transition:.5s; 
    -ms-transition:.5s; 
    -moz-transition:.5s; 
    -webkit-transition:.5s; 
    transition:.5s; 
} 
#nav li a:hover, #nav li a.current { 
    background-color:#fff; 
}

感謝您的幫助！我從來沒有嘗試過設計移動設備。

來源

2014-05-07 ursalarose

嘗試將移動CSS放置在桌面CSS下方，因爲桌面CSS現在正在覆蓋移動CSS。

來源

2014-05-07 13:29:38

它的工作！很簡單。萬分感謝！！ – ursalarose

Mible CSS未申請導航

回答

相關問題