Question

我在创建页面时遇到了问题，我对这些内容感到陌生，我正在尝试从我的错误和上司的帮助中学习，就像你一样，

http://i.imgur.com/patgmbK.png＆lt; - image

正如您所看到的，我的标题并不在页面顶部，在我改变我的“页面”代码之前就已经有了。我想在中心为我的文字和图片等创建一个65％宽的白色页面。我无法创建它，不知道为什么，检查我的代码请

<!DOCTYPE html>
<html>

<head>
    <link type="text/css" rel="stylesheet" href="stylesheet.css" />
    <title>Home</title>
</head>

<body>
    <div id="mainContainer">
        <div id="header">
            <img src="fotos/evergreen.png" id="evergreenIMG" />
            <div>
                <img src="fotos/header.jpg" id="headerIMG" />
                <img src="fotos/evergreen.png" id="evergreenIMG" />
                <img src="fotos/off.png" id="offIMG" />
            </div>
        </div>
        <div id="pagina"></div>
    </div>
</body>
</html>

CSS

/* Tudo em header */
#header {
    z-index: 1;
    }

#offIMG {
    padding-top: 0px;
    position: absolute;
    width: 3%;
    margin-left: 11%;
}

#headerIMG {
    position: absolute;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    margin-top: -10px;
    margin-left: 10%;
    max-height: 60px;
    min-height: 60px;
    width: 80%;
}

#evergreenIMG {
    margin-left: 50%;
    position: absolute;
    width: 10%;
    margin-left: 45%;
    padding-top: 10px;
}

/* agora é a pagina*/
#pagina {
    position: absolute
    width: 65%;
    height: 100%;
    margin-top: 81px;
    margin-left: 17,5%;
    background-color: #ffffff;
}

body {
    background-image:url("fotos/background.jpg");
    background-repeat:repeat-x;
    height: 100%;
}

我想做类似的事情http://i.imgur.com/twZnSjk.jpg 我还是不知道怎么样，这张图片是我现在在Photoshop上编辑的，我怎么能做那个白色的东西？

Answer 1

默认情况下，HTML会带来一些不必要的样式，这只会导致问题。在这种情况下，我最好的猜测是问题是HTML默认值。试试这个： http://webdesign.about.com/od/css/a/master_stylesht.htm

特别是要删除边距的部分：

html, body {
  margin: 0px;
  padding: 0px;
  border: 0px;
}

还注意到#evergreenIMG：

padding-top: 10px;

编辑：我完成了标题： http://jsfiddle.net/yE9b9/

创建页面

1 个答案: