我在调整网页上文本的位置时遇到困难。页面上的项目似乎漂浮并且没有锁定。我需要它们相对于背景图像保持静态。
例如,我有一个名为“ leftMenu”的div项,我希望左侧菜单在背景图像的左侧保持约20个像素。在我不得不将背景图像居中之前,一切似乎都可以进行。既然背景图片已经居中,我似乎已经无法锁定相对于背景的div位置。
当屏幕为全尺寸时,外观看起来不错,但是当页面尺寸更改时,leftMenu会在整个位置上漂移。我目前正在使用绝对位置和相对位置进行大量的试验和错误,但是我似乎无法获得正确的设置组合来使项目保持原样,而与页面大小无关。
页面:http://107.22.173.10/
用户:test2
通过:abc111
任何建议将不胜感激。
最佳答案
与其使用大的背景而不是将文本的div绝对定位在中心,为什么不使用与背景图像大小完全相同的div并使用以下文本将其居中:
CSS:
html, body{
height:100%;
position:relative;
}
div.siteWrapper{
background: !VALUE;/* your background*/
padding: 0 0 0 0; /* the space top, right, bottom, left from the edge of the bg image to the content box of the image*/
width: !VALUE; /* width of your background - (left + right padding)*/
margin:100px auto; /* this will center your site horizontally and move it away from the top*/
}
HTML:
<body>
<div class="siteWrapper">
//everything in here
</div>
</body>