css中的位置问题答案

【问题标题】：Problem with position in csscss中的位置问题
【发布时间】：2011-05-13 16:20:07
【问题描述】：

我正在开发一个网站，但在 CSS 方面遇到了问题，请帮我解决这个问题。

您可以看到下图了解最终结果。

http://i51.tinypic.com/5bwpee.jpg

所以我这样编码

<div id="header">
    <div class="pattern"></div>  <!-- .pattern -->
    <div id="wrapper">
        <div class="topHeader">

        </div>
    </div>
</div> <!-- #header -->

而 CSS 是 .. 实际上在下面的代码中我使用渐变图像和使用图案图像来溢出背景。

#header {
    width:100%;
    height:150px;
    background:url(images/header_gradient.png) repeat-x;
}

.pattern {
    width:100%;
    height:150px;
    background:url(images/header_transparent.png) repeat;
}

#wrapper {
    width:1200px;
    margin:0 auto;
    background-color:#F00;
    height:100px;
}

所以请帮我解决这个问题，我如何在标题中心设置徽标和作者详细信息..

我试过位置，但可能出错了。

现在我在下面的结果中编辑了我的代码，但仍然有问题

<div id="wrapper">
    <div id="header"></div>
    <div id="pattern"></div>
    <div id="main">
        <img src="http://i52.tinypic.com/16i6z9d.jpg" />
    </div>
</div>

CSS

#wrapper {
    position:relative;
}

#header {
    width:100%;
    height:150px;
    background:url(http://i55.tinypic.com/1zpgny8.jpg) repeat-x;
}

#pattern {
    width:100%;
    height:150px;
    background:url(http://i51.tinypic.com/ao75eg.jpg) repeat;
    position:absolute;
    top:0px;
}

#main {
    width:1200px;
    margin:0 auto;
    margin-top:-103px;
}

#main img {
    z-index:5px;
}

在完成所有这些操作之后，#pattern 在所有层上仍然存在问题。所以请帮我解决这个问题。

谢谢大家。

【问题讨论】：

logo和作者详细信息在哪个div？还是你还没放进去？
标识和作者详细信息的 HTML 在哪里？
您的更新似乎是一个完全不同的问题。你的第一个问题得到回答了吗？ I don't see the repeating pattern problem you are talking about

标签： html css position css-position

【解决方案1】：

为您的徽标和站点名称内容创建一个 div。使用position:relative; left: 400px 或您需要的任何距离将 div 向右移动。
浮动徽标和站点名称，让它们并排排列。将容器 div (#logoandsitename) 设置为 overflow:auto; 以包含浮动。

HTML

<div id="header">
    <div class="pattern"></div>  <!-- .pattern -->
        <div id="wrapper">
        <div class="topHeader">
            <div id="logoandsitename">
                <img src="img.source" />
                <span id="sitename">Your Site Name</span>
            </div>
         </div>
     </div>
</div> <!-- #header -->

CSS

#logoandsitename {
    overflow: auto;
    width: 300px;
    height: 100px;
    position: relative;
    left: 300px;
}

#logoandsitename img {
    float:left;
}

#sitename {
    float:left;
    font-size: 40px;
}

这就是你要找的东西？

【讨论】：

【解决方案2】：

为什么需要“width:1200px;”在#wrapper 中？

为什么不试试这个 html？

<div id="header">
    <div id="wrapper">
        <div class="topHeader">
            <div id="logo">Logo</div>
            <div id="author">Author Details</div>
        </div>
    </div>
    <div class="pattern"></div>  <!-- .pattern -->
</div> <!-- #header -->

还有这个css：

#header {
    width:100%;
    height:150px;
    background:url(images/header_gradient.png) repeat-x;
}

.pattern {
    width:100%;
    height:150px;
    background:url(images/header_transparent.png) repeat;
}

#wrapper {
    width:1200px;
    margin:0 auto;
    background-color:#F00;
    height:100px;
}
#logo, #author{
    width:200px;
    height:50px;
    float:left;
}
#author{
margin-left:20px;
}
.topHeader{
    width:500px;
    margin:0 auto;
}

【讨论】：