0

私がこれまでに行ったこと: http://goo.gl/sDhLA

私が達成すべきこと: http://goo.gl/tqo7m

ここでhtml/cssの初心者、助けてくれてありがとう。

乾杯。

アップデート

私の悪い。変更できないコードがいくつかあるため、実際にはコードへの大幅な編集を最小限に抑えて結果を目指していることを忘れていました。（私の課題で規定されています）。

一方で、より多くのことを学ぶことに害はありません。line-height、box-sizing などの新しいコマンドについて詳しく学びました。border-box は非常に興味深いものです。

しかし、負のパディングが発生しないのは非常に残念でした。左右の端のズレが解消されたのでは？:O

4

3 に答える 3

0

コンテナの幅を減らす (またはコンテンツの幅を増やす) 必要があるようです。

ただし、ここにコードを投稿する必要があります。そうして初めて、この回答が正しいことを確認できます。

あなたのコードは混乱しています。これが私が作ったものです（cm印刷時の制御が向上するため、単位を入れています。単位を変更できます）

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>Revisions Bookstore and Cafe</title>

    <style type="text/css">

        @font-face {
            font-family: 'ChunkFiveRegular';
            src:         url('Chunkfive-webfont.eot');
            src:         local('?'), url('Chunkfive-webfont.woff') format('woff'), url('Chunkfive-webfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#webfontb5K2fJwj') format('svg');
            font-weight: normal;
            font-style:  normal;
        }
        * {
            padding: 0;
            margin: 0;
        }

        h1 {
            border:           0.1cm solid rgb(65, 105, 225);
            font-family:      ChunkFiveRegular,serif;
            background-color: rgb(189, 204, 212);
            font-size:        2em;
        }

        #card div {
            font-family:      ChunkFiveRegular,serif;
        }

        #card {
            font-family:  Verdana,serif;
            width: 15cm;
            padding: 0.2cm;
            border: 0.07cm black solid;
            margin: 1cm auto;
        }

        #card div p {
            padding: 0.2cm 0.2cm 0.2cm 0.4cm;
        }

        #card > p {
            background: black;
            color: white;
            text-align: right;
            padding: 0.1cm;
        }

    </style>

</head>

<body>
<div id="card">
    <h1>Revisions Bookstore and Cafe</h1>

    <div>
        <p class="maintext">Custom brewed coffee and hand-selected books.</p>

        <p class="maintext">Special orders are our specialty.</p>
    </div>

    <p>412 N. 25th St.<br/>Richmond, VA 23223<br/>(804) 555-2565</p>
</div>

</body>

</html>

​
于 2012-04-29T10:58:22.523 に答える
0

あなたが望んでいる結果を達成することを検討したので、基本的に手動でオリジナルと同じ幅に設定しましたが、いくつかの変更 (主に余白と幅を設定するだけ) を加えながら、それらを em 形式に保ちます。

しかし、新しいcssは次のとおりです。

  @font-face {
            font-family: 'ChunkFiveRegular';
            src: url('Chunkfive-webfont.eot');
            src: local('?'), url('Chunkfive-webfont.woff')format('woff'),url('Chunkfivewebfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#webfontb5K2fJwj')format('svg');
            font-weight: normal;
            font-style: normal;
            }

  h1 {
    text-align: center;

    border: 0.1em solid rgb(65,105,225);
    margin-top: 8px;
    margin-left:8px;
    margin-right:8px;
    padding: 0.25em;

    font-family: ChunkFiveRegular;
    background-color: rgb(189,204,212);
    font-weight: normal;
    font-size: 2em;
    }

  #contact {
    text-align: right;

    margin: 0 8px 8px;
    padding: 1em;
    font-family: ChunkFiveRegular;
    color: white;
    background-color: #212100;
    margin-bottom: 8px;
    }

  #box {

    margin: 0 8px;
    padding: 0.5em;
    }

  .maintext {
    text-align: left;
    }

  #body {
  font-family: Verdana;
  border: 0.07cm solid black;
  margin: 2.5em;
  margin-left: 23em;
  margin-right: 4em;
  width: 33.4em;

  }

</style>
于 2012-04-29T11:33:16.913 に答える
0

あなたの jsfiddle を更新しました: http://jsfiddle.net/BramVanroy/LGFLB/1/

ヒント: ID 'body' (または HTML タグを ID として使用しないでください)。混乱します！を使用するだけで、簡単にボディをターゲットにすることができますbody。

私はあなたが提案した HTML 構造を保持しています。CSSをかなり変更しました。特に幅、余白、サイズ。また、注意してくださいbox-sizing！

body {
  font-family: Verdana;
  border: 0.07cm solid black;
  margin: 2.5em;
  margin-left: 17em;
  margin-right: 4em;
  width: 45em;
}

h1 {
  text-align: center;
  border: 0.1em solid rgb(65,105,225);
  width: 96%;
  margin: 0.2em auto;
  padding: 0.25em;
  font-family: Rockwell;
    font-weight: bold;
    letter-spacing: 2px;
  background-color: rgb(189,204,212);
  font-weight: normal;
  font-size: 2.5em;

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#contact {
  text-align: right;
  width: 96%;
  margin: 1em auto 0;
  padding: 0.25em;
  font-family: Rockwell;
  color: white;
  background-color: #212100;
  margin-bottom: 8px;
}

#box {
  width: 92%;
  margin: 0 auto;
  padding: 0.5em;
  line-height: 2;
}

.maintext {
  text-align: left;
}

</p>

于 2012-04-29T11:35:41.563 に答える