CSSで謎の空白ができてしまいます。その2| OKWAVE

CSSで謎の空白ができてしまいます。

最近CSSでサイトの構築をしているのですが↓のように途中で navi（パンくずリンク）とmenu＆main（メニューとメイン記事）の間に空白が出来てしまいます。 menuとmainにmargin: 0px;とpadding 0px;をしても駄目でした。どうすれば良いかご指導お願いします。 http://blog-imgs-16.fc2.com/t/e/s/testestes0101/test.png 以下ソースです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <style type="text/css">  </style> </head> <body> <div class="layout"> <div class="header"> <a href="index.html"><img src="title.png" border="0"></a> </div> <div class="navi"> <a href="index.html"> トップページ </a> </div> <div class="menu"> </div> <div class="main"> </div> <div class="footer"> </div> </div> </body> </html> ※タイトル画像は消してあります。

隙間ができてしまいます。

高さ7pxのボックスを作ったのに7px以上の大きさで表示され隙間ができてしまいます。 margin: 0px; padding: 0pxを追加しても解決しませんでした。 http://teatsite.ninja-x.jp/ ↑のborderで囲んである部分です。この隙間の部分を埋めるにはどうすればよいのかご指摘お願いいたします。以下ソース【html】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body> <div class="all"> <div class="header"> </div> <div class="menu"> <div class="font-menu"> <div class="menu-top"></div> <div class="menu-center">テスト</div> <div class="menu-bottom"></div> </div> </div> <div class="main"> <div class="font-main"> <div class="main-top"> テスト </div> <div class="main-center"> 本文テスト </div> <div class="main-bottom"></div> </div> </div> <div class="footer"> <div class="font-footer"> テスト </div> </div> </div> </body> </html> 【css】 body{ margin: 0px; padding: 0px; } img{ border: 0; vertical-align: top; } .all{ margin: 0px auto 0px auto; width: 720px; } .font-menu{ color: #ffffff; font-size: 12px; line-height: 150%; } .font-menu a:link{ color: #ffffff; text-decoration: none; } .font-menu a:visited{ color: #ffffff; text-decoration: none; } .font-menu a:hover{ color: #ffffff; text-decoration: underline; } .font-main{ font-size: 12px; line-height: 150%; } .font-footer{ font-size: 12px; } .header{ padding: 44px 0px 0px 0px; height: 56px; } .menu{ margin: 0px 20px 0px 0px; width: 160px; float: left; } .menu-top{/* 問題の部分 */ margin: 0px; padding: 0px; width: 158px; height: 0px; border: solid 1px #000000; background-image: url(pic_menu_top.png); background-repeat: no-repeat; } .menu-center{ width: 124px; height: 22px; padding: 4px 0px 0px 36px; background-image: url(pic_menu_center.png); background-repeat: no-repeat; } .menu-bottom{/* 問題の部分 */ margin: 0px; padding: 0px; width: 158px; padding: 0px; height: 5px; border: solid 1px #000000; background-image: url(pic_menu_bottom.png); background-repeat: no-repeat; } .main{ margin: 0px 0px 0px 20px; width: 520px; float: left; background-image: url(pic_main_wp.png); } .main-top{ margin: 0px; padding: 11px 0px 0px 40px; width: 480px; height: 29px; color: #ffffff; font-size: 16px; background-image: url(pic_main_top.png); background-repeat: no-repeat; } .main-center{ padding: 40px 40px 40px 40px; width: 440px; float: left; } .main-bottom{/* 問題の部分 */ margin: 0px; padding: 0px; width: 518px; height: 5px; border: solid 1px #000000; background-image: url(pic_main_bottom.png); background-repeat: no-repeat; } .footer{ padding: 14px 0px 0px 200px; width: 520px; height: 26px; text-align: center; clear: left; }

CSSについての質問

現在、CSSを使用して、ホームページを制作しています。 a:hoverを使って、メニューを作成しようとしているのですが、 http://www5.atpages.jp/ri19960914/menu.png ↑のようになってしまいます。（URLは、必ず直接入力、またはコピペしてください）イメージとしては、「BBS」を「TOP」と同じ高さにしたいのですが・・・（↓の画像のように） http://www5.atpages.jp/ri19960914/souzou.png メニュー周辺の、CSSとHTMLです。 --------------CSS------------------------- #head { background:url("/images/imgX.png") repeat-x; } #head .menu { padding:100px 0px; } #head .menu li a { padding:40px 40px; border-left:1px solid #0ff; border-right:1px solid #0ff; color:#000; float:left; } #head .menu li a:hover { padding:40px 40px; border-left:1px solid #0ff; border-right:1px solid #0ff; color:#000; background-color:#0ff; } ----------HTML----------- <div id="head"> <div class="menu"> <li><a href="/">TOP</a></li><li><a href="/bbs/">BBS</a></li> </div> ご指導いただければ、幸いです。お願いします。

外部スタイルシートは同じなのですが…

こんばんは。 HTMLをコーディングしていて困ったことが出て来たのでご指導願います。外部スタイルシートで共通のスタイルシートを指定し、コンテンツを組んでいるのですが、画像を挿入するとセンターで指定しているボックスが微妙に左へずれるのです。 HTMLのコードは下記／／／ <body> <div class="bace"> <div class="hedder"></div> <div id="menu"> <div class="menu"> <div class="menu_box"><a href="info.html">当サイトについて</a></div> <div class="menu_box"><a href="time.html">時間</a></div> <div class="menu_box_act">アクセス</div> <div class="menu_box"><a href="profile.html">紹介</a></div> <div class="menu_box"><a href="index.html">トップページ</a></div> <div class="clear"></div> </div> </div> <div class="main"> <h1>アクセス</h1> <div class="main_text"> <div align="center"><img src="map.jpg"/></div>　　←この部分で画像指示をするとレイアウトが左へずれる。 </div> <div class="main_text"> <h2>アクセス／設備</h2> ○○○徒歩３分<br /> 駐車場2台（バリアフリー）<br /> <br /> <h2>住所</h2> 〒000000000000000000000000<br /> 電話　123-456-789 </div> </div> <div class="futter">Copyright © 2007 All Rights Reserved</div> </div> </body> CSSは下記／／／ * { margin:0; padding:0; } .bace{ width:750px; height: auto; margin-right: auto; margin-left: auto; font-size:90%; } .hedder{ width:750px; height:150px; background-image: url(hed.jpg); background-repeat: no-repeat; } .menu{ width:700px; height:30px; margin-top: 10px; padding-right: 25px; padding-left: 25px; } .menu_box{ height:30px; width:120px; float:left; margin-right: 10px; margin-left: 10px; } .menu_box_act{ height:30px; width:120px; float:left; margin-right:10px; margin-left:10px; display:block; text-align:center; line-height:30px; background-image: url(menu_back2.jpg); background-repeat: repeat-x; } .main{ width:670px; padding-right: 40px; padding-left: 40px; margin-top: 15px; height: auto; } .main_text{ margin-top: 5px; padding-right: 15px; padding-left: 15px; width: 640px; margin-bottom: 5px; height: auto; position: relative; } .futter{ height:15px; width:750px; text-align:center; background-color: #002187; color: #CCCCCC; margin-top: 15px; font-size: 90%; } .clear{ float:clear; } /* メニュー用リンクスタイル */ #menu a{ display:block; color:#333333; height:30px; line-height:30px; text-decoration:none; text-align:center; background-image: url(menu_back1.jpg); background-repeat: repeat-x; } #menu a:hover,a:focus{ color:#333333; background-image: url(menu_back3.jpg); background-repeat: repeat-x; } #menu a:active{ color:#333333; background-image:url(menu_back2.jpg); background-repeat:repeat-x; } 画像を入れないと全くぶれないのに、入れた途端レイアウトはそのまま左右へぶれるということが起こるのでしょうか？リンクをサイト内でたどるとこのページだけ左へずれて違和感があります。ご指摘の程、どうぞよろしくお願いいたします。

css

上下２つの画像で角丸にcssでしようと思います。上はこれでいいんですが下の表示はどうするんでしょうか。 <div id="sub"> <h1>メニュー</h1> <ul> <li><a href="1.html" >123</a></li> <li><a href="2.html" >123</a></li> <li><a href="3.html" >123</a></li> </ul> </div> #sub { float:right; margin-top:5px; width:180px; padding:5px 5px 2px 5px; background-image: url(ue.gif); background-repeat:no-repeat; } #sub h1 { background: url(images/a.gif); color:#333333; font-size:11px; font-weight: normal; padding:5px 20px ; } #sub ul{ padding:0; list-style:none; background-color:#FFFFFF; } #sub li{ margin:0 0 0 0px; border-bottom:1px solid #0000ff; } #sub li a { display:block; padding-left:20px; background:url(images/1.gif) 2% 50% no-repeat; line-height:35px; } わかりましたらよろしくお願いします。

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初心者です、ガイドブック見ながら地道に一歩一歩制作してます。制作中にいくつかどうしても分からない壁にブチあたっています。初心者ゆえ基本的なこと聞くな!と思われる方もいらっしゃると思いますが、どうかアドバイスをお願いします。 1：div#leftmenuにCSSで配置＆ロールオーバーするよう記述したボタン画像が６つ。それぞれリンクを張り、違うページに飛びたい（きっと基本的なことでしょうね...でも分からないんですスイマセン。） 2：#div rightbox-top全体背景にbackground-imageを表示したいが<h2>と<p>要素の間で表示されない空白ができる。これを解消してきちんとbackground-imageを表示させたい。 HTMLーーーーーーーーーーー <div id="leftmenu"> <a href="" id="menu-botton01"></a> 　　　　　(省略) <a href="" id="menu-botton06"></a> </div> <div id="rightmenu"> <div id="rightbox-top"> <h3>本文</h3> <p><img src="image/001.png" alt="画像説明"></p> <h2>見出しタイトル</h2> <p>説明文いろいろ</p> </div> </div> CSSーーーーーーーーーーー div#leftmenu { width:161px; margin:3px 0px 0px 0px; float:left; } #leftmenu a { display:block; } #menu-botton01 { background-image:url(../image/leftmenu-botton_03.png); width:161px; height:50px; } #menu-botton01:hover{ background-image:url(../image/leftmenu-botton2_03.png); width:161px; height:50px; } div#rightmenu { width:639px; float:right; } div#rightbox-top { width:639px; } #rightbox-top h2 { background-image:url(../image/rightbox_03.png); background-repeat:repeat-y; font-size:medium; font-family:"ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; color:#CC9966; width:609px; padding-left:30px; } #rightbox-top h3 { background-image:url(../image/rightbox_01.png); background-repeat:no-repeat; width:639px; height:30px; margin:0px; text-indent:-9999px; } #rightbox-top p { background-image:url(../image/rightbox_03.png); background-repeat:repeat-y; width:579px; margin:0px; height:auto; padding:0px 30px 0px 30px; font-family:"ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size:small; letter-spacing:130%; line-height:160%; color:#333333; }

CSSで横に伸縮するボタンについて

参考サイトを基にして、横に伸縮するポタンをCSSで作っており、FireFox2.0ではうまく表示されるのですがIE6および7では右側が切れて表示されてしまい困っております。どなたかご存知の方、作成中のHTMLを掲載いたしますので、「このプロパティ部分が抜けている」等ご指摘願えませんでしょうか？ ●参考サイト http://www.hedgerwow.com/360/dhtml/css-round-button/demo.php ●サンプルHTML <div id="searchArea"> <a class="button active" href="#"> <span>あああああああああああああああ</span> </a> <a class="button" href="#"> <span>あああああ</span> </a> </div> <style> a.button { background:url(form_buttons.png) no-repeat 0 0; text-decoration:none; height:30px; color:#222; display:-moz-inline-box; display:inline-box; margin-right:8px; } a.button span { background:url(form_buttons.png) no-repeat right top; height:30px; display:-moz-inline-box; line-height:1; margin:0 -16px 0 10px; padding:8px 20px 0 10px; } a.button:hover { background-position:left -60px; } a.button:hover span { background-position:right -60px; } /*アクティブ*/ a.active { background:url(form_buttons.png) no-repeat left -120px; } a.active span { background:url(form_buttons.png) no-repeat right -120px; } </style>

ドロップダウンメニューについて

apycomでhttp://apycom.com/menus/1-yellow-green.htmlのドロップダウンメニューをダウンロードして設定しているのですが、サブメニューのリンク文字の変更方法が分からなくて困っています。サブメニューの背景を変更したのでリンクの文字をもっとハッキリ見える色に変更したいです。マウスが乗った時の文字の色も変更できません。昨日から色々やってるのですがどうしても解決できないのでお聞きしました。よろしくお願いします。 /** ********************************************* * Prototype of styles for horizontal CSS-menu * @data 30.06.2009 ********************************************* * (X)HTML-scheme: * <div id="menu"> * <ul class="menu"> * <li><a href="#" class="parent"><span>level 1</span></a> * <ul> * <li><a href="#" class="parent"><span>level 2</span></a> * <ul><li><a href="#"><span>level 3</span></a></li></ul> * </li> * </ul> * </li> * <li class="last"><a href="#"><span>level 1</span></a></li> * </ul> * </div> ********************************************* */ /* menu::base */ div#menu { height:41px; background : transparent url(main-bg.png) repeat-x scroll 0% 0%; } div#menu ul { margin: 0; padding: 0; list-style: none; float: left; } div#menu ul.menu { padding-left: 30px; } div#menu li { position: relative; z-index: 9; margin: 0; padding: 0 5px 0 0; display: block; float: left; } div#menu li:hover >ul { left: -2px; } div#menu a { position: relative; z-index: 10; height: 41px; display: block; float: left; line-height: 41px; text-decoration: none; font: normal 12px Trebuchet MS; } div#menu a:hover, div#menu a:hover span { color: #fff; } div#menu li.current a {} div#menu span { display: block; cursor: pointer; background-repeat: no-repeat; background-position: 95% 0; } div#menu ul ul a.parent span { background-position:95% 8px; background-image : url(item-pointer.gif); } div#menu ul ul a:hover.parent span { background-image : url(item-pointer-mover.gif); } /* menu::level1 */ div#menu a { padding: 0 10px 0 10px; line-height: 30px; color : rgb(56, 56, 56); } div#menu span { margin-top: 5px; }/**@replace#1*/ div#menu li { background : transparent url(main-delimiter.png) no-repeat scroll 98% 4px; } div#menu li.last { background: none; } /* menu::level2 */ div#menu ul ul li { background: none; } div#menu ul ul { position: absolute; top: 38px; left: -999em; width: 163px; padding: 5px 0 0 0; background : rgb(179, 221, 81) none repeat scroll 0% 0%; margin-top:1px; } div#menu ul ul a { padding: 0 0 0 15px; height: auto; float: none; display: block; line-height: 24px; color : rgb(56, 56, 56); } div#menu ul ul span { margin-top: 0; padding-right: 15px; _padding-right: 20px; color : rgb(56, 56, 56); } div#menu ul ul a:hover span { color: #fff; } div#menu ul ul li.last { background: none; } div#menu ul ul li { width: 100%; } /* menu::level3 */ div#menu ul ul ul { padding: 0; margin: -38px 0 0 163px !important; margin-left:172px; color: #FFFFFF; } /* colors */ div#menu ul ul ul { background: rgb(41,41,41); } div#menu ul ul ul ul { background: rgb(38,38,38); } div#menu ul ul ul ul { background: rgb(35,35,35); } /* lava lamp */ div#menu li.back { background : transparent url(lava.png) no-repeat scroll right -44px !important; background-image : url(lava.gif); width: 13px; height: 44px; z-index: 8; position: absolute; margin: -1px 0 0 -5px; } div#menu li.back .left { background : transparent url(lava.png) no-repeat scroll left top !important; background-image : url(lava.gif); height: 44px; margin-right: 8px; } 【html】 <div id="menu"> <ul class="menu"> <li><a href="#"><span>Home</span></a> <li><a href="#" class="parent"><span>商品紹介</span></a> <ul> <li><a href="#"><span>コンクリート</span></a> <li><a href="#"><span>木材</span></a> <li><a href="#"><span>アクセサリー</span></a> <li><a href="#"><span>砂</span></a> <li><a href="#"><span>フード</span></a>

HTML　CSSを、教えてください。

お世話になります。 HTMLを始めたばかりで、超初心者ですので、ご教授いただけたらと思います。以下の図のような感じに並べたいです。バックグラウンドには、青色。赤と緑の部分は、画像配置、また、右の緑の画像の上に, オレンジのボタン配置を行いたいのです。ただ、オレンジのボタン配置の仕方が、なかなか出来ずにいます。以下のHTMLとCSSには、オレンジのボタンを入れずに、まず配置をしてみましたが…。ただ、やはり右の緑の画像が、崩れてしまう感じも…。オレンジのボタンを入れていただいた形で、お願いできないでしょうか？（オレンジ画像 width＝100　height＝50 でお願いします。）【 HTML 】 <div class="Red"><img src="img/Red.png" width="300" height="50" /> <div class="contents"> <div class="Color_Box"> <div class="Green01"><img src="img/Green01.png" width="200" height="100" /> </div> <div class="Green02"><img src="img/Green02.png" width="200" height="100" /> </div> </div> </div> </div> 【 CSS 】 div.Red{ background:url(img/Bule.png) 0 100% repeat-x; height:200px; margin-top:45px; text-align:center; } div.Color_box{ width:450px; height:100px; } div.Green01{ width:200px; padding-right:50px; float:left; } div.Green02{ width:200px; float:left; }

CSSで横並びのロールオーバーの表示がおかしいです

知人に頼まれて、ホームページを作成中なのですが、一枚の組み合わせた画像を使い、横に5つの内容を表示してbackground-positionで表示を指定して、ロールオーバーの横並びのナビを作っています。当方はあまり知識がないなりに、様々なサイト様を参考にしたのですが、うまく表示されませんのでご助力をお願いいたします。症状としては、画像が横並びに5つ表示はされるものの、position: 0 0; の値の画像が5つ並んで表示されます。オンマウスも効いていません。使用ソフトは、HeTeMULU Creator 確認ブラウザは、FireFox5 表示したい画像は、width 190px height 60pxを5つ横に繋げた950pxの画像とそれの色違いをもう一つ用意して、加工して上下に繋げた、950px 120pxの画像です。以下ソースです。 /*---HTML*/ <?xml version="1.0" encoding="shift_jis　"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"><head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <title>###</title> </head> <body> <div id="main"> <div id="menu"> <ul> <li class="menu1"><a href="#">sample</a></li> <li class="menu2"><a href="#">sample</a></li> <li class="menu3"><a href="#">sample</a></li> <li class="menu4"><a href="#">sample</a></li> <li class="menu5"><a href="#">sample</a></li> </ul> </div> </div> </body> </html> /*---CSS*/ #menu{ width: 950px; height: 60px; margin-top: 20px; margin-bottom: 20px; padding: 0px; } #menu ul{ margin: 0px; padding: 0px; } #menu li{ width: 190px; margin: 0px; padding: 0px; float: left; text-indent: -9999px; } #menu a{ display: block; width: 100%; height: 60px; background-image: url(../img/menu001.png); background-repeat: no-repeat; .menu1 a{ background-position: 0px 0px;} .menu2 a{ background-position: -190px 0px;} .menu3 a{ background-position: -380px 0px;} .menu4 a{ background-position: -570px 0px;} .menu5 a{ background-position: -760px 0px;} #menu a:hover{ background-image: url(../img/menu001.png); background-repeat: no-repeat; .menu1 a:hover{ background-position: 0px -60px;} .menu2 a:hover{ background-position: -190px -60px;} .menu3 a:hover{ background-position: -380px -60px;} .menu4 a:hover{ background-position: -570px -60px;} .menu5 a:hover{ background-position: -760px -60px;} ご指摘を宜しくお願いいたします。

CSS floatについて教えて下さい。

【html】 <div id="wrapper"> <div id="top"></div> <div id="middle"> <div id="a"></div> <div id="b"></div> </div> </div> 【css】 * { margin:0; padding:0; } body { background:url(../img/common/bg.gif) repeat} #wrapper { width:800px; margin:0 auto;} #top { background:url(../img/common/contents-flame-top.gif) no-repeat; height:30px;} #middle { background-color:#FFF; padding:0 50px 100px 50px;} #a { float:left; width:360px; height:100px; background-color:#009966;} #b { float:left; width:340px; height:150px; background-color:#CC0033;} ------------------------------------- 上記でdivのaとbにfloatの設定をしないと#middleの中にaとbが入るのですが、floatの設定を入れると#middleの外にaとbが出てしまいます。どこが間違っているのか教えて頂けますか？初心者ですので、よろしくお願い致します。

CSSのみでプルダウンメニューを作りたい

こんにちは。 WEB制作は全くの素人です。 CSSのみで下記のようなプルダウンメニューを作りたいのですが、どうにもならず困っています。 http://c-brains.jp/blog/wsg/08/06/05-155929.php 現在使用中のCSS -------------------------------------- #header-menu { height: 23px; background-color: #333333; margin: 0px; padding: 8px 0 0 15px; background: url(img/head_menu_back.gif); background-repeat: repeat-x; text-align: left; width: auto; } #header-menu ul { text-align: left; margin: 0px; padding: 0px } #header-menu li { color: #ffffff; display: inline; padding-left: 13px; padding-right: 8px; background: url(img/l_icon.gif) no-repeat; background-position: left center; } #header-menu a { color: #ffffff; text-decoration: none; } #header-menu a:hover { color: #cccccc; } ------------------------------- 現在使用中のhtml -------------------------------- <div id="header-menu"> <ul> <li><a href="index.html">HOME</a></li> <li><a href="profile1.html">会社情報</a></li> <li><a href="service1.html">サービス</a></li> <li><a href="ethic1.html">企業理念</a></li> <li><a href="contact1.html">お問合わせ</a></li> <li><a href="job1.html">採用情報</a></li> <li><a href="indexeng.html">English</a></li> </ul> </div> ------------------------------------------------ 上記の各項目に追記しプルダウン式のリストにしたいです。 (カーソルを上にのせるとリストが開っく感じのものを希望します。）恐れ入りますが、どなたかご教授いただきたくお願い致します。

CSSについて

/** ナビゲーション */ #mainNavi { width:740px; height:50px; overflow:hidden; margin-left:200px; } #mainNavi li, #mainNavi li.acitve { float:left; padding-left:10px; margin-left:1px; background:url(/images/navi.png) left 0px no-repeat; } #mainNavi a { height:50px; display:block; line-height:50px; padding:0 13px 0 3px; background:url(/images/navi.png) right 0px no-repeat; color:#fff; font-size:13px; font-weight:bold; text-decoration:none; } #mainNavi li.active { background:url(/images/navi.png) left -10px no-repeat; } #mainNavi li.active a { background:url(/images/navi.png) right -100px no-repeat; color:#fff; } #mainNavi .wii li.active { background:url(/images/navi.png) left -50px no-repeat; } #mainNavi .wii li.active a { background:url(/images/navi.png) right -50px no-repeat; color:#fff; } #mainNavi .ds li.active { background:url(/images/navi.png) left -150px no-repeat; } #mainNavi .ds li.active a { background:url(/images/navi.png) right -150px no-repeat; color:#fff; } #mainNavi a:hover{ color:#ff0; text-decoration:underline; } #mainNavi li.active a:hover { } というCSSを使って、ホームページを作成しました。すべて人から教えてもらったものなので、CSSは初心者です・・・。そこで思ったのですが、 TOP・掲示板・メール等・・・のメニューを、左寄りにすることはできないのでしょうか？よろしくお願いします。

CSS、IE6-7で要素が消えてしまいます。

CSS初心者です。過去の質問や書籍、webでの検索をしつつも解決しませんでしたので、どうかお力添え下さい！お願い致します。当方ではwebレイアウトの確認をMac OSX Firefox、Opera、Safari でおこなっています。 Windows IE については、オンラインのレンダラーでの確認です。シンプルな構造のページのはずなのですが、以下の HTML / CSS でリストを横並びにしたナビゲーションバーが IE6、IE7で表示されません。 " absolute position dissappearing bug" ではないのでしょうか？ちなみに、画像置換で背景画像をマウスオーバーで変更するタイプのものです。 ---------------------------------------HTML（body以下） <div id="wrap" > <div class="navwrap"> <div id="nav"> <ul> <li><a href="menu1.html" class="nav-1">メニュー１</a></li> <li><a href="menu2.html" class="nav-2" >メニュー２</a></li> <li><a href="menu3.html" class="nav-3">メニュー３</a></li> </ul> </div> </div> </div> </body></html> ---------------------------------------CSS（上記部分） #wrap { height:100%; width: 100%; background:url(parts/bg.jpg) no-repeat right bottom; margin:0;} .navwrap { 　　width: 100%; 　　text-align: center; 　　position: absolute; 　　bottom: 30px; 　　} #nav { 　　position: static; 　　width:700px; 　　height: 50px; 　　text-align:left; 　　margin:0px auto; 　　} html > body #nav, html > body #nav ul li a { /* for Safari */height: 50px;} #nav ul { margin: 0; padding: 0; list-style: none; 　　} #nav ul li { float:left; width: 140px; 　　} #nav ul li a { display: block; color: #333; font-size: 75%; text-align: center; letter-spacing: 0.1em; text-decoration: none; text-indent: -9999px; 　　} #nav ul li a:hover { color: #000; background-position: bottom; 　　} .nav-1 {background: url(parts/nav-concept.png) top left no-repeat;} .nav-2 {background: url(parts/nav-about.png) top left no-repeat;} .nav-3 {background: url(parts/nav-collection.png) top left no-repeat;} 長くてすみませんが、詳しい方、どうかお願い致します！

ＣＳＳで右寄せメニューを一行にしたい

メインメニューを画面の右側に一行に表示したいのですが、 ----------------------------- タイトル　　　　　　ｍ１　ｍ２　ｍ３・・・ ----------------------------- メニューはロールオーバー効果を使っていて、画像の形から、文字を右寄せにしたいのです。 .m_ichi { padding: 5px 5px 5px 0px; float: right; } .m_mn { width: 100px; height: 30px; text-align: right; vertical-align: text-bottom; } a.m_menu:link { font-family: sans-serif; font-size: 16px; font-weight: bold; color: #ffffff; margin: 0px; padding: 10px 0px 2px 1px; width: 100px; height: 30px; background-image: url(img/menu_b.gif); background-repeat: no-repeat; display: block; text-decoration: none; } a.m_menu:visited { a.m_menu:hover { （a.m_menu:link と同じような記述） <div class="m_ichi"> <span class="m_mn"><a href="#" class="m_menu">m1</a></span> <span class="m_mn"><a href="#" class="m_menu">m2</a></span> <span class="m_mn"><a href="#" class="m_menu">m3</a></span> </div> と記述したら、メニューが縦に並んでしまい、文字も左に寄ってしまいました。<TD>記述を使えば、なんとかできたのですが、スタイルシートできれいに表示させる方法を教えて下さい。

CSSのみでプルダウンメニューを作りたい

CSSのみでプルダウンメニューを作りたいこんにちは。 WEB制作は全くの素人です。 CSSのみで下記のようなプルダウンメニューを作りたいのですが、どうにもならず困っています。 http://c-brains.jp/blog/wsg/08/06/05-155929.php 現在使用中のCSS -------------------------------------- #header-menu { height: 23px; background-color: #333333; margin: 0px; padding: 8px 0 0 15px; background: url(img/head_menu_back.gif); background-repeat: repeat-x; text-align: left; width: auto; } #header-menu ul { text-align: left; margin: 0px; padding: 0px } #header-menu li { color: #ffffff; display: inline; padding-left: 13px; padding-right: 8px; background: url(img/l_icon.gif) no-repeat; background-position: left center; } #header-menu a { color: #ffffff; text-decoration: none; } #header-menu a:hover { color: #cccccc; } ------------------------------- 現在使用中のhtml -------------------------------- <div id="header-menu"> <ul> <li><a href="index.html">HOME</a></li> <li><a href="profile1.html">会社情報</a></li> <li><a href="service1.html">サービス</a></li> <li><a href="ethic1.html">企業理念</a></li> <li><a href="contact1.html">お問合わせ</a></li> <li><a href="job1.html">採用情報</a></li> <li><a href="indexeng.html">English</a></li> </ul> </div> ------------------------------------------------ 上記の各項目に追記しプルダウン式のリストにしたいです。 (カーソルを上にのせるとリストが開っく感じのものを希望します。）恐れ入りますが、どなたかご教授いただきたくお願い致します。

cssで角丸で一部の画像だけを変更したい。

cssで角丸テーブルにトライしています。（参考にしたサイトhttp://jmblog.jp/archives/94）これをアレンジして、左上の画像（タイトル部分にする）のみを枠によって変えたいと思っています。<span class="taiken"></span>のクラス名を変えることで画像を変えられると良いのですが、でもどうしても上手く行きません。どうぞどなたかお助け下さい。＊＊＊＊＊＊＊＊ＨＴＭＬ＊＊＊＊＊＊＊＊＊ <div class="dialog"> <div class="header"><span class="taiken"></span> <div class="c"></div> </div> <div class="body"> <div class="c">テストテスト</div> </div> <div class="footer"> <div class="c"></div> </div> </div> ＊＊＊＊＊＊＊＊ CSS ＊＊＊＊＊＊＊＊ .dialog { width:698px; } .dialog .header .c, .dialog .footer .c{ font-size:1px; /* ensure minimum height */ height:20px; } .dialog .header span.taiken{ background-color: transparent; background-image: url(../pic/head_r1_c1.gif); background-repeat: no-repeat; background-position: 0px 0px; height: 37px; } .dialog .header .c{ background-color: transparent; background-image: url(../pic/head_r1_c2.gif); background-repeat: no-repeat; background-position: right 0px; height: 37px; } .dialog .body{ background-color: transparent; background-image: url(../pic/body_r2_c1.gif); background-repeat: repeat-y; background-position: 0px 0px; } .dialog .body .c{ background-color: transparent; background-image: url(../pic/body_r2_c2.gif); background-repeat: repeat-y; background-position: right 0px; } .dialog .footer{ background-color: transparent; background-image: url(../pic/footer_r3_c1.gif); background-repeat: no-repeat; background-position: 0px 0px; } .dialog .footer .c{ background-color: transparent; background-image: url(../pic/footer_r3_c2.gif); background-repeat: no-repeat; background-position: right 0px; } 宜しくお願いいたします。

cssを使ったロールオーバについて　どちらの記述が良いでしょうか？

cssを使ったロールオーバについて　どちらの記述が良いでしょうか？ cssでのロールオーバを使いたく、以下のようなタグに辿りつきました。 ---------------------------------------------------------------------- ul.menu { margin:0px 0px 25px 0px; padding:0px; clear:both; float:left; width:200px;} ul.menu li {float:left; width:100px; display:inline; text-indent:-9999px; overflow:hidden; ist-style:none;} ul.menu li a {display:block; width:100px; height:50px;} li.menu1 a {background:url(image/menu.gif) 0 0 no-repeat;} li.menu1 a:hover {background:url(image/menu.gif) 0 -50px no-repeat;} li.menu2 a {background:url(image/menu.gif) -100px 0 no-repeat;} li.menu2 a:hover {background:url(image/menu.gif) -100px -50px no-repeat;} <ul class="menu"> <li class="menu1"><a href="a.html" title="a">a</a></li> <li class="menu2"><a href="b.html" title="b">b</a></li> </ul> ---------------------------------------------------------------------- 表示はそれで上手く行ったのですが、overflow:hidden;を使うとIE7でスクロールバーが出ないんじゃないか？と言われ、下記のように書き直しました。 ---------------------------------------------------------------------- #menu { width:200px; height:50px; margin : 0px 0px 25px 0px ; } #menu h2 {width:100px; height:50px; margin:0; float:left;} #menu h2 a {display:block; width:100px; height:50px; background-image:url(image/menu.gif) ;} a.menu1 { background-position: 0 0 ;} a:hover.menu1 { background-position: 0 -50px ;} a.menu2 { background-position: -100px 0 ;} a:hover.menu2 { background-position: -100px -50px;} <div id="navi"> <h2><a href="a.html" class="menu1" title="a"></a></h2> <h2><a href="b.html" class="menu2" title="b"></a></h2> </div> -------------------------------------------------------- こちらでも表示は出来たのですが、後からIE7で確認した所初めのタグでもスクロールバーは表示出来ました。とはいえやはり不安ですし後者で行こうかと思ったのですが、後者の場合も<a></a>の間に何もないことが気にかかり決めかねています。詳しい方がいらっしゃいましたら、どっちの方がいいかのアドバイス等頂けないでしょうか。よろしくお願いします。

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のおかしいところがあればご指摘をお願いいたします。どうぞよろしくお願いいたします。

CSSで謎の空白ができてしまいます。その2

質問者が選んだベストアンサー

補足 2008/01/05 13:36

その他の回答 (3)

補足 2008/01/04 18:01

補足 2008/01/04 12:07

補足 2008/01/04 00:58

関連するQ&A

CSSで謎の空白ができてしまいます。

隙間ができてしまいます。

CSSについての質問

外部スタイルシートは同じなのですが…

css

CSSの継承について...

このCSSのどこを直せばいいですか？アドバイス求ム

CSSで横に伸縮するボタンについて

ドロップダウンメニューについて

HTML　CSSを、教えてください。

CSSで横並びのロールオーバーの表示がおかしいです

CSS floatについて教えて下さい。

CSSのみでプルダウンメニューを作りたい

CSSについて

CSS、IE6-7で要素が消えてしまいます。

ＣＳＳで右寄せメニューを一行にしたい

CSSのみでプルダウンメニューを作りたい

cssで角丸で一部の画像だけを変更したい。

cssを使ったロールオーバについて　どちらの記述が良いでしょうか？

CSSでIE6だけ出る隙間をなくしたい

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

CSSで謎の空白ができてしまいます。その2

質問者が選んだベストアンサー

補足 2008/01/05 13:36

その他の回答 (3)

補足 2008/01/04 18:01

補足 2008/01/04 12:07

補足 2008/01/04 00:58

関連するQ&A

CSSで謎の空白ができてしまいます。

隙間ができてしまいます。

CSSについての質問

外部スタイルシートは同じなのですが…

css

CSSの継承について...

このCSSのどこを直せばいいですか？アドバイス求ム

CSSで横に伸縮するボタンについて

ドロップダウンメニューについて

HTML CSSを、教えてください。

CSSで横並びのロールオーバーの表示がおかしいです

CSS floatについて教えて下さい。

CSSのみでプルダウンメニューを作りたい

CSSについて

CSS、IE6-7で要素が消えてしまいます。

ＣＳＳで右寄せメニューを一行にしたい

CSSのみでプルダウンメニューを作りたい

cssで角丸で一部の画像だけを変更したい。

cssを使ったロールオーバについて どちらの記述が良いでしょうか？

CSSでIE6だけ出る隙間をなくしたい

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

HTML　CSSを、教えてください。

cssを使ったロールオーバについて　どちらの記述が良いでしょうか？