Dreamweaver CSS -Dreamweaver 8をMac OS-

CSSで余白とパディングに”０”を指定したのに上部に余白ができてしまう

DREAMWEAVER8で作成しているのですが、ヘッダーの上部にCSSで背景としてグラデーション画像をいれてます。そして、<h1>でロゴ画像を入れると何故かヘッダーのグラデーション背景の上に20ピクセルぐらいの空白が出来てしまいます。 IE6では空白がないのですが、FIREFOX2だと空きます。分かる方いらっしゃったら教えて下さい。ソースはこれです↓ 【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>無題ドキュメント</title> <style type="text/css" media="all">@import url("school2.css");</style> </head> <body> <div id="wrapper"> <div id="header"> <h1><img src="images/Logo03.gif" width="310" height="90" /></h1> </div> </div> </body> </html> 【css】 body { background: #E0FFCE; text-align: center; margin: 0px; padding: 0px; font-family: "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } #wrapper { text-align: left; margin: 0px auto; padding: 0px; height: 800px; width: 800px; border: 1px solid #009999; background: #FFFFFF; } #wrapper #header { background: url(images/Backheader3.gif) no-repeat; margin: 0px; padding: 0px; height: 120px; border-bottom: 6px double #009999; } #wrapper #header img { margin: 0px; padding: 0px; }

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は反映されているのですが、プレビューまたはサーバーにアップすると反映されません。なにが原因なのでしょう。。。何卒よろしくお願いいたします。

CSSでFirefoxのプレビューをかけると、下が空いてしまう現象（追記）

先ほど、質問させて頂きました問題に関しまして、簡単なレイアウトで再度新規にページを作成してみたところ、どうも、PCの縦幅よりも小さい値のページは、下が空いてしまうのではないかという気がしました。レイアウトの構成は１．上部に「header」コンテナ２．その下に「wrapper」コンテナ３．その下（最下部）に「footer」コンテナという構成で作成したところ、２．の縦幅が300pixのときは、このような現象が起こるが、２．の縦幅が800pixのときは起こりませんでした。ソースコードは以下の通りです ■　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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <link href="test.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> id "header" の内容がここに入ります</div> <div id="wrapper"> id "wrapper" の内容がここに入ります-</div> <div id="footer"> id "footer" の内容がここに入ります</div> </body> </html> ■　CSS部分 body { margin: 0px auto; padding: 0px; } #header { margin: 0px auto; padding: 0px; height: 50px; width: 800px; background: #666666; } #wrapper { margin: 0px auto; padding: 0px; height: 300px; width: 800px; background: #FFFF00; } #footer { margin: 0px auto 5px; padding: 0px; height: 60px; width: 800px; background: #00FFFF; } です。もし、予想通りPCの縦幅の問題だとしたら、１．コンテンツの少ないページはどのように対処するのか？２．PCによって縦幅が異なるが、大きな画面サイズのＰＣでは、小さな画面サイズのＰＣで正しく表示されるものも、このように下が空いてしまうのか？３．これまでの推測は間違えで、別の考え方から、エラーになるのか？をご教授いただけますと幸いで御座います。月曜日の朝から、くだらない質問かもしれませんが、宜しくお願いします。

DreamWeaverでテーブルをCSSにした場合にずれます。

DreamWeaverを使い始めました。 CSSの段組左にテーブルを入れると下記のようになりました。 ----------------------- <!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> <style type="text/css">  </style> </head> <body> <div id="wrap"> <div id="content"> <table width="200px" border="0" cellspacing="0" cellpadding="0"> <tr> <td>1段</td> </tr> <tr> <td>2段</td> </tr> </table> </div> <div id="main">メインメインメインメインメイン</div> <div id="footer"> 下</div> </div> </body> </html> -----↑ここまでDreamWeaver そこで、CSSでテーブルにボーダー0の値を入れて、タグからborder="0"を消すと、段組右側が左の下にずれて表示されます。ブラウザプレビューでは正常ですが、編集しにくくて困ってます。 table { border: none; border-collapse: collapse; } DWでは、このようになるものなのでしょうか。

cssでの高さの調整がうまくいきません

はじめまして。当方css初心者です。現在DreamWeaver8でCSS+XHTMLでホームページを作成しているのですが、どうもうまくいかないことがあります。よければご意見下さいませ。以下のソースでmaincontentsに情報を盛り込み、bodyで背景に色をつけてるため、wrapperの背景を白にしてコンテンツ部を白にしたいのですが、maincontentsの情報が少し増えるとwrapperの枠を飛び出してしまいます。wrapperの高さを指定しておけばその範囲では大丈夫なのですが、ページによってmaincontentsの情報量が異なるので「高さ：自動」にすると、contentsの高さまでしか広がってくれません。各ページの情報量が異なるためwrapperの高さも自動で広がって欲しいのですが、どのようにすればよろしいでしょうか。ソースの間違えあると思います。お手数ですが、よろしくお願い致します。 html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> <link href="file:///E|/testweb/css.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <div id="header"> id "header" の内容がここに入ります</div> <div id="contents"> <div id="maincontents"> <p>id "maincontents" の内容がここに入ります</p> </div> <div id="sidenavi"> id "sidenavi" の内容がここに入ります</div> id "contents" の内容がここに入ります</div> id "wrapper" の内容がここに入ります</div> </body> </html> css #wrapper { height: auto; width: 850px; } #header { height: 50px; width: 850px; } #contents { width: 850px; } #contents #maincontents { width: 680px; float: left; } #contents #sidenavi { float: right; width: 90px; }

ブラウザ上部に余白があります。

近い現象はありましたが、解決出来なかったのでご質問させて頂きます。下記のソースでhtmlを制作しましたが、#headerの上に余白があります。どうすればこの余白をとる事が出来るでしょうか？お教え頂ければと思います。 ↓ソース↓ <!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> <style type="text/css">  </style> </head> <body> <div id="header"> <h1>test</h1> </div> </body> </html>

CSSが正確に反映されません。

４つの枠を丸で囲み、かつそれぞれの枠を等間隔で空けたいと思います丁度以下の2つを表示した場合の、contentsとmainの間の間隔が理想的です。しかし書いたCSSの設定が正確に反映されません。 headerとfooterもこの大きさで広げたいと思うのですが、広がりません。また、なぜheaderは丸くならず、footerはサイズからはみ出すのでしょうか。背景を赤に設定しているのですが、それも反映されません。なぜこうなるのかどなたかご存知の方、ご指摘いただけると助かります。どうかよろしくお願いします。以下、2つのファイルは同じフォルダに保存しました。 dreamweaverのアカデミック版で作り、firefox3.6.13で表示しています。 style.css ---------------------------------------------------------- @charset "utf-8"; /* CSS Document */  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>

DreamWeaverでのスタイルシート適用後のプレビューについて

最近やっとDreamWeaverを購入してテーブルからCSSデザインに乗り換えようと奮闘中のものです。外部スタイルシートに div#container { background: #ffffff; padding: 20px; margin: 10px 30px; border: 2px solid #999999; } と書き、 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" /> <link href="/test.css" rel="stylesheet" type="text/css" /> <title>test</title> </head> <body> <div id="container"> test web site </div> </body> </html> と書きプレビューしてみたのですがスタイルシートが適用されません。デザインビューでは適用されているのですが、、、何が原因なのでしょうか?

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" />  <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で横幅をCSSで設定できません。

HTMLで横幅をCSSで設定できません。 headerを作成しているのですが、画像のように横幅が外枠の wrapperをはみ出して表示されてしまいます。はみ出した値は5pxとpaddingで指定した値と一致します。 headerをtableタグで作成した場合、横幅700pxの枠中での padding-left:5px;になり、横幅には変化はありません。しかし、<div id="header">で横幅を700pxとし、 padding-left:5px;とすると、headerの横幅が 5px増えてしまいます。 <div id="header">の横幅を変化させずに、 paddingを指定することは可能なのでしょうか。わかる方いらっしゃいましたら宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; } #header { width: 700px; padding-left: 5px; }

cssに関して

<!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> <style type="text/css">  </style> </head> <body> <div id="box"> <div class="comment"> comment </div> <div class="comment"> comment </div> </div> </body> </html> --------------------------------------------------------- boxという枠の中にcommentの子枠を入れてます。 comment枠の上に10pxの空間を入れたいのですが、上記xhtmlとcssで書き方はＯＫだと思います。しかし疑問が残ります。本来はboxにpadding-top:10pxとすべきなんでしょうか。それとも上記のとおりで正解なんでしょうか。（commentにmargin-top：10px）ある程度経験のある方か、お詳しい方にご判断願いたいと思います。なぜこのような質問をするかというと、時々Adobe Dreamweaver CS3で、ＩＥ６では正しく表示されないとか、マージンレフトがどうのこうのと出るからです。（ＩＥ６の人はほとんどいないと思いますが、なんかしっくりこないんです・・・）よろしくお願いします。

CSSで、フレーム的な表現をしたいのですが、スマートなやり方を教えてください。

CSSにて、「サイドメニュー」「ヘッダ」「コンテンツ」と言うコンテンツを制作したく、以下のソースを記述したのですが、コンテンツ部分（.contents）を100%にすると当然、ヘッダ部分（.header）の100px分がはみ出てしまい、サイドメニュー（.side）の下に余白がでてしまいます。これを回避するために、現状position: fixed;を使用し、IE用には分岐で他のcssを読ませるようにしているのですが、もっとスマートに、ひとつのcssでこのレイアウトを実現する方法はないものでしょうか？ <!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"> <head> <title>test</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css">  </style> </head> <body> <div class="header"> header </div> <div class="side"> side </div> <div class="contents"> contents<br /> </div> </body> </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>

CSSレイアウトでの中央寄せ

おせわになります。 bodyに背景画像を指定し、CSSで中央寄せをしているのですが、動作確認でブラウザ幅をこまかく拡大・縮小を繰り返すと、背景画像とコンテンツ部とが1pxずれる事があります。 Win IE6.0、7.0、MacOSX safari2.0でこの現象がおき、FF2.0はWin&Macともに問題ありません。この解決方法はありますでしょうか。ご教授のほど、よろしくお願いいたします。 ▼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>テスト</title> <style type="text/css">  </style> </head> <body> <div id="wrapper"> <p>テスト</p> </div> </body> </html>

外部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> です。誰かお答えくださいませ。

ページ上部に空白ができます

いつもお世話になります。 dreamweaver8でホームページを作っています。下記のような記述をすると、ページ上部に空白ができます。どこを直せばよいのでしょうか、教えて下さい。【CSS】 #body{ 　　font-family:"メイリオ", Meiryo,"ＭＳＰゴシック", Osaka,"Hiragino", "ヒラギノ角ゴ Pro W3", sans-selif,; color: #333333; font-size:10px; margin: 0; padding: 0; text-align: center; } #wrapper { width: 722px; margin-top:0px; margin-left: auto; margin-right: auto; background-image: url(img/sidebk2.jpg); background-repeat:repeat-y; } #header { background-color: #FFFDE5; background-image:url(img/title_bar.jpg) ; background-repeat:no-repeat; height: 62px; width: 722px; margin-bottom : 0px; } #header p { position: relative; margin: 0; top:42px; left:570px; width:150px; color:#ffffff; font-size: 11px; } 【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>無題ドキュメント</title> <link rel="stylesheet" type="text/css" href="style.css" media="all"> </head> <body> <div id="wrapper"> <div id="header"> <p>| <a href="http://***.com" target="_blank">ブログ </a>|<a href="../sitemap.html">サイトマップ</a> |　 </p> </div> </div> </body> </html>

h3タグのCSS装飾

おせわになります。 h3テキストの左横にアイコンを設置し、下線としてドットラインをひこうと思います。アイコンをh3背景画像で表示し、ドットラインをh3タグの外にdivをおき表示させているのですが、ドットラインを表示させる為のだけのdivタグなので、あまり良い方法とは思わないのですが、他に良い方法はありますでしょうか？ ▼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>テスト</title> <style type="text/css">  </style> </head> <body> <div class="h3-dotline"> <h3>テキストテキスト</h3> </div> </body> </html>

【CSS】li要素をfloatした際のブラウザ表示

はじめまして。現在CSSでwebサイトを作成しています。ナビゲーションにli要素を使用し、CSSで横並びになるようfloatさせているのですが、firefox・Safariでの表示がずれてしまいます。思いつく限り検索して、幅の調整やposition関連、DTD変更なども試してみたのですが全く原因がわからず、お手上げ状態です。 DTD変更はこちらのサイト(http://2xup.org/log/2007/07/27-2111)を参考に、HTML 4.01 Transitional→XHTML 1.0 Transitionalを試してみました。お手数おかけしますが、どなたかご教授お願いします。 ■参考【HTML】 <div id="wrapper"> <div id="header" class="clearfix"> <h1>タイトル</h1> <ul id="menu"> <li>TOP</li> <li><a href="#">NEWS</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">BBS</a></li> <li><a href="#">LINK</a></li> </ul> </div> </div> 【CSS】 #wrapper { margin:0 auto; padding:0; width:750px; } #header { background:url(image/bgtop01.gif) no-repeat; height:125px; } #header h1,li { float:left; text-align:center; } #header h1 { width:200px; margin:50px 25px 0 50px; background:#fc0; } #menu { width:425px; } ul#menu li { width:85px; margin-top:50px; background:#ffc; } .clearfix { min-height:1% } .clearfix:after { clear:both; display:block; visibility:hidden; height:0px; content: "."; } * HTML .clearfix { height:1% } 【サンプルサイト】 http://www.memorialhall.net/ky/index_sample.php どうぞよろしくお願いします。

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">  </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・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%; } -------------------------------------------------------------------------- 以上が内容になります。どうかよろしくお願いします。

Dreamweaver CSS

みんなの回答

関連するQ&A

CSSで余白とパディングに”０”を指定したのに上部に余白ができてしまう

CSSがうまく読み込まれません

CSSでFirefoxのプレビューをかけると、下が空いてしまう現象（追記）

AIは使う人の年齢や市場にも影響する？人工知能の可能性

DreamWeaverでテーブルをCSSにした場合にずれます。

cssでの高さの調整がうまくいきません

ブラウザ上部に余白があります。

CSSが正確に反映されません。

DreamWeaverでのスタイルシート適用後のプレビューについて

htmlおよびcssについて

HTMLで横幅をCSSで設定できません。

cssに関して

CSSで、フレーム的な表現をしたいのですが、スマートなやり方を教えてください。

marginが効いてくれません。

CSSレイアウトでの中央寄せ

外部CSSと　HEAD内のCSSの違い

ページ上部に空白ができます

h3タグのCSS装飾

【CSS】li要素をfloatした際のブラウザ表示

div入れ子による height100%

CSS・IEでボーダーを表示したい

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

Dreamweaver CSS

みんなの回答

関連するQ&A

CSSで余白とパディングに”０”を指定したのに上部に余白ができてしまう

CSSがうまく読み込まれません

CSSでFirefoxのプレビューをかけると、下が空いてしまう現象（追記）

AIは使う人の年齢や市場にも影響する？人工知能の可能性

DreamWeaverでテーブルをCSSにした場合にずれます。

cssでの高さの調整がうまくいきません

ブラウザ上部に余白があります。

CSSが正確に反映されません。

DreamWeaverでのスタイルシート適用後のプレビューについて

htmlおよびcssについて

HTMLで横幅をCSSで設定できません。

cssに関して

CSSで、フレーム的な表現をしたいのですが、スマートなやり方を教えてください。

marginが効いてくれません。

CSSレイアウトでの中央寄せ

外部CSSと HEAD内のCSSの違い

ページ上部に空白ができます

h3タグのCSS装飾

【CSS】li要素をfloatした際のブラウザ表示

div入れ子による height100%

CSS・IEでボーダーを表示したい

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

外部CSSと　HEAD内のCSSの違い