ベストアンサー

スタイルシートでデザイン

2005/07/06 18:34

現在スタイルシートを使ってホームページを作成中の者です。しかしそのデザインがうまくいかず困っております。文字が中央に打ってある長方形の赤枠があります。間２０PXくらいあけて平行にまた文字が中央に表記されてある枠を置きたいのですがうまくいきません。 marginとpaddingでpxを指定しているのですが両者の枠が平行にならず片方の枠が下の方に下がってしまいます。視覚化するとこんな感じにしたいのですが　　ーーーーーー　　　　　　　　　　ーーーーーー　　｜　映画　｜　　　　　　　　　　｜　小説　｜　　ーーーーーー　　　　　　　　　　ーーーーーーいつも　　ーーーーーー　　　　　　　　　　　｜　映画　｜　　　　ーーーーーー　　　　　　　　　　　　　　　　　　　　　　　　　　　　ーーーーーー　　　　　　　　　　　　　　　　　　　　　　　　　　　　｜　　　　｜　　　　　　　　　　　　　　　　　　ーーーーーーとこんな感じに片方の枠が下の方にずれてしまいます。指定の仕方に問題があると思うのですが、何分初心者なもんでよく分かりません。 marginは右枠４０px５５０px１５０px３０px 　　　　左枠１０px５５０px１５０px３０px にしています。上をそろえさえすれば両枠平行になるだろうと思っていたのですが全くなりません。ずれるばかりです。わかりにくい説明でふがいないですがどなたかお分かりの方おられればよろしくお願いします！

--w--
お礼率29% (35/117)

その他（プログラミング・開発）
回答数3
ありがとう数1

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

grape16
ベストアンサー率55% (52/93)

2005/07/08 00:02 回答No.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>

その他の回答 (2)

koutarou504
ベストアンサー率44% (182/407)

2005/07/07 02:11 回答No.2

まずはマージンの指定を短縮形から個々の指定に代えて見てみてはいかがでしょうか？ 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> これが検証時の記述です。今後の検証への参考に。