- 締切済み
CSSによるレイアウトが崩れてしまう現象について
Adobe Dreamweaver CS4にて、ヘッダー、TOPメニュー、SIDEメニュー、コンテンツ、フッターというよくある構成でHPを作成しております。 レイアウトを組んでみたところ、Firefox4ではキチンと表示してくれるのですが、Internet Explorer6では、左メニューがやや右ズレをおこし、右のmainコンテンツが下に回りこんでしまうという現象となってレイアウトが崩れてしまいます。 もうひとつ、右mainの下の「株式会社●●」を右寄せに指定しているハズなんですが、どうしても左になってしまい、指定がきいてくれません。 この2つ原因がわからずに困っております。 お教えいただけませんでしょうか。よろしくお願い致します。 <body> <div id="page"> <!---ヘッダーここから-------------> <div id="header"> <div id="header_title"></div> <div id="header_info">TOPコメント…</div> </div> <!---ヘッダーここまで-------------> <!---TOPメニューここから----------> <div id="topmenu"> <ul> <li><a href="index.html">HOME</a></li> <li><a href="company.html">COMPANY</a></li> <li><a href="services.html">SERVICES</a></li> <li><a href="services.html">PRODUCTS</a></li> <li><a href="contact.html">CONTACTS</a></li> <li><a href="contact.html">help</a></li> </ul> </div> <!---TOPメニューここまで----------> <!---左メニューここから----------> <div id="left"> <div id="leftmenu"> <ul> <li><a href="index.html">Category1</a></li> <li><a href="company.html">Category2</a></li> <li><a href="company.html">Category3</a></li> <li><a href="company.html">Category4</a></li> </ul> </div> </div> <!---左メニューここまで----------> <!---メインここから--------------> <div id="main"> <div id="midashi"> <h2>CONTACTS</h2> </div> <div id="contents"> <p> </p> <p>サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト。 <br /> <br /> </p> <table width="500" bordercolor="#66CCCC" border="0" cellspacing="0" cellpadding="0"> <tr> <th bgcolor="#FFFFDF"> <p><span class="tx12pt_ore">サンプルテキスト。</span><br /> </p> <ul> <li>・サンプルテキスト</li> <li>・サンプルテキスト</li> <li>・サンプルテキスト<br /> </li> </ul></th> </tr> </table><br /> <br /> <span class="tx12pt_ore">【サンプルテキスト】</span><br /> <p>サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト。 </p> <br /> <span class="txtright">株式会社●●</span> </div> <!---ページトップここから------------> <div id="pagetop_back"> <a href="#top"> <img src="../all_img/mpage-top.gif" alt="ページトップへ" width="100" height="20" border="0" /> </a> </div> <!---ページトップここまで------------> </div> <!---フッターここから------------> <div id="footer"> <div id="copyright"> <h3>このページは、株式会社●● が運営しています。<br /> Copyright(c) ～～～～Ltd Institute. All Rights Reserved. </h3> </div> <ul> <li><a href="#">サンプルメニュー1</a></li> <li><a href="#">サンプルメニュー2</a></li> <li><a href="#">サンプルメニュー3</a></li> </ul> </div> </div> <!---フッターここまで------------> </div> </body> ≪CSS≫ #page { width: 780px; margin-right: auto; margin-left: auto; background-image: url(all_img/page.gif); } #header { width: 740px; height: 80px; margin-right: auto; margin-left: auto; background-image: url(all_img/header.gif); } #topmenu { width: 740px; height: 40px; margin-right: auto; margin-left: auto; background-image: url(all_img/topmenuber.gif); background-repeat: no-repeat; } #left { width: 178px; height: 1300px; float: left; margin-left: 20px; background-image: url(all_img/sideback.gif); background-repeat: repeat; } #main { float: right; height: auto; padding: 0; background-color: #FFF; width: 560px; margin-top: 20px; margin-right: 20px; } #contents { width: 500px; height: auto; margin-left: 30px; } #contents .txtright { color: #033; text-align: right; } #footer { width: 740px; height: 80px; clear: both; margin-left: auto; margin-top: 0px; margin-right: auto; }
- nanan_nao
- お礼率57% (12/21)
- CSS
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
CSS ★タブは全角スペースに置換してある。 html,body{margin:0;padding:0;} p{text-indent:1em;} div{border:solid 1px blue;} h1{margin-top:30px;padding-top:0px;text-align:center;} div.header,div.section,div.footer{ margin-left:180px;width:780px;margin-right:auto; } div.header div.summary{width:90%;margin-left:2em;} div.section div.section, div.section div.article, div.section div.aside{margin-top:2ex;padding:1ex 1em;} div.section div.section, div.section div.article{width:90%;margin-left:1em;} div.section div.aside{width:85%;margin-left:2em;border-style:dotted;} div.body div.nav{width:160px;position:absolute;top:140px;left:10px;font-size:0.8em;} div.section div.aside address{text-align:right;} div.footer,p.goTo{text-align:center;} div.footer div.nav{position:absolute;top:0;left:0;width:100%;} div.footer div.nav, div.footer div.nav ul, div.footer div.nav ul li{ display:block;height:18px;line-height:18px; margin:0;padding:0; } div.footer div.nav ul li{width:16%;float:left;border:solid 1px red;} div.footer div.nav ul li a{display:block;width:100%;height:100%;text-decoration:none;} div.footer div.nav ul li a:hover{background-color:yellow;}
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTML4.01strictでIE6の標準モード対応です。XHTMLへ変更するときはDTDと<html>の属性などをきちんと直してください。 Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済みです。 HTMLのマークアップ、CSSの使い方がわかるように書きました。 たとえばaside(直訳=脇)は本文と関係ない文章、article(直訳=記事)は独立しうる記事とかが後でわかる。自分だけでなく将来のメンテナンス、読み上げブラウザ、そして検索エンジンに!!!。たとえ、デザインを左配置から右配置や下配置に変更したくなってもCSSだけ見ればよい。CSSも可能な限り同じ宣言が登場しないようにしてあります。 こんなにシンプルになってしかもわかりやすくなる。それであってもIE5ではナビゲーションがずれますが仕様には差し支えない。I6以降、他の標準ブラウザでもほぼ同じに見えるはず。 ★タブインデントが全角スペースに置き換えてあります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta name="author" content="ORUKA1951"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:orika1951@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css"> <!-- --> </style> </head> <body> <!-- ヘッダーここから --> <div class="header" id="TOP"> <h1>見出し</h1> <div class="section summary"> <p>TOPコメント…</p> <p>コメント</p> </div> </div> <!-- body section(本文)主題ここから --> <div class="section body"> <h2 id="main">CONTACTS</h2> <p>サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト。 </p> <p>このHTMLはDTDは4.01strictです。DTDにURLがあるのでIE6では標準モードで起動します。</p> <div class="section"> <h2 id="SAMP1">ポイント</h2> <p>文書構造でマークアップしてある。たとえば本文の目次は本文(body_section)ブロック内に、サイトナビはfooter内に、独立した記事で本文関連はarticle、本文に直接関係ないものはaside、</p> <p>section,article,aside,header,footer,figureなどのクラス名は、将来HTML5が普及したときは、そのまま要素名にできる。<div class="section">は<section>と・・</p> <p><strong>このように、文書構造にあわせてマークアップすることはオーサリングツールではできない</strong></p> <p>CSSも同様にグループ化やカスケーディングを活用するために手で書いたほうが良い。これらに対処したオーサリングツールは知らない!</p> </div> <div class="article" id="SAMP2"><!-- article(記事) --> <h2>サンプルテキスト。</h2> <ul> <li>サンプルテキスト</li> <li>サンプルテキスト</li> <li>サンプルテキスト</li> </ul> </div> <div class="section" id="SAMP3"> <ul> <li><a href="index.html">Category1</a></li> <li><a href="company.html">Category2</a></li> <li><a href="company.html">Category3</a></li> <li><a href="company.html">Category4</a></li> </ul> </div> <div class="aside"><!-- 本文から外れた記事 --> <h2>【サンプルテキスト】</h2> <p>サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト。 </p> <address>株式会社●●</address> </div> <p class="goTo"> <a href="#TOP"><img src="../all_img/mpage-top.gif" width="100" height="20" alt="Topへ"></a> </p> <div class="article head"><!-- article(独立記事/本文の一部なのでsection内 --> <div class="nav"><!-- ナビゲーションリスト --> <h2>サンプル</h2> <ul> <li><a href="#SAMP1">サンプルメニュー1</a></li> <li><a href="#SAMP2">サンプルメニュー2</a></li> <li><a href="#SAMP3">サンプルメニュー3</a></li> <li><a href="#COPYRIGHT">著作権者</a></li> </ul> </div> </div> </div> <!-- フッターここから --> <div class="footer"> <div id="COPYRIGHT"> <p>このページは、株式会社●● が運営しています。</p> <p>Copyright(c) ～～～～Ltd Institute. All Rights Reserved.</p> </div> <div class="nav"> <ul> <li><a href="index.html">HOME</a></li> <li><a href="company.html">COMPANY</a></li> <li><a href="services.html">SERVICES</a></li> <li><a href="services.html">PRODUCTS</a></li> <li><a href="contact.html">CONTACTS</a></li> <li><a href="contact.html">help</a></li> </ul> </div> </div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
オーサリングツールってその程度のものです。酷いものですね。 HTMLやCSSを、手書きで自在に書ける人以上にHTMLやCSSを理解していないと使える代物ではありません、DreamWeaverに限らず、オーサリングツールはそういう人を対象にしているのですよ。(ここんとこ間違えている人が多いですね。DWにははっきりそのように説明があるので良心的です) ★IE5やIE6の互換モードは内容幅の解釈が異なります。 IE5は無視して、IE6の標準モード対応としましょう。 ★ブロック要素以外は、内容の量で幅が決まりますからtext-alignは意味がありません。 ブロック要素・インライン要素・置換要素・非置換要素と言う言葉と意味は覚えましょう。ひとつの段落ですから<p>でマークアップ ★デザインのためにIDを決めることは止めましょう。 セレクタのグループ化やせっかくのカスケーディングが機能しなくなります。 ★CSSはその名前のとおりカスケードを使いましょう。 これはオーサリングツールでは無理です。 ★そのまえに適切なHTMLが必要です。 これもオーサリングツールでは無理、作者が知っていなければならないこと <p> </p>は空白文字しか含まない段落はありえない。、<br/>も同様。 スタイルシートで配置のためのtableはだめ、表でないものにtableのマークアップはだめ! width="500" bordercolor="#66CCCC" border="0" cellspacing="0" cellpadding="0" はスタイルシートで・・ 極めて単純なHTMLとCSSで実現できます。 後で暇を見つけて
- doruti
- ベストアンサー率34% (9/26)
こんにちわ。 IE6環境ではないので確かではありませんが少しだけ調べてみましたので、試してみてください。 □問題(1)□ 左メニューがやや右ズレをおこし、右のmainコンテンツが下に回りこんでしまう ■原因■ #leftと#mainを足したwidthがページのwidthを超えているのが、原因かもしれません。 確かではありませんがFirefox4では表示できるのは、marginの扱い方が異なっているのが原因かと思います。 ■解決■ #leftなり#mainのwidthやmarginを調整する □問題(2)□ 右mainの下の「株式会社●●」を右寄せに指定しているハズなんですが、どうしても左になってしまい、指定がきいてくれません。 ■原因■ <span>要素にはtext-alignは効かない気がします。 ■解決(1)■ <span>要素を<p>,<div>などに変更する 例 <span class="txtright">株式会社●●</span> ↓ ↓ ↓ ↓ ↓ <p class="txtright">株式会社●●</p> ■解決(2)■ スタイルシートでfloatを追加する #contents .txtright { color: #033; text-align: right; } ↓ ↓ ↓ ↓ contents .txtright { float: right; color: #033; } 以上です。 最後に もしWEBページをお作りであれば、IE7以降が標準になりつつあるのでアップデートすることをお勧めいたします。
お礼
早々のご返答ありがとうございます。 widthを変えてやってみましたが、左メニューの右ズレは解消されませんでした。 #mainのwidthをかなり少なくすると回り込みはなくなりました。 文字の左寄りのほうは、ご教授いただいたとおりに<span>要素を<p>に変更しましたら、なおりました。 ありがとうございます。 最近の標準はIE7以降なんですね。まだIE6を使われてる方が多いかもしれないと思い、6にバージョンダウンして確認しておりました。できましたら、IE6でキチンと見えるようにつくっておきたいと思います。
関連するQ&A
- ＣＳＳレイアウト positionについて
下記のタグにてpositionタグを使って指定した場合 ＩＥの文字サイズを変更しるとcopyrightと言うboxが ずれてしまいます。ずれない方法はありませんでしょうか？ お分かりの方のご回答をお待ちしております。 なお簡単なタグを記載してくれると幸いです。 body { margin-left:3em; margin-left:3em; } .mainspace { width:480px; position:absolute; left:260px; padding-top:10px; padding-bottom:10px; } .leftmenu { width:200px; height:280px; position:absolute; left:50px; padding:5px; } .rightmenu { width:200px; height:280px; position:absolute; left:750px; padding:5px; } .copyright { text-align:center; position:absolute; left:50px; top:480px; width:900px padding-bottom:10px; padding-top:10px; } ＨＴＭＬ <h1>タイトル</h1> <div class="mainspace"> <h2>タイトル</h2> <br> <h2>タイトル</h2> <br> </div> <div class="leftmenu"> <h3>メニュー</h3> <ul> <li><a href="">テスト</a></li> <li><a href="">テスト</a></li> </ul> <h3>メニュー</h3> <ul> <li><a href=""></a>テスト</li> <li><a href=""></a>テスト</li> </ul> <h3>メニュー</h3> <ul> <li>テスト</li> <li>テスト</li> </ul> </div> <div class="rightmenu"> <h3>サブタイトル</h3> <br> </div> <div class="copyright"> test </div>
- ベストアンサー
- HTML
- レイアウトが崩れてしまう原因を教えて下さい。
添付データのようなデザインをtableを使わずに作りたいのですが、 テキスト数の増減やphotoのmarginをいじるとレイアウトが崩れてしまいます。 テキストが増えても減ってもレイアウトが崩れない方法はありますか？ <style type="text/css"> .contents{ width: 650px; margin-right: auto; margin-left: auto; } .contents ul{ list-style: none; } .contents ul li.photo{ float: left; border: 1px solid #ccc; padding: 5px; } .contents ul li.text, .contents ul li.title{ margin-left: 200px; } .contents ul li.title{ margin-top: 20px; margin-bottom: 10px; color: #111; } .contents ul li.text{ font-size: 14px; } .contents ul li.photo a img{ border-style: none; outline: none; } .contents ul li.title a:hover{ color: #ccc; } </style> <div class="contents"> <ul> <li class="photo"><a href=""><img src="sample.jpg" alt="サンプル" width="150" height="100" /></a></li> <li class="title"><a href=""><u>これはサンプルです</u></a></li> <li class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li> </ul> </div> <div class="contents"> <ul> <li class="photo"><a href=""><img src="sample.jpg" alt="サンプル" width="150" height="100" /></a></li> <li class="title"><a href=""><u>これはサンプルです</u></a></li> <li class="text">テキストテキストテキストテキストテキストテキスト</li> </ul> </div> <div class="contents"> <ul> <li class="photo"><a href=""><img src="sample.jpg" alt="サンプル" width="150" height="100" /></a></li> <li class="title"><a href=""><u>これはサンプルです</u></a></li> <li class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li> </ul> </div>
- ベストアンサー
- HTML
- ＣＳＳレイアウト マージンについて
下記のタグにてメインスペースを両側10pxにしたいのですが、うまくいきません。 下記のようなレイアウトにてうまくmarginなどを行う場合は どのようにしたらよろしいでしょうか？ なお簡単にタグを記載してくださいますと幸いです。 ＣＳＳ body { margin:3em; color:#339900; background:#ffffff; } h1 { padding:0.1em; text-align:center; leter-specing:1em; border-top: 1px solid #000000; border-bottom: 1px solid #000000; } .mainspace { background:#aaaaaa; width:480px; margin-right:10px; margin-left:10px ; position:absolute; left:260px; } .leftmenu { background:#bbbbbb; width:200px; position:absolute; left:50px; } .rightmenu { background:#cccccc; width:200px; position:absolute; right:50px; } ＨＴＭＬ <h1>メインタイトル</h1> <div class="mainspace"> <h2>サブタイトル</h2> <p> ただいまテスト中です。<br> ただいまテスト中です。<br> ただいまテスト中です。<br> ただいまテスト中です。<br> ただいまテスト中です。<br> </p> </div> <div class="leftmenu"> <ul> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> </ul> </div> <div class="rightmenu"> <ul> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> </ul> </div>
- ベストアンサー
- HTML
- レイアウト、フッターが崩れてしまいます。
横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の継承について...
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 IEバグ リストの後の隙間を消したい
よろしくお願いします。 以下のメニューで、"sub_menu02" の下に隙間が出てしまいます。 IEのバグのようなのですが、回避方法ご教授願います。 *実際は、の部分はJAVASCRIPTによるプルダウンになってます。 --------------------------------------------------------------- <style> * { margin : 0; padding : 0; } body { margin : 0; padding : 0; background: #fafafa; } #slidemenu_sample { overflow:hidden; } #menu_1 { padding: 0; margin: 0 0 0 0; background-color: #e7f6ff; } div#contentsArea div#sNaviArea{ width: 175px; float: left; } div#contentsArea div#sNaviArea dd{ width: 163px; background: #ffffff; } div#contentsArea div#sNaviArea dd ul{ width: 163px; list-style: none; } div#contentsArea div#sNaviArea dd ul li{ width: 163px; border-top: 1px solid #dddddd; margin: 0; padding: 0; display: block; } div#contentsArea div#sNaviArea dd ul li.choice{ background: #e7f6ff; } div#contentsArea div#sNaviArea dd ul li a{ display: block; padding: 5px 0 5px 17px; } div#contentsArea div#sNaviArea dd ul.sNaviSmall li.choice{ background: #e7f6ff; } div#contentsArea div#sNaviArea dd ul.sNaviSmall li{ width: 153px; margin: 0 0 0 10px; display: block; background: #ffffff; } </style> <body> <div> <div id="contentsArea"> <div> <div id="sNaviArea"> <dl> <dd> <ul> <li><a href="">menu01</a></li ><li class="choice"><a href="">menu02</a><ul class="sNaviSmall"><li><a href="">sub_menu01</a></li><li id="slidemenu_sample"><a href="" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')">sub_menu02</a><ul id="menu_1" style="display:none" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')"><li><a href="">aaaaa</a></li><li><a href="">bbbbb</a></li><li><a href="">cccccc</a></li></ul></li ><li><a href="">sub_menu03</a></li></ul> </ul> </dd> </dl> </div> </div> </div> </div>
- 締切済み
- HTML
- 【初心者】cssの背景画像について
cssを独学で勉強中なのですが、背景画像をなぜかうまく表示させられません。 やりたいことは例えば↓のページのように、 背景に画像を指定してメインのコンテンツは白を背景にするというよくあるレイアウトです。 http://www.spstore.com/ bodyの背景に画像を指定、メインコンテンツ(<div id="container">)の 背景として白の画像をrepeatで指定というようにしているのですが、containerの背景画像が表示されません。 初歩的な質問ですみませが、「ここがおかしい」という点と、 もし可能であれば「ふつうはこうする」というのがあれば教えてください。 以下作りかけですがcssとhtmlです。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ * { margin: 0; padding: 0; font-size: 15px; } body { background-image:url(../img/washi.png); background-repeat: repeat; } #header { width: 750px; height: 50px; margin-right: auto; margin-left: auto; margin-top: 10px; } #container { width: 750px; margin-right: auto; margin-left: auto; background-image:url(../img/white.gif); background-repeat: repeat; } #footer { width: 750px; margin-right: auto; margin-left: auto; } #logo { width: 300px; float: left; } #global-nav ul li { clear: both; display:inline; list-style:none; width: 450px; margin-right: auto; margin-top: auto; margin-bottom: auto; } .local-menu { width: 200px; height: 150px; margin: 0px 25px; list-style-type: none; float: left; } .local-menu ul li { list-style-type: none; } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <!DOCTYPE hTML PUBLIC "-//W3C//DTD XhTML 1.0 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="css/common.css" /> </head> <body> <div id="header"> <div id="logo"> <img src="img/logo.gif" /> </div> <div id="global-nav"> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> </div> <div id="container"> <!-- メインイメージ --> <img src="img/img_main.jpg" alt="タイトル" /> <!--// メインイメージ --> <div id="map"> <!-- MAP --> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> </div> <div id="footer"> <!-- フッター --> </div> </body> </html>
- 締切済み
- CSS
- htmlとcssの文章構造、これは正しいですか？
<h1>にテキストを入れることが必須で、 画像の上にマウスをどこに置いてもクリックすれば トップページに行く状態にしたくて下記コードを作りました。 下記コードはサンプルですが、 <!-- 質問の対象はここから --> <!-- ここまで --> の間でhtmlやcssの文書構造にしたがって正しく書かれているか心配です。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <style> #container #header { width: 900px; height: 300px; margin: 0px auto; padding: 0px; top: 0px; left: 0px; float: left; display: block; } #container #header #sample{ height: 170px; position: relative; background-color: #333; /* goo質問用で実際は入れません。画像が表示されないため代わりに。 */ } #container #header #sample h1{ position: absolute; top: 0px; left: 150px; color: #fff; font-size: 11px; font-weight: bold; line-height: 130%; /* h1内の大文字と下の小さい文字との間隔をあけるため */ } #container #header #sample h1 span{ font-size: 22px; line-height: 220%; } #container #header #sample h1 a:link, #container #header #sample h1 a:visited, #container #header #sample h1 a:hover, #container #header #sample h1 a:active{ color: #fff; /* 画像の範囲内は全てリンクさせたいので、マウスにのせたときに色を変える必要はないので変化無し */ text-decoration: none; } #container #header #navigat { width: 900px; height: 40px; float: left; margin: 0px; padding: 0px; list-style-type: none; } #container #header #navigat li { width: 225px; float: left; } </style> </head> <body> <div id="container"> <div id="header"> <!-- 質問の対象はここから --> <div id="sample"> <h1><a href=""><span>サンプル</span><br /><span>サンプルサンプル</span><br />サンプルサンプルサンプルサンプルサンプルサンプル<br />サンプルサンプルサンプルサンプルサンプルサンプル</a></h1> <a href=""><img src="" alt="" /></a> </div> <!-- ここまで --> <ul id="navigat"> <li id=""><a href="">メニュー１</a></li> <li id=""><a href="">メニュー２</a></li> <li id=""><a href="">メニュー３</a></li> <li id=""><a href="">メニュー４</a></li> </ul> </div> </div> </body> </html>
- ベストアンサー
- HTML
- 助けてください。。 CSSのレイアウトについて。
CSSのレイアウトについてのアドバイスをお願い出来ましたらと 思います。m(_ _)m 添付画像の様なレイアウトがしたく、いろいろやってみましたが、 何時間かかっても上手く行かなくて。。 A(画像）、（B ○の部分がテキストでリスト）、（C ○の部分が 画像を三段重ね）、D（画像）という様に、float: left;で配置して いき、 Bの○のテキストはリストで左頭揃えにしながら、 Bのブロックごとは右寄せで右にパディングで余白を取る。 Cの○の画像は左頭揃えにしながら三段重ね、 Cのブロックごとは左寄せでパディングはゼロにしたいと いう部分で上手く行かずに悩んでいます。。 元から書かれた物を直すという作業の上で、 戸惑っています。 自分では下記の様にやってみて途中やり直しを繰り返し して混乱して頭が止まってしまいました。。 よろしければ、アドバイスの方をお願い致します。m(_ _)m ☆ HTML <div id="header"> <!-- A--> <h1><img src="hogehoge.gif" alt="" width="175" height="64" /></h1> <!-- /A--> <p class="g_navi"><a href="@"><img src="hogehoge.gif" alt="" width="42" height="10" /></a><br> <a href="@"><img src="hogehoge.gif" alt="" width="42" height="10" /></a><br> <a href="@"><img src="hogehoge.gif" alt="" width="42" height="10" /></a> </p> <ul class="s_navi"> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> </ul> <!--D--> Dの部分は省略。 <!--/D--> </div> ☆CSS #header { margin: 0 10px 0; padding: 28px 0 0; width: 950px; height: 102px; position: relative; line-height: 1; } #header h1{ float: left; } #header .g_navi{ margin: 8px 0 0; padding: 0 32px 0 0; float: left; width: 270px; height: 70px; text-align: right; } #header .s_navi{ margin: 8px 0 0; padding: 0 0 0; float: left; width: 238px; height: 70px; line-height: 1; font-size: 1px; } #header .s_navi li{ margin: 0 0 10px; } ------- 以下D部分は略 －－－－－－－－－
- ベストアンサー
- CSS
- ナビゲーションバーの背景画像が表示されません（CSS）
私は今ホームページを作っておりまして、 先日ウェブデザインについての本を買ったのですがそこに書かれていた スタイルシートの記述例（ナビゲーションバーです）をまねて 自分で記述してみたのですが思うように表示できません。 どなたか教えてください。 ◆問題の部分です◆ スタイルシート div#navi{ width:900px; margin-bottom:7px; padding-bottom:7px;} ul ,li{ margin:0; padding:0; } ul#navbar{ list-style-type:none; width:900px; float:right; } ul#navbar li, ul#navbar li a{ float:left; text-indent:-9999px; display:block; width:100px; height:25px;} ul#navbar li#link a{ background:url(image/menu-kyousitu.png) no-repeat left top; float:right;} 以下同じ様にメニューが続き ul#navber li#sample1{background:url(image/menu-a5.png) no-repeat left top; float:right;} ↑最後のsampleの部分はリンクを張らないようにしたいのでこのように記述したところ、この部分には背景画像が表示されません。 HTML <div id="navi"> <ul id="navbar"> <li id="link"><a href="＊＊">リンク集</a></li> <li id="sample1">sample</li> </div> 見苦しい分で申し訳ありませんが、どなたかよろしくお願いします。
- ベストアンサー
- CSS
お礼
丁重なご教授ありがとうございます。 一度ご教授いただいた内容でやってみたいと思います。 取り急ぎ、お礼まで。
補足
ご教授いただいた内容でやってみましたが、現在のところ上手くいきませんでした。 初心者ですので、ご教授いただいた内容がまだまだ理解できないところも多く、今後の勉強とさせて頂きます。 ありがとうございました。