HTML&CSS初心者です。
下記のソース様に、DIVで一つにまとめたBOXを縦に並べたいのですが、
「見出し002」の上のマージンがうまく取れずに困っています。
.box内のphoto00.jpgをフロートにしている為、フロートが悪さをしている事を考え、
「見出し002」の上のDIV内に<br style="clear: both;" />を入れると、余白が生まれるのですが、
MacのSafariとFirefoxでは、余白の差が出てしまいます。(Safariの方が余白が大きい)
<br style="clear: both;" />を入れないと、上のマージンはほぼ消えてしまい、わずかにFirefoxの方では余白が生まれます。
ちなみにこの現象は「ここにテキストが入ります。」の行数を減らすと解決するのですが、
下記のソースでも、photo00.jpgの高さをはみ出す行数ではない為、この<div class="box">に
変な膨らみを持たせたくありません。
どなたか解決法を教えて下さい。よろしくお願い致します。
【HTML】
<div id="main">
<div class="mds01"><h3><em>見出し001</em></h3></div>
<div class="box">
<img src="img/photo00.jpg" width="155" height="108">
<h5>小見出し</h5>
<p class="txt">ここにテキストが入ります。<br><br>
ここにテキストが入ります。<br>
ここにテキストが入ります。</p>
</div>
<div class="box">
<img src="img/photo00.jpg" width="155" height="108">
<h5>小見出し</h5>
<p class="txt">ここにテキストが入ります。<br><br>
ここにテキストが入ります。<br>
ここにテキストが入ります。</p><br style="clear: both;" />
</div>
<div class="mds02"><h3><em>見出し002</em></h3></div>
<div class="box">
<img src="img/photo00.jpg" width="155" height="108">
<h5>小見出し</h5>
<p class="txt">ここにテキストが入ります。<br><br>
ここにテキストが入ります。<br>
ここにテキストが入ります。</p>
</div>
</div>
【CSS】
/*メイン大枠部分*/
#main {
margin: 0px;
padding: 0px;
width: 627px;
float: right;
background: #FFFFFF;
height: auto;
}
/*各見出し*/
.mds01 h3 {
background: url(img/mmds01.gif) no-repeat;
margin: 25px 0px 15px;
padding: 0px;
height: 20px;
width: 587px;
font-size: 9px;
color: #FFFFFF;
clear: left;
float: none;
}
.mds02 h3 {
background: url(img/mmds02.gif) no-repeat;
margin: 25px 0px 15px;
padding: 0px;
height: 20px;
width: 587px;
font-size: 9px;
color: #FFFFFF;
clear: left;
float: none;
}
/*ボックス*/
.box {
margin: 0px;
padding: 0px;
height: auto;
width: 587px;
clear: left;
}
/*ボックス内・画像とテキスト*/
#main .box img {
float: left;
padding-right: 10px;
}
#main .box h5 {
font: bold 14px "MS Pゴシック", Osaka;
color: #022962;
margin: 0px 0px 10px;
padding: 0px;
}
.txt {
font: normal 13px/16px "MS Pゴシック", Osaka;
color: #333333;
margin: 0px;
padding: 0px;
}
em {
visibility: hidden;
}
No.3ベストアンサー
- 回答日時:
ちょっと整理して、ブロック要素に赤いborderを付けました。
ブラウザで見ると、赤い枠で囲まれたブロック要素は指定どおりになっているかと思います。
imgがboxからはみ出ていますね。なぜかというのは参考URLを見るとわかります。
この状態だと、<div class="box">の高さを決めているのは
その中の<h5>と<p>の合計の高さです。ブラウザのデフォルトスタイルは差があるので、それで高さが変っているのではないでしょうか。
<!-- htmlここから -->
<div id="main">
<h3 id="mds01"><em>見出し001</em></h3>
<div class="box">
<img src="img/photo00.jpg" width="155" height="108">
<h5>小見出し</h5>
<p class="txt">ここにテキストが入ります。<br><br>
ここにテキストが入ります。<br>
ここにテキストが入ります。</p>
</div>
<div class="box">
<img src="img/photo00.jpg" width="155" height="108">
<h5>小見出し</h5>
<p class="txt">ここにテキストが入ります。<br><br>
ここにテキストが入ります。<br>
ここにテキストが入ります。</p>
</div>
<h3 id="mds01"><em>見出し002</em></h3>
<div class="box">
<img src="img/photo00.jpg" width="155" height="108">
<h5>小見出し</h5>
<p class="txt">ここにテキストが入ります。<br><br>
ここにテキストが入ります。<br>
ここにテキストが入ります。</p>
</div>
</div>
<!-- htmlここまで -->
/*メイン大枠部分*/
#main {
margin: 0px;
padding: 0px;
width: 627px;
float: right;
border: 1px solid red;
}
/*各見出し*/
#mds01 {
background: url(img/mmds01.gif) no-repeat;
margin: 25px 0px 15px;
padding: 0px;
height: 20px;
width: 587px;
font-size: 9px;
border: 1px solid red;
}
/*ボックス*/
#main .box {
width: 587px;
clear: left;
border: 1px solid red;
}
/*ボックス内・画像とテキスト*/
#main .box img {
float: left;
padding-right: 10px;
}
#main .box h5 {
font: bold 14px "MS Pゴシック", Osaka;
color: #022962;
margin: 0px 0px 10px;
padding: 0px;
border: 1px solid red;
}
#main .box p.txt {
font: normal 13px/16px "MS Pゴシック", Osaka;
color: #333333;
margin: 0px;
padding: 0px;
}
参考URL:http://www.techdego.com/2007/01/floatcssclearfix …
こちらの方法で解決できました!
ありがとうございます。
ソースを全て書いてくれていた為、とてもわかりやすかったです。
助かりました。本当にありがとうございます。
No.4
- 回答日時:
No.1です。
少し時間ができたのでmacで検証してみました。floatの多用が原因で、IEのバグ?でmarginがうまく機能していないようです。(WindowsでもIE以外のブラウザではずれが生じていませんか?)
解決策として、marginで余白を取っている部分を、
なるべくpaddingに変更するとかなりの部分で差異が解消されると思います。
(borderを使っている場合など、どうしてもmarginで余白を取らなければならない場合、条件付コメントやハックなどでIE6だけにスタイルを適用する必要がありそうです)
必要最小限、修正したほうがよさそうな部分をまとめてみました。
(1)marginでの余白を0にし、paddingで余白を調整する。
(2)余白をすべて一度クリアにするため、
以下をスタイルシートに追加する
*{
margin:0;
padding:0;
}
(3)imgをpタグ(クラス付)やh4、h5タグなどブロック要素で囲い、
スタイルの「#main .box img」を、
「#main .box p.クラス(#main .box h4)」に変更する。
以上の3点です。
No.2
- 回答日時:
まず最初に聞きたいのですが、ブラウザスタイルの初期化って行っていますか?
今書いて頂いたCSSが全てではないと思うので確認させて下さい。
ちなみに自分で試した所。
h3{
padding:0; margin:0;
}
をはじめに指定し、
marginではなくpaddingで上下の幅を指定したら、IE7、FF2.0では同じ表示になりました。
それ以外はためしてないのですが、たぶん大丈夫だと思います。
もし駄目なら対処法として
.boxにclearfixを指定する。
<h5>小見出し</h5>
<p class="txt">ここにテキストが入ります。<br><br>
ここにテキストが入ります。<br>
ここにテキストが入ります。</p>
を<div>で囲い、そのdivにfloat: right;をかけてみて下さい。
clearfixについてわからなかった場合は、
http://www.css-lecture.com/log/css/013.html
この回答への補足
アドバイスありがとうございます。
ブラウザスタイルの初期化とは、CSS内に下記のコードを書き込む事でよろしいでしょうか?
* {
margin: 0px;
padding: 0px;
border: 0px;
font-size: 100%;
font-style: normal:
}
今回、アドバイス頂いた方法でも、MacのSafariではうまく表示されませんでした。
原因をもう少し探ってみようと思いますので、その時に、別トピにて改めて質問をさせて頂きます。
clearfixのアドバイスもありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
CSSでボックスのheightが0になる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
CSSで3分割した背景画像を配置...
-
Media Queries 4 で 非推奨とな...
-
HTMLのiframeの入れ子について
-
中点「・」の改行について
-
div内に外部のurlを表示させたい
-
CSS上での計算を行うためのルー...
-
W3Cのソースコードの検証サービ...
-
画像リンクの下に文字を付けた...
-
border-style:solidで文字がずれる
-
テキストボックスの高さを可変...
-
CSSと<dl><dd>で間隔をあけて1...
-
<li>の黒い点を消したい。
-
【CSS】ヘッダーの高さが不明の...
-
CSSでborderの指定を解除する記...
-
CSSだけで、テーブルにスクロー...
-
divで囲まれたpaddingの指定を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
<div>と<div>の間の10px程の...
-
CSSがなぜかfont-sizeだけ効か...
-
divで囲まれたpaddingの指定を...
-
表示倍率を変えるとレイアウト...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
cssで中央寄せ
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
CSSで背景画像を一番下にもって...
-
【CSS】ヘッダーの高さが不明の...
-
初心者html・CSS ウィンドウを...
-
footer を横幅いっぱいに広げる...
-
CSSで指定した背景画像にリンク...
-
div領域をウインドウサイズに合...
-
W3Cのソースコードの検証サービ...
おすすめ情報