• 締切済み

CSSについての質問です

下記のプログラムについて解らないのですが、containerの内のh1と ulの位置関係ですがh1にmargin-bottom: 0と指定し、ulにmargin-top: 0としてあるが、この2つがくっつかないのは何故でしょうか？ 親切な方、ご回答いただけますようよろしくお願いします。 body{ background-color: #f2f2f2; padding: 0; margin: 0 } div#container { width: 750px; margin-left: auto; margin-right: auto; background-color: white } h1{background-image: url(画像.jpg); width: 640px; height: 120px; margin-bottom: 0; margin-left: 50px; } ul{ list-style: none; text-align: center; padding: 0; margin-left: 10px; margin-top: 0 } li{ width: 128px; float: left; padding: 0px; margin: 0px; }

  • HTML
  • 回答数2
  • ありがとう数2

みんなの回答

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

くっつくかどうかという意味では、くっついてますよね？ 色をつけるとわかります。 <head> <style> body{ background-color: #f2f2f2; padding: 0; margin: 0 } div#container { width: 750px; margin-left: auto; margin-right: auto; background-color: white } h1{ background-image: url(画像.jpg); width: 640px; height: 120px; margin-bottom: 0; margin-left: 50px; background-Color:red; } ul{ list-style: none; text-align: center; padding: 0; margin-left: 10px; margin-top: 0 } li{ background-Color:green; width: 128px; float: left; padding: 0px; margin: 0px; } </style> </head> <body> <h1>test</h1> <ul> <li>hoge</li> <li>hoge</li> <li>hoge</li> </li> </ul> </body>

sinto58167
質問者

補足

返事が遅くなってしまってすみません。 そして、答えて頂きありがとうございます。 まだ今ひとつ解らないので、教えてもらいたいのですが、 h1の部分と、メニューのulの部分が上下に隙間が空いてしまいます。 この隙間を埋める方法はないでしょうか？ やっぱりソースを全部見せないとわからないですよね。 下記がhtmlのソースとcssのソースです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="roll.css" type="text/css" media="all" /> </head> <body> <div id="container"> <h1></h1> <div id="menu"> <ul> <li><a href="#">web</a></li> <li><a href="#">title1</a></li> <li><a href="#">title2</a></li> <li><a href="#">css</a></li> <li><a href="#">seo</a></li> </ul> </div> <div style="clear:both; "></div> <div id="content"> </div> </body> </html> body{ background-color: #f2f2f2; padding: 0; margin: 0 } div#container { width: 750px; margin-left: auto; margin-right: auto; padding-top: 5px; background-color: white } h1{background-image: url(im/wine-gurade.jpg); width: 640px; height: 120px; margin-bottom: 0; margin-left: 50px; } div#menu{ margin-top: 0; padding: 0 } ul{list-style: none; /*リストマークを消す*/ text-align: center; /*ボタン枠のテキストをセンター寄せ*/ padding: 0; margin-left: 50px; margin-top: 0; } li{ width: 128px; /*リストの幅の設定*/ float: left; /*これで一列にリストを並ばせる*/ padding: 0px; margin: 0px; } li a{font-size: 75%; display: block; /*リンク範囲をブロックに変更する*/ width: 100%; /*リンク範囲の横幅は100％*/ height: auto; /*リンク範囲の高さを自動に：firefox必須*/ background-image: url(im/pinkbg.gif); /*off画像*/ background-position: left top; /*画像を左上に配置*/ background-repeat: no-repeat; /*背景画像を繰り返さない*/ padding: 0; margin: 0; text-decoration: none; /*下線を表示しない*/ color: brown; line-height: 300%; /*テキストの位置を調整*/ border-top-style: solid; /*ボタン枠を設定*/ border-bottom-style: solid; border-right-style: solid; border-left-style: solid; border-width: 1px 1px 1px 1px; border-top-color: #c0c0c0; border-left-color: #999; border-bottom-color: #999; border-right-color: #999; } li a:visited{ color: brown; text-decoration: none; /*下線を表示しない*/ } li a:hover{ /*マウスポインタがリンクに重なったときの設定*/ background-image: url(im/button_on.gif); /*on画像/ background-position: left top; /*画像を左上に配置*/ background-repeat: no-repeat; /*背景画像を繰り返さない*/ color: red; /*テキストを赤色に変更*/ padding: 0; margin: 0; border-top-style: solid; /*ボタン枠を設定*/ border-right-style: solid; border-width: 1px 1px 1px 0; border-top-color: #fe9700; border-bottom-color: #f2b859; border-right-color: #fe9700; } div#content{background-image: url(im/wine-gurade.jpg); width: 640px; height: 120px; margin-left: 50px} といった感じです。 暇だったらでいいので返事を頂けたらありがたいです。

  • nattocurry
  • ベストアンサー率31% (587/1853)
回答No.1

htmlのソースを提示しないことには、回答のしようがないと思いますよ。 また、「この2つがくっつかない」という判断の根拠は何でしょうか？ li に float:left; を設定していますが、これを設定しないとどうなりますか？

sinto58167
質問者

補足

お早いお返事ありがとうございます。 遅くなって申し訳ないですがhtmlのソース補足させていただきます。 ２つがくっつかないというのは、h1とulが上下で、丁度重なってくれないという意味です。上手く説明できなくてすみません。 float: left;というのは、リストを一列に並ばせるという意味で設定しました。　 この説明でわかって貰えたでしょうか？ まだこの内容でも解りにくいかもしれませんが、お返事頂けたらありがたいです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "​http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">​ <html xmlns="​http://www.w3.org/1999/xhtml"​ xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="roll.css" type="text/css" media="all" /> </head> <body> <div id="container"> <div> <h1></h1> </div> <div id="menu"> <ul> <li><a href="#">web</a></li> <li><a href="#">title1</a></li> <li><a href="#">title2</a></li> <li><a href="#">css</a></li> <li><a href="#">seo</a></li> </ul> </div> <div style="clear:both; "></div> </div> </body> </html>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • CSSでレイアウトが崩れます

    CSSに挑戦したのですが、IE6.0とie7.0で若干表示がくります。 ただ、IEでは何とか表示します。 また、MAC IE5.2では、右側メインが左メニューの下に崩れて表示されてしまいます。 ドリームウィーバーでもやはり表示が崩れるのです。 cssは以下になります。 左と右のレイアウトに問題があるのでしょうか。一部省略しました。 #Wrapper { padding: 0px; width: 800px; display: block; margin: 0px; background: url(../images/bg_img_01.jpg) repeat-y bottom; height: auto; } body { margin: 0px; padding: 0px; text-align: center; color: #333333; font-size: 12px; line-height: 150%; vertical-align: middle; } #imgR { padding: 0px; float: left; width: 500px; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #arrow { margin: 0px; padding: 0px; float: left; width: 500px; } #rContents { text-align: left; padding: 0px; margin-top: 30px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: #111184; } .TextRink { text-decoration: none; color: #FF6600; display: inline; margin: 0px; padding: 0px 0px 0px 5px; } #WrapperL { margin: 0px; padding: 0px; width: 215px; height: auto; float: left; } #WrapperR { padding: 0px; width: 563px; height: auto; margin-top: 0px; margin-right: 15px; margin-bottom: 0px; margin-left: 0px; } #Footer { padding: 0px; height: 52px; width: 563px; background-image: url(../images/footer.gif); background-repeat: no-repeat; display: block; float: left; background-position: bottom; margin: 50px 0px 0px; vertical-align: bottom; } .sabu-title { padding: 13px 0px 0px; } .underline1 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; } #Header { display: block; margin: 0px; padding: 0px; height: 147px; width: 563px; background-image: url(../images/header_img.jpg); background-repeat: no-repeat; } .HeaderText { color: #FFFFFF; padding-top: 3px; margin: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 150px; font-size: 10px; }

  • CSSでのレイアウトが崩れてしまうんです。

    お世話になります。ＣＳＳビギナーなのですが、どうかご教授ください。800pxの画面のセンター表示のサイトを作りたいのですが、divでheader800px/container800px/contents600px（contensの中にleftmenu150px/centermenu450px/footer600pxとさらにdiv分けしてあります。）/leftmenu200pxという具合にレイアウトしたいのですが、leftmenuがcontensの右横にきてくれません。footerの下に表示されます。さらに言うとcontens自体が真ん中に表示されてしまいます。float:leftを指定するとブラウザ画面の左側にいってしまいますし...。これはどうしてでしょう？素人ゆえ基本的なことを見落としているかもしれませんがどなたか教えていただけないでしょうか？ ■HTML </head> <body> <div id="header">省略</div> <div id="container">省略</div> <div id="contens"> <div id="leftmenu">省略</div> <div id="centermenu">省略</div> <div id="footer">省略</div> </div> <div id="rightmenu">省略</div> </body> </html> ■CSS div#header { padding-top:0px; width:800px; margin-left:auto; margin-right:auto; background-color:#00CC00; } div#container { width:800px; margin-left:auto; margin-right:auto; } div#contens { width:600px; margin-left:auto; margin-right:auto; } div#leftmenu { width:150px; float:left; } div#centermenu { width:450px; float:left; margin-left:auto; margin-right:auto; background-color:#FFFFFF; } div#footer { float:left; width:600px; padding-top:50px; } div#rightmenu { width:200px; float:right; background-color:rgb(147,182,110); padding-bottom:5px; } body { background-attachment:scroll; background-color:#FFFFFF; background-image:url(../image/bg.jpg); background-repeat:no-repeat; background-position:center top; }

  • cssによる配置の計算が合いません

    cssによる配置で width の計算がうまくあいません。 コンテンツ部分が 750(ページ)-5(padding)-1(border)-134(navi-width)-5(padding)-1(border)=604(contents-border) ちなみにSafariでは計算通りでした。 IE6ではだめなようです。 くわしくは <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> BODY { padding-top : 0px; margin-top : 0px; text-align : center; padding-bottom : 0px; margin-bottom : 0px; } #page { background-color : #dd22aa; width : 750px; margin : 0; padding-top : 0px; text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : 0px; height: 100%; padding : 0px ; } #header { width : 750px; height : 80px; position : relative; float:left; clear : both; background-color : #008899; padding: 0px; margin: 0px; color : #b99859; } #navi { width : 134px; height : 399px; float : left; position : relative; clear : both; background-color : #ffffff; background-repeat : no-repeat;background-position : center top; padding-top : 50px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 5px; margin-right : 0px; margin-bottom : 0px; border-left-style : solid; border-left-width : 1px; border-left-color : #000000; } #contents { width :596px; height : 399px; float : right; position : relative; padding : 0px; margin-top : 0px; margin-left : 0px; margin-right : 5px; margin-bottom : 0px; background-color: #9999FF; border-right-style : solid; border-right-width : 1px; border-right-color : #000000; } </style> <title>テスト</title> </head> <body> <div id="page"> <div id="header"> ヘッダー </div> <div id="navi"> ナビゲーション。左のパディングが5px。左のボダーが1px。幅が134px。 </div> <div id="contents"> コンテンツ。右のパディングが5px。右のボダーが1px。幅が596px。計算すると、750-5-1-134-5-1=604(幅)となるはずなのですが、596pxでないとはまりません。 </div> </div> </body> </html>

  • XHTML、CSSレイアウトでフッターを常に最下部に配置するには?

    フッターを最下部に表示したいのですが、#footerに position: fixed; bottom:0;を付け加えてもフッター だけ最下部に表示されコンテンツ部分がついてきません。 ヘイトに100%をつけくわえるのでしょうか? どうかご教授願います。 body { margin: 0; padding: 0; text-align:center; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size:1em; background-color:#CCCCCC; } ol,ul,li { margin: 0; padding: 0; } li { list-style:none; } h1,h2,h3,p { margin: 0; padding: 0; } #container { margin: 0 auto; text-align: left; width: 740px; height: 100%; background-color:#FFFFFF; } #header { width:740px; height:80px; margin:0; padding:0; background-color:#FFFFFF; background-image:url(img/nine_rogo.gif); background-repeat:no-repeat; background-position:left center; } #contents { width:740px; height:100%; margin:0; padding:0; background-color:#FFFFFF; } #menu { float:left; width:140px; height: auto; margin:0; padding:0; background-color:#FFFFFF; color:#000000; } #main { float:right; width:580px; height:auto; margin:0; padding:0 0 0 10px; background-color:#FFFFFF; color:#000000 } #footer { clear:both; width:740px; height:auto; background-color:#FFFFFF; color:#000000; font-size:1em; padding:0.3em 0; text-align:center; }

  • cssハックについて

    googleとfirefoxでcssが聞かない箇所があります。 css--------- #operation { width: 420px; background-image: url(../picture/top/left_middle.jpg); background-repeat: repeat-y; background-position: center top; margin-top: 10px; } #operation img { border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; } #operation #ope_top { background-image: url(../picture/top/left_top.jpg); background-repeat: no-repeat; background-position: left top; height: 30px; padding-bottom: 0px; margin-bottom: 0px; } #operation #ope_top #ope_tit { font-size: 14px; line-height: 2; font-weight: bold; color: #FFFFFF; text-indent: 10px; float: left; width: 200px; margin-top: 0px; padding-top: 0px; height: 20px; } #operation #ope_top .ope_img { padding-top: 5px; float: right; margin-right: 10px; } #operation #ope_middle { margin-top: 0px; padding-top: 0px; width: 420px; margin-left: -200px;←ここがおかしいです！！ } #operation #ope_middle .content ul { margin-top: 5px; padding-left: 30px; list-style-image: url(../picture/list.jpg); } #operation #ope_middle .content li { margin-bottom: 5px; margin-top: 1px; } #operation #ope_middle .content .line01 { border: 1px dotted #CCCCCC; margin-top: 2px; margin-bottom: 2px; } というかんじなのですが、左右へとぶれてしまいます。 どのように修正したいいのか困っております。 参考になるようなことありましたらお願いします。

  • CSSでバックグラウントカラーの途切れを直したい

    CSS初心者です。 CSSでfloatを利用してプロックを左右に並べています。 その際、左のブロックにbackground-colorを指定していますが、右のブロックの情報が多かった場合に、background-colorが途中で終わってしまいます。 どのようにしたらよいでしょうか。 下記のCSSもおかいしところがあるかも・・・指摘をお願いします。 #page { width: 750px; margin-right: auto; margin-left: auto; text-align: left; border: 1px solid #666666; margin-bottom: 0px; } div.blocka{ float: left; background-color: #FFC556; width: 150px; margin:0px 0px 0px 0px; padding:5px ; border-right:1px solid #666666 ; } div.blockb { float: left; margin:0px 0px 0px 0px; padding:10px ; width: 550px; }

    • ベストアンサー
    • 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

  • CSSでページ作成、Firefoxでうまく表示できません

    ご教授いただけますでしょうか。 CSSでページ作成を試みていますが、IEでは思ったとおりに表示されますが、Firefoxでは崩れてしまいます。 内容は、大枠の中に、ヘッダーと左右のフロート（左：メニュー、右：内容）のシンプルなデザインです。 以下、CSS部分です。 /* 大枠 */ #container { width: 800px; margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; background-color: #FFFFFF; font-size: 13px; border-left: 1px #663333 solid; border-right: 1px #663333 solid; border-top: 1px #663333 solid; border-bottom: 1px #663333 solid; padding: 5px; text-align: left; } /* ヘッダー */ .header { width: auto; height: auto; background: url(img/header.jpg) repeat-x; margin: 0px; } /* メニュー */ .left { float:left; width:20%; background-color:#ffffff; padding: 5px; } /* 内容 */ .right { float:right; width:75%; background-color:yellow; padding: 5px; } ここからHTMLに書き込んだものです。 <div id="container"> <div class="header">　ヘッダー　</div> <div class="left">　メニュー　</div> <div class="right">　内容　</div> </div> Firefoxでは、大枠にあたる container 部分が、ヘッダーしか囲まず、メニューと内容部分がその下に表示されます。 どこがおかしいか、ご指摘いただければ幸いです。 どうぞよろしくお願い申し上げます。

    • ベストアンサー
    • CSS
  • xml宣言をするとIE6で右サイドがカラム落ちしてしまいます。

    http://www.infofx.jp/ 上記のサイトをアップしたばかりなのですが、 xml宣言をすると右サイドがカラム落ちしてしまいます。 SEOを考えてxml宣言は外したくないのですが、良い方法があればどなたか教えて頂けますでしょうか？宜しくお願い致します。ちなみに以下がcssです。 @charset "shift_jis"; body { color: #666666; margin: 0px; padding: 0px; text-align: center; font: 75%/1.8 "メイリオ", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; background: #e9f3ff url(images/kabe.gif) repeat-x top; } h1,h2,h3,p,ul,li{ margin: 0px; padding: 0px; } ul{ list-style-type: none; } img { border: none; vertical-align: bottom; } #container { background-image: url(images/container_bg.gif); width: 896px; text-align: left; background-repeat: repeat-y; background-position: center; margin-top: 0px; margin-right: auto; margin-left: auto; padding-right: 4px; padding-left: 4px; } *.float { float: left; margin-right: 1em; } /*コンテンツ ----------------------------------------------------------------*/ #contents { float: left; width: 706px; } /*メイン ----------------------------------------------------------------*/ #main { float: right; width: 498px; margin-right: 9px; margin-left: 9px; display: inline; } #main h2 { background-image: url(images/midashi_bg.gif); background-repeat: no-repeat; background-position: left top; font-size: 100%; padding-left: 10px; height: 30px; padding-top: 4px; padding-right: 5px; color: #FFFFFF; letter-spacing: 0.5em; } #main p { padding-right: 10px; padding-left: 10px; padding-bottom: 15px; } /*右側 ----------------------------------------------------------------*/ #side { float: right; width: 181px ; display: inline; margin-right: 4px; margin-left: 5px; font-size: 90%; text-align:center; } #side p { margin-bottom: 10px; color: #666666; } .side-table { border: 1px solid #cccccc; padding: 2px; line-height: 2; text-align: center; background: #f7faff; } .side-table h3 { background-color: #ffffff; padding-top: 3px; padding-bottom: 2px; color: #666666; text-align: center; font-weight: normal; font-size: 100%; letter-spacing: 0.5em; margin-bottom: 10px; border: 1px solid #cccccc; } /*メニュー他 ----------------------------------------------------------------*/ #sub { float: left; width: 181px; display: inline; margin-right: 5px; margin-left: 4px; color: #666666; } #sub li { background-image: url(images/menu_arrow.gif); background-repeat: no-repeat; background-position: left center; padding-left: 25px; } #sub ul { margin-bottom: 20px; } #sub li a { color: #666666; text-decoration: none; display: block; width: 100%; } #sub li a:hover { color: #FF3B33; } .arrow-last { background-image: url(images/menu_arrow_last.gif) !important; background-repeat: no-repeat; background-position: left center; } .menu-midashi { border: 1px solid #cccccc; background-image: none !important; background-color: #ffffff; color: #666666; padding-top: 3px; padding-bottom: 2px; } /*clearfix ------------------------------------------------------------------*/ #container:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #container { display: inline-block; } /* Hides from IE-mac \*/ *html #container { height: 1%; } #container { display: block; } /* End hide from IE-mac */*/

    • 締切済み
    • XML
  • CSSでの質問です

    初めて段組を作ってみたんですが、上の余白を無くするにはどうしたらいいのでしょうか？ ソースは以下のとおりです。 <style type="text/css"> <!-- #wrapper { width: 760px; margin: 0px auto; } #header { background-color: #9933FF; height: 50px; top: 0px; } #primary { background-color: #c7d5ed; float: right; width: 550px; margin-top: 10px; margin-bottom: 10px; } #secondary { background-color: #f9cfba; float: left; width: 200px; margin-top: 10px; margin-bottom: 10px; } #footer { clear: both; background-color: #99FFFF; height: 50px; } --> </style> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="primary"> </div> <div id="secondary"> </div> <div id="footer"></div> </div> </body> </html> センタリングを維持したまま上の余白をクリアしたいのですが、何か解消法はありますか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する