- ベストアンサー
CSSで謎の空白ができてしまいます。その2
前回の質問のときは縦幅の設定heightからpaddingの引き算を忘れて空白が出来ていました。 今回はそれに気をつけて横幅のweightを設定したのですがまたも空白が出来てしまいました。 こんな状態です↓ http://teatsite.ninja-x.jp/ 1.この空白はどうすれば無くなるのか。 2.ついでによろしければメニュー部分の画像を隙間無く並べる方法 以上の2つ（片方だけでも良いです。）の御教授お願いします。 以下ソースです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> <!-- body{/* 全体の要素 */ margin: 0px; color: #555555; background-color: #E3E5E6; } .layout{/* 全体を決める要素 */ margin: 0px auto 0px auto; width: 850px; } .header{/* ヘッダー部分 */ padding: 35px 0px 0px 50px; height: 65px; background: url("title_bg.png"); background-repeat: no-repeat; } .navi{/* サイト内のナビゲーション */ height: 27px; padding: 13px 0px 0px 60px; font-size: 14px; background: url("menu.png"); background-repeat: no-repeat; } .navi a:link{/* ナビゲーション内のリンクの色 */ color: #555555; } .navi a:visited{/* ナビゲーション内の訪問済みリンクの色 */ color: #555555; } .menu{/* メニュー部分 */ padding: 0px 30px 0px 15px; background-color: #FFFFFF; width: 170px; float: right; } .menu-category{/* メニュー部分のカテゴリー */ margin: 0px 0px 40px 0px; padding: 0px; } .main{/* メイン部分 */ padding: 0px 30px 0px 15px; background-color: #FFFFFF; width: 590px; float: right; } .footer{/* フッター部分 */ background-color: #FFFFFF; clear: right; height: 40px; } --> </style> </head> <body> <div class="layout"> <div class="header"> </div> <div class="navi"> <a href="index.html"> トップページ </a> </div> <div class="menu"> <div class="menu-category"> <a href="index.html"><img src="dummy_menu_category.png" border="0"></a> <a href="index.html"><img src="dummy_menu_category.png" border="0"></a> <a href="index.html"><img src="dummy_menu_category.png" border="0"></a> </div> </div> <div class="main"> </div> <div class="footer"> </div> </div> </body> </html>
- fgc4812
- お礼率22% (2/9)
- レンタルサーバ・ASP
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
.layout{/* 全体を決める要素 */ margin: 0px auto 0px auto; width: 850px; background-color: #FFFFFF; /*ここ追加*/ } 見かけ上、背景色が白ければいいのかな。
その他の回答 (3)
- goldfox
- ベストアンサー率49% (123/249)
> その下の背景色が表示されている部分です。 そこって要するに「メイン部分」ですよね？ footerがメニューリンクの「下」に出るようになっているため、 メインの中身がなければ、空白になってしまう部分。 （border付きのページでmain内に中身を書けば分かると思いますが…） mainは「中身がなくても」menu-categoryからfooterまでの間に広がっていてほしいとか、そういうことなのでしょうか？ 横の空白は関係ないんでしょうか？
補足
menuの部分が縦に広がったらmainもmenuと同じ高さに広がるようにしたいんです。 横の空白は関係はないです。
- goldfox
- ベストアンサー率49% (123/249)
えーと、mainのブロックの左に空白ができる、ということですか？ float: right;を外せば左にぴったり来ますが、そういうことですか？ もしそうならfloat: right;をfloat: left;にすればよいかと思いますが、これではだめですか？
補足
mainの下のほうです。 ただいま目印に「ここはメニュー部分」とつけてみました。 その下の背景色が表示されている部分です。
- outbrave
- ベストアンサー率60% (231/380)
>2.ついでによろしければメニュー部分の画像を隙間無く並べる方法 .menu{/* メニュー部分 */ /*padding: 0px 30px 0px 15px;*/ padding: 0; >1.この空白はどうすれば無くなるのか。 .main{/* メイン部分 */ padding: 0px 30px 0px 15px; background-color: #FFFFFF; width: 590px; /*ここが大きいので下に落ちている*/ float: right; } しかしメニュー部分を padding: 0; にすることで、width: 631px; でもOKかな。 配置を確認するには、全てに border を入れるとよいです。 border: solid 1px #color;
補足
1 .menu{/* メニュー部分 */ padding: 0px 30px 0px 15px; の部分をpadding 0;にしてみましたがだめみたいです。↓のようになってしまいました。 http://teatsite.ninja-x.jp/test3.html この部分はメニュー画像の下にカテゴリー画像を設置するために意図的に書いたので、たぶん違うと思います。 2 borderで配置を確認したところ下に落ちているみたいではないみたいです。 http://teatsite.ninja-x.jp/test2.html ※solid 1px×2の分を左右のpaddingから引いてあります。
関連するQ&A
- 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"> <!-- body{/* 全体の要素 */ margin: 0px; color: #555555; background-color: #E3E5E6; } .layout{/* 全体を決める要素 */ margin: 0px auto 0px auto; width: 850px; } .header{/* ヘッダー部分 */ padding: 35px 0px 0px 50px; height: 65px; background: url("title_bg.png"); background-repeat: no-repeat; } .navi{/* サイト内のナビゲーション */ height: 40px; padding: 13px 0px 0px 60px; font-size: 14px; background: url("menu_bg.png"); background-repeat: no-repeat; } .navi a:link{/* ナビゲーション内のリンクの色 */ color: #555555; } .navi a:visited{/* ナビゲーション内の訪問済みリンクの色 */ color: #555555; } .menu{/* メニュー部分 */ background-color: #FFFFFF; width: 215px; float: right; } .main{/* メイン部分 */ background-color: #FFFFFF; width: 635px; float: right; } .footer{/* フッター部分 */ background-color: #FFFFFF; clear: right; height: 40px; } --> </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> ※タイトル画像は消してあります。
- ベストアンサー
- レンタルサーバ・ASP
- 隙間ができてしまいます。
高さ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; }
- ベストアンサー
- レンタルサーバ・ASP
- 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> ご指導いただければ、幸いです。 お願いします。
- ベストアンサー
- CSS
- 外部スタイルシートは同じなのですが…
こんばんは。 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; } 画像を入れないと全くぶれないのに、入れた途端レイアウトはそのまま左右へぶれるということが起こるのでしょうか？ リンクをサイト内でたどるとこのページだけ左へずれて違和感があります。 ご指摘の程、どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- 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の継承について...
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>
- 締切済み
- CSS
- ドロップダウンメニューについて
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
補足
真ん中の部分だけを白色にしたかったのですが、CSSだけでするのは難しいことなのかもしれませんね。 とりあえず白色の画像を真ん中に持ってくるという方法で解決しました。 これで回答を締め切らせてもらいます。 回答してくださった皆さん、大変ありがとうございました。