- 締切済み
MacIEで回り込みを指定したはずのテキストが画像へかかってしまう
制作環境：WinXP,Win2k IE FireFox 動作環境：MacOS9 IE XHTML+CSSにてレイアウトを行っています Windows のIE,FireFoxと Mac の Safari,FireFoxでは正常に表示されますが MacIEのみ思い通りに行かない状況です 現在floatによるテキストの回りこみを行っているのですが 構成として画像の左側にテキストを回り込ませる形を取っています テキストの中には複数のサブタイトルが入っているのですが このサブタイトル部分に何か起きているようで どうしてもサブタイトル部分が画像へかかってしまいます widthを指定しても背景色を透明にしても防げません どのようにすればこの画像へかかることを防げるでしょうか？ 恐れ入りますがよろしくお願いいたします ソースは下記のとおりです .subtitle { width: 345px; font-size: 1em; font-weight: bold; color: #ff9933; background-color: transparent; margin: 0 0 0 0; border: 1px solid #999999; } .text { text-indent: 1em; line-height: 1.5em; color: #000000; background-color: transparent; margin: 0 0 15px 0; } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ～略～ <div class="No001"> <p class="subtitle">記事サブタイトル 橙</p> <div class="imgfloat001"> <img src="img/001-hoge.jpg" alt="写真" title="写真" width="300" height="400" /> <p>写真キャプション写真キャプション写真キャプション写真キャプション</p> </div> <p class="text"> テキストテキストテキストテキストテキストテキストテキスト </p> <p class="subtitle">記事サブタイトル 橙</p> <p class="text"> テキストテキストテキストテキストテキストテキストテキスト </p> </div> ～略～
- yuki_405
- お礼率100% (10/10)
- その他([技術者向] コンピューター)
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
Fx は固有名詞だからスペルに注意したほうがいいみたいです。 http://www.mozilla-japan.org/support/firefox/faq#spell-abbreviate 問題の件に関してはまだ何も確認していませんが、float:left; がどこにあるのかわかりません。 それと、Mac IE は CSS の float プロパティに一部非対応ですので、 レイアウトが正しくても正常に表示されない可能性があります。
関連するQ&A
- cssの指定の横幅よりテキストがはみ出てしまう
cssの指定の横幅よりテキストがはみ出てしまう 下記のとおり指定したのですが、winIE6.0だとwidthに収まるのに、FirefoxやNetscape 7.0 だと外にはみ出てしまい、横幅内に改行してくれません。 すみませんが、教えて下さい。 tate.css--------------------- #question { margin: 10px; padding: 3px; width: 560px; } #question dl{ margin: 10px; } #question dt{ color: #90B77F; font: 0.8em "MS ゴシック", Osaka, sans-serif; } #question dd{ font: 0.8em "MS ゴシック", Osaka, sans-serif; margin-left: 30px; } #question p { margin-bottom: 1em; font: 0.8em "MS ゴシック", Osaka, sans-serif; } --------------------------------- test.htm--------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>試し</title> <link href="tate.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="question"> <dl> <dt>質問：○○○○○○○○○○○○○○○○○○○○</dt> <dd>回答：○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○</dd> </dl> </div> </body> </html>
- ベストアンサー
- HTML
- 横に並んだ画像の固まりをセンター
下記CSSでキャプション付き画像を横向きに並べて配置したのですが 横に並んだ画像の固まりをセンターにもっていくCSSがわかりません どなたか知りませんか？ <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> <!-- div.imagebox { border: 1px dashed #0000cc; /* 1.枠線 */ background-color: #eeeeff; /* 2.背景色 */ } p.image, p.caption { text-align: center; /* 3.中央寄せ */ margin: 0px; /* 4.余白・間隔 */ } p.caption { font-size: 80%; /* 5.文字サイズ */ color: darkblue; /* 6.文字色 */ } div.imagebox { border: 1px dashed #0000cc; /* 枠線 */ background-color: #eeeeff; /* 背景色 */ width: 140px; /* 横幅 */ float: left; /* 左に配置 */ margin: 5px; /* 周囲の余白 */ } .imagebox_a { display: block; margin-left: auto; margin-right: auto; } --> </style> </head> <body> <div class="imagebox_a"> <div class="imagebox"> <p class="image"><img src="./photo.jpg" width="140" height="95" alt="海の写真"></p> <p class="caption">キャプションですよ</p> </div> <div class="imagebox"> <p class="image"><img src="./photo.jpg" width="140" height="95" alt="海の写真"></p> <p class="caption">キャプションですよ</p> </div> <div class="imagebox"> <p class="image"><img src="./photo.jpg" width="140" height="95" alt="海の写真"></p> <p class="caption">キャプションですよ</p> </div> <div class="imagebox"> <p class="image"><img src="./photo.jpg" width="140" height="95" alt="海の写真"></p> <p class="caption">キャプションですよ</p> </div> </div> </body> </html>
- ベストアンサー
- CSS
- テキストの段組み
テキストを2段で表示させ、全体を1pxの線で囲みたいと考えています。 【CSS】 .width_border{ width:300px; border:1px solid #222; } .width50{ width:50%; float:left; } 【HTML】 <div class="width_border"> <p class="width50"> 左のテキスト </p> <p class="width50"> 右のテキスト </p> </div> としていますが、IEでは全体に1pxの枠がつけられますが、FirefoxやOperaではdivの先頭の部分だけ線がつき、全体に囲うことができません。 どうすればいいかよいか御教授お願いいたします。
- ベストアンサー
- HTML
- CSSのfilterでテキストまで透明化される
CSSのfilterプロパティで背景色だけでなくテキストまで透明化されてしまいます。 以下のように親divの中に子divを造り、その子divにテキストを入力し、 親divに設定した背景画像が子divに透き通って見えるように 子divにfilterプロパティを設定しました。 子divの背景色（白）が透明化され親divの背景画像が見えるようになったのはいいのですが、 背景色（白）だけでなくテキスト文字まで透明化されてしまいます。 テキスト文字だけ透明化されないように設定したいです。 ブラウザチェック：windows IE 8 です。 ******************************************************* 【XHTML】 <div class="test1"><div class="test2">テキスト</div></div> 【ＣＳＳ】 .test1{ width:300px; height:300px; background-image:url("image.jpg"); } .test2{ width:150px; height:50px; background-color:#ffffff; filter:alpha(opacity=30); ←背景色（白）が透明ぽくなるように設定 } ******************************************************* テキスト文字まで透明化されるので、さらにそのテキストをpタグで囲ってみましたが、 それでもテキストが透明化されている（親divのfilterがpタグまで継承されているから？）ので pタグにfilterプロパティで不透明を１００に戻すような設定をしてみましたが適用されません。 ************************* 【変更後】 *********************** 【XHTML】 <div class="test1"><div class="test2">テキスト</div></div> 【ＣＳＳ】 .test1{ width:300px; height:300px; background-image:url("image.jpg"); } .test2{ width:150px; height:50px; background-color:#ffffff; filter:alpha(opacity=30); ←背景色（白）が透明ぽくなるように設定 } p { filter:alpha(opacity=100); ←テキスト文字まで透明化されるのでpタグで囲って不透明１００に設定 } ******************************************************* ご指導のほどよろしくお願いします。
- ベストアンサー
- CSS
- HTMLで○や■などをテキストの代用とした時
HTMLで○や■などをテキストの代用とした時レイアウトが崩れてしまうのはなぜでしょうか？ 教えてください。 よろしくお願い致します。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- body { font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif; background-color: #42413C; margin: 0; padding: 0; color: #000; } .container { width: 960px; text-align: center; background-color: #FFF; margin: 0 auto; } .header { background-color: #ADB96E; } .content { text-align: left; padding: 10px 0; } .footer { padding: 10px 0; background-color: #CCC49F; } --> </style></head> <body> <div class="container"> <div class="header"> </div> <div class="main"> <p>○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</p> </div> <div class="footer"> </div> </div> </body> </html>
- 締切済み
- その他（インターネット・Webサービス）
- CSSでの背景色の指定について
以下のソースで右下に空白ができます。 それはいいのですが、背景色を指定がうまく行きません。 heightは動的に変わるので、idやclassを増やさずに実現したいと考えています。 IEでは実現できてきますが、Firefoxではダメでした。 よい方法はないでしょうか？ ■test.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <link href="css/test.css" rel="stylesheet" type="text/css" /> <title>test</title> </head> <body> <div id="wrap"> <div id="left"> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> </div> <div id="right"> ああああ<br /> ああああ<br /> ああああ<br /> ああああ<br /> </div> </div> </body> </html> ■test.css body { margin-top: 20px; margin-left: 70px; margin-bottom: 0px; padding: 0px; line-height: 1.4em; font-size: 12px; font-weight: normal; color: #333333; } #wrap { width: 690px; background-color: #000000; } #left { margin: 0px; padding: 0px; width: 510px; height: 100%; float: left; background-color: #ffff00; } #right { margin: 0px; padding: 0px; width: 180px; float: right; background-color: #ff00ff; }
- ベストアンサー
- CSS
- cssでボックスを横並びにし、横幅指定してもくっついてしまう。
こんにちわ！ 只今CSS課題に取り組んでいるのですが、 フロートを使用し、写真（A）、テキスト（B）、写真（C）、テキスト（D）、と並べたいのですが、（B）に横幅指定しているにもかかわらず、（C）がＩＥではＯＫなのですが、FIREFOXではぴたっとくっついてしまいます。 【html】 <div class="box"> <div class="photo"><img src="img/photo_01.jpg" width="132" height="85"></div> <div class="txt">第23回こまったな<br>どうしたのかな賞<br>受賞</div></div> <div class="box"> <div class="photo"><img src="img/photo_02.jpg" width="132" height="85"></div> <div class="txt">第23回どなたかー<br>助けてください賞<br>受賞</div></div> </div> .box{ width : 258 px; margin: 0px; float:left; } .photo{ width : 132 px; margin: 0px; float:left; } .txt{ width : 123 px; color: #555555; font-size: 12px; text-align: left; margin: 0px 0px 0px 3px; padding: 0px ; line-height:18px; float:left; } となっております。 何故、ＩＥでは大丈夫でFirefoxでは内容によって横幅が変わってしまうのでしょうか？ ご教授願いませんでしょうか～？ 宜しくお願い致します。
- ベストアンサー
- HTML
- 画像をセンター配置にする方法
過去ログを検索したのですが、同じような方法が載っていなくて質問させていただきます。 以下の画像にある通り、img_01とimg_02とimg_03を画面中央に配置したいのですがどうしてもうまくいきません。 根本的な部分の理解ができていないかもしれませんが、どうかご教授お願いします。 【HTML】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題</title> <link href="css/common.css" rel="stylesheet" type="text/css" /> </head> <body> <!--▼▼ヘッダーここから▼▼--> <div id="header"> <p>ヘッダー</p> </div> <!--▲▲ヘッダーここまで▲▲--> <!--▼▼メインここから▼▼--> <div id="main"> <ul> <div id="main_site01"> <p class="center">aaa01</p><li><img src="images/site01.jpg" width="300" height="200" alt="01" /></li><p class="center">aaa01</p> </div> <div id="main_site02"> <p class="center">aaa02</p><li><img src="images/site02.jpg" width="300" height="200" alt="02" /></li><p class="center">aaa01</p> </div> <div id="main_site03"> <p class="center">aaa03</p><li><img src="images/site03.jpg" width="300" height="200" alt="03" /></li><p class="center">aaa01</p> </div> </ul> </div> <!--▲▲メインここまで▲▲--> <!--▼▼フッターここから▼▼--> <div id="footer"> <p>フッター</p> </div> <!--▲▲フッターここまで-▲▲--> </body> </html> 【HTMLここまで】 -------------------------------------------------------------------------------- 【CSS】 @charset "utf-8"; /*******************/ /* リセットcss */ /*******************/ * { margin: 0; padding: 0; list-style-type: none; line-height: 1.6; font-family: "メイリオ","ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3"; } img { border: none; } /*******************/ /* コンテンツ */ /*******************/ body { background-color: #000; } #header { height: 100px; margin-top: 50px; font-size: 18px; background-color: #fff; } #main { color: #FFF; width: 990px; text-align: center; } #main ul li { float: left; margin: 0 15px 15px; } #main_site01 { float: left; } #main_site02 { float: left; } #main_site03 { float: left; } .center { text-align: center; margin-top: 15px; } #main ul { text-align: center; } #footer { height: 100px; font-size: 18px; color: #000; clear: both; background-color: #fff; } 【CSSここまで】
- ベストアンサー
- ホームページ作成ソフト
- CSSで画像配置の垂直方向指定
画像をいくつも展示するページを製作しているのですが、画像の垂直方向指定がうまくいきません。 縦長の画像と、横長の画像(サイズは同じ)を二枚横に並べたときに添付画像の下の方のように表示させたいのです。 タグはそれぞれしたのようなかんじです。 *****************CSS***************** #photo { margin:0 0 0 30px; padding:0; background: transparent; text-align:center; font-size : 1em; color:#69788A; } .image { font-size : 0.9em; margin : 0; padding : 10px 0 10px 0; float:center; width : 800px; border-bottom:2px solid #CFDEEF; } .left-img { float: left; width : 50%; } .right-img { float: right; width : 50%; } *****************HTML***************** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW,NOARCHIVE"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="style.css" type="text/css"> <title>***********</title> <style type="text/css"> body { background: transparent; } </style> </head> <body id="photo"> <div class="image"> <p class="left-img"><img src="016.jpg" border="0"></p> <p class="right-img"><img src="017.jpg" border="0"></div> </body> </html> よろしくお願いします。
- ベストアンサー
- HTML
- xhtml+cssのレイアウト センタリング カラム落ち
xhtml+cssレイアウト超初心者です。 何か間違っている所があれば教えてください。 よろしくお願い致します。 【問題点】 １）全体がセンタリングにならない □□■■■■■□□ □□■■■■■□□ □□■■■■■□□(左右の中央にしたい) ２）subがカラム落ちしてしまっている？ mainとsubの下に『スト』という文字が入ってしまっています。 【cssソース】 @charset "Shift_JIS"; * {margin: 0; padding: 0; } body {color: #000000; font-size: 62.5%; } /*==wrapper==*/ div#wrapper { width: 950px; margin : 0 auto; } /*==heaber==*/ div#heaber { width: 950px; margin-bottom: 30px; background-color: #66CCFF; } /*==contents ==*/ div#contents { width: 950px; float: left; background-color:#66CCFF; } /*==main ==*/ div#main { width: 740px; margin-right: 20px; float: left; background-color:#6699FF; } /*==sub ==*/ div#sub { width: 190px; float: left; background-color:#6666FF; } /*==siteinfo ==*/ div#siteinfo { clear: both; width: 950px; background-color:#6633FF; } 【HTMLソース】 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <link rel="stylesheet" media="tv, screen, projection, print" href="css/import.css" /> </head> <body> <div id="wrapper"> <div id="header"> <p>テキスト</p> <p>テキスト</p> </div><!--/header--> <div id="contents"> <div id="main"> <p>テキスト</p> <p>テキスト</p> </div><!--/main--> <div id="sub"> <p>テキスト</p> <p>テキスト</p> </div><!--/sub--> </div><!--/contents--> <div id="siteinfo"> <p>テキスト</p> <p>テキスト</p> </div><!--/siteinfo--> </div><!--/wrapper--> </body> </html>
- ベストアンサー
- HTML
お礼
Fxに関しての助言ありがとうございます！ こういうことには注意する方なんですが覚え違いをしていたみたいです… それと問題の件についてですが 字数制限のため泣く泣く削らせていただきました どうやら削るべき場所を間違えていたみたいですね 削ったところは補足にて記述させていただきます MacIEがfloatプロパティの一部に非対応とは初めて聞きました そこら辺は調べてみたいと思います それと実は今回の質問投稿後 急遽別所にて質問をさせていただこうと思い すぐに削除要請を出したのですが 間に合いませんでしたので こちらで得られた回答は別所へ 別所で得られた回答はこちらへ記述させていただきたいと思っております 一先ず現在までに得られている情報は ●<p class="subtitle">内のテキストを<span>等でタグ付けし、 それに以下のスタイルを設定することで回避できませんか？ p.subtitle span { display: block; border: 1px solid #999999; } ●いくつかテストした結果、回り込む要素（p.subtitle）の widthプロパティを設定している場合、 回り込まれる要素（p.imgfloat001）のwidth, margin, padding, border 各プロパティの値を足した値になるようです。 つまりこの場合、表示されるp.subtitleの幅は、 345 + 300 + 5 = 650pxとなり、 その為、p.subtitleのボーダー及び背景がp.imgfloat001に重なってしまうと考えられます。 しかし、内部の匿名ボックスには通常通り継承されている為、 上記の様にすることで回避できると思われます。 ●幅固定でサブタイトルの幅も固定で良いのなら、 .subtitle{margin-right:305px;} ●widthとmargin、padding、borderは一緒に定義しない方がいいかと。 widthだけ。とか。 marginとpadding、とか。
補足
/* CSSの補足です ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ .No001 { width: 350px; margin: 0 0 0 10px; border: 1px solid #ff0000; } .imgfloat001 { float: right; width: 300px; margin: 0 0 15px 5px; border: 0px solid #999999; } .imgfloat001 p { font-size: 0.9em; margin: 0 0 10px 0; border: 0px solid #999999; }