画像の貼り方教えてほしいです -CSSの画像の貼り方がわかりません b-

CSS #containerについて

えっと、CSSについての質問です。最近勉強をはじめたのですが、 #container を下まで伸ばすのに height: 100%; min-width: 100%; をいれても下まで伸びない現象がおきています。最初は伸びていたのですが、ヘッダーとフッターを横に１００％にしてから様子がおかしくなりました。減ったーフッターは横に全部伸ばしたくて、コンテイナーは横は余白つけて下にのばしたいのです＞＜どなたか原因がわかる方、対処法わかる方いましたらお願いします＞＜ ------------------------------HTML--- <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="index3.css"> </head> <body> <div id="container"> <div id="headerbg"> <div id="header"> <h1>header</h1> </div> </div> <div id="menu"> <ul> <li><a href="">めにゅー１</a></li> <li><a href="">めにゅー２</a></li> <li><a href="">めにゅー３</a></li> <li><a href="">めにゅー４</a></li> <li><a href="">めにゅー５</a></li> <li><a href="">めにゅー６</a></li> </ul> </div> <div id="main"> <div id="contents"> </div> <div id="sidebar"> </div> </div> <div id="footerbg"> <div id="footer">Footer</div> </div> </div> </body> </html> -------------------------CSS--- html { background-image: url('hana3.jpg'); background-attachment: fixed; } body { font-family: Verdana, Arial; font-size: 20px; margin: 0px; padding: 0px; } html,body,#main,#container{ height:100%; } #container { height: 100%; min-width: 100%; background-color: rgba(255,100,0,0.5); } #headerbg{ width: 100%; min-width: 100%; background-color: rgba(255,100,0,0.5); } #header { padding: 40px; width: 100%; } #menu { } #menu>ul>li { float: left; } #main { overflow: hidden; } #sidebar { } #footerbg{ background-color: rgba(255,100,0,0.5); width: 100%; min-width: 100%; } #footer { padding: 50px; width: 100%; }

インラインフレーム、ｃｓｓの質問です。

下記の3カラムのページを練習で作っているのですが、右端のサイドバーをインラインフレームで表示させようとしたところレイアウトが崩れてしまいます。そもそもインラインフレーム以前のCSSの問題なのかもしれないのですが色々調べてはみたのですが直せなくて困っています。どなたかお分かりになる方ご回答お願いします。 HTML,CSS,インラインフレームのHTMLの順で貼っています。 HTMLソース------------------------------ <?xml version="1.0" encoding="shift_jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html> <head> <title></title> <link rel="stylesheet" href="C:/Documents and Settings/abc/デスクトップ/gear crafter/test2.css" type="text/css" /> </head> <body> <div id="container"> <div id="header"> <a href=><img src="http://gearcrafter.web.fc2.com/image/testtop2.jpg" alt="" id="top" /></a></div> <div id="headermenue"> <ul class="topmenue"><a href=><li>cart</li></a><li><a href=>about us</a></li><li><a href=>Q & A</a></li> </ul> </div> <div id="side"> カテゴリ <ul type="square" compact="compact" class="sidecate"> <li><a href=>財布</a></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li> </ul> </div> <div id="main"><a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a> <a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a> <a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a> <a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a> <a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a> <a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a></div> <div id="side2">sgad<iframe src="side2.html" width="80" scrolling="no" frameborder="0"></iframe> </div> <div id="footer"></div> </div> </body> </html> --------------------------------------------------------------- --CSS--------------------------------------------------------- @charset "shift-jis"; /*画像*/ img { border-style:none; } a img { border-style:none; } a:hover img{opacity:0.8;filter:alpha(opacity=80);-ms-filter: "alpha( opacity=80 )";} /*リンク*/ a:link{ text-decoration:none; color:#34494e;} a:visited{ color:#34494e;} a:hover{color:#245ba6;} a:active{color:#245ba6;} a { text-decoration: none; } /*レイアウト*/ ul.topmenue { margin-right:0px; margin-left:auto; width:29em; } ul.topmenue li { float: right; width: 8em; margin-left: 5px; padding: 2px; border: 1px #b3bc6f solid; background-color: #b3bc6f; text-align: center; } ul.sidecate { width: 2em; margin-left: 1px; margin-top: 0px; padding: 1px; border: 1px #b3bc6f solid; background-color: #d8ddb6; text-align: center; width:194px;} ul.sidecate li {text-align: left; width:194px; } #container { width : 980px; margin-left: auto; margin-right: auto; background-color :#222222;} } #header {width :960px; } #headermenue {width : 960px;} #side { float: left; margin-left: 5px; padding-top: 5px; width: 200px; background-color: #b3bc6f; text-align:center;} #main {margin: 0px 110px 0px 220px; width: 630px;} #side2 {background-color: #b3bc6f; float: right; width: 80px; margin-right: 5px;} #footer {clear: both; width: 960px; } --------------------------------------------------------------- --インラインフレーム---------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <?xml version="1.0" encoding="shift_jis"?> <style type="text/css">  </style> <html> <head> </head> <body> test text </body></html>

CSSで画像１枚によるロールオーバー

CSSの勉強をしているのですが、Fire Fox2.0ではうまく表示されるのに対し、IE6,7では何も表示されず困っています。どこが間違っているのか教えて頂けませんでしょうか？よろしくお願い致します。作っている物は以下の通りです。（すべて同じ階層にあります） --------------------------------------------------------------- navi.gif(100*30のメニューが横3縦2で300*30の１枚の画像) --------------------------------------------------------------- list.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 href="list1.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="globalnavi"> <ul> <li id="btn01"><a href="#">リスト１</a></li> </ul> </div> </body> </html> --------------------------------------------------------------- list.css /* CSS Document */ .globalnavi { width:300px; height:30px; margin:0px; padding:0px; text-align:left; } .globalnavi ul { margin:0px; padding:0px; } .globalnavi li { display:block; list-style-type:none; float:left; width:100px; height:30px; margin:0px; padding:0px; background:url(navi.gif)no-repeat; text-indent:-9999px; } .globalnavi li a { display:block; list-style-type::none; float:left; width:100px; height:30px; margin:0px; padding:0px; background:url(navi.gif)no-repeat; text-indent:-9999px; } .globalnavi li#btn01{ width:100px; background-position:0 0; } .globalnavi li#btn01 a{ width:100px; } .globalnavi li#btn01 a:hover{ width:100px; background-position: 0 -30px; }

わたしはメモ帳でホームページをつくったのですがどうしても画像の上にマウ

わたしはメモ帳でホームページをつくったのですがどうしても画像の上にマウスのカーソルをかさねても文字が表示させることが出来ません。 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>welcome！有限会社ロイヤルハイネスのホームページへ</title> <style type="text/css"> body {color:#444444; background-color:#66aa66; text-align:center} div#container {border-style:solid; border-width:2px; border-color:#bbffaa; padding:20px; background-color:#ffffff; width:600px; margin-left:auto; margin-right:auto} h1 {font-size: 1.25em; font-family:helvetica,sans-serif; color:#66aa66} p {font-size: 0.1em} address {font-size: 0.1em; font-style:normal} a {color:#33aa88} a:hover {color:#88aaff} address a:hover {color:#ffaa00} ul {list-style-type:none; margin-left:0; padding-left:0; background-color:#bbffaa; padding-top:3px; padding-bottom:3px; padding-left:20px; padding-right:20px} li {display:inline; padding-right:12px; font-size:0.75em} li a {text-decoration:none} p#message {width:300px; margin-left:auto; margin-right:auto; text-align:left; line-height:1.3} </style> </head> <body> <div id="container"> <h1>royal hyness homepage</h1> <p>ホームページ開設してみました。</p> <ul> <li><a href="about.html">有限会社ロイヤルハイネスの管理物件について</a></li> <li><a href="toiawase">お問い合わせ</a></li> <li><a href="http://>ブログ</a></li> <li><a href="2ldkapato">2LDK</a></li> <li><a href="2dkapato">2DK</a></li> <li><a href="1kapato">1K</a></li> </ul> <p><img src="top.jpg"alt="ニューヨーク・レコード日記"/> <p> <strong>倉敷市中畝のペットOKのアパート物件</strong>の情報を公開しています。 <strong>是非問い合わせ</strong>の方お願いします。 </p> <address>Copyright(C)<a href="mailto:royalhyness@bridge.ocn.ne.jp"> royal hyness Diary</address> </div> </body> </html>

CSSのリスト表示

リストの表示ですが、li a　で上下と左にpaddingを入れたいです。 IEではOKなのですが、Firefoxでは右に背景色が飛び出てしまいます。どこを直したら良いでしょうか。 <?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"> で組んでいます。 #category { width: 180px; float: left; } #categoryt ul { border-top: 1px solid #999999; } #category li { border-bottom: 1px solid #999999; } #category li a { display: block; width : 100%; padding: 5px; background-color: #F6F6F6; text-decoration:none; color: #000033; } #category a:hover { background-color: #DBE7EE; color: #003366; } --------------------- <div id="category"> <ul> <li><a href="#">AAA</a></li> <li><a href="#">BBB</a></li> </ul> </div>

IE6でli間に出来る隙間を無くす方法について

下記のソースをIE6で閲覧すると「リンクあり２」と「リンクあり３」の間に隙間ができてしまい、この隙間を除きたいと思ったのですが、どうすればできるかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。なお、Firefox等では隙間は出来ませんでした。 <!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" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>title</title> <style type="text/css">  </style> </head> <body> <ul id="mainlinkbox"> <li class="link"><a href="#">リンクあり１</a></li> <li class="nolink">リンクなし</li> <li class="link"><a href="#">リンクあり２</a><div class="submainlinkbox">サブ項目</div></li> <li class="link"><a href="#">リンクあり３</a></li> </ul> </body> </html>

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

スタイルシート・・・borderが適用されない

横並びのメニューを作っていますがなぜかborderが適用されません。多分余計な記述があるためだと思いますが分からなくなってしまいました。どなたか助けて下さい。 <!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 href="test.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="header-menu"> <ul class="sample"> <li><A href="#">メニュー１</A></li> <li><A href="#">メニュー２</A></li> <li><A href="#">メニュー３</A></li> <li><A href="#">メニュー４</A></li> </ul> </div> </body> </html> .header-menu { width: 400px; overflow: hidden; } ul.sample{ margin-top:20px; font-size:12px; padding-left:0; margin-left:0; } ul.sample li{ display: inline; } ul.sample li a{ width:85px; text-decoration:none; color: #fff; background-color: #FF7F50; padding:3px 0 3px 0; margin-right:7px; width:85px; float:left; border-width:1px; border-color:#CCCCCC; text-align: center; } ul.sample li a :hover { background:none; }

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によって縦幅が異なるが、大きな画面サイズのＰＣでは、小さな画面サイズのＰＣで正しく表示されるものも、このように下が空いてしまうのか？３．これまでの推測は間違えで、別の考え方から、エラーになるのか？をご教授いただけますと幸いで御座います。月曜日の朝から、くだらない質問かもしれませんが、宜しくお願いします。

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

CSSの外部参照について。

XHTMLの内部にCSSを記述すると認識されますが、CSSを外部参照で指定すると、認識されずここでいうindex.htmlに記述した構文しか表示されません。初心者です。いくらXHTML,CSSの本や検索をしても中々理解がはかどらず、思うようにいきません。初歩的な間違いだと思いますが、どうぞよろしくお願い致します。ｍ（＿　＿）ｍ index.html,works.htmlとCSSの記述場所を外部参照にし、HPをつくろうとしています。 XHTMLファイルはindex.html,works.htmlで（biography.htmlやaccess.htmlは後でつくります。）、 CSSはcssというファイルに、中にはstyle.cssがあります。画像はimgのフォルダにあります。この回答にある４つの方法も参考にしてみたのですが、外部参照CSSは認識されませんでした。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1120846271 (次にCSSが置いてあるディレクトリ内に新規フォルダを作りその中にHTMLがある場合 <link href="../○○.css" rel="stylesheet" type="text/css">とあったので、今はこう記述しています。<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />） *XHTMLソース <?xml version="1.0" encoding"utf=8"?> <!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"> <?xml version="1.0" encoding"utf=8"?> <!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 profile=""> <title>***</title> <meta http-equiv="content-language" content="ja" /> <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" /> <link rel="stylesheet" type="text/css" href="css/style.css" media="all" /> </head> <div id="wrapper"> <div id="header"> <h1>***</h1> </div> <div id="main"> <ul> <li class="biography"><a href="#">>> Biography</a></li> <li class="works"><a href="works.html#works">>> Works</a></li> <li class="access"><a href="#">>> Access</a></li> </ul> </div><div id="footer"> <ul> <li><a href="#">sitemap</a></li> </ul> </div> </div> *CSS body,div,ul,ol,li,h1,p{margin:0; padding:0;} body{ text-align:center; min-width:780px; background:#f5f5f1; coler:#666666; fontfamily:Tahoma,"Lucida Geande", Arial,sans-serif; font-size;62.5%;　　　　　　　　　　　　　　　　 } h1{display:none;}h1 #wrapper{width:740px; margin:0 auto; text-align:left;} #main a {height:100px; color:#ffffff; font-size:1.8em; text-tramsform: uppercase; text-decoration: none; display: block;} #main a:hover,a:active{color: #cccccc;} #main ul{list-style:none;} #main ul li{padding:5px 0px 5px 0px;} #header{height:115px; margin:15% 0 0 0; background:url(.img/image/blue.gif) no-repeat left center;} .biography{background:url("blue.gif") no-repeat left center;} .works{background-image:url(./img/works.gif) no-repeat left center;} .access{background-image:url(./img/access.gif) no-repeat left center;} #footer ul li {padding:10px; display:inline;} #footer ul {text-align:right;} #footer p {text-align:center;} どうぞよろしくお願い致します。

positionの設定の仕方について

中央に1つの大きな画像を配置。そしてその画像の左右の任意の位置に、リストを配置しようと考えています。しかし、以下のような表記にしましたがリストが思うように配置されません。職場ではリストの配置まではうまく行きました。が、自宅の環境で見ると、職場とはどこかの設定が違っているのか、DW8上では配置されているのですが、ブラウザ上(IE、Ff)ではリストが全く動いていません。画像はきちんと配置されています。どうしてこういう違いがでるのかさっぱり分からず、質問させてもらいました。よろしくお願いします。 <!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><title>ポジションタグ練習用ページ </title> <link href="css/position2.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="position"> <ul> <li id="01"><a href="1.htm">あいうえお</a></li> <li id="02"><a href="2.html">かきくけこ</a></li> </ul> <img src="images/flower.jpg" alt="花" width="260" height="402" id="img"> </div> </body> </html> -------------------- #position { position: relative; left: 0px; top: 0px; } #img { position: relative; height: 402px; width: 260px; left: 85px; top: 0px; } #01 { position: absolute; height: 20px; width: 100px; left: -11px; top: 0px; background: #FFFFCC; } #02 { position: absolute; height: 20px; width: 100px; left: 360px; top: 26px; background: #FFCC99; }

お世話になっております。

お世話になっております。 CSSでサイトを構築しようと考えております。その際にコピーライト部分を〈address〉～〈/address〉タグで囲み、その部分をページの最下部に表示したいのですがそれが出来ずに悩んでおります。よく『containerの全長（例えば500px）のheightを指定して、main（450px）とfooter(50px)でそれぞれにも高さを指定すればよい』との解答を見かけますが、私が考えるのはもっと単純に『ページの最下部に表示』をしたいのです。例えばテーブルタグを使えば【vertical-align: bottom】で簡単に実践できますがこの表現方法はスマートとは言えません。過去ログを検索したところ・・・ http://okwave.jp/qa/q2859912.html の質問サイトに私と全く同じ症状に悩み、解決した方への回答があるのですが、解答と同様に私のサイトにタグを適用しても解決出来ず困っております。【index.html】（--ページヘッダは省略--） <title>タイトル</title> <link rel="stylesheet" type="text/css" href="style.css" /> <style type="text/css"> </style> </head> <body> <div id="container"> <div id ="header"> <h1>こんにちは</h1> </div> <ul> <li><a href="index.html">top</a></li> <li><a href="schedule.html">schedule</a></li> </ul> <div id="main"> <h2>Welcome!!</h2> </div> <address>Copyright©</address> </div> </body> </html> 【style.css】 @charset "utf-8";body , html { height: 100%;} body {color: #444444;} div#container {border: solid 2px #aaaaaa; padding: 20px; width: 500px; height: 100%; background-color: #ffffff; margin-left: auto; margin-right: auto} div#header {background-color: #111111; padding: 5px 20px;} h1 {font-size: 1.25em; font-family: Verdana, Helvetica, sans-serif; color: #66aa66} h2 {font-size: 1em; padding-left: 20px; padding-bottom: 3px; maragin-bottom: 10px; border-bottom: solid 2px #999999; background-image: url(freeback65.gif); background-repeat: no-repeat} ul {list-style-type: none; margin-left:0; background-color: #888888; padding-left:0; padding:3px 20px} li {display: inline; padding-right: 10px; color: #ffffff} li a {text-decoration: none; color:#ffffff} li a:hover {background-color:#bbbbbb} p {font-size: 0.75em; padding-left:10px} address {font-size: 0.625em; font-weight: bold; font-style: normal; color: #2d444f; text-align: center; text-valign: bottom;} この状態でwebで見ますと、肝心のアドレス部分は#container内の <p>タグの直下に表示されます。私の希望としましてはcontainer内の一番下に表示されるのが理想です。ご教授よろしくお願いいたします。

css、liを「display:inline;」で横に並べたら“上下”に隙間が空いてしまいます。

苦しんでいます。宜しくお力をお貸し下さい。　以下のように、cssでリストを横に並べたら、liの上下に隙間が出来てしまいます。試しに、全てのmarginとpaddingに0を当てても改善されません。　よく言われる横方向に出来る隙間は理由が分かっていて、あえて間隔を空けているのですが、上下方向の隙間を無くしたいと思っています。　IE6では上下の隙間は空きませんでした。Ff2とNN7での問題なので、私の記述がおかしいのだと思うのですが、宜しくご指摘お願い致します。 <!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> <title>test</title> <style type="text/css"> /* ページ全体 */ * { margin: 0px; padding: 0px;} body { background-color: powderblue;} /* ロアナビゲーション */ div#lowernavigation { width: 700px; clear: both; background-color: white; border-top: solid 1px mediumpurple;} div#lowernavigation ul { text-align: center; background-color: red;} div#lowernavigation li { font-size: x-small; list-style-type: none; line-height: 0.5em; display: inline; margin: 0px 3px; background-color: orange;} div#lowernavigation a { color: mediumpurple; text-decoration: none;} </style> </head> <body> <div id="lowernavigation"> <ul> <li><a href="link1.html" title="link1">link1</a></li> <li><a href="link2.html" title="link2">link2</a></li> <li><a href="link3.html" title="link3">link3</a></li> <li><a href="link4.html" title="link4">link4</a></li> <li><a href="link5.html" title="link5">link5</a></li> <li><a href="link6.html" title="link6">link6</a></li> <li><a href="link7.html" title="link7">link7</a></li> <li><a href="link8.html" title="link8">link8</a></li> <li><a href="link9.html" title="link9">link9</a></li> <li><a href="link10.html" title="link10">link10</a></li> <li><a href="link11.html" title="link11">link11</a></li> </ul> </div> </body> </html>

ヘッダー部分に背景色をつける。

森の工房について　季節のイベント　お問い合わせ　ブログ、の部分について背景色をつけたいのですがどうもうまくついていません。ちなみに僕が書いたhtmlを書いておきます。誤りがありましたらご指摘お願いいたします。 <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transititional//EN""http://www.w3.org/TR/xhtml1/DTD xhtml1-transitional.dtd"> <html xmlns="http://www.w3g.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" Content="text/html;charset=utf-8"> <title>森の工房[Forest Studio]-森の工房について</title> <style type="text/css"> body {color:#444444; background-color:#66aa66} div#container {border:solid 2px #bbffaa; padding:20px; background-color:#ffffff} div#header {background-color:#66aa66} div#header p {color:#222222} h1 {font-size:1.25em; font-family:Verdana,Helvetica,sans-serif; color:#ffffff} p {font-size:0.75em; line-height:1.4} address {font-size:0.75em; font-style:normal} li {text-decoration:none} h2 {font-size:1em; border-left:solid 16px #66aa66; padding-left:5px} h3 {dont-size:0.875em; border-bottom:solid 2px #66aa66; padding-bottom:3px} a {color:#33aa88} a: {hover:#88aaff} address a:hover {color:#ffaa00} ul {list-style-type:none; margin-left:0; padding-left:0; back-ground-color:#bbffaa; padding:3px 20px} li {display:inline; padding-right:10px; font-size:0.75em} li a {text-decoration:none} </style> </head> <body> <div id="container"> <div id="header"> <h1>Forest Studio</h1> <p>自然のあれこれをお届けする森の工房です</p> </div> <ul> <li><a href="about.html">森の工房について</a></li> <li><a href="event.html">季節のイベント</a></li> <li><a href="contact.html">お問い合わせ</a></li> <li><a href="http://.xxx.xxx/">ブログ</a></li> </ul> <h2>森の工房について</h2> <p>Forest Studioでは、自然の中にある「森の工房」を運営しています。森の工房では、四季を通してイベントを開催したり、さまざまな商品の開発を行っています。 </p> <h3>森の中にある工房</h3>

ホームページの質問です。

ホームページの質問です。 50音表を作りたいのですが、こんな感じのタグで大丈夫でしょうか？ちょっと自信ありません。 <!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="iti"> <p>あ行</p> </div> <div class="ni"> <ul> <li>あ</li> <li>い</li> <li>う</li> </ul> </div> <div id="iti">か行 </div> <div class="ni"> <ul> <li>か</li> <li>き</li> <li>く</li> </ul> </div> </body> </html> 問題点等ありましたら、指摘願います。また、修正点があれば教えてください。

CSS+HTMLだけで画像を使わず、角丸タブメニューを作りたい

職場でネットショップのWEB管理をしているものですが、サイト上のヘッダーに画像を使わずCSS+HTMLだけで角丸タブメニューっぽいものを作りたいのですが、なんせCSS初心のためどこをどう指定すれば画像なしの角丸タブメニューっぽくなるのかわかりません。できたら各メニューの下段にもサブメニューリンクを追加したいのですが・・・どうか良きアドバイスよろしくお願いします。感じとしてはここのサイトっぽいタブメニューができればと・・・ CSS <style type="text/css">  </style> HTML <div id="demo-container"> <ul id="simple-menu"> <li><a href="#" title="MENU1" class="current">MENU1</a></li> <li><a href="#" title="MENU2">MENU2</a></li> <li><a href="#" title="MENU3">MENU3</a></li> <li><a href="#" title="MENU4">NENU4</a></li> <li><a href="#" title="NENU5">NENU5</a></li> <li><a href="#" title="NENU6">NENU6</a></li> </ul> </div>

<div>と<div>の間の１０px程の隙間が消えなくて困っています。Firefox＆safari

はじめまして。現在movabletype3.35で初めてサイトを作成している者です。宜しくお願いします。下記にありますＨＴＭＬとＣＳＳでページを作っているのですが、 Firefoxやsafariで確認すると、 <div id="pankuzu">で囲んだボックスと、そのすぐ下に持ってきている <div id="introduction">で囲んだボックスの間に１０px程の隙間が出来てしまいます。 ※ＩＥ７では隙間は出来ませんでした。 <div id="keyvisual">　←　※<div id="pankuzu">のすぐ上のボックス <div id="pankuzu"> <div id="introduction"> これら３つのボックスには全てＣＳＳでmarginとpaddingを調整しているつもりなのですが、どうしてもＩＥ７と同じように表示されず隙間が出来てしまいます。。ちなみに、試しに一度<div id="pankuzu">のボックスをまるまる削除して表示した所、<div id="introduction">のmargin-topに0pxと指定しているのにかかわらず、この場合も10px程の隙間が出来ました。。ということは、<div id="introduction">の中のＨＴＭＬかＣＳＳの書き方か指定に何か問題があるのかと思っているのですが、どうしても解決できません。是非ご指導、ご鞭撻宜しくお願い致します。 ---------------------------------------------------------------- 【ＣＳＳ】 * { margin: 0; padding: 0; border: 0; background-color:transparent; color: #333; font-size: 100%; font-weight: normal; font-style: normal; text-decoration: none; } div#keyvisual { width: 780px; height: 100px; margin: 10px 10px 0 10px; padding: 0; background: url("※※※.gif") no-repeat 0 0; } div#title { width: 500px; height: 50px; line-height: 350%; margin: 0 0 0 10px; padding: 0; } div#pankuzu { width: 780px; height: 20px; margin: 0 10px 0 10px; padding: 0; background-color: #999; } div#pankuzu p { font-size: 50%; } div#introduction { width: 780px; height: 50px; margin: 0 10px 0 10px; padding: 0; background-color: #999; } dl#site { margin: 0; padding: 0; } dl#site dt { display: block; float: left; clear: left; width: 160px; margin: 15px 5px 10px 5px; padding: 0; font-size: 90%; text-align: left; background-color: #fff; } dl#site dd { width: 600px; margin: 15px 5px 10px 5px; padding: 0; font-size: 80%; text-align: left; } --------------------------------------------------------------- 【ＨＴＭＬ】 <!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" id="sixapart-standard"> ※ヘッダー部分は省略しています。  <body> <div id="container"> <div id="keyvisual"> <div id="title"> <h1><a href="<$MTBlogURL encode_html="1"$>" title"<$MTBlogName$>"><$MTBlogName$></a></h1> </div> </div>  <div id="pankuzu"> <p class="navi-link"><a href="<$MTBlogURL$>">TOPページ</a>><MTParentCategories glue=">" exclude_current="1"><MTIfNonZero tag="MTCategoryCount"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryDescription$></a><MTElse><$MTCategoryDescription$></MTElse></MTIfNonZero></MTParentCategories><MTHasParentCategory>></MTHasParentCategory><$MTCategoryDescription$> </p> </div> <div id="introduction"> <dl id="site"><dt>題名</dt><dd>説明</dd></dl> </div> ----------------------------------------------------------------

<div>でレイアウトすると上下に空白が出る

現在cssを独学で勉強中です。どなたか解るか方、教えてください。 <div>の中にまた<div>でBOXをつくりcssでは"float"を使ってレイアウトしようとしています。下記の内容でHTMLとcssを記述していますが、入れ子にした<div>要素の上下に20pxくらいの空欄ができます。これを出ないようにする方法はありますでしょうか？というか、記述としては合っているのでしょうか？一応いろんなサイトを参考にして記述してはいます。また、IEとfirefoxでは空欄の出方が違います。たぶんIEのバグなんでしょうが、対処の方法も含めて教えていただけるとありがたいのですが... 空欄は"margin-top"を「-20px」とかにするとなくなるのですが今度はSafariでその分要素自体が小さくなってしまいます。宜しくお願いします。 ---HTML（一応DTDの部分から載せておきます）--------- <?xml version="1.0" encoding="Shift_JIS"?> <!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> <link rel="stylesheet" type="text/css" href="test3.css" /> <title></title> </head> <body> <div id="container"> 　<div id="boxA"> 　A（ヘッダ）　</div> 　<div id="wrapper"> 　　<div id="boxB"> 　　B（メインカラム）　　</div> 　　<div id="boxC"> 　　C（サイドバー1）　　</div> 　</div> 　<div id="boxD"> 　D（サイドバー2）　</div> 　<div id="boxE"> 　E（フッタ）　</div> </div> </body> </html> ---　css　----------------------- body { text-align:center; margin-top: 0px; } #container { width:800px; height: 800px; margin-top: 0px; margin-left:auto; margin-right:auto; text-align:left; background-color: #33FF66; } #boxA { width:100%; height: 150px; background-color: #9999CC; } #wrapper { width:620px; height: 200px; float:right; background-color: #33CC00; } #boxB { width:440px; height: 200px; float:left; background-color: #999933; } #boxC { width:180px; height: 200px; float:left; background-color: #FF9966; } #boxD { width:180px; height: 200px; float:right; background-color: #996699; } #boxE { width:100%; height: 150px; clear:right; background-color: #33CCCC; }

CSS　〈address〉タグで囲んだ部分を最下部に表示したい

CSS　〈address〉タグで囲んだ部分を最下部に表示したいお世話になっております。 CSSでサイトを構築しようと考えております。その際にコピーライト部分を〈address〉～〈/address〉タグで囲み、その部分をページの最下部に表示したいのですがそれが出来ずに悩んでおります。よく『containerの全長（例えば500px）のheightを指定して、main（450px）とfooter(50px)でそれぞれにも高さを指定すればよい』との解答を見かけますが、私が考えるのはもっと単純に『ページの最下部に表示』をしたいのです。例えばテーブルタグを使えば【vertical-align: bottom】で簡単に実践できますがこの表現方法はスマートとは言えません。過去ログを検索したところ・・・ http://okwave.jp/qa/q2859912.html の質問サイトに私と全く同じ症状に悩み、解決した方への回答があるのですが、解答と同様に私のサイトにタグを適用しても解決出来ず困っております。【index.html】（--ページヘッダは省略--） <title>タイトル</title> <link rel="stylesheet" type="text/css" href="style.css" /> <style type="text/css"> </style> </head> <body> <div id="container"> <div id ="header"> <h1>こんにちは</h1> </div> <ul> <li><a href="index.html">top</a></li> <li><a href="schedule.html">schedule</a></li> </ul> <div id="main"> <h2>Welcome!!</h2> </div> <address>Copyright©</address> </div> </body> </html> 【style.css】 @charset "utf-8";body , html { height: 100%;} body {color: #444444;} div#container {border: solid 2px #aaaaaa; padding: 20px; width: 500px; height: 100%; background-color: #ffffff; margin-left: auto; margin-right: auto} div#header {background-color: #111111; padding: 5px 20px;} h1 {font-size: 1.25em; font-family: Verdana, Helvetica, sans-serif; color: #66aa66} h2 {font-size: 1em; padding-left: 20px; padding-bottom: 3px; maragin-bottom: 10px; border-bottom: solid 2px #999999; background-image: url(freeback65.gif); background-repeat: no-repeat} ul {list-style-type: none; margin-left:0; background-color: #888888; padding-left:0; padding:3px 20px} li {display: inline; padding-right: 10px; color: #ffffff} li a {text-decoration: none; color:#ffffff} li a:hover {background-color:#bbbbbb} p {font-size: 0.75em; padding-left:10px} address {font-size: 0.625em; font-style: normal; color: #2d444f; text-align: center; text-valign: bottom;} この状態でwebで見ますと、肝心のアドレス部分は#container内の <p>タグの直下に表示されます。私の希望としましてはcontainer内の一番下に表示されるのが理想です。ご教授よろしくお願いいたします（タイトルミスで間違えてマルチ投稿になっちゃいました）

画像の貼り方教えてほしいです

みんなの回答

お礼 2009/11/10 23:10

関連するQ&A

CSS #containerについて

インラインフレーム、ｃｓｓの質問です。

CSSで画像１枚によるロールオーバー

わたしはメモ帳でホームページをつくったのですがどうしても画像の上にマウ

CSSのリスト表示

IE6でli間に出来る隙間を無くす方法について

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

スタイルシート・・・borderが適用されない

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

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

CSSの外部参照について。

positionの設定の仕方について

お世話になっております。

css、liを「display:inline;」で横に並べたら“上下”に隙間が空いてしまいます。

ヘッダー部分に背景色をつける。

ホームページの質問です。

CSS+HTMLだけで画像を使わず、角丸タブメニューを作りたい

<div>と<div>の間の１０px程の隙間が消えなくて困っています。Firefox＆safari

<div>でレイアウトすると上下に空白が出る

CSS　〈address〉タグで囲んだ部分を最下部に表示したい

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

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

画像の貼り方教えてほしいです

みんなの回答

お礼 2009/11/10 23:10

関連するQ&A

CSS #containerについて

インラインフレーム、ｃｓｓの質問です。

CSSで画像１枚によるロールオーバー

わたしはメモ帳でホームページをつくったのですがどうしても画像の上にマウ

CSSのリスト表示

IE6でli間に出来る隙間を無くす方法について

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

スタイルシート・・・borderが適用されない

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

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

CSSの外部参照について。

positionの設定の仕方について

お世話になっております。

css、liを「display:inline;」で横に並べたら“上下”に隙間が空いてしまいます。

ヘッダー部分に背景色をつける。

ホームページの質問です。

CSS+HTMLだけで画像を使わず、角丸タブメニューを作りたい

<div>と<div>の間の１０px程の隙間が消えなくて困っています。Firefox＆safari

<div>でレイアウトすると上下に空白が出る

CSS 〈address〉タグで囲んだ部分を最下部に表示したい

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

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

CSS　〈address〉タグで囲んだ部分を最下部に表示したい

カテゴリ
一覧

専門家に質問してみよう
専門家登録