- ベストアンサー
ボックスの高さを揃える、について
こんばんは。 私は今CSSでHPを作っているのですが、左側にメニュー画像、右側に 内容、といった風にしたいのですが、左側だけに壁紙を貼り付けようと しているのですが、上手く出来ません。 左側のボックスにmin-heightを付けたりしたのですが、それですと右のページの長さが変わると意味が無くなってしまいます・・・。 何処が間違っていましたら、ご指摘お願いします。 HTML部 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="css.css" type="text/css"> <title>あ/title> </head> <body> <div id="wrapper"> <div id="layout"> <div id="side"> <img src="menu.gif" usemap="#map1" alt="menu"> <map name="map1"> (ここは略させて頂きます)</map> </div> <div id="main"> <div class="sample1"> <img src="webtitle2.gif" alt="title"> </div> </div> </div> </div> </body> </html> CSS部 * {margin: 0px; padding: 0px;} #wrapper {padding: 0px;} #layout {width: 850px; background-image: url("sidewall2.gif"); background-repeat: repeat-y; background-attachment: fixed;} #side {float:left; width: 150px; margin-left:0px; margin-top:0px;} #main { float:right; width: 700px;} div.sample1{background-color: transparent; margin:10px; text-align:left; color:#282828; font-size:13px;}
- RiodeJanei
- お礼率29% (48/163)
- HTML
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- perlerz10
- ベストアンサー率40% (4/10)
「ボックスの高さ」ではなく、「メニュー画像とその位置」ですね？ で、「揃えたい」というよりも、 要はjavascriptでよくやるように、ページの下部を見ようとスクロールさせても、いつでもメニュー部分が真横にあるというか、スクロール時のブラウザ表示領域の最上部にメニューがまるまる表示されていてほしいと。 こういうことですか。
お礼
わざわざご回答有難う御座います！ 色々やってみた所、自分の納得する形が出来ました。
- leap_day
- ベストアンサー率60% (338/561)
こんにちは 領域が多すぎるので情報を整理したいのですが・・・ ＞領域について wrapper → (ページ)全体領域 layout → 表示するコンテンツ領域 side → クリッカブルマップ(？)領域 main → テキスト領域の為の下準備領域(？) sample1 → 実際のテキスト領域 ＞背景画像について 上記で言うところのコンテンツ領域(layout)の背景画像 ＞高さを揃えるについて 今現在(僕の環境では) ┌┐ └┼┐ └┘ こんな感じでsideとmainが配置されてますが ┌┐┌┐ └┘└┘ こういう風にしたいということですか？ それとも上の状態で高さを揃えるということですか？ <style type="text/css"> <!-- * { margin: 0px; padding: 0px; } #layout { width: 850px; background-image: url("sidewall2.gif"); background-repeat: repeat-y; background-attachment: fixed; } .side { width: 150px; margin-left:0px; margin-top:0px; vertical-align: top; } .main { width: 700px; vertical-align: top; } .sample1{ margin:10px; text-align:left; font-size:13px; } //--> </style> <table id="layout"> <tr><td class="side"> <img src="menu1.gif" usemap="#map1" alt="menu"> <map name="map"></map> </td><td class="main"> <div class="sample1"> <img src="webtitle2.gif" alt="title"> </div> </td</tr></table> vertical-align: top; は必要なければ削除してください
お礼
わざわざ図解で説明していただいて有難う御座います。 お陰様でこちらの方で解決する事が出来ました。
関連するQ&A
- CSSで親ボックスの背景画像を設定してもNN7.01で表示されない
例えば、下記のように記述して「wrapper」ボックスで 「bodybg.gif」という画像を垂直方向に並べたいのですが、IE6ではうまく表示されますが、NN7.01だとヘッダー部分以外のボックスに背景画像が表示されません(><;) /* html * / <div id="wrapper"> <div id="header"></div> /* ヘッダー */ <div id="pagebody"> /* pagebody内2カラム */ <div id="content"></div> /* 右寄せ */ <div id="leftside"></div> /* 左寄せ */ </div> </div> /* css * / #wrapper { width: 600px; margin-left: auto; margin-right: auto; margin:0px; background: url(../img/bodybg.gif) repeat-y; padding: 0px; } CSSで毎回つまづくところですが、どうにもこうにも対処方法が見つかりません(T_T) どなたか力をかしていただけないでしょうか・・・
- ベストアンサー
- CSS
- 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
- 枠線でメイン部分を囲み、フッターを一番下にもってくるには？
<!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"> <style type="text/css"> <!-- html,body { margin:0px; padding:0px; height:100%; } div#flame { width: 1000px; height:100%; margin-top: 10px; margin-left: 10px; padding: 20px; border-color: #999999; border-style: solid; border-width: 1px; } div#header { background-color:#999999; color:white; } div#container { background-color:#ffffee; } div#left { background-color: #cccccc; width: 200px; left: 0px; top: 0px; } div#content_right { background-color: #cccccc; margin-left: 210px; font-size: 10pt; line-height: 140%; left: 0px; } div#footer { width:100%; background-color:666666; color:white; } --> </style></head> <body> <div id="flame"> <div id="header">ヘッダー</div> <div id="content_right">メイン記事テキスト</div> <div id="left">左メニュー部分</div> </div> <div id="footer">フッター</div> </body> </html>
- ベストアンサー
- HTML
- 1カラムの段組について(mainの中のdiv要素について)
こんばんは。 今サイト作りをしているのですが、mainの中のdiv要素が反映されないんです。最初はmainのmarginを0pxにして、divの所にmargin:10px;などにして、余白調整を行おうとしたのですが、反映されないんです。それでmainの所を20pxにした所、main部分は反映されましたが、div要素は反映されないままです。 間違いがありましたらご指摘お願いします。 CSS部 a:link{color:#181818; text-decoration:none;} a:visited{color:#383838; text-decoration:none;} a:active{color:#181818; text-decoration:none;} a:hover{color:#4c4c80; text-decoration:none;} body { margin:0px; padding:0px; font: 12px "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", Osaka; background-image:url("backimage3.gif"); } #header { width:700px; height:250px; } #layout { width:700px; margin: 0px ; background-image:url("backimage3_3.gif"); } #main { margin:20px; } div.sample1{ background-color: transparent; margin: 30px; text-align:left; color:#181818; font-size:12px; } div.sample2{ background-color:transparent; margin: 20px; text-align:left; color:#181818; font-size:12px; } HTML部 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link href="css.css" rel="stylesheet" type="text/css"> <title>サンプル</title> </head> <body> <div id="layout"> <!--メニュー ここから--> <div id="header"> <img src="webtitle3.gif" alt="map" usemap="#map1" /> <map name="map1">中略</map> </div> <!--メニュー ここまで--> <!--中身 ここから--> <div id="main"> <div class="sample2"> ファースト<br> ファースト <div class="sample1"> セカンドセカンド </div> サードサード </div> </div> <!--中身 ここまで--> </div> </body> </html> 分かりにくい説明で申し訳ありません。もし何か補足説明がいるようでしたら是非仰って下さい！ それでは失礼します。
- 締切済み
- CSS
- CSS floatについて教えて下さい。
【html】 <div id="wrapper"> <div id="top"></div> <div id="middle"> <div id="a"></div> <div id="b"></div> </div> </div> 【css】 * { margin:0; padding:0; } body { background:url(../img/common/bg.gif) repeat} #wrapper { width:800px; margin:0 auto;} #top { background:url(../img/common/contents-flame-top.gif) no-repeat; height:30px;} #middle { background-color:#FFF; padding:0 50px 100px 50px;} #a { float:left; width:360px; height:100px; background-color:#009966;} #b { float:left; width:340px; height:150px; background-color:#CC0033;} ------------------------------------- 上記でdivのaとbにfloatの設定をしないと#middleの中にaとbが入るのですが、floatの設定を入れると#middleの外にaとbが出てしまいます。 どこが間違っているのか教えて頂けますか？初心者ですので、よろしくお願い致します。
- ベストアンサー
- HTML
- 3カラムレイアウトで隙間
下記のように３カラムレイアウトを作っています [css] #wraper { float:left; } #left { float:left; width:180px; margin:0px;} #center { width:450px; margin:0px;} #right { width:120px; margin:0px; } [html] <div id="wrapper"> <div id="left">左メニュー</div> <div id="center">中央メイン</div> </div> <div id="right">右メニュー</div> が、それぞれの段組の間（↓の部分）に3pxほどの隙間があいてしまいます ↓ ↓ [左] [中央] [右] 隙間なくぴったりつけるにはどうすればいいでしょうか。 どうぞよろしくおねがいいたします。
- ベストアンサー
- HTML
- 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> センタリングを維持したまま上の余白をクリアしたいのですが、何か解消法はありますか？
- 締切済み
- HTML
- <css> ボックスの隙間について
お時間のあるときに教えていただけるとありがたいです。 cssボックスを縦に二つ（上A、下B）作ったところ、どうしてもボックスに隙間が空いてしまいます。この隙間をなくし、二つのボックスを繋げるように表示するにはどうしたらいいでしょうか。どうもマージン設定がうまくいっていないようなのですが、どこが悪いのかわからなくて困っています。 cssは外部ファイルとして読み込みました。以下にソースをなるべくそのまま貼り付けてみます。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ＜cssソース＞ body{ color : #fff; font-size : 11pt; text-align : left; background-color : #ff00cc; background-image : url(haikei.gif); background-repeat : repeat; } a{ color : #ffcccc; text-decoration : none; } a:HOVER{ color : #ffcccc; text-decoration : none; } a:VISITED{ color : #ffcccc; } * { margin:0px; padding:0px; } #boxA { margin:0px auto; width:650px; height:217px; padding:0; } #boxB { text-align:left; margin:0px auto; width:620px; height:350px; padding:15px 15px 5px 15px; background-image : url(haikei2.gif); background-repeat : repeat; overflow:auto; } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ＜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-Style-Type" content="text/css"> <META http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <link rel=stylesheet type="text/css" href="haikei.css"> </head> <body> <div id="boxA"> </div> <div id="boxB"> </div> </body> </html> よろしくお願いします。
- 締切済み
- その他（インターネット・Webサービス）
- Firefox2.0で背景が上段に集まってしまいます。
以下のCSS、HTMLでdiv要素を分けて3つの細いgif画像を見た目は一つの背景になるように指定しているつもりです。真ん中のdiv要素をy方向にリピートさせて記事が長くなっても背景が崩れないページを作りたいと思っております。 IE7.0では問題なく表示してくれるのですがFirefox2.0になると背景が上段に集まってしまいます。 すみませんが改善方法をアドバイスよろしくお願い致します。 【CSS】 body { font-family: "ＭＳ Ｐゴシック"; margin: 0px; padding: 0px; text-align: center; background: #E8FFFF fixed; } #wrapper { text-align: left; margin: 0px auto; padding: 0px 0px 0px 20px; height: auto; width: 900px; background: url(background_3.gif) repeat-y; } #head-background { margin: 0px auto; height: 17px; width: 900px; background: url(background_7.gif) no-repeat; padding: 0px; } #header { margin: 0px; padding: 0px; height: 20px; width: 800px; } #footer { clear: both width: 900px; background: url(background_6.gif) no-repeat; margin: 0px auto; padding: 0px; } 【HTML】 <body> <div id="head-background"> </div> <div id="wrapper"> <div id="header"> ・・・・・（ロールオーバーリンク） </div> <div id="header"> ・・・・・（MPEG画像） </div> </div> </div> <div id="footer"> </div> </BODY> </HTML>
- 締切済み
- CSS
- position:fixed;でメニューを右側に固定したい
position:fixed;でメニューを右側に固定したい こちらを参考にサイドバーが固定された2カラムのサイトを作っています。 http://www.css-lecture.com/log/css/049.html 上記のサイトを見てくだされば分かると思うのですが、サイトバーはすべてを囲うwrapperボックスの左端に固定されています。 これをwrapperボックスの右端に持って行きたいのですが、うまくいきません。 position:fixed;にrightやleftを指定すると、wrapperボックスではなくブラウザの端に寄ってしまいます。 absolutoではスクロールされてしまいますし……。 自分なりに調べていろいろと試してみたのですが、解決することはできませんでした。 javascriptや疑似フレームは出来るだけ使いたくありません。 右端に持って行くことは可能なのでしょうか？現状では無理なのでしょうか？ HTML <div id="wrapper"> <div id="menu"></div> <div id="main"></div> </div> CSS #wrapper{ width:700px; margin:0 auto; background-color:#FFF; position:relative; } div#menu { width: 100px; background: #CCC; padding:10px; height:100%; position:fixed; top: 0px; z-index: 20; } * html div#subContents { position: absolute; top: expression(eval(document.documentElement.scrollTop+0)); } #main{ margin-left:120px; padding:10px; width:560px; position:relative; background-color:#FFF; } よろしくお願いします。
- ベストアンサー
- HTML
お礼
丁寧なご回答有難う御座います。大分助かりました。
補足
私の文章力不足で、伝えたい事が上手く伝わってないみたいで、申し訳御座いません。 私の言いたい事は、左側のメニュー(つまりsideの部分)のメニュー画像の高さが500pxだとすると、そのsideのボックスは500pxのままになってしまい、右側のコンテンツの高さが800pxでしたりする場合に、右側と左側でボックスの長さが違ってしまう、という事なんです。つまりどれだけスクロールしてもsideのメニュー画像が置いてあるボックスの背景画像が右側と釣り合うように、という事なんです。 前述で回答して下さった場合のを一度試してみましたが、やはり左と右の高さが揃わず、layoutの方にも背景画像が表示されません。 もしよろしければご回答お願いします。 分かりにくい説明で申し訳御座いませんでした。