• 締切済み

カラムの高さを合わせる

ソース記述の為、長いですがお付き合いください。 http://okwave.jp/qa/q7547642.htmlでした質問を変えたものです。 html5で以下の様に記述しました <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="author" content="へのへのもへじ"> <meta name="keywords" content="へのへのもへじ"> <meta name="description" content="へのへのもへじ"> <link rel="stylesheet" href="style.css"> <title>へのへのもへじ</title> </head> <body> <div id="head"> <h1>へのへのもへじのサイト</h1> </div> <div id="container"> <div id="header"><img src="title.png" alt="へのへのもへじ" width="100%" height="120"></div> <div id="menu"> <ul style="list-style-type: none"> <li><a href="index.html">1</a></li> <ul style="list-style-type: none"> <li><a href="index.html">2</a></li> <li class="sub"><a href="index.html">2-1</a></li> <li class="sub"><a href="index.html">2-2</a></li> <ul style="list-style-type: none"> <li><a href="index.html">3</a></li> <li class="sub"><a href="index.html">3-1</a></li> <li class="sub"><a href="index.html">3-2</a></li> <ul style="list-style-type: none"> <li><a href="index.html">4</a></li> <li class="sub"><a href="index.html">4-1</a></li> <li class="sub"><a href="index.html">4-2</a></li> <ul style="list-style-type: none"> <li><a href="index.html">5</a></li> <li class="sub"><a href="index.html">5-1</a></li> <li class="sub"><a href="index.html">5-2</a></li> </ul> </div> <div id="contents"> <p> 本文<br> 本文<br> 本文<br> 本文<br> </p> <p>★</p> <p>本文<br> 本文<br> 本文<br> 本文<br> </p> </div> </div> <div id="footer">フッター</div> </div> </div> </body></html> そしてcssに @charset "UTF-8"; * { margin:0; padding:0; } body { line-height:150% } #head { width:100%; padding:22px; text-align:center; margin:0 auto; font-size:10px; text-decoration:none; } #container { width:900px; margin:0 auto; min-height:1000px; } #header { width:898px; height:120px; margin:0 auto; border-top:solid 1px #000000; border-left:solid 1px #000000; border-right:solid 1px #000000; border-bottom:solid 8px #0000ff; } #menu { float:left; width:148px; min-height:1018px; background-color:#aaffdd; border-top:dotted 1px #666666; border-left:solid 1px #666666; border-right:solid 1px #666666; } #menu a{ display:block; height:100%; padding:11px 9px 11px 9px; margin:0 auto; text-decoration:none; border-top:dotted 1px #666666; background-color:#aaffdd; list-style:none; } #menu li.sub a{ display:block; height:100%; padding:9px 3px 9px 22px; text-decoration:none; font-size:small; font-color:red; border-top:dotted 1px #666666; background-color:#aaffdd; list-style:none; } #menu a:hover{ background-color:#FFE4E1; } #menu li.sub a:hover{ background-color:#FFE4E1; } #contents { float:left; width:731px; min-height:1000px; margin:0 auto; padding:9px 9px 9px 9px; border-top:solid 1px #000000; border-right:solid 1px #000000; text-align:center; background-color:#fce5fd; } #contents p{ margin-top:2em } #footer { clear:both; width:900px; height:100%; margin:0 auto; padding-top:10px; padding-bottom:10px; font-size:small; color:#ffffff; text-align:center; background-color:#555555; } と書きました。 ここで現在のカラムの高さだと本文領域とメニュー領域が合ってるのですが、 本文領域がグーッと延びて、、、 例えば<p>★</p>の部分が「<p>★</p><p>★</p><p>★</p><p>★</p><p>★</p><p>★</p><p>★</p> <p>★</p><p>★</p><p>★</p><p>★</p><p>★</p><p>★</p><p>★</p> <p>★</p><p>★</p><p>★</p><p>★</p><p>★</p><p>★</p><p>★</p>」みたいになったら、 メニュー領域のmin-heightを追い越して長くなります。 この時にメニュー領域が寸足らずになって、 今回で言うと緑の部分が千切れて白い背景の部分になります。 右の本文領域が長くなってもメニュー領域がその長さに付き合って同じ高さに揃えるにはどうしたらいいでしょうか？ また、メニューの5-2の下にborderを引きたいのですが、 現状だとメニュー全体の下に入ってしまいます。 他の各メニューと同じような位置でborderを引くにはどうしたらよいでしょうか？ 宜しくお願いします。

  • CSS
  • 回答数2
  • ありがとう数0

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

先にも回答しましたが・・ position:absolute; height:100%; で問題ないはずです。 　先の回答・・試されていませんね。floatなんてまったく使ってないのに「項目の領域を削除したらフロートが落ちたのと、」とは如何に？？ 　先の回答の項目を等分割している部分を消すなり固定値に変更すればよいだけです。 　単にコピペするのではなく、理解するようにしましょう。 ＞5-2の下にボーダー引くならulの下にborder引くか、:last-child擬似要素 ★リストの書き方が間違っています。 <div id="menu"> <ul style="list-style-type: none"> <li><a href="index.html">1</a></li> <ul style="list-style-type: none"> <li><a href="index.html">2</a></li> <li class="sub"><a href="index.html">2-1</a></li> <li class="sub"><a href="index.html">2-2</a></li> <ul style="list-style-type: none"> <li><a href="index.html">3</a></li> <li class="sub"><a href="index.html">3-1</a></li> <li class="sub"><a href="index.html">3-2</a></li> <ul style="list-style-type: none"> <li><a href="index.html">4</a></li> じゃなくて <div id="menu"> 　　<ul> 　　　　<li><a href="index.html">1</a></li> 　　　　<li><a href="index.html">2</a> 　　　　　　<ul> 　　　　　　　　<li><a href="index.html">2-1</a></li> 　　　　　　　　<li><a href="index.html">2-2</a></li> 　　　　　　</ul> 　　　　</li> 　　　　<li><a href="index.html">3</a> 　　　　　　<ul> 　　　　　　　　<li><a href="index.html">3-1</a></li> 　　　　　　　　<li><a href="index.html">3-2</a></li> 　　　　　　</ul> 　　　　</li> 　　　　<li><a href="index.html">4</a></li> ・・・・・ でなきゃならない。 　また、 style="list-style-type: none" も class="sub" なんて要りません。 　#menue ul,#menue ul li{list-style-type:none;} とか 　#menue ul li ul l1{} とかで済むはずです。 　先の回答は、そのようなHTMLの書き方やセレクタの書き方もわかるように書いたはずです。 ★HTMLは文書構造しか書かない。 ★スタイルシートは文書構造を元にデザインを指定したい要素をセレクタで指定して書きます。 「メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ( http://jigsaw.w3.org/css-validator/#validate_by_input )」は伊達じゃない。 #(一意セレクタは極力使わない--javascriptやリンクのターゲット以外には書かない。詳細度が高すぎてスタイルシートが煩雑になります。もちろんHTMLも header,footerとうclass名、HTML5では新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )でわかるようにひとつの文書に何度も登場するものです。 <div class="section"> 　<h2>見出し</h2> 　<div class="section"> 　　<h3>見出し</h3> 　　<div class="article"> 　　　<div class="header"> 　　　　<h2>・・・</h2> 　　　</div> 　　　<div class="section"> 　　　　<h3>。。</h3> 　　　</div> 　　　<div class="footer"> 　　　・・・・ 　　　</div> 　　</div> 　　<div class="footer"> 　　・・・ 　　</div> 　</div> 　<div class="footer"> 　</div> </div> とか、・・・HTML5では、 <section> 　<h2>見出し</h2> 　<section 　　<h3>見出し</h3> 　　<article> 　　　<header> 　　　　<h2>・・・</h2> 　　　</header> 　　　<section> 　　　　<h3>。。</h3> 　　　</section> 　　　<footer> 　　　・・・・ 　　　</footer> 　　</article> 　　<footer> 　　・・・ 　　</footer> 　<section> 　<footer> 　</footer> </section> と書くことになります。 この場合、idやclass名がなくても、それぞれのfooterは、セレクタで特定できるのです。 とにかく、先の回答をHTMLを含めて理解してください。そしたら簡単に解決します。

回答No.1

JQueryで良ければこんな解決策もあります。 jQuery Auto Height - 複数のカラムの高さを最大値にそろえるjQueryプラグイン http://www.tinybeans.net/blog/download/jquery-plugin/jquery-auto-height.html

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

関連する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">&copy;＃</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; }

  • スタイルシートでのメニュー作成で

    今回初めてテーブルを使わずスタイルシートでナビゲーションを作成しているのですが 下記の方法ではメニュー内のテキストが左に寄ってしまいます。 出来ればすっかり左寄せではなく、左に10px程空間を入れたいのですがどのようにすれば良いでしょうか。 CSS内の#menuに「margin-left:10px」としても反映されません。 ■■　CSS　■■ #menu {margin: 12px; padding: 0px; width: 180px; border-top: 1px solid #080240; border-right: 1px solid #080240; border-left: 1px solid #080240; font-size: 100%; } #menu ul {margin: 0px; padding: 0px; list-style: none; } #menu li {margin: 0px; padding: 0px; } ■■　HTML　■■ <ul> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> </ul> アドバイスいただけると助かります。 どうぞ宜しくお願い致します。

    • ベストアンサー
    • HTML
  • 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
  • [CSS3] last-childについて

    html5とcss3にてスマートフォンサイト制作をしております。 リスト要素を使いメニューを作っていますが、一番下の要素だけボーダーを削除したいと 思っていますが、うまくいきません。 詳しい方、ご教授いただけませんでしょうか。　よろしくお願い致します。 ---------------------------------------------------------- [HTML] <nav> <ul id="navi"> <a href="#"><li>メニュー1</li></a> <a href="#"><li>メニュー2</li></a> <a href="#"><li>メニュー3</li></a> <a href="#"><li>メニュー4</li></a> <a href="#"><li>メニュー5</li></a> </ul> </nav> [CSS] nav { display: block; width: 300px; margin-right: auto; margin-left: auto; margin-bottom: 18px; } #navi { border-radius: 8px; -webkit-border-radius: 8px; border: 1px solid #CCCCCC; background: -webkit-gradient(linear, left top,left bottom, from(#FFFFFF), to(#E7E7E7)); background-color: #FFFFFF; } #navi a { text-decoration: none; color: #646464; font-size: 1.31em; text-indent: 16px; height: 33px; line-height: 33px; } #navi li { border-bottom: 1px solid #CCCCCC; } #navi li:last-child { border-bottom-style: none; }

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

  • IE7で <li> の一部が消える

    IE7で横並びの<li>の一部が消えます。（Firefoxでは大丈夫） パソコンのフォントや大きさにもよると思うのですが 2列目の右側の「けけけ・・・」が消えます！ 「くくく」や「けけけ」に半角でも足したり削除すれば現れたり 右側に「けけけ」がギリギリにハマるかハマらない様な微妙な場合に出る現象です。 HTMLの書き方等が間違っているのでしょうか？ <html> <head> <style type="text/css"> <!-- .xxx{ margin: 0 auto; width: 797px; background: #000;} .xxx ul{ margin: 0 0 0 12px; padding:0; list-style: none; font-weight: bold; line-height: 2;} .xxx li{ float: left; margin: 5px; text-align: center; white-space: nowrap;} .xxx a{ color: #FFF; text-decoration: none; border:1px solid #999; padding: 4px 5px 1px; } --> </style> </head> <body> <div class="xxx"> <ul> <li><img src="http://www.okweb.ne.jp/images/logo_top.gif" width="200" height="125" alt="OK"></li> <li><a href="index.html">ああああああ　ああ</a></li> <li><a href="index.html">いいいいいい</a></li> <li><a href="index.html">ううううう</a></li> <li><a href="index.html">えええええ</a></li> <li><a href="index.html">おおおおおお</a></li> <li><a href="index.html">かかかかかかかか</a></li> <li><a href="index.html">きききききききき</a></li> <li><a href="index.html">くくくくくくくくくくくくく</a></li> <li><a href="index.html">けけけけけけ</a></li> <li><a href="index.html">ここここここ</a></li> <li><a href="index.html">さささささ</a></li> </ul> <br style="clear:both"> </div> </body></html>

    • ベストアンサー
    • 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>画像は&lt;div id=&quot;imgbox_f&quot;&gt;&lt;/div&gt;で囲むと写真右へ。</p> <p>あいさつ文を入力しおく。<strong>太字</strong>は&lt;strong&gt;&lt;/strong&gt;で囲む。</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
  • float の clearfixで謎の空間が出現

    現在、図のように表示されています。 本来であれば右側の「フロートテスト」という横並びのブロックがすぐ下に並んで表示させたいのです。 しかし、2つめが左側のサイドバーの終わりから表示されています。 サイドバーにも「フロートテスト」にもfloatとclearfixを使用しています。 clearfixを削除すると、wrapperが高さを持たないボックスになりますが、目的通りの縦に並んだ状態になります。 フロートが悪いのか、clearfixの設定or使い方が悪いのか。 原因が不明で悩んでおります。 よろしくお願いします。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="ja" lang="ja"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="common.css" type="text/css" /> <title>test</title> </head> <body style="background: #ffe6e6;"> <div id="wrapper" style="width:800px;background:#ffffff;border:1px solid red;" class="clearfix"> <div id="sidebar" style="width:200px;float: left;"> <div> <div> <ul><li><a href="index.html">サイドメニュー</a></li></ul> <ul><li><a href="index.html">サイドメニュー</a></li></ul> <ul><li><a href="index.html">サイドメニュー</a></li></ul> </div> </div> <div> <div style="border:1px solid #ccc;"> <p style="FONT-WEIGHT: bold; TEXT-ALIGN: center">サイドメニュー</p> </div> <div> <ul><li><a href="index.html">サイドメニュー</a></li></ul> <ul><li><a href="index.html">サイドメニュー</a></li></ul> <ul><li><a href="index.html">サイドメニュー</a></li></ul> </div> </div> </div> <!-- /sidebar --> <!-- contents --> <div id="contents" style="margin-left: 200px;" class="clearfix"> <div class="clearfix"> <div style="float:left;width:50%;"> <div style="border:1px solid green"> <p>フロートテスト</p> </div></div> <div style="float:right;width:49%;"> <div style="border:1px solid green"> <p>フロートテスト</p> </div></div> </div> <div class="clearfix"> <div style="float:left;width:50%;"> <div style="border:1px solid green"> <p>フロートテスト</p> </div></div> <div style="float:right;width:49%;"> <div style="border:1px solid green"> <p>フロートテスト</p> </div></div> </div> </div><!-- /contents --> </div><!-- /wrapper --> </body> </html> common.cssで読み込んでいるclearfix の部分 .clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; /* Hides from IEmac \*/ } .clearfix { display: block; }

    • ベストアンサー
    • CSS
  • テーブルの中のプルダウンがフロートできません

    恐れ入ります、 現在、こちらのサイトを手がけております。 http://www.sl-success.com/hallo-casino/index.html このサイトの上部のメニューバーにプルダウンメニューを組み込みたくて、修正をしてみましたがレイアウトが崩れてしまいます。 http://www.sl-success.com/hallo-casino/index-testjefri13-2.html 上記のようにテーブルメニューの中に、ulを組み込んでみました。このプルダウンしたいULをメニューの中に入れたいのですが、うまくフロートできません。 こちらの該当しているソースを書きます。 <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center" valign="top"><div id="menu"><a href="index.html" class="frist active">HOME</a><a href="review.html">casino bonus guide</a><a href="top10/top10index.html">Online Casino TOP10</a><a href="#">free casino games</a> <div class="menune"> <ul> <li> <a href="review.html">bonus ne</a> <ul> <li><a href="#"> jepang1</a> </li> <li><a href="#"> jepang2</a> </li> <li><a href="#"> jepang33</a> </li> </ul> </li> </ul> </div> <a href="contact/contact-index.html" class="last">Contact Us</a></div></td> </tr> 対応しているcssは以下の通りです。 .menune{ background:#ff0000; /*------#1d3c55----------*/ border-bottom:#345065 1px solid; margin-left:auto; margin-right:auto; width:auto; height:auto; text-align:center; } .menune ul{ list-style:none; } .menune li{ float:left; } .menune li a{ background:#1d3c55; color:#cccccc; display:block; text-align:center; text-decoration:none; text-transform:uppercase; border-left:#001F39 1px solid; border-right:#345065 1px solid; padding:20px 25px 14px 25px; } .menune li a:hover, .menune ul li:hover a{ background:#001F39; color:#e9f1f9; /*---e9f1f9-----*/ text-decoration:none; } .menune li ul{ background:none; display:none; padding:0px; margin:0px; border:0px; position:absolute; z-index:200; } .menune li:hover ul{ display:block; } .menune li li { display:block; float:none; margin:0px; padding:0px; height:70px; width:135px; } 上記のサイトをうまく修正できればありがたいのですが、もしお分かりであればご教授お願い致します。 失礼します。

  • PHPのプログラム

    初心者でPHPのプログラムを組んでもレイアウトが崩れてしまいます。 どのようにすれば直るのでしょうか？詳しい方、どうかよろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>sugoweb</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"> </div> <div id="topimg"> </div> <div id="left_navi"> <div id="menu"> <ul> <li><a href="index.html">XXXXX</a></li> <li><a href="grudge.html">当社のこだわり</a></li> <li><a href="question.html">Q&A</a></li> <li><a href="plan.html">PLAN</a></li> <li><a href="flow.html">FLOW</a></li> <li><a href="inquiry.php">問い合わせ</a></li> <li><a href="blog.html">ブログ</a></li> </ul> </div> </div> <div id="contents"> <form method="POST" action="inquiry_check.php"> <p class="form">氏名</p> <input type="text" name="name" size="40"><br> <p class="form">電話番号</p> <input type="text" name="tel" size="40"><br> <p class="form">Eメール</p> <input type="text" name="email" size="40"><br> <input type="radio" name="sex" value="男" checked>男 <input type="radio" name="sex" value="女">女 <textarea name="bikou" cols="50" rows="10"></textarea> <input type="submit" value="確認"> <input type="reset" value="リセット"> <form method="POST" action="inquiry_check.php"> </div> <div id="footer"> </div> </body> </html> CSS部分 *{margin:0; padding:0; } body { text-align:center; } #container{ width:900px; height:auto; margin:0 auto; text-align:left; } #header{ width:900px; height:90px; border:solid 1px gray; background-image:url("images/header/header_bg.jpg"); position:relative; } .inquiry_btn{ position:absolute; top:8px; left:660px; border:none; } .logo{ border:none; } #topimg{ width:900px; height:250px; } #left_navi{ width:180px; height:1000px; float:left; } #contents{ width:680px; float:right; padding-top:20px; padding-right:20px; } .right{ float:right; margin-left:15px; margin-bottom:20px; } .left{ float:left; margin-right:15px; margin-bottom:20px; } h2{ width:100%; border-left:solid 3px navy; border-bottom:solid 1px navy; padding-left:10px; font-size:18px; padding-bottom:3px; margin-bottom:30px; } h3{ width:100%; border-left:solid 3px navy; border-bottom:solid 1px navy; padding-left:10px; font-size:15px; padding-bottom:3px; margin-bottom:10px; margin-top:10px; } #footer{ width:900px; height:50px; border:solid 1px gray; clear:both; text-align: center; padding-top: 10px; } #footer ul{ list-style-image:url(images/listmark.gif); } #footer li{ display:inline; } #footer a{ display:inline; font-size:12px; padding:10px; text-decoration:none; color:#333; width:auto; } #footer a:hover{ color:red; } #contents p{ line-height:150%; letter-spacing:1px; font-size:13px; margin-bottom:70px; } dl.qa{ margin-bottom:20px; } dt.question{ font-size: 15px; margin-bottom:20px; font-weight:bold; border-left:solid 3px navy; border-bottom:solid 1px navy; padding-bottom:2px; padding-left:5px; } dd.answer{ margin-bottom:25px; } #menu ul{ margin; 0; padding: 0; list-style: none; } #menu li{ display: inline; padding: 0; margin: 0; } #menu a{ display: block; border-top: 1px solid #9F99A3; border-left: 5px solid blue; border-right: 1px solid #9F99A3; background-color: #EEEEEE; font-size: small; padding: 3px 10px; text-decoration: none; color: #333; width: 150px; margin: 0px; text-align: left; } #menu a:hover{ text-decoration: underline; border-top: 1px solid #8593A9; border-left: 5px solid gray; border-right: 1px solid #8593A9; background-color: pink; } #left_navi{ margin-top: 20px; } P.form{ margin-bottom:10px; }

    • ベストアンサー
    • PHP

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する