右可変ブロックのボーダー表示について
- ネガティブマージンを使った２段組みの左固定、右可変のリキッドデザインで、右可変ブロックにボーダーを表示する方法について教えてください。
- test.htmlは２段組みの左固定、右可変のリキッドデザインになっており、右可変ブロックにはボーダーが表示されていますが、右に10pxのマージンを取る方法について教えてください。
- test.htmlにおいて、右可変ブロックのボーダー表示に問題があります。右に10pxのマージンを取る方法について教えてください。
- ベストアンサー
２段リキッド(右可変)時の右ブロックのボーダー表示について
タイトルでは分かりにくいですので、まずはCSSとHTMLのソースを添付します。 test.css=== * { padding: 0px; margin: 0px; } html, body { width: 100%; height: 100%; background-color: black; } #container { width: 100%; height: 100%; } #menu { width: 150px; height: 100%; float: left; display: inline; margin-right: -150px; background-color: white; } #main { width: 100%; height: 100%; float: left; display: inline; margin-left: 150px; margin-right: -150px; background-color: gray; } #mainContent { margin: 10px; border: 1px solid #85b3dc; } === test.html=== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="./test.css" type="text/css"> </head> <body> <div id="container"> <div id="menu"> MENU_CONTENT </div> <div id="main"> <div id="mainContent">MAIN_CONTENT</div> </div> </div> </body> </html> === test.htmlはネガティブマージンを使った２段組みの左固定、右可変のリキッドデザインとなっています。右可変ブロックには#mainContentにより、ボーダーを表示していますが、右可変ブロックの左には10px のマージンが取られているのに、右には10px のマージンがありません。右に10px のマージンをとるにはどうしたら良いのでしょうか？ 分かりにくい内容とは思いますが、お願いします。
- admsmith
- お礼率67% (23/34)
- HTML
- 回答数2
- ありがとう数7
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
// スタイルシート * { padding: 0px; margin: 0px; } html, body { width: 100%; height: 100%; background-color: black; } #menu { position: absolute; top: 0; width: 150px; height: 100%; background-color: white; } #main { height: 100%; padding: 0 10px 0 160px; background-color: gray; } #mainContent { position: relative; top: 10px; border: 1px solid #85b3dc; } // HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="./test.css" type="text/css" /> <title>sample</title> </head> <body> <div id="main"> <div id="mainContent">MAIN_CONTENT </div> </div> <div id="menu"> MENU_CONTENT </div> </body> </html> スタイルシートの修正だけではちょっと難しかったので、html ソースを若干修正。副次的な効果としてコンテンツ部分のソースがメニューよりもファイルの上部に移動した為、SEO 的にも有利な記述になりました。 IE6 でも Firefox でも同じ表示になってると思うよ？ 追記１ ＞普通の感覚だとブラウザ枠いっぱいいぱいが100%ですよね＾＾ ＞ブラウザを突っ切って表示される理由が分かりません。 ブラウザ枠いっぱいいっぱいが100%で間違いありません。しかし #main は margin-left を 150px 指定しているでしょ？だから表示するのに『ブラウザの幅 + 150px 』必要なんです。不思議な事などカケラもありゃしません。 追記２ ところで記述する文書型に何故 xhtml1.1 を採用されたのでしょう？ 失礼ですが書かれたソースから判断するに、xhtml の正しい記述の方法を全く解ってらっしゃらないですよね？名前空間の宣言も 言語の指定もありませんし、空要素も一切閉じられていません。 xhtml は html に比べて記述のルールが厳格にチェックされます。正確な仕様をご存知でないのなら、無難に html4 の Transitional あたりで記述することをお勧めします。
その他の回答 (1)
- stpopo
- ベストアンサー率52% (13/25)
こんにちわ まだ勉強中の身です。 このCSSって横スクロールしますけど、いいのかな？ そこらへんは詳しい方にお任せするとして、 とりあえず、このCSSでマージンを取るとすると、下記の部分を変更しては どうでしょうか。 #menu { width: 150px; height: 100%; float: left; display: inline; margin-right: -170px; background-color: white; margin-top: 10px; margin-left: 10px; } #main { width: 100%; height: 100%; float: left; display: inline; margin-left: 170px; margin-right: -170px; background-color: gray; }
お礼
お返事ありがとうございます。 私もCSSはまだ始めたばかりで、試行錯誤しながら勉強中です。 Firefox ではブラウザの横スクロールが出ちゃいます；こちらの確認環境IE6ではスクロールはでません。なので、IE6では#mainのmargin-right: -150px;が効いてる感じですが、Firefox の方がウェブ標準に近い実装ですから、多分この書き方ではスクロールされることが正しいんでしょうね。 そもそも、なぜスクロールされるかが分かっていません。#mainではwidth: 100%; としていますが、普通の感覚だとブラウザ枠いっぱいいぱいが100%ですよね＾＾ブラウザを突っ切って表示される理由が分かりません。おそらくこの理由が解決されれば、質問している内容が解決されるのではと思っています。 ちなみに、教えていただいた方法でも解決されませんでした；
関連するQ&A
- ブラウザ枠を超えず表示する方法
CSSについてですが、まずはCSSとHTMLを見てください。 ↓test.css === * { padding: 0px; margin: 0px; } html, body { width: 100%; height: 100%; } #container { width: 100%; height: 100%; margin: 10px; border: 1px solid #b3b3b3; } === ↓test.html=== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="./test.css" type="text/css"> </head> <body> <div id="container"> </div> </body> </html> === test.html をブラウザで見ると、ボーダーラインがブラウザ枠(右側)を突っ切る形で表示されています。width: 100% と指定したので、現在表示しているブラウザ幅からmargin: 10px したところでborder: 1px が表示される(四角形のボーダーがスクロールなしで確認できる)と思ってましたが、ボーダーが現在のブラウザ幅を突っ切って表示されることはあたりまえのことなんでしょうか？ むしろ、スクロールなしでボーダー全体を確認する術は、tableタグを使わずに実現する方法はあるのでしょうか？ お願いします。
- ベストアンサー
- HTML
- ヘッダー・左カラムは固定、右カラム可変のレイアウト
CSSでレイアウトを制作中なのですが、途中から分からず止まっております。 今の状況は縦に可変した時、左カラムのスクロールバーが最大まで表示されない状態です。また、右カラムは途切れてしまいます。 height100％に対し、ヘッダでピクセル指定しているからだと思うのですが。 ■CSS *{ margin:0px; padding:0px; } /** html */ html,body { height:100%; min-height:500px; overflow-y:hidden; } /** ヘッダ */ #header { height:125px; width:100%; } /** 左・右カラムの囲い */ #container { height:85%; margin-left:400px; } /** 左カラム */ #menu { float:left; height:85%; margin-left:-400px; overflow:auto; width:400px; } /** 右カラム */ #main{ float:right; height:100%; margin-left:430px; overflow:auto; width:100%; } /** フッタはありません */ ■HTML側 <div id="header"> ヘッダ </div> <div id="container"> <div id="menu"> 左カラム </div> </div> <div id="menu"> 右カラム </div> 以上です。 理想のレイアウトが、GoogleマップもしくはYahoo!マップの様に組みたいのですが・・・ http://maps.google.co.jp/ Googleマップ http://map.yahoo.co.jp/ Yahooマップ どなたかお力添えをお貸しください。 宜しくお願いします。
- ベストアンサー
- CSS
- CSSでの背景色の指定について
以下のソースで右下に空白ができます。 それはいいのですが、背景色を指定がうまく行きません。 heightは動的に変わるので、idやclassを増やさずに実現したいと考えています。 IEでは実現できてきますが、Firefoxではダメでした。 よい方法はないでしょうか？ ■test.html <!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=euc-jp"> <link href="css/test.css" rel="stylesheet" type="text/css" /> <title>test</title> </head> <body> <div id="wrap"> <div id="left"> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> </div> <div id="right"> ああああ<br /> ああああ<br /> ああああ<br /> ああああ<br /> </div> </div> </body> </html> ■test.css body { margin-top: 20px; margin-left: 70px; margin-bottom: 0px; padding: 0px; line-height: 1.4em; font-size: 12px; font-weight: normal; color: #333333; } #wrap { width: 690px; background-color: #000000; } #left { margin: 0px; padding: 0px; width: 510px; height: 100%; float: left; background-color: #ffff00; } #right { margin: 0px; padding: 0px; width: 180px; float: right; background-color: #ff00ff; }
- ベストアンサー
- CSS
- 6で表示がずれて困っています。２つ目です。
6で表示がずれて困っています。２つ目です。 firefoxとIE8ではちゃんと表示されているのに、IE6ではずれてしまいます。 IE6で画像が下にずれて切れ、スクロールバーが表示されてしまいます。 原因とfirefoxとIE8と同じように表示させる方法を教えて下さいm(__)m 画像添付とソースを貼ります。 <!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="X-UA-Compatible" content="IE=EmulateIE7" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <link href="testcss.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="main"> <div id="header"> <div id="header_line"> </div> <div id="logo"> <img src="A_22.gif" width="142" height="69" /> </div> <div id="cn"> <img src="A_33.gif" width="459" height="158" /> </div> </div> </div> </body> </html> ●css● *{ margin: 0; padding: 0; } img{ border: 0; vertical-align: bottom; } #main{ background: url(images/back_shadow.jpg) repeat-y; margin: 0 auto; width: 820px; height: 300px; } #header{ width: 800px; height: 181px; margin: 0 auto; overflow: auto; } #header_line{ background:url(images/header_1.gif) repeat-x; margin: 0 auto; width: 800px; height: 13px; } #logo{ width: 152px; height: 69px; margin: 10px 0 0 10px; float: left; display: inline; } #cn{ width: 459px; height: 158px; margin:10px 0 0 0; float: left; } 以上です。 初心者でわからない事が多いため、できるだけ詳しく教えて下さい。 宜しくお願いしますm(__)m
- ベストアンサー
- HTML
- 【css】marginについて質問です。
現在Webサイト構築をしています。いきなり躓きました。コードを見てください。 （一部だけ抜粋しています） 【cssコード】 #container_all{ width:920px; height:520px; margin:0 auto; padding:0; } #container{ width:900px; height:500px; margin:10px; padding:0; } 【XHTMLコード】 <div id=container_all> <div id=container> </div> <div> このような場合、#container_allの中に#containerがマージン10pxでちょうど中心に収まるものかと思ってましたが、見事にマージンのtopが効いてませんでした。 marginは効かないのでしょうか？教えてください。
- 締切済み
- デザイナー・クリエイティブ職
- フロートをした場合の縦方向のマージンの指定方法
下記のソースをIEとFFで表示した場合に違いが出てしまいます。 希望はheader、container、footerの間を１０ｐｘずつにしたいです。 http://www.geocities.jp/multi_column/float/06.html こちらのページに「clear したボックスには margin-top は指定しないこと」とあるので、content、sidebarの下マージンを１０ｐｘにしてみました。 IEではsidebarの下マージンが表示されません。 なぜかsidebarよりcontentが長くなるとcontentの下にマージン１０ｐｘが表示されます。 contentとsidebarのどちらが長くなっても同じように表示させるにはどのような方法がありますか？ また、この現象の原因を教えてください。 <?xml version="1.0" encoding="Shift_JIS"?> <!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" /> <title>サンプル</title> </head> <body> <div id="header"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="container"> <div id="content"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="sidebar"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </div> <div id="footer"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </body> </html> <style> *{ margin: 0; padding: 0; } body{ text-align: center; } div#header{ width: 900px; margin-left: auto; margin-right: auto; margin-bottom: 10px; background-color: #FFCCCC; } div#container{ width: 900px; margin-left: auto; margin-right: auto; } div#content{ float: right; width: 660px; background-color: #FFCCCC; margin-bottom: 10px; } div#sidebar{ float: left; width: 230px; background-color: #FFCCCC; margin-bottom: 10px; } div#footer{ clear: both; width: 900px; margin-left: auto; margin-right: auto; background-color: #FFCCCC; } </style> 長くなって申し訳ありません。よろしくお願い致します。
- ベストアンサー
- HTML
- ボーダースタイルがうまく表示できない
#content { width:525px; } div.box { width:525px; margin-top: 20px; border-bottom:dotted 1px #ccc; } div.left { width:140px; float: left; font-weight: bold; margin-left: 5px; } div.right { width:380px; float: left; line-height: 20px; height: 20px; } <div id="content"> <div class="box"> <div class="left">Address</div> <div class="right">住所<br>東京都</div> </div> </div> クラス名boxというボックスのボトムにボーダー指定をしましたが、ボックスのズレ？によりボーダーがトップになっているように見えてしまいます。 どこが間違っておりますか？ アドバイスを宜しくお願いします。
- ベストアンサー
- HTML
- div入れ子による height100%
お世話になります。 親要素のdivは縦100%になるのですが、 入れ子のdivが縦100%にならず困っております。 検証ブラウザは、IE6、IE7、FF2、Safariです。 お分かりの方、ご教授をお願いいたします。 ▼HTML <!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=shift_jis" /> <title>test</title> <style type="text/css"> <!-- html { height:100%; } body { height:100%; margin:0; padding:0; } #wrapper { background: #99CC00; width:500px; margin-left:auto; margin-right:auto; min-height:100%; } #wrapper-inner { background:#CCFF00; width:450px; margin-left:auto; margin-right:auto; min-height:100%; } #contents { background: #FFFFCC; width:400px; margin-left:auto; margin-right:auto; min-height:100%; } * html #wrapper { height: 100%; } * html #wrapper-left { height: 100%; } * html #wrapperA { height: 100%; } --> </style> </head> <body> <div id="wrapper"> <div id="wrapper-inner"> <div id="contents"> テスト <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </div> </div> </div> </body> </html>
- ベストアンサー
- CSS
- CSS・IEでボーダーを表示したい
お世話になります。 ホームページ構築(CSS)に関する質問です。 よろしくお願いします。 フリーのCSSサンプルサイトより、ソースをいただいて、 ページを作ってみたのですが。 ナビゲーションリストの部分で、 FireFoxでは、各メニューの右側に、仕切りの部分の「線」が、 表示されているのですが、なぜかIEでは表示されません。 まだ理解が足らないのですが、 「#navigation li a」の 「border-right: 1px double#fff;」あたりかなと思い、 線種を変えてみたりと、いろいろしているのですが 変化がありません。 変更すべき点をどうかご教授ください。 以下は実際のソースです。 「index.html」 --------------------------------------------------------------------------------------------------------------------------- <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" href="common.css" type="text/css" /> <title>テストサイト</title> </head> <body> <div id="container"> <div id="header"> <h1>タイトル「テストサイト」 </h1> </div> <div id="navigation"> <ul> <li><a href="index.html">トップページ</a></li> <li><a href="menu2.html">メニュー２</a></li> <li><a href="menu3.html">メニュー３</a></li> <li><a href="menu4.html">メニュー４</a></li> </ul> </div> <div id="content"> <p>テストののページです。</p> <p>上記メニューよりご利用ください。</p> </div> <div id="footer"> Copyright テスト著作権, 2012 </div> </div> </body> </html> --------------------------------------------------------------------------------------------------------------------------- common.css --------------------------------------------------------------------------------------------------------------------------- @charset "UTF-8"; #container { margin: 0 auto; width: 600px; background:#fff; } #header { background:#ccc; padding: 20px; } #header h1 { margin: 0; font-size: 120%;} #navigation { float: left; width: 600px; background:#333; } #navigation ul { margin: 0; padding: 0; } #navigation ul li { list-style-type: none; display: inline; } #navigation li a { display: block; float: left; padding: 5px 10px; color:#fff; text-decoration: none; border-right: 1px double#fff; } #navigation li a:hover { background:#383; } #content { clear: left; padding: 20px; } #content h2 { color:#000; font-size: 160%; margin: 0 0 .5em; } #content h3 { font-size: 110%; } #footer { background:#ccc; text-align: right; padding: 20px; height: 1%; } -------------------------------------------------------------------------- 以上が内容になります。 どうかよろしくお願いします。
- ベストアンサー
- HTML
- marginが効いてくれません。
下記のレイアウトで#contentsのmarginを上下左右10pxで指定していますが、Fierfoxで見るとbottomだけmarginが効いてくれません。 #contentsには背景画像を持ってきたいので、下のmarginがとれないと困っています。 よろしくお願いします。 body { margin: 0px; padding: 0px; text-align: center; } #wrap { padding: 0px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 800px; text-align: left; } #header { background: #0099CC; width: 800px; } #contents { padding: 0px; width: 800px; margin: 10px; } #contents #sidenavi { background: #CCCCCC; width: 160px; float: left; } #contents #main { background: #FFFFCC; width: 580px; float: right; } #footer { background: #99CCFF; height: 80px; width: 800px; clear: both; } p{ margin: 0px; padding: 0px; } ****************************HTML <!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=shift_jis" /> <title>Layout01</title> <style type="text/css" media="all"> @import url("Layout1.css"); </style> </head> <body> <div id="wrap"> <div id="header"> <h1>Layout</h1> </div> <div id="contents"> <div id="sidenavi">内容がここに入ります</div> <div id="main"> <p>内容がここに入ります</p> </div> </div> <div id="footer">内容がここに入ります</div> </div> </body> </html>
- ベストアンサー
- HTML
お礼
お返事ありがとうございます。 >> IE6 でも Firefox でも同じ表示になってると思うよ？ ん・・私のソースだと、IE6ではスクロールバーが出ず、FFでは出るという違いはあったんですが、見間違いかもしれませんね。 >> ブラウザ枠いっぱいいっぱいが100%で間違いありません。しかし #main は margin-left を 150px 指定しているでしょ？だから表示するのに『ブラウザの幅 + 150px 』必要なんです。不思議な事などカケラもありゃしません。 なるほど！こんな簡単なことにまったく気づきませんでした。そうですよね。width:100%にmargin-left:150pxすれば当然ブラウザ枠からはみ出ますよね＾＾そして、#mainContentにmargin-left:150pxすれば解決することにも気づきました(#mainの背景に少々問題がありますが、内容があれば問題ないです)。教えていただいた方法もまさにやりたいことでした。ありがとうございます。 >> ところで記述する文書型に何故 xhtml1.1 を採用されたのでしょう？ 失礼ですが書かれたソースから判断するに、xhtml の正しい記述の方法を全く解ってらっしゃらないですよね？名前空間の宣言も 言語の指定もありませんし、空要素も一切閉じられていません。 はい。おっしゃるとおり全く分かってないと思います。CSSを勉強しだしたのも一週間前ですから今は実用に向けて勉強中です。xhtml1.1を採用した理由もなるべく厳格にというだけです。仮に業務で使うのであれば、xhtml1.0 strict + css2 を採用しようと考えてます。いずれにしても、よりヴェブ標準に詳しくなってからの話です＾＾ hujitomoさんの書き込みによって、今まで気付きもしなかったところがはっきりと分かって大変満足しています。本当にありがとうございました。