
現在スタイルシートを使ってホームページを作成中の者です。
しかしそのデザインがうまくいかず困っております。
文字が中央に打ってある長方形の赤枠があります。
間20PXくらいあけて平行にまた文字が中央に表記されてある枠を置きたいのですがうまくいきません。
marginとpaddingでpxを指定しているのですが両者の枠が平行にならず
片方の枠が下の方に下がってしまいます。
視覚化するとこんな感じにしたいのですが
ーーーーーー ーーーーーー
| 映画 | | 小説 |
ーーーーーー ーーーーーー
いつも
ーーーーーー
| 映画 |
ーーーーーー
ーーーーーー | |
ーーーーーー
とこんな感じに片方の枠が下の方にずれてしまいます。
指定の仕方に問題があると思うのですが、
何分初心者なもんでよく分かりません。
marginは右枠40px550px150px30px
左枠10px550px150px30px
にしています。
上をそろえさえすれば両枠平行になるだろうと思っていたのですが
全くなりません。ずれるばかりです。
わかりにくい説明でふがいないですが
どなたかお分かりの方おられればよろしくお願いします!
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>
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>
これが検証時の記述です。
今後の検証への参考に。
No.1
- 回答日時:
私なら「表」を使って解決します。
表のセルの中には、別の表を置けますので、このテを使って何も記入しないセルをmarginやpaddingの代わりに使います。最後に枠を非表示にします。
Visualでできるのがいいところですね。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
CSSの角丸での質問です。 今、C...
-
widthやheightの数値に単位(px...
-
Firefoxで表示できるgifファイ...
-
<div>と<div>の間の10px程の...
-
CSSでの段組で、下辺を揃える方法
-
指定したborderの一部が表示さ...
-
マージンの基点について
-
div要素の左寄せ、中央寄せ、右...
-
CSSがなぜかfont-sizeだけ効か...
-
FireFoxでToolti...
-
table周辺の隙間をなくしたい。
-
CSSでの文字位置の上下センタリ...
-
liタグの中に<p>タグやら<dl>を...
-
箇条書きがずれて表示されてし...
-
ワードにコピペ、画像が表示さ...
-
HP 画像の一部にリンクでその...
-
inline-blockをネストすると表...
-
3カラムレイアウトで「常に残り...
-
【ヒトの神秘】美男美女から何...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
【CSS】ヘッダーの高さが不明の...
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
画像イメージの上下左右、欲し...
-
余分な縦スクロールバーが出て...
-
ページを拡大縮小でborderが消...
-
CSSがなぜかfont-sizeだけ効か...
-
表示倍率を変えるとレイアウト...
-
スクロールボックスを中央に配...
-
cssで文字サイズ指定、ptでもpx...
-
投稿フォームの整列
-
入力フォームとセレクトボック...
-
<div>と<div>の間の10px程の...
-
W3Cのソースコードの検証サービ...
-
CSSで「overflow:scroll」をしてい
-
ネガティブマージン
-
divで囲まれたpaddingの指定を...
-
FC2ショッピングカート 写真の...
おすすめ情報