- 締切済み
画像とテキストを並べたdivを段重ねにできますか？
partitaの回答
- partita
- ベストアンサー率29% (125/427)
まず間違っているのは、id="wrapper"が２箇所にあること。 それから、 ＞そのテキストの下にはマージンが取られてはいるのです。 では、あなたの疑問「画像と画像の間がつまっている」は解決しています。 それとも img {vertical-align:text-top;} こうすることかな？ あと、参考までに .feature { clear:both; padding-top:20px; margin-bottom:30px; } は、 .feature { clear:both; margin-top:20px; padding-bottom:30px; } のほうが、IE対策には良。 さらに、質問が微妙にカテ違いでは？
関連するQ&A
- IE6だとpaddingで指定したぶんだけ消えてしまう。。。
いま、CSSでサイトつくっているのですが、IE6だけpaddingで指定した分だけ、画像（背景）が足りません。 <h2>と<p>をくっつけて一枚の背景画像を作ろうとしています。 解決するには宣言を変えるか、CSSハック？をする、もしは<div>を入れ子するしかないのでしょうか？ また、<div>を入れ子にするのはよくないと教えていただいたのですが、どれくらいまでが許容範囲でしょうか？ いつもwrapperで囲っているので、大枠のレイアウトを作るだけでもすでに１つ入れ子状態なんですが・・・ <h2>あああああああああああああああああ</h2> <p>あああああああああああああああ </p> .h2 { background-image: url(img/flow6_01.gif); height: 37px; width: 650px; text-indent: -9999px; float: left; margin-bottom: 0px; } #p { width: 625px; height: 120px; float: right; background-image: url(img/flow1_02.gif); margin: 0px; margin-bottom: 10px; background-repeat: no-repeat; padding-left: 25px; }
- ベストアンサー
- HTML
- CSSで３分割した背景画像を配置したいけど隙間が出来てしまう？
初めて質問させていただきます。 当方はCSS初心者です。 画像（グラデーションのある角丸四角枠）を３分割し、それを背景画像として配置したいのですが、WinIE6などで表示するとどうしても画像に隙間ができてしまうのです。 IE7、FireFoxでは無事に希望通りに表示されています。 【HTML】 <div id="wrapper"> <div class="top"></div> <div class="middle"></div> <div class="bottom"></div> </div> 【CSS】 #wrapper{ width:680px; height:auto; border:0 auto; padding:0; } .top{ width:650px; height:10px; background-image:url(img/01.gif); background-position:top center; background-repeat:no-repeat; margin:0 auto; padding:0; } .middle{ width:650px; background-image:url(img/02.gif); background-repeat:repeat-y; margin:0 auto; padding:0; } .bottom{ width:650px; height:13px; background-image:url(img/03.gif); background-repeat:no-repeat; background-position:bottom center; margin:0 auto; padding:0px; } といった感じで、ざくっとwrapperの中に背景画像をセンターで敷きたいのです。 .topと.middleの間には隙間は出来ないのですが、.middleと.bottomの間に数pxの隙間が出来てしまうのです。 制作環境はDreamweaver8、MAC/OSXですが、動作確認はWin/XPでも行っています。 何卒ご教示下さい。
- 締切済み
- HTML
- FireFoxで見るとdiv間に隙間が・・・
divを３つ使い、CSSで指定した背景画像によって一つのボックスを作っています。 ＩＥ６で見たときは異常ないのですが、FireFoxで見ると、 それぞれ隙間が開いてしまい、背景画像が途切れて見えます。 同じような使い方をしている箇所にすべて同じ事が起きています。 Firefoxではマージン0の状態でdivの間に隙間が出来てしまうのでしょうか？ 直す方法があればご指導よろしくお願い致します＞＜ <div id="medi-top"> </div> <div id="media"> <p>何行かにわたり、画像や文章が入力されています</p> </div> <div id="medi-bottom"></div> #medi-top { background-image: url(img/media_01.jpg); background-repeat: no-repeat; height: 50px; width: 680px; margin-top: auto; margin-right: auto; margin-bottom: 0px; margin-left: auto; line-height: 0; } #media { width: 600px; background-image: url(img/media_03.jpg); background-repeat: repeat-y; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-right: 40px; padding-left: 40px; } #medi-bottom { background-image: url(img/media_05.jpg); background-repeat: no-repeat; height: 35px; width: 680px; margin-top: 0px; margin-right: auto; margin-bottom: 50px; margin-left: auto; } 本や検索などで同じようなものを探して対処してみたのですが、 直らなかったため質問させていただきます。 よろしくお願い致します。
- ベストアンサー
- CSS
- <div>この余白は・・・
<div>で作ったボックスの中に、さらに<div>のボックスを二つ（box、box2）並べたいのですが、float:leftでboxを左に寄せると、次に回り込んで表示されるbox2との間にかなりの余白があります。 CSSでbox、box2にmarginは指定していないのですが、この余白は何なんでしょうか？ また、このbox、box2をある程度間に余白を持たせた上でセンタリングしたいのですが、これもなぜかうまくいきません・・・。 ▼HTML <div class="out"> <div class="title"> <img src="img/title.jpg" width="700" height="75" border="0"> </div> <div class="main"> <img src="img/main.jpg" width="700" height="375" border="0"> </div> <div class="menu"> <img src="img/home_a.jpg" width="100" height="35" border="0"> <img src="img/first.jpg" width="100" height="35" border="0"> <img src="img/info.jpg" width="100" height="35" border="0"> <img src="img/order.jpg" width="100" height="35" border="0"> <img src="img/support.jpg" width="100" height="35" border="0"> <img src="img/link.jpg" width="100" height="35" border="0"> <img src="img/question.jpg" width="100" height="35" border="0"> </div> <div class="area"> <div class="box"> <h5>AAAAAAAAA</h5> <img src="img/kari.gif" width="250" height="100" border="0"> </div> <div class="box2"> <h5>BBBBBBBBB</h5> <img src="img/kari2.gif" width="250" height="100" border="0"> </div> </div> </div> ▼CSS div.out{ width:700px; background-color:#ffffff; } div.main{ border-style:solid none solid none; border-width:10px; border-color:#666666; } div.menu{ margin-bottom:50px; } div.area{ text-align:center; padding:0.7em; border:solid; border-color:red; } div.box{ float:left; width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } div.box2{ width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } h5{ margin-bottom:0px; padding:0.5em; } どなたか知恵をお貸しください。よろしくお願いいたします。
- ベストアンサー
- HTML
- CSSでDIVで挟んでいるのに背景色が出ない？
CSSと（X)HTMLでページを作っています。角丸なページにしたいため、 /* ---------- 角丸画像の上辺 ---------- */ #main_contents_header { width: 800px; height:20px; background:url(./top.png) no-repeat top; margin: 10px auto 0px; padding: 0; text-align: center; } /* ---------- 上辺と下辺の間のメイン部分 ---------- */ #main_contents { background:url(./bg.png); width: 800px; margin: 0 auto; padding: 0; text-align: center; } /* ---------- 角丸画像の下辺 ---------- */ #main_contents_bottom { width: 800px; height:20px; background:url(./bottom.png) no-repeat top; margin: 0 auto; padding: 0; text-align: center; } というCSSを作り、 HTMLは <div id="main_contents_top"></div> <div id="main_contents"> ここにいろいろなコンテンツを置いていく </div> <div id="main_contents_bottom"></div> という書き方にしているのですが、<div id="main_contents">の背景画像が正しく出ず、地の色が見えてしまうのです。試しに<div id="main_contents">へpadding-bottom:300pxというような指定を加えると、正しく背景画像が出ました。 <div id="main_contents"> ここにいろいろなコンテンツを置いていく </div> という書き方ではダメなのでしょうか・・・？ 確認はFirefoxとSafariでやっています。
- ベストアンサー
- HTML
- 角丸にしたDiv内の画像の角がはみ出してしまう
よろしくお願いします。 参考書片手にCSSを勉強しています。 品物の画像をスマホで見られるページを作っているのですが、 角丸にしたDiv内の画像の角がはみ出してしまい、対処法がわからず悩んでいます。 どのような方法がありますでしょうか。 初歩的な質問で恐れ入りますがご教授お願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>じっけんじっけん</title> <style type="text/css"> <!-- body, p, h1, h2, h3, img, table, div, ul, li { margin: 0px; padding: 0px; font-family: Helvetica, sans-serif; } #wrap { background-color: #EEEEEE; height: auto; width: 100%; margin: 0px; padding-top: 100px; padding-right: 0px; padding-bottom: 50px; padding-left: 0px; } .title { width: 100%; margin-right: auto; margin-left: auto; } .main { background-color: #FFFFFF; width: 96%; margin-right: auto; margin-left: auto; box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2); box-shadow:0px 0px 2px #555; margin-bottom: 100px; border-radius: 20px; } p.resizeimage img { width: 100%; } .itemnum { color: #7D7D7D; font-size: 40px; padding: 30px; border-bottom-width: thin; border-bottom-color: #C0C0C0; line-height: 50px; float: left; } .price { color: #7D7D7D; font-size: 52px; padding: 30px; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #C0C0C0; line-height: 60px; text-align: right; } .itemname { color: #7D7D7D; font-size: 40px; padding: 30px; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #C0C0C0; line-height: 54px; font-weight: bold; } .detail { color: #7D7D7D; font-size: 40px; padding: 30px; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #C0C0C0; line-height: 48px; } --> </style> </head> <body> <div id="wrap"> <div class="main"> <p class="resizeimage"> <img src="p/a.jpg"> </p> <p class="itemnum">32×13×22cm</p> <p class="price">￥10,000</p> <p class="itemname">アイテム</p> <p class="itemname">Ａタイプ</p> </div> <div class="main"> <p class="resizeimage"> <img src="p/b.jpg"> </p> <p class="itemnum">35×14×24cm</p> <p class="price">￥10,000</p> <p class="itemname">アイテム</p> <p class="itemname">Ｂタイプ</p> </div> </div> </body> </html>
- ベストアンサー
- CSS
- divで囲まれたpaddingの指定を特定のタグだけ解除（margin:0px）する方法
タイトルに上手く書けなかったのですが、divでpaddingを指定して余白を作っています。 そもそもはmargin leftでまかないたかったのですが、ほとんどはfloat指定しているため、IE6で倍に広がりなくなくpadding指定しています。 ただ、中身のテキストや画像はいいのですが、タイトルにあたり<h2>タグだけをどうしても左はしに寄せたいと悪戦苦闘しています。 なんとかいい方法はないものでしょうか？ <div class="center-box2"> <h2>あああ</h2> <p id="top-text">いいい</p></p> <h3 class="caution-title1">あああ</h3> <img src="img/aaa.jpg" width="145" height="105" class="caution-img"> <p>いいい</p> </div> <h2>にはCSSで背景画像を使用し、テキストはindentで-9999を指定しています。 <h3>や<img>のpaddingの余白は指定のままで、タイトルの<h3>だけを何とかしたいと考えています。 どうかよろしくお願致します。
- ベストアンサー
- HTML
- divの入れ子が上手くいきません。
.line { background-image: url(../img/line.gif); background-repeat: no-repeat; background-position: left bottom; display: block; padding: 0px; clear: both; width: 600px; height:auto; margin: 0px; } .left{ width:210px; height:90px; float:left; text-align:center; padding:10px 5px 10px 0px;} .right{ width:360px; height:90px; float:left; padding:10px;} <div class="line"> <div class="left">あああ</div> <div class="right">いいい</div> </div> 上記のようにlineでleftとrightを内包したいのですが、IEでは表示されるのですが、fox・safariで確認すると画像が消えてしまいます。 どうもdivで括っているせいかline内に文字が入っていないと認識されているようで、ためしに適当な数字を入れてやると認識されました。 また、lineのheightをpx指定してやると表示されるのですが、lineは使いまわしたいクラスなので、縦を固定することができません。 どうしたら解決しますか？
- ベストアンサー
- HTML
- 外側のdivの高さを入れ子のdivの高さに自動的に合わせたい
外側のdivの高さを入れ子のdivの高さに自動的に合わせたい 添付画像のようなコンテンツを作成しています。 外側のdiv(contents_box）内にcontents_imgとcontents_textのdivを配置しています。 このcontents_imgとcontents_textの高さに合わせて外側のcontents_boxも自動的に変動させたいのですが、どのようにしたら良いのでしょう？ 高さをautoですとただの棒のようになってしまい、ダメでした。 どうぞよろしくお願い致します。 xhtml <div id="contents_box"> <div id="contents_img">ここに画像</div> <div id="contents_text"> ここにテキスト</div> </div> css #contents_box { height: auto; width: 805px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #333; } #contents_img { height: auto; width: 300px; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 0px; float: left; } #contents_text { height: auto; width: 485px; margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 10px; float: right; text-align: justify; }
- ベストアンサー
- HTML
- css テキストの上下を中央位置に配置するには
<div class="aaa"><img src="images/bbb.gif" width="40" height="40"/> ここのテキスト</div> ここでの class="aaa"ではマージンとheight="40" を指定しているだけです。 こうすると、挿入している画像の下付きのようにテキスト表示されてしまいます。 指定したheightの範囲内で、上下位置でのセンタリングをする方法はありますか？ それとも、テキストに違うclassを指定して、paddingで調整するしか方法はないですか？
- ベストアンサー
- HTML
お礼
idはすみません凡ミスしました。 ちょっとうまく質問できませんでしたので、再度質問しなおします。