- ベストアンサー
初心者がPHPのプログラムでレイアウト崩れ問題を解決する方法
- PHPのプログラムで組んだレイアウトが崩れる問題について、初心者でも解決できる方法を教えてください。
- 初心者が組んだPHPのプログラムでレイアウトが崩れる問題が発生しています。どのようにすれば解決できるのでしょうか。
- PHPのプログラムを初めて組んだ初心者ですが、レイアウトが崩れてしまいます。解決方法を教えてください。
- sinto58167
- お礼率55% (39/70)
- PHP
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
関連するQ&A
- レイアウト、フッターが崩れてしまいます。
横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; }
- 締切済み
- その他([技術者向] コンピューター)
- IEとFirefoxの見え方のずれにおけるCSSの解決法（liタグ）
こんにちは、質問させて下さい。 現在 li タグを使って、メニュー（画像）を作っていたのですが、 IEでは表示されるのですが、firefoxだとどうしても左に余白が出てしまいます。 マーカーボックスの指定が消えていないのかな、と素人ながらに思うのですが、それが正しいのか、正しくとも正しくなくとも、ではどう直せばいいのか分かりません。 どうぞご回答お願いいたします。 以下は、そのliに関連するCSSと、ソースです。 ■CSS #div{ width: 458px; float: left; text-align: center; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-bottom-style: dotted; border-top-color: #333333; border-bottom-color: #333333; padding-top: 10px; padding-bottom: 10px; margin-bottom: 15px; margin-right: auto; margin-left: auto; padding-left: 10px; } #div ul{ list-style-type:none; display: block; width: 432px; text-align: center; margin: 0px; } #div li { float: left; height: 200px; width: 140px; margin-right: 4px; margin-bottom: 10px; margin-top: 0px; margin-left: 0px; } #div li img{ border:none; ■html <div> <ul> <li><a href="1.html"><img src="image/menu1.jpg" alt="品"></a></li> <li><a href="2.html"><img src="image/menu2.jpg" alt="品"></a></li> <li><a href="3.html"><img src="image/menu3.jpg" alt="品"></a></li> <li><a href="4.html"><img src="image/menu4.jpg" alt="品" /></a></li> <li><a href="5.html"><img src="image/menu5.jpg" alt="品"></a></li> <li><a href="6.html"><img src="image/menu6.jpg" alt="商"></a></li> </ul> </div> 宜しくお願いいたします。
- ベストアンサー
- HTML
- ホームページビルダーでスタイルシートを使ったのですが？
今、ホームページビルダーで簡単な2カラム（右メニュー）のテンプレートを作っています。 質問ですが、メニューバー（サイドバー）に色を付けたくて、画像を使う事にしました。 <div class="main">に画像（background.gif）を入れ属性で繰り返す（垂直方向）にチェックをいれたのですが、ＩＥやfirefoxでプレビューでは反映されていないです。 色々いじってみたのですがどうしても解りません。どこが間違っているのか教えていただけないでしょうか？ よろしくお願いします。 HTML <body> <div class="box"> <div class="header"> <span class="site_name">ここにサイト名を入れる</span> <h1>ここにｈ１</h1> <div class="description_1">ここに簡単な説明文</div> </div> <div class="main"> <div class="contents">コンテンツ部分<br /> </div> <div class="menu"> メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> スタイルシート * { margin:0; padding:0; } .box{ width : 750px; margin: 0 auto; border-left-width : 1px; border-left-style : solid; border-left-color : black; border-right-width : 1px; border-right-style : solid; border-right-color : black; border-bottom-width : 1px; border-bottom-style : solid; border-bottom-color : black; } .header { width : 726px; height : 96px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; border-bottom-width : 2px; border-bottom-style : solid; border-bottom-color : black; } .main { width : 750px; background-image : url(file:///C:/Documents and Settings/※※※/img/background.gif); background-repeat : repeat-y; background-position : 0px 0px; margin-top : 0px; margin-bottom : 0px; margin-left : auto; margin-right : auto; background-color : #ffffff; } .menu { float: left; width : 180px; padding-top : 10px; padding-left : 10px; padding-right : 10px; padding-bottom : 10px; margin-left : auto; margin-right : auto; } .contents { float: left; width : 526px; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; } .footer { clear: both; width : 726px; height : 26px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; text-align : center; } .menu ul { list-style: none; } .site_name{ font-size : 21px; font-weight : bold; margin-left : 12px; } h1{ font-size : 15px; margin-top : 12px; margin-left : 24px; } .description_1{ font-size : 12px; font-weight : normal; margin-left : 24px; }
- ベストアンサー
- ホームページ作成ソフト
- CSSを独学中です。が背景の設定がどうしてもうまくいきません。
CSSを使ってwebを作ろうとしている素人です。 header（見出しのロゴなど） main この中にコラムを２つ。左コラムに縦並びメニュー 背景画像あり。 footer（copyright表記など） 色はグレー。 いろいろ参考資料を見ながら、このような構成にしたのですが、 本文(main)のところが、footerと同じグレー１色になってしまい、 予定していた背景画像が表示されません。 とりあえず全体的なレイアウトは何とか大丈夫なようなのですが、 何か原因がお分かりでしたらご教示いただけると幸いです。 おそらく単純なミスなのかもしれませんが。 以下に、cssとhtmlファイルの抜粋を載せておきます。 ------- css ------- body { margin: 0; padding: 0; background-color: #999999; color: #FFFFFF } .header {略} .main { padding: 0px; background-color: #FFFFFF; color: #000000; background-image: url(images/background-check.gif); } .footer{ clear: both; padding: 2px 0 2px 0; border-top: solid 1px #333333; color: #FFFFFF; text-align: center; } p { margin: 0 0 12px 20px; padding: 0; line-height: 130%; color: #000000 } ul { list-style: none; margin: 0; padding: 0; } img { border: none; } /*------ 左の縦メニュー------------ */ .menutate { width: 120px; margin: 0px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } .menutate li a { height: 32px; text-decoration: none; } .menutate li a:link, .menutate li a:visited { color: #FFFFFF; display: block; background: url(images/menutate.gif); padding: 8px 0 0 5px; } .menutate li a:hover, .menutate li #current { color: #990099; background: url(images/menutate.gif) 0 -32px; padding: 8px 0 0 5px; } /*-------- コラム分け---------------- */ .leftcolumn { float: left; width: 120px; } .rightcolumn { float: left; overflow: auto; padding: 0 0 0 20px; } /*----- 本文-------------- */ h1{ padding: 6px 5px 6px 5px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 15px solid #CC0099; background-color: #FFFF99; } h2{ padding: 2px; border-left: 15px solid #CC0099; border-bottom: 1px solid #666666; } ------ html ------ <body> <div class="header"> （略） </div> <!-- メインパート --> <div class="main"> <!-- 左のタテメニュー --> <div class="leftcolumn"> <div class="menutate"> <ul> <li><a id="current" href="index.html">home</a></li> <li><a href="others.html">others</a></li> <li><a href="aboutme.html">about me</a></li> </ul> </div> </div> <!-- 右のコラム --> <div class="rightcolumn"> <h1>いろいろ</h1> <h2>あれこれ</h2> <p>などなど</p> </div> </div> <div class="footer"> Copyright: 2007 xxx. All rights reserved. </div> </body> </html>
- 締切済み
- CSS
- 自作の一段組みのソースを使い、二段組みのサイトを
作っているのですが、サイドメニューまでは、containerにきちんと表示されるのですが、それ以下のmainがcontainerから30px分ぐらい、左に切れた状態で表示されます。 以下がソースです。なお、所々、一段組みのソースのままになっているところがあり、かつ、かなり長いですが、ご了承ください。最終的には、サイドメニューをフロートレフト、メインをフロートライトにして、二段組みにする予定です。 ～html～ <!-- コンテナ --> <div id="container"> <!-- ヘッダー --> <div id="header"> <h1 style="display:none">タイトル</h1> <ul id="topmenu"> <li class="logo1"><a href="#">お問い合わせ</a></li> <li class="logo2"><a href="#">サイトマップ</a></li> </ul> </div> <!-- サイドメニュー (スワップイメージを使っています)--> <div id="menu"> <ul> <li><a href="#"><img src="images/button/top.jpg" alt="トップページ" width="254" height="71"id="Image1" onmouseover="MM_swapImage('Image1','','images/button/sw-top.jpg',1)" onmouseout="MM_swapImgRestore()"/></a></li> <li><a href="#"><img src="images/button/eve.jpg" alt="トップページ" width="254" height="71"id="Image2" onmouseover="MM_swapImage('Image2','','images/button/sw-eve.jpg',1)" onmouseout="MM_swapImgRestore()"/></a></li> ※以下省略 </ul> <div> <!--main--> <div id="main"> <div id="introduction"> <h2><img src="images/introduction.png" alt="introduction" /></h2> </div> <!-- コンテンツ --> <div id="content"> <h2>h2タイトル(1)</h2> <dl class="info"> <dt>1月1日</dt> <dd>あああ</dd> <dt>1月2日</dt> <dd>いいい</dd> ※以下省略 </dl> <h2>h2タイトル(2)</h2> <dl class="info"> <dt>1月1日</dt> <dd> ううう</dd> <dt>1月2日</dt> <dd>えええ </dd> ※以下省略 </dl> </div> <!--contentsはここまで--> </div> <!--mainはここまで--> <!-- フッター --> <div id="footer"> <ul id="lastmenu"> <li class="logo3"><a href="#">よくある質問</a></li> <li class="logo4"><a href="#">プライバシーポリシー</a></li> </ul> <p>Copyright BBB. All right reseved.</p> </div> </div> <!--containerはここまで--> ～css～ body {background-image: url(images/sora.jpg)} /* コンテナ */ div#container {background-image: url(images/background0.png); width: 980px; margin-left: auto; margin-right: auto; overflow:hidden; position:relative} /* ヘッダー */ div#header {background-image: url(images/header.png); background-repeat:no-repeat; height: 169px; margin-bottom: 30px} ul#topmenu {font-size: 1.2em; padding-left: 580px; padding-top: 130px} ul#topmenu li {float:left; margin-left:15px; margin-right:15px; font-weight:bold} .logo1 {list-style:none; background-image: url("images/mail.png"); background-position: left center; background-repeat: no-repeat; padding-left:35px} . logo2 { list-style:none; height:25px; background-image: url("images/zisyaku.png"); background-position: left center; background-repeat: no-repeat; padding-left:30px } /* メニュー */ #menu {margin-left: 40px; width:260px} #menu li{list-style:none; margin-bottom: 4px} /* メイン */ div#introduction {margin-left: 132px; margin-bottom: 10px} /* コンテンツ */ div#content {width: 475px; border: 2px solid #400000; padding-top: 28px; padding-right: 60px; padding-left: 50px; padding-bottom: 20px; margin-left: 135px; margin-bottom: 80px; font-weight: none;} div#content h2 {color: #400000; font-size: 1.8em; letter-spacing: 0.5em; border-bottom-width: 3px; border-left-width: 14px; border-bottom-style: solid; border-left-style: solid; border-bottom-color: #008080; border-left-color: #008080; padding-left: 10px; margin-bottom: 15px} dl.info dt,dl.info dd {font-size:1.2em; border-bottom-width: 2px; border-bottom-style: dotted; border-bottom-color: #400000} dl.info dt {clear: left; float: left; padding-left: 17px; color: #000; width:8.2em; background-image: url("images/yazirusi2.gif"); background-position: 0% 58%; background-repeat: no-repeat;} dl.info dd {margin-bottom: 0.8em; margin-left: 9.2em; margin-bottom: 1.5em} /*メインはここまで*/ /* フッター */ div#footer {background-image: url(images/footer.gif); position:absolute; bottom:0px; height:60px; width:980px;} ※以下省略。
- ベストアンサー
- CSS
- このプログラムにある問題点を教えて下さい
プログラムを自分で作ってみました。 形はイメージ通りですが自信がありません。 何か問題点があるように思えてなりません。 これで正しいのでしょうか？ <style type="text/css"> #aaa{ width: 850px; background-color: #eee; } .CCC { width: 750px; height: 133px; margin-left: 35px; margin-top: 15px; } .CCC ul{ margin: 0; padding: 0; list-style: none; } .CCC li.C0 { float: left; } .CCC li.C0 img { padding: 5px; border: 1px solid #ccc; } .CCC li.C1 { width: 200px; padding: 3px 20px 3px 12px; margin-left: 25px; font-size: 16px; font-weight: bold; font-family: "MS UI Gothic"; color: #F05; border-bottom: 1px solid #F05; float: left; } .CCC li.C2 { width: 300px; font-size: 14px; float: left; line-height:150%; margin-left: 50px; margin-top: 15px; } .CCC li.C3 { width: 160px; float: right; } .CCC li.C3 .C4 img{ border: 0; border-style: none; margin-bottom: 25px; } .cf { clear:both; font-size: 15px; color: #ccc; text-align: center; } </style> <div id="aaa"> <div class="CCC"> <ul> <li class="C0"><img src="image/image_case01.jpg" width="185" height="123"></li> <li class="C1">タイトルタイトル    / タイトル</li> <li class="C2">コメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメント</li> <li class="C3"><span class="C4"><a href=""><img src="1.jpg" width="160" height="30"></a></span><span class="C4"><a href=""><img src="2.jpg" width="160" height="30"></a></span></li> </ul> </div> <div class="cf">・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・</div> <div class="CCC"> <ul> <li class="C0"><img src="image/image_case01.jpg" width="185" height="123"></li> <li class="C1">タイトルタイトル    / タイトル</li> <li class="C2">コメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメント</li> <li class="C3"><span class="C4"><a href=""><img src="1.jpg" width="160" height="30"></a></span><span class="C4"><a href=""><img src="2.jpg" width="160" height="30"></a></span></li> </ul> </div> <div class="cf">・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・</div> </div>
- ベストアンサー
- HTML
- floatとclearを使ったレイアウト作成について
http://www.ario-nishiarai.jp/ 上記のサイトのようなページ中央より下のレイアウトを作りたいと思い、下記のようにコーディングしました。 <html> <head> <title>Ｗｅｂ</title> <style type="text/css"> .container {text-align:left;width:760px;margin:0px auto;background-color:#FFFFFF;} .content1 {width:760px; height:200; padding:0px; border:1px solid #999999;} .content2 {width:760px;padding:0px;border-right:1px solid #999999; border-bottom:1px solid #999999; border-left:1px solid #999999; margin:0;} .box1 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box2 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box3 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box4 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px; margin-bottom:10px;} .box5 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box6 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .news {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .topics {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;}solid #CCCCCC; margin-top:5px; margin-left:5px;} </style> </head> <body> <div class="container"> <div class="content1"> 画像 </div> <div class="content2"> <!--左側--> <div class="box1"> タイトル<br /> メニュー </div> <div class="box2"> タイトル<br /> メニュー </div> <div class="box3"> タイトル<br /> メニュー </div> <div class="box4"> タイトル<br /> メニュー </div> <!--中央--> <div class="news"> あ </div> <div class="topics"> い </div> <!--右側--> <div class="box5"> う </div> <div class="box6"> え </div> </div> </div> </body> </html> box1、box2、box3、box4のボックスは左側に、news、topicsのボックスは中央に、box5、box6のボックスは右側にレイアウトしたいと思っています。 floatとclearを使って作成するのだと思うのですが、どうコーディングしたら良いのかわかりません。 どこをどう直したら良いかアドバイスいただけますようお願いします。
- ベストアンサー
- HTML
- css leftsideだけ色をつける方法
あるサイトのレイアウトを参考にしながらcssの勉強をしています。 html <body> <div id="page"> <div id="head"> <img src="./simpe01/img/logo_img300-60.gif" alt="log_img" width="300" height="60"> </div> <div id="navigation"> <ul> <li><a href="./index.htm">HOME</a></li> <li><a href="./contents/index.htm">コンテンツ</a></li> <li><a href="./link/index.htm">リンク</a></li> </ul> </div> <h1>○○</h1> <div id="leftside"> <p>新着情報</p> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </div> <div id="main"> <h2>ごあいさつ</h2> <div class="imgbox_f"><img src="./img/img_sample.jpg" alt="サンプル" width="200" height="257"></div> <p>画像は<div id="imgbox_f"></div>で囲むと写真右へ。</p> <p>あいさつ文を入力しおく。<strong>太字</strong>は<strong></strong>で囲む。</p> <ul> <li>箇条書き</li> <li>箇条書き</li> </ul> <h2>補足情報</h2> <p>サイトの使い方や、 注意事項を書いておく。 </p> </div> <!-- #foot 画面一番下 --> <div id="pagefooter"> <p>必要ならコピーライトや、サイトの付加情報を書くところ。 </ p> </div> </div> </body> css *{ margin: 0px; padding: 0px; } body { background-color: #FFFFF; font-size: 95%; line-height: 150%; text-align: center; color: #333333; margin: 0px; } div#page { text-align: left; border: 1px solid #333333; background: #FFFFFF; width: 780px; margin: 5px auto; } div#head { padding: 10px 10px 5px 5px; margin: 0px; background: #FFFFFF; } div#navigation { padding: 10px; background: #E188FF; border-top: 1px solid #333333; border-bottom: 1px solid #333333; height: 25%; } div#navigation ul{ margin: 0px; padding: 0px; background: #FFFFFF; } div#navigation li{ float: left; padding: 0px; margin-left: 10px; color: #FFFFFF; list-style: none; } div#navigationu a{ color: #FFFFFF; text-decoration: none; } div#navigation a:hover{ color: #000000; background: #D7E1EC; } div#main { margin: 0px; border-left: 1px solid #CCCCCC; padding: 10px 0px; background: #FFFFFF; width: 560px; float: left; } div#main p{ margin: 0px 0px 20px 10px; } div#main ul { margin-left: 60px; margin-bottom: 1em; margin-right: 30px; } div#leftside { width: 200px; margin: 5px 0px 0px 5px; padding: 10px 0px; float: left; } div#leftside ul{ margin: 0px 0px 0px 5px; list-style: circle; padding-left: 2em; } div#leftside p{ margin: 0px 10px 10px; } div#pagefooter { border-top: 1px solid #333333; padding: 0px; text-align: center; clear: both; margin: 0px; } div#pagefooter p{ margin: 5px 0px; } strong { color: #CC3333; } h1 { font-size: 110%; padding: 25px 15px 5px; border-bottom: 1px solid #CCCCCC; background: #F3F3F3; font-weight: normal; } h2 { font-size: 110%; margin: 0px 20px 20px; color: #333333; border-bottom: 1px dashed #999999; padding: 0px 0px 5px; clear: both; } dl { margin: 0px 0px 50px 40px; } dt { font-weight: bold; } dd { margin-bottom: 10px; } .imgbox { margin: 0px 0px 1em 10px; } .imgbox img{ border: 1px solid #666666; } .imgbox_f { margin: 0px 10px 1em; float: right; } .imgbox_f img{ border: 1px solid #666666; } --------------------------------------------------------------- leftsideだけに色をつけたいのですが、どうしても右側が20px;分 あまってしまいます。色々いじってみたのですが改善されず、行き詰っています。 bodyのwidthが780px; leftsideが200px; mainが560px; 自分としてはmainの560を580に変えれば解決と思っていたのですが、 そうするとmainがleftsideの下にきて形がくずれてしまいます。 20px分はどの部分を変更すればきれいな形になるのでしょうか。 宜しくお願いします。
- ベストアンサー
- 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
- 締切済み
- デザイナー・クリエイティブ職
- display:inlineで横並びにしたメニュー
のa:とa:hoverをbackground-imgでロールオーバーさせたいんですが、画像を大きく調整できません。line-heightとheightをいじってみましたが画像そのものの高さは変わりません。サイドメニューを作った時はDL,DT,DDでdisplay:blockでうまく出来ました。下記に現状のHTMLとCSSを記述しますのでよろしくおねがいします。 html側 <div id="banner_menu"> <ul> <li><a href="#">あいうえお</a></li> <li><a href="#">かきくけこ</a></li> <li><a href="#">さしすせそ</a></li> <li><a href="#">たちつてと</a></li> <li><a href="#">なにぬねの</a></li> <li><a href="#">はひふへほ</a></li> </ul> </div> CSS側 #banner_menu { clear: both; margin: 0px; padding: 7px 0 5px 15px; border-top: solid 1px #999; border-bottom: solid 1px #999; width: auto; margin-left: auto; margin-right: auto; background-color: #ffffff; } #banner_menu ul { text-align: left; padding-bottom: 1px; margin: 0px; } #banner_menu li { color: #ffffff; display: inline; padding-left: 7px; padding-right: 5px; border-left: solid 1px #999; width: 120px; } #banner_menu a { color: #4d4d4d; font-weight: normal; background-color: none; text-decoration: none; font-size: 12px; background: url(var_gry120x48.gif) no-repeat center center; line-height:20px; height: 20px; } #banner_menu a:hover { color: indianred; font-weight: normal; background: url(var_gry120x48_2.gif) no-repeat centert bottom; }
- ベストアンサー
- ブログ
お礼
確かにphpとはあまり関係ない部分でした。 もっと勉強しておきます。 返事が遅くなりましたが大変ありがとうございました。