HTMLとCSSに関する質問
- 自分で、htmlとcssを記述したのですが、表示が少しおかしいようです。
- どこがおかしいのでしょうか？
- IE、Firafox、cromeでレンダリングしてみましたが、同じです。
- ベストアンサー
htmlおよびcssについて
自分で、htmlとcssを記述したのですが、表示が少しおかしいようです。contentの上に空白ができてしまいます。IE、Firafox、cromeでレンダリングしてみましたが、同じです。ソースは以下のとおりです。どこがおかしいのでしょうか？ http://check.zouri.jp/ <?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" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="keywords" content="キーワード1,キーワード2,キーワード3,キーワード4,キーワード5" /> <meta name="description" content="ここに、あなたがつくろうとするウェブサイトの内容・特徴を記述する" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="INDEX" href="./index.html" /> <link rel="NEXT" href="next.html" /> <link rel="PREV" href="prev.html" /> <link rel="stylesheet" href="base.css" type="text/css" media="all" /> <!--[if IE]> <link rel="stylesheet" href="ie.css" type="text/css" media="all" /> <![endif]--> <link rev="MADE" href="mailto:aaa@yahoo.co.jp" /> <title>あなたのウェブサイトのタイトル名</title> </head> <body> <div id="wrapper"> <div id="header">headerです </div> <div id="globalnavigation">globalnavigationです </div> <div id="topicpath">topicpathです </div> <div id="container"> <div id="primary">primaryです <div id="content">contentです </div> </div> <div id="secondary">secondaryです </div> </div> <div id="advertisement">advertisementです </div> <div id="pagelinks">pagelinksです </div> <div id="footer">footerです </div> </div> </body> </html> @charset "UTF-8" * {margin:0; padding:0;} #wrapper { width:100%; } #header { background-color:#dddddd; height:50px; } #globalnavigation { background-color:#cccccc; height:50px; } #container { float:left; width:100%; margin-right:-145px; } #primary { float:right; width:100%; margin:10px 0 10px -145px; background-color:#c7d5ed; } #content { margin:0 155px; background-color:#caedc7; } #secondary { float:left; width:145px; margin:10px 0 10px 0px; background-color:#e5c7ed; } #advertisement { float:right; width:145px; margin:10px 0; background-color:#e5c7ed; } #pagelinks { clear:both; background-color:#dddddd; height:50px; } #footer { background-color:#dddddd; height:50px; }
- HTML
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
＞contentの上に空白ができてしまいます。 「contentの上に」は「空白」ではなくて、 ＞primaryです が隠れているようですね。 「primaryです」をもう少し長い文章にしてからレンダリングされるとお分かりになるかと存じますが、「primaryです」を削除またはコメントアウトすれば、上の「空白」がなくなります。 <div id="primary"><!--primaryです--> <div id="content">contentです
関連するQ&A
- CSSがうまく読み込まれません
いつもお世話になっています。 Dreamweaver CS4でホームページ作りをしているのですが、 突然CSSが読み込まれなくなりました。 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=UTF-8" /> <title>無題ドキュメント</title> <link href="CSS/test.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="1"> <p>1</p> </div> <div id="2"> <p>2</p> </div> <div id="3"> <p>3</p> </div> <div id="4"> <p>4</p> </div> <div id="5"> <p>5</p> </div> </body> </html> cssのソースは body { padding: 20px; width: 850px; margin-right: auto; margin-left: auto; border: 1px solid #999; } #1 { width: 850px; background-color: #666; } #2 { width: 850px; background-color: #999; } #3 { background-color: #CCC; width: 850px; } #4 { background-color: #999; width: 850px; } #5 { background-color: #666; width: 850px; } です。 どちらもエンコーディングはUTF-8です。 ちなみにDreamweaverで制作中の表示ではCSSは反映されているのですが、 プレビューまたはサーバーにアップすると反映されません。 なにが原因なのでしょう。。。 何卒よろしくお願いいたします。
- ベストアンサー
- HTML
- html cssで困っています
基本的な質問ですが、 html部分 <html> <head> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="soto"> <div id="naka"></div> </div> </body> </html> css部分 @charset "utf-8"; #soto{ width:320px; height:480px; background-color:#FB0004; } #naka{ width:160px; height:50px; margin-top:160; margin-left:80px; background-color:#000000; } としたら、赤の長方形の真ん中当たりに黒の長方形がくると思ってやったのですが、全体が下がります。ねらった通りにするにはどのようにしたらいいのでしょうか。paddingで無理矢理したのですが、この記述の根本的なミスはなでしょうか？教えていただければありがたいです。
- ベストアンサー
- HTML
- XHTML+CSS IE5.5で見ると崩れる
皆様こんにちは、XHTML+CSSで初歩を勉強してる者ですがどうして判らない事があるので教えていただければ助かります。 判らないことは XHMLのソースに <!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>練習</title> <link href="oooo.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="a"> <div id="b"> id "b" </div> <div id="c"> id "c"</div> <div id="d"> id "d"</div> <div id="e"> id "e"</div> </div> </body> </html> と記入しております CSSのソースは @charset "utf-8"; body { font-family: Arial, Helvetica, sans-serif; font-size: 14px; margin: 0px; padding: 0px; } #a { background-color: #999999; width: 400px; border: 1px solid #66FF00; } #a #b { background-color: #006699; width: 400px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #996600; } #a #c { background-color: #00CC99; margin: 5px; float: left; width: 100px; display: inline; } #a #d { background-color: #99FF66; width: 285px; float: left; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; display: inline; } #a #e { clear: both; background-color: #0000FF; height: 20px; } と記入しております。 IE8,7,6では自分の描いたイメージどうり表示されるものの、 IE5.5では崩れてしまいます。 作成ソフトはAdobe Dreamweaver CS3で作成しております。 ブラウザーの互換性チェックしても何も問題は無いのですがどうしてでしよう？わかる方おしていただけると助かります。
- ベストアンサー
- 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
- xhtml+cssのレイアウト センタリング カラム落ち
xhtml+cssレイアウト超初心者です。 何か間違っている所があれば教えてください。 よろしくお願い致します。 【問題点】 １）全体がセンタリングにならない □□■■■■■□□ □□■■■■■□□ □□■■■■■□□(左右の中央にしたい) ２）subがカラム落ちしてしまっている？ mainとsubの下に『スト』という文字が入ってしまっています。 【cssソース】 @charset "Shift_JIS"; * {margin: 0; padding: 0; } body {color: #000000; font-size: 62.5%; } /*==wrapper==*/ div#wrapper { width: 950px; margin : 0 auto; } /*==heaber==*/ div#heaber { width: 950px; margin-bottom: 30px; background-color: #66CCFF; } /*==contents ==*/ div#contents { width: 950px; float: left; background-color:#66CCFF; } /*==main ==*/ div#main { width: 740px; margin-right: 20px; float: left; background-color:#6699FF; } /*==sub ==*/ div#sub { width: 190px; float: left; background-color:#6666FF; } /*==siteinfo ==*/ div#siteinfo { clear: both; width: 950px; background-color:#6633FF; } 【HTMLソース】 <?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" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <link rel="stylesheet" media="tv, screen, projection, print" href="css/import.css" /> </head> <body> <div id="wrapper"> <div id="header"> <p>テキスト</p> <p>テキスト</p> </div><!--/header--> <div id="contents"> <div id="main"> <p>テキスト</p> <p>テキスト</p> </div><!--/main--> <div id="sub"> <p>テキスト</p> <p>テキスト</p> </div><!--/sub--> </div><!--/contents--> <div id="siteinfo"> <p>テキスト</p> <p>テキスト</p> </div><!--/siteinfo--> </div><!--/wrapper--> </body> </html>
- ベストアンサー
- HTML
- ２段リキッド(右可変)時の右ブロックのボーダー表示について
タイトルでは分かりにくいですので、まずは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 のマージンをとるにはどうしたら良いのでしょうか？ 分かりにくい内容とは思いますが、お願いします。
- ベストアンサー
- HTML
- xhtml+cssのfloatの使い方、センタリングの方法
xhtml+cssでのプログラミングについて教えてください！ 初めてxhtml+cssでのプログラミングに挑戦しています。 質問したい内容が２つあります。 1.) ページ全体をセンタリング表示したいです。 (下記ソースのままだと左寄せに表示されてしまいます。) 2.) floatして右側に表示しているボックスの中に さらにfloatさせてleft、lightの２つ横並びのボックスを 配置することは可能でしょうか？ また、その際の注意点などはございますでしょうか？ --------------------------------------------------------------- <?xml version="1.0" encoding="Shift_JIS"?> <!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>無題ドキュメント</title> </head> <style type="text/css"> <!-- body{ margin: 0px; padding: 0px; background-color:#74CAEB; } #wrap { width: 800px; margin-right: auto; margin-left: auto; } #header { width: 800px; height: 80px; background-color:#E1F3FB; } #side { float: left; width: 200px; height: 200px; background-color:#14729A; } #main { float: right; width: 600px; background-color:#ffffff; } #main .conte1 { margin-top: 20px; width: 600px; height: 100px; background-color:#EFEFEF; } #main .conte2 { float: left; margin-top: 20px; width: 290px; height: 100px; background-color:#EFEFEF; } #main .conte3 { float: right; margin: 20px 0px 0px 20px; width: 290px; height: 100px; background-color:#EFEFEF; } #footer { clear: both; width: 800px; height: 80px; background-color:#E1F3FB; } --> </style> <body> <div id="wrap"> <div id="header"> </div> <div id="side"> </div> <div id="main"> <div class="conte1"> </div> <div class="conte2"> </div> <div class="conte3"> </div> </div> <div id="footer"> </div> </div> </body> </html> --------------------------------------------------------------- 質問のどちらかでも結構です。 初心者のため質問の仕方が悪く、ご理解が難しいかもしれませんが どなたかご理解頂ける方は教えてください。
- 締切済み
- HTML
- 画像の貼り方教えてほしいです
CSSの画像の貼り方がわかりません body{ background-color: #f2f2f2; padding: 0; margin: 0; } div#container { width: 700px; padding: 0; margin-left: 150px; background-color: white} div#header { background-color: blue; badkground-image: url(画像.jpg); width: 640px; height: 233px ｝ 画像の部分のCSSはこんな感じです。 htmlは <!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" /> <link rel="stylesheet" href="roll.css" type="text/css" media="all" /> </head> <body> <div id="container"> <div id="header"> </div> <div id="menu"> <ul> <li><a href="#">web</a></li> <li><a href="#">title1</a></li> <li><a href="#">title2</a></li> <li><a href="#">css</a></li> <li><a href="#">seo</a></li> </ul> </div> <div style="clear:both; "></div> </div> </body> </html> こうなってます。 ここまで何が間違っているかわかりません。 初心者ですがどなたかわかる方よろしくお願いします。
- 締切済み
- HTML
- CSSでの背景色の出し方でつまりました。
独学で学んでいる初心者です。 HTML <link rel="stylesheet" href="hp.css" type="text/css"> <div id="container"> <div id="header">ヘッダー</div> <div id="main">メイン</div> <div id="sidebar">サイドバー</div> <div id="footer">フッター</div> </div> CSS #container{ width:940px; overflow:hidden; } #main{ width:620px; float:left; color:black; } #sidebar{ width:320px; float:right; background:green; } #footer{ clear:both color:red; } 簡単なものにしてみても出なかったので、 なぜ出ないのか教えていただければと思います。 ブラウザはオペラです。 サイドバーのグリーンしかつきません。 過去の似たような質問をいくつかみて overflow:hidden; や .clearfix:after { content: ""; display: block; clear: both; } を入れてみてもダメでした。 お願い致します。
- ベストアンサー
- CSS
- 外部CSSと HEAD内のCSSの違い
現在、macで Dreamweaver8を使用してHPを作っています。 外部のcssがうまく反映されません。 そこで、head内に同じcssを入れたところ、きちんと反映されました。 どうして違いがでるのか教えてください。 『head内に入れた時』 <!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"> <title>無題ドキュメント</title> <style type="text/css"> body { font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; font-weight: normal; background-position: center; padding: 0px; margin: 0px; } #page { background-color: #009900; height: 800px; width: 760px; margin-right: auto; margin-left: auto; position: relative; top: 0px; } #title { background-color: #CCFF00; height: 120px; width: 700px; position: relative; left: 0px; top: 0px; margin-right: 15px; margin-left: 15px; padding-right: 15px; padding-left: 15px; } </style> </head> <body> <div id="page"> <div id="title"> </div> </div> </body> </html> 『外部cssの時』 [styel.cssは] body { font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; font-weight: normal; background-position: center; padding: 0px; margin: 0px; } #page { background-color: #009900; height: 800px; width: 760px; margin-right: auto; margin-left: auto; position: relative; top: 0px; } #title { background-color: #CCFF00; height: 120px; width: 700px; position: relative; left: 0px; top: 0px; margin-right: 15px; margin-left: 15px; padding-right: 15px; padding-left: 15px; } [反映される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"> <title>無題ドキュメント</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="page"> <div id="title"> </div> </div> </body> </html> です。 誰かお答えくださいませ。
- ベストアンサー
- Mac
お礼
ああ、うかつでした。ありがとうございます。