0

这是我一生中制作的第一个网站，因此非常感谢您的帮助！我还在学习html和css。我的第一个网站几乎完成了，除了我已经为我的原始分辨率 - 1280x800 构建了它。当我改变分辨率时，元素会分开。为了弥补这一点，我只需要更改 body 属性中右边距的值。例如，当前是 7em。如果我想以 1920x1200 的分辨率为中心，值应该是 27em。我尝试过使用 site-wrapper 和 @media 查询技术，但这似乎不起作用。解决方案显然很简单，但我自己无法弄清楚。

请帮我！

我的 HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
        <title>Autoprevoznik Damjanić</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="description" content="Autoprevoznik Damjanić / Prevoz robe / Špediterske usluge" />
<meta name="keywords" content="Damjanić, autoprevoznik, špediter, prevoz robe, špediterske usluge" />
        <link rel="stylesheet" type="text/css" href="naslovna.css" />
        <link rel="shortcut icon" href="Truck.ico" />
</head>

<body>

<h1><a href="naslovna.html">:::Autoprevoznik Damjanić</a></h1>

<div id="border_left"></div>
<ul>
    <li><a href="kontakt.html">Kontakt Informacije</a></li>
    <li><a href="galerija.html">Galerija slika</a></li>
    <li id="empty"><a href="onama.html">O nama</a></li>
</ul>
<div id="border_right"></div>

<div id="content">
    <p>Ispum schmipsum.</p>
</div>

<div class="background">
<div class="border">
<div id="box1">
    <h2>Ukratko o nama</h2>
    <h3>Usluge prevoza</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="button" ><a href="galerija.html"  style="text-decoration:none" title="Galerija slika" class="read_more">galerija</a></div>
</div>
</div>
</div>

<div class="background">
<div class="border">
<div id="box2">
    <h2>Aktuelnosti</h2>
    <h3>Poslednje vesti</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="button" ><a href="onama.html"  style="text-decoration:none" title="Detaljnije" class="read_more">detaljnije</a></div>
</div>
</div>
</div>

<div class="background">
<div class="border">
<div id="box3">
    <h2>Kontakt informacije</h2>
    <h3>Identifikacija preduzeća</h3>
<p>Možete nas kontaktirati na brojeve telefona :</p>

<p>+381 (0) 6</p>

<p>+381 (0) 34</p>

<p>Email:</p>
 <div class="button" ><a href="kontakt.html" style="text-decoration:none" title="Detaljnije" class="read_more">detaljnije</a></div>
</div>
</div>
</div>

</body>
</html>

还有我的 CSS：

body  {
    background:url(background.jpg);
    background-repeat: no-repeat;   
    background-position: top center;
    background-color:#b0d3f6;
    margin: 3em 7em 0em;
    }

p {
    font-size: 11px;
    margin: 0px 30px 0px 0px;
    color: rgb(111, 130, 150);
    line-height: 18px;
    text-align: left;
}

h1 a {
    color: rgb(27, 63, 150);
    position: relative;
    top: 30px;
    text-decoration: none;
}

h2 {
    font-size: 16px;
    color: rgb(27, 63, 98);
    margin-bottom: -5px;
}

h3 {
    font-size: 12px;
    color: rgb(84, 130, 175);
}

#box1, #box2, #box3 {
    display: inline-block;
    width: 306px;
    background: url(box_top.png) top left no-repeat;
    padding: 0px 18px;
    position: relative;
    top: -35px;
}

.border {
    display: inline-block;
    background: url(box_bottom.png) bottom left no-repeat;
    position: relative;
    top: 17px;
    vertical-align: top;
}

.background {
    display: inline-block;
    background: url(box_in.png) repeat-y;
}

.button {
    position: relative;
    left: -10px;
    width: 77px;
    height: 19px;
    line-height: 16px;
    background: url("button.png") no-repeat;
    font-size: 11px;
    color: rgb(255, 255, 255);
    text-align: center;
    margin: 20px 10px 0px;
}

a { color:white;}

ul {
    float:right;
    position:relative;
    top: -35px;
    left: -60px;
    list-style: none;
    padding:0;
    margin:0;
    height: 48px;
    line-height: 70px;
    background: url("menu_back.png") no-repeat;
}

ul a {
    color:  rgb(113, 136, 157);
    text-decoration: none;
    font-size: 12px;
    line-height: 45px;
    display:block;
}

ul li {
    background: url("menu_line.png") no-repeat;
    position: relative;
    float: right;
    margin: 7px 0px 0px;
    height: 40px;
}

li { 
    float: right;
    border-bottom-width: 0;
    padding: 0px 20px;
}

#content {
    position: relative;
    top: -35px;
    clear: both;
    width: 1005px;
    height: 247px;
    background: url("slider_back.png") no-repeat;
}

#content p {
    margin-left: 2em;
}

#border_left {
    background: url("menu_back_left.png") no-repeat;
    position: relative;
    right: 440px;
    top: -35px;
    height: 48px;
    width: 11px;
    float: right;
}

#border_right {
    background: url("menu_back_right.png")no-repeat;
    position: relative;
    right: -320px;
    top: -35px;
    height: 48px;
    width: 11px;
    float: right;
}

#empty {
    background: none;
}

如您所见，唯一有问题的行是 margin: 3em 7em 0em; 如果我可以使右边距值（7em）流动，问题就会解决！

4

1 回答 1

2

你想要的是让你的网页居中？如果你想居中，我建议使用：

margin: 0 auto; /*left and right margin are "automatic"*/

您可以使用它以任何分辨率使您的身体居中：

body {
    margin: 0 auto;
    width: 80%;
}

如果你把 100% 的内容有全宽，所以没有什么可以居中。如果你想居中另一个东西，你想要居中的盒子应该比他的父母有更小的宽度。

无论如何，使用 body 元素中的值来居中是不好的。

于 2013-02-23T16:20:42.523 回答