マンガでよめる痔のこと・薬のこと

現在スタイルシートを使ってホームページを作成中の者です。
しかしそのデザインがうまくいかず困っております。

文字が中央に打ってある長方形の赤枠があります。
間20PXくらいあけて平行にまた文字が中央に表記されてある枠を置きたいのですがうまくいきません。

marginとpaddingでpxを指定しているのですが両者の枠が平行にならず
片方の枠が下の方に下がってしまいます。

視覚化するとこんな感じにしたいのですが

  ーーーーーー          ーーーーーー
  | 映画 |          | 小説 |
  ーーーーーー          ーーーーーー

いつも

  ーーーーーー         
  | 映画 |  
  ーーーーーー          
                  ーーーーーー                            |    |
                  ーーーーーー

とこんな感じに片方の枠が下の方にずれてしまいます。
指定の仕方に問題があると思うのですが、
何分初心者なもんでよく分かりません。

marginは右枠40px550px150px30px
    左枠10px550px150px30px
にしています。
上をそろえさえすれば両枠平行になるだろうと思っていたのですが
全くなりません。ずれるばかりです。

わかりにくい説明でふがいないですが
どなたかお分かりの方おられればよろしくお願いします!

このQ&Aに関連する最新のQ&A

A 回答 (3件)

[映画]と[小説]の間が折り返されているのかも知れません。


[映画]と[小説]を折り返さずに表示できる領域を指定しておけばいいかも知れません。
下の例では<div class="menu">でこの領域の幅をwidth: 700px と十分大きく取っています。

<html>
<head>
<style>
div.menu { width: 700px; }
div.menu span.item {
display: inline-block;
border: solid 1px red;
padding: 4px;
width: 80px;
text-align: center;
}
/*          上  右  下  左  */
span#movie { margin: 10px 150px 30px 150px; }
span#novel { margin: 10px 50px 30px 150px; }
</style>
</head>
<body>
<div class="menu">
<span id="movie" class="item">映画</span>
<span id="novel" class="item">小説</span>
</div>
</body>
</html>
    • good
    • 0

まずはマージンの指定を短縮形から個々の指定に代えて見てみてはいかがでしょうか?



margin-top, margin-right, margin-bottom, margin-left と明示的にどこをいくつにと・・・。
意外と意図と違う指定をされているのではないでしょうか?

なにせ、右マージン 550px だと 両方合わせて 1100px ・・・。
1024 * 768 でも入りきりませんが・・・。


まずはそこからかと。
その後、HTMLタグの選択とか CSSでの表示位置指定等々の検討など考えれば良いと思います。

尚、今回の検証方法は、
左右に表示したい要素の外側にSPAN等要素を用意して
背景色を指定する事により
その内側の「右枠」「左枠」がどこまで領域を保持しているか検証した事により確認しました。
<span style="background-color:#ffffcc;">
<span style="border:solid; margin:10px 550px 150px 30px;">aaa</span>
<span style="border:solid; margin:40px 550px 150px 30px;">bbb</span>
</span>
これが検証時の記述です。
今後の検証への参考に。
    • good
    • 0

私なら「表」を使って解決します。


表のセルの中には、別の表を置けますので、このテを使って何も記入しないセルをmarginやpaddingの代わりに使います。最後に枠を非表示にします。
Visualでできるのがいいところですね。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング