页面右侧的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

回答

相关问题