Question

我正在开发一个网站并且遇到CSS问题请帮我解决这个问题。

您可以看到以下图片以获得最终结果。

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

final result should appear after HTML AND CSS

所以我这样编码

<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问题。所以请帮助我解决这个问题。

谢谢大家。

Answer 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;
}

那几乎就是你要找的东西？

Answer 2

为什么你需要“宽度：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;
}

css中的位置问题

2 个答案: