- 締切済み
CSS について。
CSS について。 http://www.y-sira.com/ ただ今こちらのサイトを作成しているのですが、 ・div の left の位置がおかしい。 ・div の sub_content の中の h3 の border が div の right のコンテンツを突き抜けている。 ・div の footer の位置が変な位置にある。 ということで困っています。 CSS のどこがおかしいのか指摘して下さるとありがたいです。 よろしくお願いします。
- y-sira
- お礼率60% (6/10)
- ブログ
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- naokita
- ベストアンサー率57% (1008/1745)
質問中に改変してたら、回答しようが無いでしょうが・・・ 全部を検証していないが、ざっと見た感じ、 ・ paddingやborder分を内部計算しているのか。 （もしくは標準にするとか） ・ HTMLとXHTMLがごちゃまぜ。 ・ 全体枠のwidthが無いうえに、右枠のwidthも無く各幅が固定幅にならない。 ・ float後のclearが無い。 leftの位置は書いた記述通りの表示されているので、問題無い。 意図した表示と違うのは、HTML,CSSの設定方法を間違っているだけ。
関連するQ&A
- HTMLでCSSでボーダーが表示されません。
HTMLでCSSでボーダーが表示されません。 右サイドバー（right）の左にボーダーを表示させたいのですが、 画像のように文字を記述したところまでしかボーダーが表示されません。 ボーダーをfooterの上まで引きたいのですが、 わかる方いらっしゃいましたら回答宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"> <div id="right_title"></div> <div id="right_content"></div> </div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #right { float: left; height: auto; } #right_title { } #right_content { border-left-width: 1px; border-left-style: solid; border-left-color: #000; }
- ベストアンサー
- HTML
- CSSが正確に反映されません。
４つの枠を丸で囲み、かつそれぞれの枠を等間隔で空けたいと思います 丁度以下の2つを表示した場合の、contentsとmainの間の間隔が理想的です。 しかし書いたCSSの設定が正確に反映されません。 headerとfooterもこの大きさで広げたいと思うのですが、広がりません。 また、なぜheaderは丸くならず、footerはサイズからはみ出すのでしょうか。 背景を赤に設定しているのですが、それも反映されません。 なぜこうなるのかどなたかご存知の方、ご指摘いただけると助かります。 どうかよろしくお願いします。 以下、2つのファイルは同じフォルダに保存しました。 dreamweaverのアカデミック版で作り、firefox3.6.13で表示しています。 style.css ---------------------------------------------------------- @charset "utf-8"; /* CSS Document */ <!-- * { margin:0; padding:0; } h1, h2, p { margin: 0 1em; } <!--背景の設定--> body { background-color: red; } <!--コンテンツの幅を指定--> #wrapper, #main, #header, #menu, #footer { width:1120px; } <!--角を丸くする--> #header, #menu, #contents, #footer { background-color: #66FFFF; border:2px solid #999; padding: 8px; margin-bottom:5px; -webkit-border-radius: 5px; /* Safari,Google Chrome用 */ -moz-border-radius: 5px; /* Firefox用 */ } <!----> #wrapper { margin: 0 auto; line-height: 1.5; } #main { } #header { height: 50px; } #menu { width: 160px; float: left; } #menu ul { list-style: none; margin-left: 1em; } #contents { float: right; width: 900px; } #footer { clear: both; height: 50px; text-align: center; } --> ------------------------------------------------------------------------------------ index.html ------------------------------------------------------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"><head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>勉強用</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="wrapper"> <div id="header"> <h1>Site Title</h1> </div> <div id="main"> <div id="menu"> <p><strong>float:left</strong></p> <ul> <li>Menu</li> <li>Menu</li> </ul> </div> <div id="contents"> <h2>Sub Title</h2> <p><strong>float:left</strong></p> <h2>Sub Title</h2> <p>text</p> </div> </div> <div id="footer"> <p>Footer</p> </div> </div> </body> </html>
- 締切済み
- CSS
- HTMLのCSS(float)の設定がよくわかりません
HTMLのCSS(float)の設定がよくわかりません 画像のように各配置はうまく表示されているのですが footerのCSSを #footer { width: 100%; float: left; clear: both; } と表記するとwrapperのCSSで表記した外枠のボーダーが footerの前で切、footerの左横に1px～2pxの隙間が できてしまうのですが、その理由をわかる方いらっしゃいますか。 宜しくお願い致します。 footerの表記を #footer { width: 100%; clear: both; } とすると、ボーダーも1pxの隙間もなく正常に表示されます。 宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"></div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #000; border-left-color: #000; } #container { overflow: hidden; } #left { float: left; } #right { float: left; } #footer { width: 100%; float: left; clear: both; } わかる方いらっしゃいましたら 宜しくお願い致します。
- ベストアンサー
- HTML
- CSS : IEとFirefoxの表示差異を改善したい
grandswellと申します。 よろしくお願いいたします。 サンプルをIE、Firefoxそれぞれで見ていただけると わかっていただけると思うのですが、Firefox側が 意図した通りのレイアウトになっていません。 サンプルをIEで表示したレイアウトを Firefoxでも同じCSSで実現するにはどのような 工夫が必要でしょうか。 ぜひご教示くださいますよう、お願いいたします。 以下、サンプルのCSSとHTMLとなります。 *cssサンプル(style2.css) ---------- div.main { border-style : dashed; width : 100%; } div.main div.contents{ border-style : dashed; width : 75%; float : left; } div.contents div.contentsmain{ border-style : dashed; width : 100%; } div.contentsmain div.sidebar{ border-style : solid; float : left; width : 32%; } div.contentsmain div.entry{ border-style : solid; float : right; width : 66%; } div.main div.subspace { border-style : dashed; float : right; width : 23%; } div.footer { border-style : dashed; } ---------- *htmlサンプル ---------- <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="./style2.css" type="text/css"> </head> <body> <div class="main"> <p>main</p> <div class="contents"> <p>contents</p> <div class="contentsmain"> <p>contentsmain</p> <div class="sidebar"> <p>sidebar</p> </div> <div class="entry"> <p>entry</p> </div> </div> </div> <div class="subspace"> <p>subspace</p> </div> </div> <div class="footer"> <p>footer</p> </div> <body> </html> ----------
- ベストアンサー
- CSS
- CSSに関して教えてください。
CSSで左列がサイドバーで右列がメインコンテンツの二段組レイアウトについて質問します。 ●要点 サイドバーには背景色が指定してあり、サイド、メインとも高さが可変(指定なし)とします。メインコンテンツの高さの変動に応じてサイドバーの高さも変化してサイドバーの背景色とメインコンテンツの高さが同じになるように変化させたいのです。 ---------- CSSソース ---------- body { text-align: center } #wrapper { width: 720px; margin: 0 auto; text-align: left; } #content { width: 720px; background: url("../img/content.gif") repeat-y; } #main { float: right; width: 540px; } #sidebar{ float: left; width: 180px; background: blue; } ---------- HTML ---------- <body> <div id="wrapper"> <div id="content"> <div id="main"> ・・・・・・・・・ </div> <div id="sidebar"> ・・・・・・・・・ </div> </div> </div> </body> CSSでcontentに背景画像(サイドバーの幅が青色の画像)を指定してrepeat-yとするとIE6ではメインコンテンツの高さに合せてcontentに指定した画像が繰り返されサイドバーの色がメインコンテンツの高さと揃います。Firefoxでは、メインコンテンツがサイドバーより高くなると揃わなくなります。contentに指定された画像が表示されてないようです。 どのようなことでもいいのでお教えください。手がかりがなく困っています。
- ベストアンサー
- HTML
- HTML・CSSタグの書き方教えてください！
画像では見づらいのですが、HOMEの左側にボーダーがピンク色で表示されています。 このHOMEの左側のボーダーを消したい（又は見えなくする）タグを教えてください。 最初のリンクのところだけグループ化して, CSSに{border-left-style: none;}と加えてみたり、 .menu ul li a .first {border-left: none;}等してみたのですが、 変わらず…。 どういうタグを加えれば、左側のボーダーが見えなくなりますでしょうか？ よろしくお願いいたします。 ＜HTML＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv= "content-style-type" content= "text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link href="css/style.css"rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <h1> 作りかけページ </h1> <p>テストページ</p> </div><!-- header終わり --> <div class="menu"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">サービス概要</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">サイトマップ</a></li> </ul> </div><!-- menu終わり --> <div id="main"> <div id="contents"> ***コンテンツ*** </div><!-- contents終わり --> <div id="leftsidebar"> ***左サイドバー*** </div><!-- sidebar終わり --> </div><!-- main終わり --> <div id="rightsidebar"> ***右サイドバー*** </div><!-- sidebar終わり --> <div id="footer"> ***フッター*** </div><!-- footer終わり --> </div><!-- wrapper終わり --> </body> </html> ＜CSS＞ <style type="text/css"> * { margin: 0; padding: 0; } #wrapper{ width: 760px; /*全体の幅（#wrapper）を760pxの固定幅とする。 */ position: absolute;/*絶対位置*/ left: 50%;/*左端から右方向の位置を指定する */ margin-left: -380px;/*はみ出た半分を戻す */ } /*ヘッダー*/ #header{ width: 758px;/*ヘッダー部分の幅（#content）を758pxとする。*/ height: 200px; background-color:#ffd700; background-repeat: no-repeat; background-position: -50px -70px; text-align: right; border: solid 1px gray; } #header h1{ margin: 0; font-size: 30px; padding: 20px 10px 0px 0px; font-family:arial unicode ms; } #header p{ margin: 0; font-size: 1em; padding-right: 10px; margin-top: 8px; } /*ヘッダー終わり*/ /*body*/ /*menu部分*/ .menu {font-size:20px; height:30px; background-color:#0c907c; text-align:center; } .menu ul{ margin: 0; padding: 0; 760px; } .menu ul li{ float: left; list-style: none; margin: 0; padding: 0; } .menu ul li a{ display:block; width: 151.2px; line-height: 30px; border-left: solid 1px #FF3366; color:#ffffff; text-align: center; text-decoration: none; } .menu ul li a:hover{background-color: #99cc00} /*menu部分終わり*/ #contents{ width: 388px;/*コンテンツ部分の幅（#content）を388pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #leftsidebar{ width: 166px; /*左サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: left;/* 左に配置 */ } #main{ width: 574px; float: left;/* 左に配置 */ } #rightsidebar{ width: 166px;/*右サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #footer{ width:760px; background-color:#FF3366; clear: both;/* float解除 */ height: 50px; }
- ベストアンサー
- HTML
- [CSS]Firefox2では横表示・IE6では縦表示
CSSについて質問させてください。 contentsというDIVの中に、con-leftというDIVとcon-rightというDIVを横に並べて表示したい場合に、以下のタグを書きました。 [CSS] #contents { width:910px; padding:20px; } #contents #con-left , #contents #con-right { width:453px; float:left; border:solid 1px red; } [HTML] <div id="contents"> <div id="con-left"></div> <div id="con-right"></div> </div> 理論上では、con-left及びcon-rightの横幅は453px+ボーダーの2pxで、合計455px、それが二つで910pxで、横に表示されるはず。 しかしIEでは縦に並んで表示されてしまいます。 この解釈の違いがよく分かりません…。 分かる方は教えていただけませんか？
- ベストアンサー
- HTML
- 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>
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSの三段組みレイアウトについて教えて下さい。。
CSSレイアウト初心者ですが、CSSの作成段組みを作る時に <div id="container"> <div id="header"> </div><!--/header--> <div id="contents"> <div id="left_bar"> </div><!--/left_bar--> <div id="main"> </div><!--/main--> </div><!--/contents--> <div id="right_bar"> </div><!--/right_bar--> <div id="footer"> </div><!--/footer--> </div><!--/container--> と三段組固定レイアウトを作成したいのですが、 一度目は何回やり直してもfloatの設定でleft_bar,mainの横並びが上手くいかずに、 contentsの中でleft_bar,mainが縦並びになってしまい何回何が原因か様々なサイトで考えを模索してソースを直しても何故かleft_bar,main がcontentsの中で何回書き直しても縦並びになりもう一度一からCSSを組み直してみると、 どうした訳かようやくcontentsの中でleft_bar,mainが横並びになってくれました。 これは一体根本的に何が原因で横並びにさせるつもりが、縦にボックスが並んでしまうのでしょうか？ CSSのfloatの概念からハックかなと思いハック親ボックスにハックをかけてみてでも全く関係ないみたいでしたし、親ボックスにピクセルを指定していないからかと思い親ボックスにピクセルで指定しても何故か縦並び？！ CSSをもう一度書きなすことで意図したレイアウトになると言う事は一番は何が原因していると見られるのでしょうか？
- 締切済み
- CSS
- CSSで高さ100％のレイアウト
テーブルを使用せずCSSでのレイアウトなのですが フッター位置をブラウザの一番下にマージン無しで指定したいのですが出来ません。 テーブルでは <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top">内容</td> </tr> <tr> <td valign="bottom">フッター</td> </tr> </table> というように指定していたのですが CSSでのレイアウトはHTMLを <div id="container"> <div class="content">内容</div> <div id="footer">フッター</div> </div> .CSS では #container { height: 100%; } は無効なのでしょうか？ 他のやり方でもフッターをブラウザの一番下にマージン無しでレイアウトできる方法があったら教えて下さい。
- ベストアンサー
- CSS
お礼
いろいろ言われてみて思い当るところがいくつかありました。 float で位置を指定してサイトを構築していくのは初心者には不向きだったようです。 よって、今回は table を使ってがんばることにしました。 見て下さってありがとうございます。