divタグの問題について
- divタグを使用して作成したトップページには余分な改行タグ（<br>）がたくさんあります。
- これらの余分な改行タグを取り除くと、左側の内容が無視されて表示されません。
- また、divタグの入れ子構造を作るためにclear: bothを使用したところ、外側のdivが表示されません。
- ベストアンサー
divについて。
<html lang="ja"> <head>省略</head> <body> <div id="header">headerの内容</div> <div id="main"> <div id="left">左側の内容</div> <div id="right">右側の内容</div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <div id="footer">footerの内容</div> </body> </html> といった感じのトップページをCSS+htmlで作りました。見てわかる通り、<br>が無駄にたくさんあります。 でもこの無駄<br>がないと<div id="left">の内容を無視して、<div id="main">の縦の長さが0みたいに表示されてしまいます。 だから<div id="main">の縦の大きさを数値で指定すると上手くいくのですが、可変するようにしたいのでautoにして、結果無駄<br>をたくさん記述するはめになっています。 以前こちらで<div>の入れ子が上手くいかない時に clear: bothを入れると良いと聞いて入れ子構造は出来たのですが、今度は無駄<br>がないと入れ子にした際に（縦をautoにした場合）外側のdivが表示されないという状況です。 わかりづらい説明で申し訳ないのですが、何かが間違ってるせいだと思うのでわかる方宜しくお願いします。
- osieosiete
- お礼率87% (27/31)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
http://allabout.co.jp/internet/hpcreate/subject/msubsub_series_hpcreate05.htm ↑サイトの記事 スタイルシート(CSS)で段組を構成する4(前編) 段の背景色が切れないようにする あたりを参考に。
関連するQ&A
- 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 ＜div＞の入れ子が反映されない
＜div＞要素を使ってレイアウトを考えています。 いくつかのBOXを一まとめにして中央表示にしようと思うのですが 一まとめにする為のdiv要素が全く反映されません。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ * { padding : 0px ; margin : 0px ; } #kihon { background:#ff0000; width : 752px ; margin : 0 auto ;} #header { width : 750px ; background: #ff00ff ; } #main { float: left; width: 500px; background: #0000ff ; } #menu { float: left; width: 250px; background: #00ff00 ; } #footer { clear : both ; width : 750px ; background: #000000 ; } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <body> <div id="kihon"> <div id="header">aaa</div> <div id="main">aaa</div> <div id="menu">aaa</div> <div id="footer">aaa</div> </div> </body> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 上の記述で、<div id="kihon">が全く反映しません。 一応一まとまりにはなるのですが、左上に固まって表示されるだけです。 自分でも色々調べたのですが調べ方が悪いのか原因が全く分かりません。 知り合いにHP作成の知識がある人がおらず相談が出来ないので こちらでお力を貸して頂きたく投稿させていただきました。 よろしくお願いいたします。
- ベストアンサー
- HTML
- DIV内の padding について
下記のようなCSSとHTMLファイルにてデザインをしています。 main 内にてpaddingを上下左右に10px 有効にしたいのですが、下記のような記述をCSSにした場合、padding が top (bottom?)にしか適用されません。左右に適用させるにはどうすればよいのでしょうか？ よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <head> <link rel="stylesheet" media="all" type="text/css" href="index.css" /> </head> <body> <div id=wrapper> <div id=header></div> <div id=face></div> <div id=navi></div> <div id=main></div> <div id=footer></div> </div> </body> </html> body { background: url(img/bg.gif); margin: 0 auto; text-align: center; } #wrapper { width: 800; margin: 0 auto; background: #EEE; } #header { clear: both; height: 50px; text-align: left; background: #009 url(img/header.gif) no-repeat; border-bottom: 1px solid #FFF; } #face { clear: both; height: 200px; text-align: left; background: url(img/face.jpg) no-repeat; border-bottom: 1px solid #FFF; } #navi { float: left; width: 130px; height: 550px; background: #009; text-align: center; border-right: 1px solid #FFF; } #main { font-family: Maiandra GD, Verdana, Arial; font-size: 14px; line-height: 20px; text-align: left; padding: 10px; } #footer { clear: both; height: 50px; background: #009 url(img/footer.gif) no-repeat; border-top: 1px solid #FFF; }
- ベストアンサー
- HTML
- スタイルシートでスクロールは可能ですか？
以下のように、フッターを下部に固定し上部をスクロールするようにしました。スクロールバーは出て(IE6.0)フッターとの重なりは阻止されますが、スクロールバーの操作はできません。 ＜scroll=内容を切り抜く＞ということから当然のことなのでしょうか？ <!DOCUTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Test</TITLE> <STYLE type="text/css"> #left { position:absolute; top: 130px; left: 100px; width: 300px; overflow: scroll; } #main { position:absolute; top: 130px; left: 400px; } #right { position:absolute; top: 130px; left: 700px; } #footer { position:absolute; bottom: 0px; left: 100px; } </STYLE> </HEAD> <BODY> <div id="left"> left<br/> <br/> left<br/> </div> <div id="main"> main </div> <div id="right"> right </div> <div id="footer"> footer </div> </BODY> </HTML>
- ベストアンサー
- ホームページ作成ソフト
- float & clear
質問の概要は以下の通りです。 CSSを使用しています。 可変長な画面を作成する際に、サイドバーを「float:left」で配置して「margin-left」でメイン画面を配置します。 さらに、メイン画面の中で「float:left」と「margin-left」を使って左と右に分けます。 このとき、メイン画面の中で、回り込みを防ぐために「clear:left」を使用します。 ところが、この「clear:left」がサイドバーの長さに影響されてしまい、おかしな空白ができてしまいます。 これを防ぐ方法はありますか？ もしくは、全体的に構造がおかしいならば、ご指摘ください。 すべてのソースをコピーするのは大変なので、主要な部分だけを以下に載せます。 <html> <head> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- body{ margin:0; } #header{ border:1px #000000 solid; } #side{ margin:10px; float:left; width:200px; border:1px #000000 solid; } #infomation{ margin:10px 10px 10px 230px; border:1px #000000 solid; } #main{ margin:10px 10px 10px 230px; border:1px #000000 solid; } #main-left{ float:left; margin:10px; width:250px; border:1px #000000 solid; } #main-right{ margin:10px 10px 10px 280px; border:1px #000000 solid; } #footer{ clear:left; border:1px #000000 solid; } .clear{ clear:left; } --!> </style> </head> <body> <div id="header"> title </div> <div id="side"> sidebar<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <div id="infomation"> infomation </div> <div id="main"> main <div id="main-left"> main-left<br><br><br><br><br> </div> <div id="main-right"> main-right<br><br><br><br><br><br><br> </div> <div class="clear">clear</div> <div id="main-left"> main-left<br><br><br><br><br> </div> <div id="main-right"> main-right<br><br><br> </div> <div class="clear">clear</div> </div> <div id="footer">footer</div> </body> </html> 他にもいろいろ疑問点があり、「margin-left」ではなく「float:left」を２つ使用して左右の画面を表示した場合、通常は左右に分かれるのですが、右の画面の文章が長い場合に、右画面が左画面の下に移動してしまいます。 これを現象を防ぐ方法はありませんか？ 全体の横幅を固定すればできるんでしょうが、可変長の場合にうまくいきません。
- 締切済み
- HTML
- CSSだけで奇麗にサイトを作りたい。
Mac Golive CS2を使っています。 大体以下のような形でCSSを記述しています。（他の文字やマージン等細かい設定は省いてます） 自分のイメージとしては灰色の背景に、メインの白い箱があってその中に左右に小箱が並んで入ってる感じです。 CSS : body { background-color: #999; } #main { background-color: white; width: 700px; height: auto; } #left { width: 200px; height: auto; float: left;} #right { width: 500px; height: auto; float: right;} HTML : <body> <div id="main"> <div id="left">左の内容</div> <div id="right">右の内容</div> </div> </body> そこで質問なのですが、上記の場合、mainの縦がautoになっているdivの中にleftやright等のdivを入れるとmainからleftなどがはみ出てしまうのです。（というかmainのdivが表示すらされない。なぜ？） divは入れ子が出来ないのでしょうか？現在どうしてもこの形で作りたいのでleftとrightの箱をtableで代用していますが、tableは使いたくありません。 あとmainの箱にleftなどの箱の大きさの分だけ<br>をたくさん入れるという方法がありますがそれもやりたくありません。 わかりにくい質問かもしれないのですが助言の程頂けましたら有り難いです。
- ベストアンサー
- ホームページ作成ソフト
- Divの入れ子とHeight
こんにちわ。初歩的な質問かもしれませんがお願いします。 DivのContainerの中にPosition:Absoluteの３つのDivを入れ子にしたいんですが、Containerの高さを中身のDivの高さに依存する形にしたいのですが、うまくいきません。 Containerの高さと中身のコンテンツの高さをAutoにした場合、中身のほうは内容に依存する形で高さが自動になるんですが、Containerのほうがうまくいきません。FloatをつかわずにPosition:Absoluteでして、Containerを中身の高さに依存、という風にする方法はないのでしょうか？ こちらがコードです。 HTML CODE <HTML> <HEAD> <link rel="stylesheet" href="hp.css" type="text/css" /> </HEAD> <BODY> <div class="container"> <div class="banner"> </div> <div class="menu"> </div> <div class="main"> a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br> </div> </div> </BODY> </HTML> CSS CODE * {margin:0;padding: 0;} div.container{border:2px solid RGB(888888); position: absolute; top:20px; left:50px; width:900px; height:auto;} div.banner { position: absolute; top:20px; left:80px; width:700px; height:150px; border:2px solid RGB(888888);} div.menu{ position: absolute; top:190px; left:30px; width:150px; height:300px; font-weight:bold; border:2px solid RGB(888888);} div.main{ position:absolute; top:190px; left:200px; width:600px; height:auto; border:2px solid RGB(888888);}
- ベストアンサー
- HTML
- divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。
divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・？
- ベストアンサー
- CSS
- フッター固定時のdivの背景について
フッターを画面下部に固定するため以下のようなHTMLを書きました。 フッターは固定できたのですが、コンテンツの量が少ないと背景が途中で途切れてしまいます。 コンテンツの量が少なくても背景を下まで（フッターの上まで）表示させるために何かよい方法はありますでしょうか？ <style type="text/css"> <!-- html, body { height: 100%; margin: 0; padding: 0; text-align: center; } #container { min-height: 100%; height: auto !important; height: 100%; position: relative; } #screen { width: 100%; text-align: left; padding-bottom: 100px; } #contents{ margin: 0 auto; width: 50%; background:Khaki; } #footer { height: 100px; width: 100%; position: absolute; bottom: 0; background-color: #7EC4E6; } --> </style> </head> <body> <div id="container"> <div id="screen"> <div id="contents"> コンテンツ </div> <div id="footer">footer</div> </div> </div> </body> </html>
- ベストアンサー
- HTML
- フッターの位置をスタイルシートで
ＨＴＭＬ＆ＣＳＳの勉強を始めたばかりです。 ヘッダー、内容３カラム組み、フッターという形にしたいのですが、どうしてもフッターが最下部に来てくれません。 フッターを３カラムの下に来させるには下記のほかに何が必要なのでしょうか。本とにらめっこしながらプロパティを足したり引いたりはしているのですが。 かなり基本的なところだと思いますがお願いいたします。 ＨＴＭＬ－－－－－－ <div id="header"> あいうえお </div> <div id="main"> <div id="mainleft"> かきくけこ </div> <div id="maincenter"> さしすせそ<br> まみむめも<br> や ゆ よ </div> <div id="mainright"> なにぬねの </div> </div> <div id="footer"> たちつてと </div> ＣＳＳ－－－－－－ div#header{width:600px;} div#main{width:600px;} div#mainleft{top:40px;width:100px;float:left; position:absolute ;} div#maincenter{top:40px;width:400px;float:left; position:absolute ;left:105px;} div#mainright{top:40px;width:100px;float:left; position: absolute;left:510px;} div#footer{width:600px;position: relative;}
- ベストアンサー
- HTML
お礼
早速の回答誠にありがとうございます！ やっとdivの入れ子についてちゃんと理解出来たように思います。 分かりやすい解説記事を紹介して頂き誠にありがとうございました。 また分からない事がありましたらその時はぜひとも宜しくお願い致します。