- 締切済み
CSS IEとfirefoxおなじレイアウトにしたいのですが
初心者です。↑質問ですが IEでレイアウトはみれてもfirefoxでは崩れてしまいそれの 対処で困ってしまっています。 どなたかアドバイスください。 ↓のCSSなのですが、途中混乱したままの投稿となってしまっていますが おわかりなられるかた助けてください！ ロゴがメイン画像にのっかったりと崩れがたえません。 body{ margin-top: 60px; padding: auto; background-color: #000000; background-image: url(../image/back.gif); color: #000000; cursor: crosshair; } P{ margin: 0; } h1{ font-family: serif; font-size: 5pt; color: #000000; } /*imgDIV↓*/ #lightbox{ width: 100%; z-index: center; text-align: center; background-repeat: no-repeat; } /*toplogo*/ #wrapper{ position: relative; width: 100%; margin: auto; margin-bottom: 20px; margin-left: auto; margin-right: auto; } #logo{ padding-top: 50px 50px 50px 50px; position: absolute; left: 410px; } /*グローバルナビ*/ #hako { margin-top: 150px; line-height:50px; padding-left: 900px; } #hako li { display:inline; list-style:none; padding-right:12px; float: left; background: url(../image/bpin.gif) left top no-repeat; line-height: 12px; padding-left: 17px; } #hako li{ font-family: DejaVuSans; font-size: 12px; } #hako li a { color:#C0C0C0; text-decoration:none; border-bottom:solid 2px #ADABAE; } #hako li a:hover { color:#FFFF66; border-bottom:solid 1px #CC0000; }
- HTML
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- abril
- ベストアンサー率69% (388/560)
ANo.1です。 うーん…ソースを見ましたけど、あのままだとIEで見ようがFirefoxで見ようが、へんてこなレイアウトになっていますし、CSSの方も混乱を極めているので「質問者様が本当に実現したいレイアウト」のイメージが今一つわかりかねますね。 とりあえず、CSSの指定から明らかにおかしなところ・矛盾しているところだけを取り除いて修正を加えた感じだと、以下のレイアウトでIEもFirefoxも表示結果がほぼ同じにはなりますが… ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- （省略） <body> <h1>ppppppppppppp</h1> <div id="wrapper"> <h1 id="logo"><img src="image/000.gif" alt="000.gif(3955 byte)" width="300" height="100" /></h1> <!-- ナビゲーション --> <ul id="hako"> <li><a href="http://www.....co.jp">HOME</a></li> <li><a href="http://www.....co.jp/company.html">COMPANY</a></li> <li><a href="mailto:info@m....co.jp">CONTACT</a></li> </ul> </div> <div id="lightbox"><img src="image/topp.jpg" alt="topp.jpg(107403 byte)" width="800" height="457" /></div> </body> </html> ---------------------------------------------------------------------- 【CSS】 ---------------------------------------------------------------------- body { margin-top: 60px; background: url(../image/back.gif) #000000; color: #000000; cursor: crosshair; } p { margin: 0; } h1 { margin: 0; font-family: serif; font-size: 5pt; color: #000000; } /*imgDIV↓*/ #lightbox { width: 100%; text-align: center; } /*toplogo*/ #wrapper { width: 100%; margin-bottom: 20px; } #logo { margin: 0 0 50px 410px; } /*グローバルナビ*/ #hako { list-style: none; margin: 150px 0 0 900px; padding: 0; line-height: 50px; } #hako li { margin: 0; padding: 0 12px 0 17px; line-height: 12px; background: url(../image/bpin.gif) left top no-repeat; font-family: DejaVuSans; font-size: 12px; } #hako li a { color: #c0c0c0; text-decoration: none; border-bottom: solid 2px #adabae; } #hako li a:hover { color: #ffff66; border-bottom: solid 1px #cc0000; } ---------------------------------------------------------------------- ※実現したいレイアウトになっていないと思われるので修正点の細かい解説は今の時点では省きます。 ANo.2様のご指摘の点などを参考にされて下さい。でも、現在のh1の指定は明らかにスパム行為（極端に小さいフォントサイズにして前景色と背景色を同じにして不可視状態にしている）なのでNGですよ。 でもおそらく質問者様の望んでいるのはこういうレイアウトではないんだろうなぁ、という気はします（色々とヘンだから）。 手っ取り早いのはレイアウトイメージを添付して頂くことなのですが、できなければ、上記をそのままコピペして試してみて、「こうじゃない」という箇所を具体的に補足して下さい。
・htmlとbodyにはmarginを指定しないほうがいいです。 ・paddingにはautoという値はありません。 ・floatを指定したらwidthを指定してください。 ・font-sizeをpxやptで指定するのはやめた方がいいです。%を使ってください。 ・position:absolute;を指定したらwidthを指定してください レイアウトをコントロールするために、cssの一番始めにmarginとpaddingを0に指定すると楽ですよ。 html,body,p.h1,h2 { margin:0; padding:0; } 最後の #hako li a { color:#C0C0C0; text-decoration:none; border-bottom:solid 2px #ADABAE; } の指定は問題が起こる可能性があります。 :hover等で変更したいプロパティは:linkや:visitedを利用して指定する方が安全だと思います。
- abril
- ベストアンサー率69% (388/560)
これは多分、http://oshiete1.goo.ne.jp/qa4823199.html の質問の続きなのだと思いますが。 トラブルの説明とセレクタのネーミングからある程度の想像はできても、(X)HTMLの方のソースもある程度公開して頂かないと…どういうマークアップに対してスタイルが指定されているのかわかりませんので。 ただ、CSSだけを単体で見た今の時点でも「？」な指定がいくつかありますね。 z-index: center; →z-indexの値は整数値（0,1,2…）しかない筈ですが。 padding-top: 50px 50px 50px 50px; →4つ値があるところ見ると本当は上下左右全部に50pxの余白を与えたいのでは？それなら正しくは"padding: 50px;"です。 margin: auto; margin-bottom: 20px; margin-left: auto; margin-right: auto; →間違いじゃないですけど、無駄な繰り返し指定が多いですね。同じ事は"margin: auto auto 20px auto;"の一行で済みます。 これはトラブルの本質にはあまり関わりないかと思いますが、とりあえず指摘しておきます。 とにかく、もっと詳細な情報を提供して下さい。
関連するQ&A
- CSSでレイアウトをセンターにしたい
CSSで製作したのですが、デザインが右端によってしまいます。 作成している会社のモニターでは真ん中でちゃんとみれるのですが、 家で確認したところ右寄せになっていました。 Centerにもっていくにはどうすればよいでしょうか？ お教えくださいませ(困) 他にもおかしなところがあればお教えくださいませ。 body{ background-color: #000000; background-image: url(../imgs/back.gif); cursor: crosshair; margin: 0; padding: 0; } P{ margin: 0; text-align: center; font-family: DejaVuSans; font-size: 9pt; color: #C0C0C0; } h1{ font-family: serif; font-size: 3pt; color: #000000; } #wrapper{ width: 800px; margin-left: 450px; margin-right: auto; margin-top: 100px; } #logo{ width: 300px; float: left; padding-right: 5px; } #hako { margin-top: 80px; line-height:50px; padding-bottom: 15px; float: right; } #hako li { display:inline; list-style:none; padding-right:12px; float: left; background: url(../imgs/bpin.gif) left top no-repeat; line-height: 12px; padding-left: 20px; } #hako li{ font-family: DejaVuSans; font-size: 80%; } #hako li a{ color:#C0C0C0; text-decoration:none; border-bottom:solid 2px #ADABAE; } #hako li a:hover{ color:#66FFFF; border-bottom:solid 2px #CC0000; } #lightbox{ padding: 20px; width: 100%; text-align: center; background-repeat: no-repeat; }
- 締切済み
- HTML
- CSSでレイアウトが崩れます
CSSに挑戦したのですが、IE6.0とie7.0で若干表示がくります。 ただ、IEでは何とか表示します。 また、MAC IE5.2では、右側メインが左メニューの下に崩れて表示されてしまいます。 ドリームウィーバーでもやはり表示が崩れるのです。 cssは以下になります。 左と右のレイアウトに問題があるのでしょうか。一部省略しました。 #Wrapper { padding: 0px; width: 800px; display: block; margin: 0px; background: url(../images/bg_img_01.jpg) repeat-y bottom; height: auto; } body { margin: 0px; padding: 0px; text-align: center; color: #333333; font-size: 12px; line-height: 150%; vertical-align: middle; } #imgR { padding: 0px; float: left; width: 500px; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #arrow { margin: 0px; padding: 0px; float: left; width: 500px; } #rContents { text-align: left; padding: 0px; margin-top: 30px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: #111184; } .TextRink { text-decoration: none; color: #FF6600; display: inline; margin: 0px; padding: 0px 0px 0px 5px; } #WrapperL { margin: 0px; padding: 0px; width: 215px; height: auto; float: left; } #WrapperR { padding: 0px; width: 563px; height: auto; margin-top: 0px; margin-right: 15px; margin-bottom: 0px; margin-left: 0px; } #Footer { padding: 0px; height: 52px; width: 563px; background-image: url(../images/footer.gif); background-repeat: no-repeat; display: block; float: left; background-position: bottom; margin: 50px 0px 0px; vertical-align: bottom; } .sabu-title { padding: 13px 0px 0px; } .underline1 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; } #Header { display: block; margin: 0px; padding: 0px; height: 147px; width: 563px; background-image: url(../images/header_img.jpg); background-repeat: no-repeat; } .HeaderText { color: #FFFFFF; padding-top: 3px; margin: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 150px; font-size: 10px; }
- 締切済み
- HTML
- CSSのリストタグでメニューを作ってますがレイアウトが崩れます
CSSでリストタグを使ってメニューを作成してますが、Firefoxだとメニューの幅が広く表示され本文にかぶってしまいレイアウトが崩れてしまいます。ちなみにレイアウトは2段組です。 #menu{ text-align: left; width: 175px; float: left } #menu #text ul{ list-style-type: none; margin: 0; padding: 0; border-top: 1px solid white } #menu #text li{ background-image: url("../navi_yajirusi.gif"); background-repeat: no-repeat; background-position: left center; margin: 0; padding: 0; border-bottom: 1px solid white } #menu #text li a{ color: #fff; text-decoration: none; background-color: #1b328d; background-image: url("../navi_yajirusi.gif"); background-repeat: no-repeat; background-position: left center; display: block; padding: 10px 0 10px 10px; width: 175px } #menu #text li a:hover { color: #fff; background-color: #ff0; background-image: url("../navi_yajirusi.gif"); background-repeat: no-repeat; background-position: left center } どなたか詳しい方よろしくお願いいたします。
- 締切済み
- HTML
- CSSでIE6だけ出る隙間をなくしたい
お世話になります。 CSSとtableを組み合わせてレイアウトをしています。 WindowsのIE7やSafari、Netscapeでは正常に表示されるのですが、 IE6では<div>と<div>の間に1、2pxの白い隙間が出てしまいます。 htmlは下記にアップしています。 http://www.couleurcafe.jp/08/ ホーム、メニューといったメインメニューの行と、 赤地に白文字のヘッダーメニューの行の間に隙間が出てしまいます。 CSSは以下の通りです。 @charset "Shift_JIS"; body { margin: 0; padding: 0; background-image: url(img/bodybg.gif); } #wrapper { width: 780px; margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; text-align: left; background-color: #FFFFFF; } #mainmenu { background-image: url(img/menubarbg.gif); background-repeat: repeat-x; width: 766px; height:29px; margin-left: 14px; margin-bottom:0px; padding-top:1px; } #menublock { background-image: url(img/menubg.gif); background-repeat: no-repeat; width: 88px; height:29px; font-size: 12px; color: #000000; text-align: center; height: 16px; padding-top: 12px; } #menublock_over { background-image: url(img/menubg_over.gif); background-repeat: no-repeat; width: 88px; height:29px; font-size: 12px; color: #FFFFFF; text-align: center; height: 20px; padding-top: 8px; } #headermenu { background-color: #E10C0A; width: 772px; height: 12px; font-size: 11px; color: #FFFFFF; text-align: right; padding: 4px; } この隙間をなくす方法はないでしょうか。 CSSのおかしいところがあればご指摘をお願いいたします。 どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- CSSの継承について...
CSSの勉強をしつつ、HPビルダー17を使ってHPの制作しているですが、 前のulタグで使った背景画像がずっと継承されて困っております。 当方の内容です↓ 【CSS記述】 ----------------------- #manu-nanyo{ display: block; position: absolute; background-image: url(fu/area_nanyo.png); background-repeat: no-repeat; background-position: center top; color: black; width: 200px; height: 40px; } .job-menu ul{ display: block; list-style-type: none; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 10px; padding-bottom: 10px; border-right-width: 1px; border-right-style: solid; border-right-color: silver; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: silver; text-decoration: none; } .job-menu li{ margin: 0; padding: 0; background: url(img/migi_aka.png) left no-repeat; } .job-menu a{ display: block; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 14px; color: black; font-size: 15px; text-decoration: none; } .job-menu a:hover{ background-color: rgb(204, 204, 204); color: red; } #newshop_bunner{ frot: left; width: 200px; padding-top: 10px; text-align: left; background-position: top left; } .newshop-banner ul{ margin-top: 20px; margin-left: 0; padding-left: 0; } .newshop-banner li{ text-decoration : none; text-align : right; font-size: 12px; } .newshop-banner a{ margin-top: 0px; padding-top: 5px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; color: blue; font-size: 12px; text-decoration: none; text-align: right; } .newshop-banner a:hover{ background-color: white; color: lime; } ul.sample{ width:100%; margin-top:20px; font-size:10px; padding-left:0; margin-left:0; } ul.sample li{ list-style-position: outside; background-color: transparent; background-repeat: repeat; background-attachment: scroll; background-position: 0% 0%; background-size: auto auto; background-origin: padding-box; background-clip: border-box; padding-top: 3px; padding-right: 10px; padding-bottom: 3px; padding-left: 10px; width: 120px; float: left; border-width: 2px; border-color: rgb(255, 238, 219); border-style: ridge; } .list-test1{ float: left; list-style-type: none; margin-top: 40px; padding-top: 40px; color: orange; } 【HTML記述】 ----------------------- <div id="manu-nanyo"> <div class="job-menu"> <ul> <li><a href="*">野球</a> <li><a href="*">サッカー</a> <li><a href="*">テニス</a> <li><a href="*">ゴルフ</a> <li><a href="*">バスケ</a> </ul> </div> <div id="newshop_bunner"><img src="img/newstore-img.png" alt="新店舗"> <ul class="newshop-banner"> <li><a href="*"><img src="#">店名○○○○○お店ネーム</a> <li><a href="*"><img src="#">店名○○○○○お店ネーム</a> </ul> <ul class="sample"> <li><a href="#">テスト1</a> <li><a href="#">テスト2</a> <li><a href="#">テスト3</a> <li><a href="#">テスト4</a> <li><a href="#">テスト5</a> </ul> <ul class="list-test1"> <li><a href="#">トップページ</a> <li><a href="#">テストページ1</a> <li><a href="#">テストページ2</a> </ul> </div> ----------------------- .job-menu li で使った背景画（矢印）・スタイルが、その後 li を使う度に継承されてしまいます。 クラス名やID名を付けてそれぞれの属性を指定すれば分居ができるのかと色々と試してみたのですが旨くいかず・・・ (ul属性・a属性で分けても継承されてしまいます） 試し過ぎて、もう意味が分からなくなってしまって自分では解決出来そうにないので、初歩的なことで申し訳ありませんが、質問をさせて頂きました。 ネット等で調べた感じでは、「クラスを分けて指定すればulの住み分けが出来る」と判断したのですが、そういうことではないのでしょうか？ それとも根本的な何かを履き違えしているのでしょうか？ 宜しくお願い致しますm(_ _)m
- 締切済み
- デザイナー・クリエイティブ職
- 直接書き込むCSSを外部ファイルに設定したい
CSS初心者です。下記の携帯テンプレートを使ってサイトを作りたいです。 タグに直接書き込むタイプのCSSが多いのですが、 このソースの一部を外部ファイルに設定するには、どういう書き方をしたら良いでしょうか？ 【外部に設定したい項目】 ★タイトル下線のMARGIN-RIGHT: 47% ★真ん中の線(画像位置)BACKGROUND-POSITION: 53% ★一番下線のMARGIN-LEFT: 53%; 外部にしたい理由は携帯とパソコンで見た時にそれぞれ線の位置を変えたいと思って いるからです。出来ますでしょうか？CSSに詳しい方、どうかお願いします(>_<) 【全タグ】 <html> <HEAD> <TITLE>TITLE</TITLE> </HEAD> タイトル <H1 style="PADDING-LEFT: 7px; MARGIN: 0px; PADDING-TOP: 10px; BACKGROUND-COLOR: #ffffff"></H1> <DIV style="BACKGROUND-POSITION: 53% 40%; BACKGROUND-IMAGE: url(http://deai.mokuren.ne.jp/up/src/up3891.gif); BACKGROUND-REPEAT: repeat-y"> <DIV style="BORDER-TOP: #000000 1px solid; MARGIN-RIGHT: 47%"> <P style="PADDING-RIGHT: 0px; PADDING-LEFT: 15px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 7px"></P></DIV> <DIV style="MARGIN-LEFT: 40%; PADDING-TOP: 17px"> <DIV style="WIDTH: 300px; MARGIN-RIGHT: 20px"> <H2 style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 13px; PADDING-BOTTOM: 2px; MARGIN: 0px 0px 3px; PADDING-TOP: 3px; BACKGROUND-COLOR: #000000"> <font color="#ffffff">コンテンツ</font></H2></font> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説２</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">その他</a></div> </DIV></DIV> <DIV style="MARGIN-LEFT: 53%; BORDER-BOTTOM: #000000 1px solid"> <P style="PADDING-RIGHT: 5px; MARGIN: 0px; PADDING-TOP: 17px" align=right></DIV></DIV> <P style="PADDING-RIGHT: 5px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; MARGIN: 0px; PADDING-TOP: 5px" align=right> </HTML>
- 締切済み
- CSS
- レイアウト、フッターが崩れてしまいます。
横800pxの外枠にフッター部分を枠内の下に綺麗に収まるよう配置したいのですが、ブラウザーで確認するとフッター部が上に配置されてたり、mainのテキスト部分や外枠のレイアウトが表示されてなかったり、崩れてしまいます。またｓａｆａｒｉ、firefoxを使って確認してるのですが、同じように表示されません。どこが間違っているのか、教えて頂けると助かります。 ＊html <body> <div id="wrapper"> <div id="headir"> <h1>The highest hiphop design All group</h1> <div class="logo"><img src="＃”></div> </div> <span id="menu"><ul><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src＝”＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li></ul></span> <h2><img src="＃" alt="＃" /></h2> <span id="sidemenu"> <ul> <li><a href="#">TOP</a></li> <br /> <li><a href="#">NEW</a></li> <br /> <li><a href="#">Line</a></li> <br /> <li><a href="#">Fine</a></li> <br /> <li><a href="#">Mail</a></li> <br /> <li><a href="#">TOP02</a></li> <br /> <li><a href="#">NEW02</a></li> <br /> <li><a href="#">Line02</a></li> <br /> <li><a href="#">Fine02</a></li> <br /> <li><a href="#">Mail02</a></li> </ul> </span> <div id="main"> ～～ ～～ </div> <div id="footer"> <span align="center">©＃</span> </div> </div> </body> </html> ＊css body { font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; margin:0px; padding:0px; } #wrapper { margin: auto; padding:auto; height: 100%; width: 800px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-left-color: #000000; border-bottom-style: solid; border-bottom-color: #000000; } #headir { padding: 0px; margin:0px; height: 220px; width: 800px; } #headir h1{ margin: 0px; padding: 0px; height:20px; font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; font-size:small; text-align: left; } .logo{ padding-bottom:20px;} #menu ul { padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width:800px; height:100px; list-style-type : none; } #menu li{ display:inline; padding-bottom:20px; } span#sidemenu { height: 300px; width: 50px; float:left; margin-top: -19px; margin-right: 8px; margin-bottom: 0px; margin-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; font-size: smaller; } span#sidemenu li{ list-style-type:none; text-indent: -30px; } span#sidemenu{ padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; } div#main { margin-top: 20px; margin-right: 40px; margin-left:30px; margin-bottom:20px; font-size: small; text-align: left; left: 150px; light: 50px; height: 400px; width: 600px; } div#main p { padding-left:10px; padding-light:20px; padding-top:10px; padding-bottom:20px; } #footer{ height:３0px; width:100%; background-color: #CC9933; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border: 1; border-left-width: 1px; border-left: 1; z-index: 2; position: relative; margin: 0; padding: 20px 0 0 20px; }
- 締切済み
- その他([技術者向] コンピューター)
- cssでのレイアウトの仕方
次の2ファイルを作成しました。 ---index.html <html> <head> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="notice"> <dl> <dt>タイトル</dt> <dd class="noticeDesc"><p>→一覧</p></dd><br /> <dd class="noticeBox"> <ul> <li>リスト１</li> <li>リスト２</li> </ul> </dd> </dl> </div> </body> </html> ---index.htmlここまで ---style.css @charset "utf-8"; .notice { width: 210px; background-color: #ffff00; border-bottom-style: solid; height: 80px; } .notice dl { background-color: #00ffff; border-top-style: solid; } .notice dt { padding-top: 3px; padding-right: 5px; padding-bottom: 2px; padding-left: 5px; border-right-style: solid; border-left-style: solid; border-bottom-style: solid; } .notice .noticeBox { margin: 0px; padding: 0px; background-color: #00ffff; border-bottom-style: solid; } .notice .noticeDesc p { width: 60px; position: absolute; top: 3px; right: 5px; line-height: 1; } .notice dd { border-right-style: solid; border-left-style: solid; float: left; width: 204px; margin: 0px; padding: 0px; } ---style.cssここまで ここの掲示板は画像をUPしてもかなり劣化されてしまうのでどれだけ見えるかわかりませんが実際に表示したイメージも添付しました。 これで希望と違うところが2点あります。 ●「→一覧」というのは「タイトル」と同じ箱の中に右詰めで表示したい ●「タイトル」の箱の周りの枠と下の「リスト」が入った箱の隙間は開けたくない 何通りかのやり方があるんだとは思いますが、style.cssの方を修正する方法でどこをどう調整すればよいのか教えてください。 よろしくお願い致します。
- ベストアンサー
- CSS
- cssハックについて
googleとfirefoxでcssが聞かない箇所があります。 css--------- #operation { width: 420px; background-image: url(../picture/top/left_middle.jpg); background-repeat: repeat-y; background-position: center top; margin-top: 10px; } #operation img { border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; } #operation #ope_top { background-image: url(../picture/top/left_top.jpg); background-repeat: no-repeat; background-position: left top; height: 30px; padding-bottom: 0px; margin-bottom: 0px; } #operation #ope_top #ope_tit { font-size: 14px; line-height: 2; font-weight: bold; color: #FFFFFF; text-indent: 10px; float: left; width: 200px; margin-top: 0px; padding-top: 0px; height: 20px; } #operation #ope_top .ope_img { padding-top: 5px; float: right; margin-right: 10px; } #operation #ope_middle { margin-top: 0px; padding-top: 0px; width: 420px; margin-left: -200px;←ここがおかしいです！！ } #operation #ope_middle .content ul { margin-top: 5px; padding-left: 30px; list-style-image: url(../picture/list.jpg); } #operation #ope_middle .content li { margin-bottom: 5px; margin-top: 1px; } #operation #ope_middle .content .line01 { border: 1px dotted #CCCCCC; margin-top: 2px; margin-bottom: 2px; } というかんじなのですが、左右へとぶれてしまいます。 どのように修正したいいのか困っております。 参考になるようなことありましたらお願いします。
- 締切済み
- HTML
- IEだけで配置したボックスがずれて困っています。
DIVでボックスを配置してレイアウトをしています。 IE以外では、問題なく中央に配置されるのに、 IEのバージョン関係なく、上のボックスがずれてしまいます。 スターハックなどを使ってもダメでした。 問題箇所を下記に明記しますので、解決策を教えてください。 宜しくお願いします。 .top p{ background-image:url(../img/basis/br.gif); background-repeat:repeat-x; width:720px; height:35px; z-index:2; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 0px; padding-right: 40px; padding-bottom: 0px; padding-left: 40px; text-align: center; float: left; position: relative; border: 1px solid #0033FF; } .h2-img{ width:800px; padding:0px; margin:0px auto 0px auto; border: 1px solid #009900; background-color: #009900; } /*---メニュー類---*/ .m-bar { border: 0; padding:0; overflow:hidden; height:35px; width:720px; position:relative; margin-top: 60px; margin-bottom: 0px; margin-right: auto; margin-left: auto; text-align: left; right: 0px; float: left; display: block; background-color: #333399; }
- 締切済み
- CSS
補足
すみません。 HTMLのソースはこちらです。 <?xml version="1.0" encoding="utf-8"?> <!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-style-type" content="text/css" /> <title>museo international</title> <link rel="stylesheet" type="text/css" href="css/index.css" media="screen, print" /> <link rel="HOME" href="http://www.....co.jp" /> <link rel="NEXT" href="http://www.....jp/company.html" /> <link rev="made" href="mailto:info@...co.jp" /> </head> <body> <h1>ppppppppppppp</h1> <div id="wrapper"> <h1 id="logo"><img src="image/000.gif" alt="000.gif(3955 byte)" width="300" height="100" /></h1> <!-- ナビゲーション --> <ul id="hako"> <li><a href="http://www.....co.jp">HOME</a></li> <li><a href="http://www.....co.jp/company.html">COMPANY</a></li> <li><a href="mailto:info@m....co.jp">CONTACT</a></li> </ul> </div> <div id="lightbox"><img src="image/topp.jpg" alt="topp.jpg(107403 byte)" width="800" height="457" /></div> </body> </html>