0

これは私が私の人生で作った最初のウェブサイトです、それであなたの助けは大いに感謝されます！私はまだhtmlとcssを学んでいます。私の最初のサイトは、ネイティブ解像度（1280x800）で構築したことを除いて、ほぼ完成しています。解像度を変更すると、要素がバラバラになります。これを補うために、bodyプロパティの右マージンの値を変更するだけで済みます。たとえば、現在は7emです。解像度1920x1200の中央に表示したい場合、値は27emにする必要があります。サイトラッパーと@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;
}

ご覧のとおり、問題のある行はマージンだけです。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 に答える