修復導航部分

我想修復導航。我的問題是，我想要一個特殊的位置。我有一個部分，這一部分是在頁邊的中間部分留有餘量：auto & margin-right：auto。導航應該固定在該部分的左邊界。這是一張圖片。這裏是myPage這裏的代碼：修復導航部分

*{ 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
body{ 
 
    background-color: #4A3A47; 
 
    height: 5000px; 
 
} 
 

 
section{ 
 
    width: 1200px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    overflow: hidden; 
 
    text-align: center; 
 
    background-color: black; 
 
} 
 

 

 
.divbox{ 
 
    vertical-align: top; 
 
    display: inline-block; 
 
    width: 250px; 
 
    border: 4px solid #D7E8D5; 
 
    margin: 0 50px; 
 
    transition: all 0.5s; 
 
    margin-top: 200px; 
 
    margin-bottom: 200px; 
 
    background-color: #D7E8D5; 
 
} 
 

 
.divbox:hover{ 
 
    border-bottom-right-radius: 75px; 
 
    border-bottom-left-radius: 75px; 
 
} 
 

 

 

 
/* Bildern noch eine Klasse geben */ 
 

 
.divbox:hover img{ 
 
    border-bottom-right-radius: 75px; 
 
    border-bottom-left-radius: 75px;  
 
} 
 

 
img{ 
 
    transition: all 0.5s; 
 
} 
 

 
/*---------------*/ 
 

 
nav{ 
 
    position: fixed; 
 
    background-color: #D7E8D5; 
 
} 
 

 
nav ul{ 
 
    border: border: 4px solid #D7E8D5; 
 
} 
 

 
nav ul a { 
 
    display: block; 
 
    padding: 10px 20px; 
 
    color: #4A3A47; 
 
    text-decoration: none; 
 
    
 
}

<html> 
 
    <head> 
 
     <title>Startseite</title> 
 
     <link rel="stylesheet" href="index.css"> 
 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
 
    </head> 
 
    <body> 
 
     
 
     <nav> 
 
      <ul> 
 
       <li><a href="#">Link1</a></li> 
 
       <li><a href="#">Link1</a></li> 
 
      </ul> 
 
     </nav> 
 
     
 
     <section> 
 
      <article> 
 
       <div class="divbox"> 
 
        <img src="http://ipadminibackgrounds.com/assets/Battlefield-3-Game-iPad-mini-wallpaper-250x250.jpg" width="250" height="250" /> 
 
       </div> 
 
       <div class="divbox"> 
 
        <img src="http://static.planetminecraft.com/files/resource_media/screenshot/1341/11Minecraft-Creeper-Wallpaper-1080p-HD-250x250up_6509836_lrg.jpg" width="250" height="250" /> 
 
       </div> 
 
       <div class="divbox"> 
 
        <img src="https://lh5.googleusercontent.com/-Nv-tRjOe0Ww/AAAAAAAAAAI/AAAAAAAAAMQ/81G-ZfxzYNc/photo.jpg" width="250" height="250" /> 
 
       </div> 
 
      </article> 
 
     </section> 
 
    </body> 
 
</html>

來源

2015-01-16 Skeptar

喜歡這個？ -----> [Fiddle]（http://jsfiddle.net/4dkx8wrL/1/embedded/result/）。我猜你的意思是'位置：固定'。 –

是的，這是完美的！ :)現在我必須瞭解它，然後我很高興。也許我以後會問：P，並且感謝你的評論！ – Skeptar

nav{ 
position: fixed; 
background-color: #D7E8D5; 
top:50%; 
}

我認爲應該工作

來源

2015-01-16 22:51:41

感謝您的回答！ :)但是，我沒有搜索到，但是，謝謝！ – Skeptar

哦，我想我知道你的意思，你是否試圖將導航放置在你的部分，然後添加邊距？ –

看看吧！ http://jsfiddle.net/0vanfrde/1/embedded/result/ –

修復導航部分

回答

相關問題