如何在調整大小時調整導航欄

到目前爲止，我有一個簡單的網站，但有兩個問題。我已經用百分比做了所有事情，因爲該網站可能會在高清電視上播放，我希望它們可以很好地擴展。縮放與圖像一起工作，但id也喜歡縮放導航欄的背景和文字，以免它看起來很小。如何在調整大小時調整導航欄

第二個問題是當網站被擠壓時底部圖像覆蓋導航欄並且不會在導航欄元素下面流動。 Id就像這個功能一樣，因爲它可以很好地適用於智能手機。

下面是HTML：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" type="text/css" href="headish.css"> 
    <title>New Site</title> 
    </head> 
    <body> 
    <div id="container"> 
     <div id="tophead"> 
      <img src="images/logo.png" alt="logo" />  
      <ul> 
       <li><a href="#" title="About Us">About Us</a></li> 
       <li><a href="#" title="Biographies">Biographies</a></li> 
       <li><a href="#" title="Services">Services</a></li> 
       <li><a href="#" title="Careers">Careers</a></li> 
       <li><a href="#" title="Contact">Contact</a></li> 
      </ul> 
     </div> 
     <div id="maincont"> 
      <img src="images/second.png" alt="image"> 
     </div> 
    </div> 
    </div> 
    </body> 
</html>

這裏是CSS：

html, body, #container { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    position: relative; 

} 

#tophead { 
    height: 20%; 
    width: 80%; 
    margin: auto; 
    text-align: center; 

} 

#tophead img { 
    height: 100%; 
    width: auto%; 

} 
#tophead ul { 
    list-style: none; 
    display: inline-block; 
    font-size: 0; 


} 
#tophead li { 
    display: inline-block; 

    } 
#tophead a { 
    background: #2dbaf0; 
    color: #fff; 
    display: block; 
    font-size: 16px; 
    font-family: "arial"; 
    font-weight: bold; 
    padding: 0 20px; 
    line-height: 38px; 
    text-transform: uppercase; 
    text-decoration: none; 

} 
#tophead a:hover { 
    background: #f8a52b; 
    color: #fff; 
    -webkit-transition-property: background; 
    -webkit-transition-duration: .2s; 
    -webkit-transition-timing-function: linear; 
} 
#tophead li:first-child a { 
    border-left: none; 
    border-radius: 5px 0 0 5px; 
} 
#tophead li:last-child a { 
    border-right: none; 
    border-radius: 0 5px 5px 0; 
} 
#maincont { 
    padding-left: 10%; 

    } 
#maincont img{ 
    border-radius: 7%; 
    width: 30%; 
    }

來源

2013-02-22 user2093601

我沒有得到你的用戶名的答案，但如果你指的是艾倫克拉布特裏的帖子，它沒有。我非常感謝任何幫助，但是當我重新調整窗口大小（在Chrome和Firefox中）時，#maincontent img仍與導航欄菜單重疊。任何想法我的互聯網朋友？ – user2093601 2013-02-24 04:19:45

要流入其他元素停止圖像，您#maincontent img

編輯使用clear:both：一在這裏可以找到好的文章，其中提出了其他方法。 http://quirksmode.org/css/clearing.html

編輯2：這隻適用於浮動元素，我剛剛注意到你沒有使用浮動atall。看到我下面的評論

來源

2013-02-22 00:40:44

感謝您的幫助，但它並沒有很好的工作。當屏幕最小化時，圖像與導航欄重疊。任何其他想法？ – user2093601 2013-02-24 04:21:04

你只需要'＃容器'樣式 - 不要包含'html，body'。你也不需要在前面的答案中提到的「清楚：都是」。 – 2013-02-26 01:13:33

如何在調整大小時調整導航欄

回答

相關問題