頁面右側的DIV

我在'#header'div頁面的右側放置'navigation'div（5個按鈕內）時出現問題。 '導航'div仍然是'logo'div的旁邊。頁面右側的DIV

有人可以幫我把它放到頁面的右邊嗎？

CSS代碼：

body { 
background-color: #000000; 
margin:0; 
padding:0; 
} 

#header { 
width: 100%; 
height: 100px; 
background-color: 222423; 
margin-bottom: 5px 
} 

#logo { 
float: left; 
} 

#navigation { 
display: inline-block; 
vertical-align: middle; 
} 

#content { 
height: auto; 
} 

.knop { 
margin-right: 7px; 
margin-left: 20px; 
vertical-align: middle 
} 

.plaatje { 
position: fixed; 
width: 628px; 
height: 300px; 
margin: -150px auto auto -319px; 
top: 50%; 
left: 50%; 
text-align: center; 

} 

.DivHelper { 
display: inline-block; 
vertical-align: middle; 
height:100%; 
}

HTML代碼：

<html> 
<head> 
    <link typte="text/css" rel="stylesheet" href="css/style.css" /> 
</head> 

<body> 

<div id="header"> 

    <div id="logo"> 
     <img src="images/logo.png" width="90px"> 
    </div> 

    <div id="navigation"> 
      <img class="knop" src="images/buttonhome.png"> 

      <img class="knop" src="images/buttonoverons.png"> 

      <img class="knop" src="images/buttonproduct.png"> 

      <img class="knop" src="images/buttonmedia.png"> 

      <img class="knop" src="images/buttoncontact.png"> 

    </div> 
    <div class="DivHelper"></div> 

</div> 

     <img class="plaatje" src="images/headimage.png" > 

    fkfddkfd 

</div> 

<div id="footer"> 

</div> 

</body> 

</html>

來源

2013-10-26 Youri

使它浮動：right;' –

有多種方法可供選擇，你可能需要做一些試驗你的作品。

首先，有位置屬性，如果你想放置導航到右邊你會得到：

#navigation 
{ 
    position: absolute; /*or fixed*/ 
    right: 0px; 
}

這種方式非常的態勢，可能會中斷。在某些情況下甚至會破壞整個佈局。最佳實踐決定儘可能少地使用這一個，但有時沒有其他選擇。

的另一種方式，這可能會或可能無法正常工作，再次是使用float屬性

#navigation 
{ 
    float: right; 
}

來源

2013-10-26 12:51:33 w3re

它不是必須移動到頁面右側的標題，而是導航。我知道你的意思哈哈！我試圖使用浮動選項，但隨後它將頁面的右側移動到頂端...... :( – Youri

在CSS中垂直對齊通常是一個棘手的問題，看看不同的屬性如何交互並覆蓋對方行爲形式不時，甚至可能從瀏覽器到瀏覽器等。我最好的選擇是float和vertical-align不是直接兼容的，你必須使用另一種方法將其與右側對齊，或者使用另一種方法進行垂直對齊。 – w3re

只有一個，但'0'沒有任何單位。它只是'0'而不是'0px' :) –

做這樣的（使用浮動&不要忘記在內容DIV明確）：

#navigation { 
display: inline-block; 
vertical-align: middle; 
float: right; 
} 

#content { 
clear:both; 
height: auto; 
}

來源

2013-10-26 12:53:13 prakashapkota

謝謝user @ 2191187。隨着更新的代碼，你給，導航欄移動到頁面的右側頂部:( – Youri

你需要在導航div和一些寬度中使用float。

#navigation { 
display: inline-block; 
vertical-align: middle; 
float:right; 
}

更新這個類，並檢查它應該工作

來源

2013-10-26 12:54:23

嗨Praveen雷迪，我剛更新與您的代碼類沒有成功:(我做了一個截圖http://img6.imageshack.us/img6/433/02p4.png – Youri

Hello You，只需從課程中刪除，我已將其更新，請檢查// –

#navigation { 
display: inline-block; 
vertical-align: middle; 
float: right; 
padding-right: 50px; 
padding-top: 50px; 
}

調整填充權，如果u想頂PX ....

來源

2013-10-26 13:03:30 Karuppiah

感謝你的印度人。問題是..我想在'header'div的中間設置'導航'，百分比...... :(你能幫我做一個百分比的代碼嗎？ – Youri

＃導航{ \t display ：block; \t text-align：center; \t padding-top：50px ; } – Karuppiah

尤里，

有幾種方法爲了達到這個效果，這裏是一個。

看看這個：http://jsfiddle.net/legendarylion/8jKUP/1/

THE HTML 
<body> 
<div id="header"> 
<div id="logo"> 
    <!--You may wish to eliminate the "width" property here and use the css to style the image... also, I'm assuming you're going to want to wrap this image in an anchor tag that points back to index.html (or default.html, whatever your homepage is...--> 
    <img class="example-logo" src="images/logo.png" width="90px"> 
</div> 
<!--Your image code in your original source did not have anchor tags. If you want those to function as a nav, you might as well mark it up like I have it below, wrapping the image inside of a 'nav' element, ul, li, and anchor tag. Also see the CSS comments for ideas on sprite images and sticky menus--> 
<nav> 
    <ul> 
     <li><a href="#"><!--add your image code back here-->Home</a> 
     </li> 
     <li><a href="#"><!--add your image code back here-->Overons</a> 
     </li> 
     <li><a href="#"><!--add your image code back here-->Product</a> 
     </li> 
     <li><a href="#"><!--add your image code back here-->Media</a> 
     </li> 
     <li><a href="#"><!--add your image code back here-->Contact</a> 
     </li> 
    </ul> 
</nav> 
</div> 
<div class="DivHelper"></div> 
</div> 
<div id="footer"></div> 
</body> 

</html> 

THE CSS  
/* Make the header relative so we that the 'asbolute' positioning uses it as a reference, also, let's give that header an outline so we can see what we're doing */ 
#header { 
    position:relative; 
    border:1px dashed green; 
} 
/* Make the nav position asboslute to place it to the right */ 
nav { 
    position:absolute; 
    top:0px; 
    right:0px; 
    border:1px dashed blue; 
} 
/*So what happened? The parent element "header" is referenced by "nav" and "nav" is positioned absolutely relative to that parent in the top right hand corner. Nav will stay there even if the parent container has more elements added to it. 

Also, it's worth asking I think... Did you want the menu static, or fixed as the page scrolls? That might be worth looking into as well. Look to the trusty W3C to help you out there: http://www.w3.org/Style/Examples/007/menus.en.html*/ 

/* Style the Nav (You can add your images right back into the html if you prefer, though you may want to look up how to make a sprite image with the css background property and positioning so they load as one file call, but hey, first thing is first right? */ 
nav ul li { 
    list-style-type:none; 
    display:inline-block; 
    margin:0 10px; 
} 
nav ul li a { 
    text-decoration:none; 
} 
.example-logo { 
    height:50px; 
    width:50px; 
    background:blue; 
}

我們在這裏所做的是一個父元素相對聲明，並且希望元素右上角絕對到關係風格。

另請參閱我在該代碼中的評論，以瞭解其他一些我認爲可能對您有所幫助的想法。

來源

2013-10-26 13:26:37

頁面右側的DIV

回答

相關問題