Dreamweaver CS5でホームページ作成時の上部の余白をなくす方法
- Dreamweaver CS5でホームページを作成している際に、上部に余白ができる問題が発生しました。デザインビューでは問題ありませんが、ライブビューやブラウザーのプレビューで隙間が発生します。この記事では、Dreamweaverで上部の余白をなくす方法を紹介します。
- 上部の余白ができる問題は、CSSの設定に原因があります。具体的には、body要素に設定されているmarginやpaddingが影響しています。上部の余白をなくすためには、このCSSの設定を修正する必要があります。
- まず、CSS部分でbody要素に指定されているmarginやpaddingの値を確認してください。margin: 0px; padding: 0px; と指定されていることを確認しましょう。もし値が異なっている場合は、0に修正してください。この修正により、上部の余白がなくなります。
- ベストアンサー
上部の余白をなくしたいのですが・・・
Dreamweaver CS5でホームページを作成しています。 デザインビューで見ると一番上に隙間は出来ないのですが、ライブビューやブラウザーでプレビューすると,隙間が出来てしまいます。上部に隙間が出来ない方法を教えてください。 <body> <div id="headWrap"> <div id="header"> <h1><img src="imges/rogo.png" alt="**" width="365" height="74" /></h1> <ul> <li><a href="#">**</a></li> <li><a href="#">**</a></li> </ul> </div> </div> <div id="menu"> <div id="button"> <ul id="MenuBar1" class="MenuBarHorizontal"> <li><a href="#">HOME</a> </li> <li><a href="#">**</a> </li> </ul> </div> </div> <div id="contents"> <p>id "contents" の内容<!--/#contents--></p> </div> <div id="footer"> <div id="footerMenu"> <ul><li><a href="#">ホーム</a></li> <li><a href="#">**</a> </li> </ul> <address>Copyright © All Rights Reserved.</address> </div> </div> <script type="text/javascript"> var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"}); </script> </body> CSS部分 * { font-family:"Hiragino Kaku Gothic Pro", HiraKakuPro-W3, "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "MS P ゴシック", verdana, sans-serif;color:#333; } body {background: #FFF url(imges/bg_body.gif) repeat-x left top; margin: 0px; padding: 0px; } a {text-decoration:none; } #headWrap {width: 100%; background: url(imges/bgimgHead.jpg) repeat-x left top; margin: 0px auto; padding: 0px 10px; } #header {height: 90px; width: 850px; margin: 0px auto; } #menu {height: 100px; width: 100%; background: url(imges/bgimgMemu.jpg) repeat-x left top; clear: both; } #button {height: 40px; width: 850px; margin: 0px auto; } #contents {width: 850px; background: #FFF; margin: 0px auto; clear: both; } #footer {width: 100%; background: url(imges/bgimgFoot.jpg) repeat-x left top; margin: 0px; } #footerMenu {margin: 0px auto; width: 850px; } #headWrap #header ul li {float: right; list-style: none; padding-left: 10px; padding-right: 10px; } #headWrap #header h1 img {float: left; margin-top: 0px; } #footer #footerMenu ul li {float: left; list-style: none; padding-right: 5px; ｝ どうぞよろしくお願いします。
- tamono44
- お礼率71% (5/7)
- ホームページ作成ソフト
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ANo.2 をヤメて、こっちが正解だと思います。 #headWrap #header ul li {float: right; list-style: none; padding-left: 10px; padding-right: 10px; } #headWrap #header h1 img {float: left; margin-top: 0px; } 上の部分を下のように変更してみてください。 #headWrap #header ul { float: right; } #headWrap #header ul li { float: left; list-style: none; padding-left: 10px; padding-right: 10px; } #headWrap #header h1 { float: left; margin-top: 0px; }
その他の回答 (2)
- outbrave
- ベストアンサー率60% (231/380)
#headWrap #header ul li {float: right; list-style: none; padding-left: 10px; padding-right: 10px; } #headWrap #header h1 img {float: left; margin-top: 0px; } 上の部分を下のように変更してみてください。 #headWrap #header ul {float: right; list-style: none; padding-left: 10px; padding-right: 10px; } #headWrap #header h1 {float: left; margin-top: 0px; }
- outbrave
- ベストアンサー率60% (231/380)
どのようなレイアウトがご希望なのかわかりませんが #headWrap #header h1 img { /*float: left;*/ margin-top: 0px; } float: left; を削除すれば隙間はなくなると思います。 また、 #footer #footerMenu ul li {float: left; list-style: none; padding-right: 5px; ｝ 最後の } が全角になってます。
補足
早速の回答ありがとうございます。 ご指摘の所を変更してみたのですが、やはりライブビューとブラウザービューでは上に隙間ができてしまいます。 レイアウトのイメージとしては、http://www.villagestore.jp/nouveau/←コチラのサイトが近いとおもいます。 #headWrapの中の#header 部分にロゴ画像と、リンクを付けたリストを横並びに設定したかったので、ロゴにfloat: left;をつけ、リストにはfloat: right;を設定してみたのですが、ここに何か問題があるのでしょうか？？floatやmargin、paddingをちゃんと理解できていないのかもしれません。 分かりにくい説明にも関わらず、回答をくださってありがとうございました。
関連するQ&A
- Chrome だと、画像が少し下にずれてしまう
こんにちは！ CSS初心者で、今回初めてＣＳＳを利用してホームページを作っています。 制作中に、行き詰ってしまい質問をさせていただきました。 メインナビの背景に画像、その上にリストのテキスト、そしてカーソルオーバーをすると、違う画像が表示するようにしています（ナビは、リストをfloatで横並びに表示しています）。 ＩＥだと、問題なく正しい位置で表示されるのですが、Ｆｉｒｅｆｏｘや Ｃhromeだと、カーソルオーバー用の画像が下に少しずれて表示されてしまいます。 元凶を、探してみたんですが、なかなか見つけられません。 わかる方がいらっしゃったら、教えていただけないでしょうか。 お粗末なＣＳＳコードですが（多分、無駄なコードがいっぱいありそう・・・） のせさせていたたきました。 よろしくお願いします。 CSS -------------------------------------------------------------- @import url(base.css); body{ text-align:center; margin-right : auto;margin-left : auto; background-image : url(images/bg_brown.png); background-repeat: repeat; font-size : 90%; padding-top : 0px; padding-bottom : 0px; margin-top : 0px; margin-bottom : 0px; height : 100%; } #wrap{ text-align : center; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : auto; width : 100%; padding-top : 0px; } #com_back{ background-image : url(images/bg_green.png); background-repeat : repeat-x; } #g_navi_back{ width : 100%; height : 80px; text-align : center; background-repeat : repeat; background-image : url(images/bg_g_navi.png); } #g_navi{ overflow : hidden; width : 900px; margin 0 auto; margin-left : auto; margin-right : auto; background-repeat : no-repeat; background-image : url(images/navi_base.png); height : 80px; } #g_navi 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; } #g_navi li{ text-align : center; width : 180px; float : left; border-collapse : collapse; background-position : left center; top : 50%; bottom : 50%; letter-spacing : 1px; line-height : 18px; } #g_navi li a{ display : block; padding-top : 20px; } #g_navi ul li a:link{ text-decoration : none; color : black; } #g_navi ul li a:hover{ background-image : url(images/navi_hover_g.png); background-repeat : no-repeat; background-position : center center; height : 80px; } .inner{ text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; width : 900px; background-repeat : repeat; height : auto; background-image : url(images/bg_white.png); } html ------------------------------------------------------------------------------ <!--外枠--> <div id="wrap"> <!--ロゴ--> <div id="com_back"><div id="com" ></div></div> <!--ナビ--> <div id="g_navi_back"> <div id="g_navi"> <UL style="list-style-type : none"> <LI><a href="index.html">ホーム</a></li> <LI><a href="**********">ご案内</a></li> <LI><a href="**********">ご利用方法</a></li> <LI><a href="**********">イベント詳細</a></li> <LI><a href="**********">アクセス</a></li> </UL></div> </div><!--ナビ_end--> <div class="clear"><hr /></div><!--ナビfloatクリア--> <div class="inner"><!--インナー-->
- ベストアンサー
- CSS
- IE6でナビ下に隙間ができてしまいます。
横並びのナビの下に隙間無く内容を入れたいのですが、IE6だとナビ下に２ミリ位の隙間ができてしまいます。 いろいろ調べてIE6対策でline-height: 0・margin: 0を追加してもうまくいきません。 何が間違っているのか、ご支持お願いします。 <body> <div id="wrapper"> <div id="headnavi"> <ul> <li id="A"><a href=""><span>A</span></a></li> <li id="B"><a href=""><span>B</span></a></li> <li id="C"><a href=""><span>C</span></a></li> <li id="D"><a href=""><span>D</span></a></li> <li id="E"><a href=""><span>E</span></a></li> <li id="F"><a href=""><span>F</span></a></li> </ul> </div><!-- / #headnavi --> <div id="pro_back"> <p>○○○○○</p> </div><!-- / #pro_back --> </div><!-- / #wrapper --> </body> </html> *{ margin: 0px; padding: 0px; font-weight: normal; list-style-type:none; } body { width: 100%; font-size: 75%; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; line-height: 180%; color: #333; } #wrapper { position: relative; width: 960px; margin-left:auto; margin-right:auto; } #pro_back { width: 960px; height: 623px; background-image: url(images/pro_back.gif); background-repeat: no-repeat; margin: 0; } #headnavi { width:960px; height: 33px; margin: 0; } #headnavi ul { line-height: 0; margin: 0; } #headnavi ul li a { display: block; width: 172px; text-decoration: none; height: 33px; } #headnavi ul li a span { position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; } ul li#A a { position: absolute; left: 890px; top: 0px; background-repeat: no-repeat; background-position: 0 0; background-image: url(images/topbotan.gif); margin: 0; } ul li#B a { position: absolute; left: 632px; top: 0px; background-repeat: no-repeat; background-position: 0 0; background-image: url(images/link.gif); margin: 0; } ul li#C a { position: absolute; left: 474px; top: 0px; background-repeat: no-repeat; background-image: url(images/mail.gif); margin: 0; } ul li#D a { position: absolute; left: 316px; top: 0; background-repeat: no-repeat; background-image: url(images/illustration.gif); margin: 0; } ul li#E a { position: absolute; left: 158px; top: 0; background-repeat: no-repeat; background-image: url(images/designwork.gif); margin: 0; } ul li#F a { position: absolute; left: 0px; top: 0; background-position: 0 0; background-repeat: no-repeat; background-image: url(images/profile.gif); margin: 0; }
- 締切済み
- CSS
- 困っています。教えてください!
ブラウザ表示すると、変な場所にリンクがつきます。 置き換えた画像にリンクがつきません。 ナビゲーションを画像にして横に並べたいです。 以下にコードあります。 どこが間違っていますか？ 教えてください。 お願いいたします! -----HTML----- <div id="navi"> <ul> <li><a href="#" id="home">Home</a></li> <li><a href="#" id="price">Price</a></li> <li><a href="#" id="catalog">Catalog</a></li> <li><a href="#" id="access">Access</a></li> <li><a href="#" id="reserve">Reserve</a></li> </ul> </div> -----CSS----- #navi { width:950px; height:48px; } #navi ul { list-style:none; margin:0px; padding:0px; } #navi li { text-indent:-9999px; float:left; width:135px; margin:0px; padding:0px; } #navi li a { display:inline; } #navi ul li a#home { display:block; width:148px; height:48px; margin-left:100px; margin-top:30px; background:url(images/home.gif) no-repeat; } #navi ul li a#price { display:block; width:135px; height:48px; margin-left:116px; margin-top:30px; background:url(images/price.gif) no-repeat; } #navi ul li a#catalog { display:block; width:154px; height:48px; margin-left:120px; margin-top:30px; background:url(images/catalog.gif) no-repeat; } #navi ul li a#access { display:block; width:135px; height:48px; margin-left:140px; margin-top:30px; background:url(images/access.gif) no-repeat; } #navi ul li a#reserve { display:block; width:155px; height:48px; margin-left:150px; margin-top:30px; background:url(images/reserve.gif) no-repeat; }
- ベストアンサー
- CSS
- IE6で見るとメニューバーが崩れてしまいます
ホームページを作成したのですが、ページによって上部に設置したメニューバーが見れたり見れなかったりしてしまいます。CSSハックでIE6でもページ自体は何とか見れるようにはなったのですが、何ページかはどういうわけかトップ部分にあるメニューが画像ではなく、文字で現れて正常に見ることができません。どなた様かお詳しい方、教えて頂けませんでしょうか。下記にhtmlとcssを記述します。 〈html〉 <html> <body> <div class="headbg"><img src="head_bg1.jpg" alt="" border="0"></div> <div class="header"><a href="#" border="0"> <div class="rogo"> </div> </a> <div id="globalnavi"> <ul> <li id="menu1"><a href="#">メニュー1</a></li> <li id="menu2"><a href="#" >メニュー2</a></li> <li id="menu3"><a href="#">メニュー3</a></li> <li id="menu4"><a href="#">メニュー4</a></li> <li id="menu5"><a href="#">メニュー5</a></li> <li id="menu6"><a href="#">メニュー6</a></li> </ul> </div> <div class="main"></div> </div> </body> </html> <CSS> .headbg { height:400px; width: 100%; min-width:900px; border:0px solid #F00; position:absolute; top:66px; left:0; overflow:hidden; background: url(head_bg_bg.jpg); background-repeat:repeat-x; } .rogo { background-image: url(rogo.jpg); background-repeat: no-repeat; height: 160px; width: 160px; padding: 0px; margin-top: 8px; margin-right: 0px; margin-bottom: 11px; margin-left: 33px; position: relative; border: 0px solid #000; clear: both; float: left; position:relative; } .header { width: 900px; height:300px; padding:0px; margin-left: auto; margin-right:auto; text-align:left; margin-top:0px; border:0px solid red; } .main { height:920px; width: 900px; min-width:900px; background-color:#ffffff; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; padding: 0px 0px 0px 0px; margin-left: auto; margin-right: auto; text-align: center; margin-top:65px; } #globalnavi { margin-left:auto; margin-right:auto; margin-top:-170px; text-align:left; top:0px; left:0px; padding:0px; width:700px; height:52px; list-style:none; overflow:hidden; border: 0px solid red; float:right; clear:both; } #globalnavi ul { list-style-type: none; margin: 0; padding: 0; height: 52px; overflow: hidden; } #globalnavi li { text-indent: -9999px; float:left; width: 116px; height: 52px; margin: 0; padding-right: 0px; border:0px solid #333; } #globalnavi a { display: block; position: relative; width: 100%; height: 52px; } #menu1 a { background: url(menu1_active.jpg) no-repeat 0 0; left:0px; margin-left:0px; } #menu2 a { background: url(menu2.jpg) no-repeat 0 0; margin-left:0px; } #menu3 a { background: url(menu3.jpg) no-repeat 0 0; margin-left:0px; } #menu4 a { background: url(menu4.jpg) no-repeat 0 0; margin-left:0px; } #menu5 a { background: url(menu5.jpg) no-repeat 0 0; margin-left:15px; } #menu6 a { background: url(menu6.jpg) no-repeat 0 0; margin-left:15px; }
- ベストアンサー
- ネットトラブル
- リストタグを用いた縦メニューで画像に隙間ができます（IE6）
いつも皆さまには助けていただきありがとうございます。 さてまた今回も質問で申し訳ないのですが、リストタグを用いて縦のメニューを作成しています。 IE6でのみメニュー画像の上下に隙間が出来る現象が発生して困っております。（本当は隙間なくしたい） こちらの質問を参考にして左メニューの画像に「display:block;」や「vertical-align:bottom;」を付けてみましたが、変化なしです。 #left img{ border:none; display:block; vertical-align:bottom; } と入れたんですが、記入がおかしいでしょうか？ 色々調べてみましたが、これ以上どういじって良いのかよく分かりません。 一部省略していますがソースを載せますので間違いをご指摘いただければ大変助かります。 よろしくお願いします。 【HTML】 <html> <head> <link rel="stylesheet" href="css/ie6.css" type="text/css" /> <title>タイトル</title> </head> <body> <div id="container"> <!--ヘッダー部分--> <div id="header"> <div id="headerImg" title="タイトル"> </div><!--id:headerImgEnd--> <div id="headerMenu"> <ul> <li></li> <li></li> <li></a></li> </ul> </div><!--headerMenuEnd--> </div><!--id#headerEnd--> <div id="contents"> <!--左メニュー--> <div id="left"> <div id="left_menu"> <ul> <li><a href="a.html" id="a" title="a">a</a></li> </ul> <ul> <li id="b" title="b"></li> <li><a href="c.html" id="c" title="c"></a></li> <li><a href="d.html" id="d" title="d"></ul> </div><!--id:left_menuEnd--> </div><!--id:leftEnd--> <!--メイン--> <div id="main"> </div><!--mainEnd--> <!--フッター--> <div id="footer"> </div><!--id:containerEnd--> </div> </body> </html> 【CSS】 body{ margin:0; padding:0; text-align:center; font-size:14px; } #container{ margin:0 auto; width:800px; text-align:left; borer:solid 1px #999; } #header{ width:800px; } div#headerImg{ width:800px; height:138px; background-image:url(img/title.gif); background-color:#00FFcc; } div#headerMenu{ width:800px; } #contents{ width:800px; } /*左メニュー*/ #left{ float:left; width:180px; } #left_menu ul{ list-style:none; padding:0; margin:0; } #a{ background-image:url(../img/a.gif); width:180px; height:69px; display:block; margin-top:0px; margin-left:0px; } #b{ background-image:url(../img/b.gif); background-repeat:no-repeat; width:180px; height:30px; display:block; margin-top:0px; margin-left:0px; } #c{ background-image:url(../img/c.gif); background-repeat:no-repeat; width:180px; height:25px; list-style:none; display:block; margin-top:0px; margin-left:0px; } a#c:hover{ background-image:url(../img/c02.gif); background-repeat:no-repeat; } #d{ background-image:url(../img/d.gif); background-repeat:no-repeat; width:180px; height:24px; list-style:none; display:block; margin-top:0px; margin-left:0px; } a#d:hover{ background-image:url(../img/d02.gif); background-repeat:no-repeat; } /*メイン*/ #main{ float:right; width:620px; margin:-14px 0 0 0; } /*フッター*/ #footer{ clear:both; width:800px; height:47px; }
- ベストアンサー
- HTML
- FFにおけるDIVタグ間の隙間について
たびたびお世話になります。 自分なりにあちこち検索したのですが、解決できるものが見つかりませんでしたので、質問させていただきます。 今回初めてCSSを使ってHPを作成しているのですが、部分的に<DIV>～</DIV>と<DIV>～</DIV>の間に10px程の隙間が発生します。 IE系のブラウザでは特に問題ないのですが、Mozila系で再現されるようです。 どのようなタグを挿入、あるいは削除すれば解決できるでしょうか？ 以下、該当部のタグになります。 【html】 <body> <div id="header"> <a href="http://****.jp/"> <img src="../img/images/images/title.jpg"width="207"height="33"> </a> </div> <div id="topphot1"> <div id="topphot2"> <!-- TOP画像入れ替える時はここのファイルを変更。横711px縦150pxのもののみ --> <img src="../img/topphoto.jpg" width="711px" height="150px" /> <!-- ↑↑↑ --> </div> <div id="q_menu"> <ul class="q_menu"> <li><a href="#"><img src="../img/icon_m.gif" width="23" heigh="23" /></a></li> <li><a href="#"><img src="../img/icon_s.gif" width="23" heigh="23" /></a></li> <li><a href="#"><img src="../img/icon_r.gif" width="23" heigh="23" /></a></li> </ul> </div> </div> <div id="m_menu"> <ul class="m_menu_ro"> <li><a href="#" class="bbs"></a></li> <li><a href="#" class="battle"></a></li> <li><a href="#" class="event"></a></li> <li><a href="#" class="hunt"></a></li> </ul> </div> 【css】 #header{ padding:0 auto 0 auto; margin:0 auto 0 auto; background-color:#7fd137; color:#ffffff; width:800px; height:33px; } #topphot1{ margin:0 auto 0 auto; padding:0 auto 0 auto; position:relative; background-color:#edf2e9; background-image:url(../img/images/HP_03.jpg); background-repeat:no-repeat; background-position:center; color:#696969; width:800px; height:220px; text-align:center; } #topphot2{ margin-top:8px; padding-top:8px; margin-left:auto; margin-right:auto; position:relative; color:#696969; width:711px; height:150px; text-align:center; } #q_menu{ position:absolute; left:50px; bottom:10px; } ul.q_menu{ width:69px; height:23px; margin:0px; padding:0px; } ul.q_menu li{ float:left; } 不慣れなもので、タグ自体がちょっと滅茶苦茶なカンジもするのですが…。 aタグ周囲の改行の削除、vertical-alignをbottomに設定するなどでは解消できませんでした。 よろしくお願いします。
- ベストアンサー
- HTML
- テキストの揃え方について
CSSの勉強を始めて間もないのですが、下記のようにホームページを作成し、左右に均等の間隔を指定して、テキストも中央揃えになっています。<div id="01">を5段、<div id="02">で1段、この後<div id="03">と<div id="04">で合わせて2段にしたいと考えています。そのうえで、<div id="03">以降は左右に均等の間隔になっている幅の中(<div id="01">や<div id="02">が配置されている400pxの位置)で、テキストを左揃えにして配置したいと考えています。text-align: left;をCSSのいろいろなところに書いているのですが、ウィンドウの左端に配置されてしまいます。どのようにCSSに書いたら実現できるのでしょうか。CSSレベル2までの書き方でお教えください。 【HTMLの<body>内】 <div id="01_05"> <div id="01"> <ul> <li><a href="link01.html">リンク01</a></li> <li><a href="link02.html">リンク02</a></li> <li><a href="link03.html">リンク03</a></li> <li><a href="link04.html">リンク04</a></li> <li><a href="link05.html">リンク05</a></li> </ul> </div> <div id="02"> <img src="gazou01.jpg" alt="画像01" width="400" height="300" border="0"> </div> <div id="03"> </div> <div id="04"> </div> </div> 【CSS】 body { margin: 0; padding: 0; width: 100%; text-align: center; overflow: hidden; } #01_05 { margin: 0 auto; padding: 0; width: 400px; } #01 { position: relative; margin: 0; width: 100%; } ul { position: relative; left: 50%; float: left; margin: 0; padding: 0; } li { position: relative; left: -50%; float: left; display: inline; margin: 0; padding: 0; } li a { float: left; width: 80px; display: block; margin: 15px 0; padding: 15px 0; } #02 { clear: left; width: 100%; } #03 { float: left; margin: 0; width: 200px; } #04 { float: left; margin: 0; width: 200px; }
- ベストアンサー
- CSS
- ページ上部の余白をなくしたい（ＣＳＳ）
初歩的な質問で申し訳ありません。 以下のような記述なのですが、 <div id="container">の上部にスキマが出来てしまいます。 背景に仮色をつけたりして確認しましたが、 どうしても余白をなくすことができません。 marginの指定の仕方がおかしいのでしょうか？ ご指摘いただけると助かります。 /* HTML（単純に書くとこんな感じです）*/ <body> <div id="container"> <div id="header"> <div> </div> </body> /* CSS */ body { margin : 0; padding : 0; background-color : #eeeeee; font-size : 12px; line-height : 150%; color : #333333; font-family : arial, helvetica, sans-serif, Verdana, Geneva, ＭＳゴシック; text-align : center; } #container { margin : 0 auto; padding : 0; width : 751px; text-align : left; background-color : #ffffff; } #header { margin : 0 auto; padding : 0; width:745px; height:120px; background: transparent url(***.jpg) ; background-repeat: no-repeat; }
- ベストアンサー
- HTML
- html、CSS共に初心者です。３段目の２列目の右に、４段目の右の内容
html、CSS共に初心者です。３段目の２列目の右に、４段目の右の内容を持っていきたいのですが、どうしてもうまくいきません！ 解決できる方がいましたら、どうかご教示願います！ <style type="text/css"> <!-- * { padding : 0 ; margin : 0 ; } #wrapper { width : 700px; margin-left : auto ; margin-right : auto ; background-color : #eeffff ; } #header { width : 700px; height : 150px ; background-color : #335555 ; } #navigation { /* background-color : #cceeee ; */ width : 300px; float : left ; } #navigation h2 { width : 150px; background-color : #99bbbb ; } #navigation ul { width : 150px ; } #navigation li { width : 150px ; height : 30px ; } #navigation a { width : 150px ; height : 30px ; background-color : #bbdddd ; display : block ; } #content { background-color : #eeeeee ; width : 350px; float : right ; } #subcontent { width:200 float : left ; clear :both ; } #subcontent h4 { width : 150px; background-color : #99bbbb ; } #subcontent ul { width : 150px ; } #subcontent li { width : 150px ; height : 30px ; } #subcontent a { width : 150px ; height : 30px ; background-color : #bbdddd ; display : block ; } #thirdcontent { background-color : #eeeeee ; width : 500px; float : right ; } #footer { background-color : #335555 ; width : 700px ; clear : both ; } //--> </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>pppppppppppppppppppppppppppp</h1> </div> <div id="navigation"> <h2>pppppppp</h2> <ul> <li><a href="#">pppppppp</a></li> <li><a href="#">pppppppp</a></li> <li><a href="#">pppppp</a></li> <li><a href="#">pppppppp</a></li> </ul> </div> <div id="content"> <h2>welcome to my hp</h2> <br> <h3>ppppppp</h3> <p>ppppppppppp</p> <h3>pppppppp</h3> <br> <p>pppppppp</p> </div> <div id="subcontent"> <h4>この横にカテゴリーを配置させたいのです</h4> <ul> <li><a href="#">pppppppp</a></li> <li><a href="#">pppppppp</a></li> <li><a href="#">pppppppp</a></li> <li><a href="#">ppppppppp</a></li> </ul> </div> <div id="thirdcontent"> <h4>カテゴリー(これを一段上に)</h4> <br> <h5>pppppppppp</h5> <p>ppppppppp</p> <h5>ppppppp</h5> </div> <div id="footer"> <br> </div> </div> </body> </html>
- ベストアンサー
- HTML
- トップページの横幅を画面いっぱいに表示させたい。
トップページの横幅を画面いっぱいに表示させたいのですが、イメージ画像を張り付けた上部は画面いっぱいに表示しますが、下のナビ部分のバックカラーが右に広く白場が出来てしまいます。flotを使っているためなのか…。 色々試してみたのですがどうしてもできません。 よろしくお願いします。 <body> <div class="back_color"> <div class="wrapper"> <p> <img src="images/ｘｘｘ.jpg" width="1200" height="510" ></p> </div><!-- / .wrapper --> </div><!-- / .back_color --> <div class="back_color2"> <div id="nav"> <ul> <li id="top"><a href="index.html"><span>top</span></a></li> <li id="profile"><a href="profile.html"><span>profile</span></a></li> <li id="audition"><a href="audition2.html"><span>audition</span></a></li> <li id="news"><a href="news.html"><span>news</span></a></li> <li id="contact"><a href="mail.html"><span>mail</span></a></li> <li id="link"><a href="link.html"><span>link</span></a></li> </ul> </div><!-- / #nav --> <p style="color:#FFFFFF; font-size:12px; text-align:center; margin-top:60px; ">00000000000000</p> </div><!-- / .back_color2 --> </body> .wrapper { padding: 0px; height: auto; width: 1200px; margin-left:auto; margin-right:auto; } .back_color { background-color: #231a5f; width: 100%; height: 510px; } .back_color2 { background-color: #000000; width: 100%; height:150px; padding-top: 35px; padding-bottom: 35px; border-top-width: 1px; border-top-style: solid; border-top-color: #FFFFFF; margin-left:auto; margin-right:auto; } #nav { width:730px; height:30px; background-color: #000000; margin-left:auto; margin-right:auto; } #nav ul { line-height: 0; } #nav ul li { float: left; border-left-width: 1px; border-left-style: solid; border-left-color: #FFFFFF; } #nav ul li a { display: block; text-decoration: none; width:90px; height:30px; margin-left:15px; margin-right:15px; } #nav ul li a span { position: absolute; width: 0; height: 0; overflow: hidden; }
- 締切済み
- CSS
お礼
できました！！ ご丁寧にありがとうございます。 #headWrap #header ul liにfloat: rightを設定した事と#headWrap #header h1 img にfloat: leftを設定したのが間違っていたのですね。 とても勉強になりました。