- ベストアンサー
HTMLとCSSについての疑問
- HTMLとCSSについての疑問
- HTMLとCSSのソースコードで、<div id='back'>の高さがフッターよりも短くなる問題が発生しています。
- ブラウザのバグか、手打ちのタグにミスがある可能性があります。ChromeやSafariなど他のブラウザでも同じ現象が起きるか確認してみてください。
- shingorin
- お礼率38% (10/26)
- その他([技術者向] コンピューター)
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- htmlとcssについてなんですが、どうして理解できない部分があるのでどなたかご享受お願いします。
どうしても理解できないというか納得できないところがあってどうしても個人では解決できなかったのでここに来させていただきました。当方まだ勉強し始めたばかりなので、もしかしたら初歩的な事かもしれませんが、よろしくおねがいします。まずはソースを貼ります。 <body> <div id="back"> <div id="content"> <div id="header"> <!--headerEND--> </div> <div id="navi"> <ul> <li class="navi_current"><a class="tub_size" href="#">test1</a></li> <li class="navi_tub"><a href="#">test2</a></li> <li class="navi_tub"><a href="#">test3</a></li> <li class="navi_tub"><a href="#">test4</a></li> <li class="navi_tub"><a href="#">test5</a></li> <li class="navi_tub"><a href="#">test6</a></li> <li class="navi_tub"><a href="#">test7</a></li> </ul> <!--navitEND--> </div> <div id="sidebar"> <div id="image_head1"> <!--image_headEND--> </div> <div id="image_bottom1"> <!--image_headEND--> </div> <!--sidebarEND--> </div> <div id="main"> <div id="image_head2"> <!--image_headEND--> </div> <div id="image_bottom2"> <!--image_headEND--> </div> <!--mainEND--> </div> <div id="footer"> <!--footerEND--> </div> <!--contentEND--> </div> <!--backEND--> </div> </body> </html> ---------css------- /*スタイルの初期化*/ *{ margin:0; padding:0; } /*メイングループのスタイル*/ body { background:#e5e5e5; } #back{ background-color: #000000; width:1024px; height: 100%; } #content{ width:800px; /*↓仮の高さ*/ height:900px; margin-left:auto; margin-right:auto; /*↓仮の背景色*/ background:#4876FF; } #header{ width:800px; height:240px; /*↓仮の背景色*/ background:transparent; } #navi{ width:800px; height:100px; /*↓仮の背景色*/ background:white; } #sidebar{ width:250px; /*↓仮の高さ*/ height:520px; /*↓仮の背景色*/ background:#FF69B4; clear:both; float:left; } #main{ width:550px; /*↓仮の高さ*/ height:520px; /*↓仮の背景色*/ background:#8B8878; float:right; } #footer{ clear:both; width:800px; height:100px; /*↓仮の背景色*/ background:#FFB90F; } /*sidebarとmainの画像headとbottomのスタイル*/ /*ナビゲーション詳細設定*/ #navi ul{ list-style-type:none; width:798px; height:80px; margin-left:auto; margin-right:auto; /*↓仮の背景色*/ background:red; } #navi ul li{ width:114px; height:70px; /*↓仮の背景色*/ background:blue; float:left; } #navi .navi_current{ width:114px; height:70px; display:block; /*↓仮の背景色*/ background:url("images/tub_current.jpg"); } #navi .navi_current a{ width:114px; height:70px; display:block; text-align:center; text-decoration:none; line-height:2em; font-size:20px; font-weight:bold; color:#fff; /*↓仮の背景色*/ background:url("images/tub_current.jpg"); } #navi .navi_tub a{ width:114px; height:70px; display:block; text-align:center; text-decoration:none; line-height:2em; font-size:20px; font-weight:bold; color:#fff; /*↓仮の背景色*/ background:url("images/tabu_base.jpg"); } #navi .navi_tub a:hover{ width:114px; height:70px; display:block; /*↓仮の背景色*/ background:url("images/tabu_hover.jpg"); } ------------- 以上がソースなんですが、このソースでは<div id="back"></div>の高さが、フッター(id名footerのdiv)よりも短くなってしまいます。heightでフッターよりも長く指定すれば問題ないのですが、ちゃんと入れ子になってるはずですし、何故なのかまったくわからずにこのままではすっきりしません。単なる私のミスなのか、それともブラウザのバグか私自身では解決できませんでした。ちなみにすべてタグは手打ちで、確認したブラウザはfirefox3.5.3です。どなたかよろしくおねがいします。
- ベストアンサー
- HTML
- ジオシティーズにてのサイト作り（html＆CSS）
どうしてもどうしても画像とボタン行が表示されず困っております。 ヤフーにも問い合わせましたが彼らが答えられる範囲では全て 合ってるようでした。。。 やはり私の作った拙いソース・コードに問題が有るのでしょうが。。。 ボタン行だけでも表示させたいので下記にソースを記します。。。 何処に問題アリなのか判る方おりますでしょうか？ ★html★ <div id="btn"> <ul> <li><a href="#" id="home">home</a></li> <li><a href="#" id="live">live</a></li> <li><a href="#" id="access">access</a></li> <li><a href="ticket.html" id="ticket">ticket</a></li> <li><a href="http://www.t-naoko.com/" id="fanclub">fanclub</a></li> </ul> </div> ★CSS★ #container #btn { width: 600px; background-color: #00FF00; height: 30px; } #container #btn li { float: left; width: 120px; } #btn li {float:left; list-style-type:none; } #btn a { text-indent:-9999px; height:30px; width:120px; display:block } #home { background-image: url(image/home.gif); height: 30px; width: 120px; } #home:hover { background-image: url(image/home_over.gif); height: 30px; width: 120px; } #live { background-image: url(image/live.gif); height: 30px; width: 120px; } #live:hover { background-image: url(image/live_over.gif); height: 30px; width: 120px; } #access { background-image: url(image/access.gif); height: 30px; width: 120px; } #access:hover { background-image: url(image/access_over.gif); height: 30px; width: 120px; } #ticket { background-image: url(image/ticket.gif); height: 30px; width: 120px; } #ticket:hover { background-image: url(image/ticket_over.gif); height: 30px; width: 120px; } #fanclub { background-image: url(image/fanclub.gif); height: 30px; width: 120px; } #fanclub:hover { background-image: url(image/fanclub_over.gif); height: 30px; width: 120px; }
- 締切済み
- レンタルサーバ・ASP
- 【CSS】firefoxで背景が表示されない－ナビゲーション（画像置換リンク）
「li」に背景画像を指定して、ナビゲーションをつくってみたところ・・・ Firefox、Operaで表示されません。 （IEでは表示されます。） ヘッダー左にロゴ（これはどのブラウザでも表示される）、右側にナビゲーションを配置した作りです。 ハックなど色々調べてみたのですが、解決できず・・・。 力をお貸しいただけないでしょうか。 g_nav.gif・・・グローバルナビゲーション一枚画像550px×30px。（上部：ロールオーバー前、下部：ロールオーバー時） 【HTML】 <!--headerここから--> <div id="header"> <!--logoここから--> <div id="logo"> <h1><a href="aaa.html">logo</a></h1> </div> <!--logoここまで--> <!--naviここから--> <div id="nav"> <ul> <li id="nav01"><a href="aaa.html">あああ</a></li> <li id="nav02"><a href="aaa.html">あああ</a></li> <li id="nav03"><a href="aaa.html">あああ</a></li> <li id="nav04"><a href="aaa.html">あああ</a></li> <li id="nav05"><a href="aaa.html">あああ</a></li> </ul> </div> <!--naviここまで--> </div> <!--headerここまで--> 【CSS】 #header{ width:800px; height:70px; margin:0 auto; padding:0; } #logo { width:216px; height:70px; background-image:url(../cmn_img/logo.gif); float:left; } #nav{ width:550px; height:30px; float:right; margin:40px 0 0 0; padding:0; text-indent:-999em; } #nav ul{ margin:0; padding:0; list-style-type:none; } #nav li{ display:inline; } #nav li#nav01 a,#nav li#nav02 a,#nav li#nav03 a,#nav li#nav04 a,#nav li#nav05 a,{ display:block; background-image:url(../cmn_img/g_nav.gif); overflow:hidden; float:left; } #nav li#nav01 a{width:110px; height:30px; background-position:0 0;} #nav li#nav02 a{width:110px; height:30px;background-position:-110px 0;} #nav li#nav03 a{width:110px; height:30px;background-position:-220px 0;} #nav li#nav04 a{width:110px; height:30px;background-position:-330px 0;} #nav li#nav05 a{width:110px; height:30px;background-position:-440px 0;} #nav li#nav01 a:hover{width:110px; height:30px;background-position:0 -30px;} #nav li#nav02 a:hover{width:110px; height:30px;background-position:-110px -30px;} #nav li#nav03 a:hover{width:110px; height:30px;background-position:-220px -30px;} #nav li#nav04 a:hover{width:110px; height:30px;background-position:-330px -30px;} #nav li#nav05 a:hover{width:110px; height:30px;background-position:-440px -30px;} 【下記ハック使用】 #header:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #header {display: inline-table;} /* Hides from IE-mac \*/ * html #header {height: 1%;} #header {display: block;} /* End hide from IE-mac */
- 締切済み
- CSS
- CSS ロールオーバーの画像が表示されません
CSSでロールオーバーのメニューを作りましたが、 画像が表示されません…参考書どおりに作っているはずなのですが… どなたかお知恵をお貸しください。 【css】 .menu { width:860px; height:70px; margin-top:5px; } .menu #visamadhi a {background-image:url(navi-aboutvisamadhi.gif);} .menu #kirei a {background-image:url(navi-kireininaritai.gif);} .menu #manabi a {background-image:url(navi-manSabitai.gif);} .menu #shiritai a {background-image:url(navi-jibunshiritai.gif);} .menu #shouhin a {background-image:url(navi-shouhin.gif);} .menu ul { margin:0; padding:0; } .menu li {list-style-type:none; float:left;} .menu li a { display:block; width:160px; line-height:70px; border: 1px solid #D8D1AD; text-indent:-9999px; margin-right:5px; margin-left: 5px; overflow: hidden; } .menu li a:hover {background-position:0px -80px;} 【html】 <div class="menu"> <ul> <li id="#visamadhi"><a href="">Visamadhiとは</a></li> <li id="#kirei"><a href="">きれいになりたい</a></li> <li id="#manabi"><a href="">学びたい</a></li> <li id="#shiritai"><a href="">自分を知りたい</a></li> <li id="#shouhin"><a href="">商品を使いたい</a></li> </ul> </div> 実際に作成したcssを格納しました。 以下URLよりダウンロードしていただけるとありがたいです。 http://firestorage.jp/download/7ebe12eca202b26ce2171225270a8ffe53c820e9
- 締切済み
- HTML
- 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><!-- header --> </div><!-- headerbg --> <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><!-- contens --> <div id="sidebar"> </div><!-- sidebar --> </div><!-- main --> <div id="footerbg"> <div id="footer">Footer</div><!-- footer --> </div><!-- footerbg --> </div><!-- container --> </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%; }
- 締切済み
- CSS
- divの間にすき間ができる
入れ子にされたdivとdivの間で隙間ができて困っております。 構造は<div id="header2">内に企業ロゴイメージ部を<h1>タグで設置し、 入れ子で<div class="headnavi">を入れ、隙間なく<div id="navi"> を表示させるつもりですが、<div id="header2">と<div id="navi">の間に ブラウザで見たときに隙間ができてしまいます。 どうすれば隙間無く表示させることができるでしょうか？ <div style="clear:both"></div>を入れてみては？と言われましたので 入れてみましたが効果はなく困っております。 【html部】 <div id="header2"> <h1><a href="index.html"><img src="images/logo.jpg" alt="" width="270" height="80" border="0" /></a></h1> <div class="headnavi"> <ul> <li id="access"><a href="access/index.html">地図・連絡先</a></li> <li id="inquiry"><a href="inquiry/index.html">お問い合わせ</a></li><li id="sitemap"><a href="#">サイトマップ</a></li> </ul> </div> <div style="clear:both"></div> </div> <div id="navi"> <ul> <li id="aboutus"><a href="about_us/index.html">会社案内</a></li> <li id="works"><a href="works/index.html">業務紹介</a></li> <li id="enviro"><a href="enviroment/index.html">環境方針</a></li> <li id="carrier"><a href="carriers/index.html">採用情報</a></li> </ul> </div> 【スタイルシート】 #header2 { height: 80px; margin-bottom: 0px; padding-bottom: 0px; } #header2 h1 { padding-top: 0px; margin: 0px; float: left; padding-bottom: 0px; padding-left: 14px; } #header2 .headnavi { height: 24px; margin-right: 14px; } #header2 .headnavi ul { padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px; float: right; height: 24px; } #header2 .headnavi li { text-indent: -9999px; display: inline; list-style-type: none; } #header2 .headnavi li a { text-decoration: none; display: block; height: 24px; overflow:hidden; float: left; } /*------off----- */ #header2 .headnavi li#access a { width:124px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; } #header2 .headnavi li#inquiry a { width:125px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -124px 0px; } #header2 .headnavi li#sitemap a { width:121px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -249px 0px; } /*------hover------- */ #header2 .headnavi li#access a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: 0px -24px; } #header2 .headnavi li#inquiry a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -124px -24px; } #header2 .headnavi li#sitemap a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -249px -24px; } <div style="clear:both"></div>
- 締切済み
- レンタルサーバ・ASP
- CSS、width100％でもできる余白
CSSに関する質問です。 上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。 どうすれば中央の背景を横一杯に広げることが出来るでしょうか？ また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。 コードは以下のとおりです。 HTML <html> <head><link rel="stylesheet" type="text/css" href="css.css" /></head> <body> <div id="header"> <div class="centerbox"> <div id="lang"><ul><li>EN</li><li>CZ</li></div> <div id="logo"></div> <div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div> </div> </div> <div id="contents"><div class="centerbox">contents</div></div> <div id="footer"><div class="centerbox">footer</div></div> </body> </html> CSS body{color:white; width:100%;} .centerbox{width:500px; height:100%;} a:hover{background-color:red;} /*base layout*/ #header{width:100%; height:auto; text-align:center; background-color:black;} #lang{text-align:right;} #lang li{list-style:none; display:inline; margin-left:10px} #logo{float:left; width:150px; height:80px; background-color:white;} #menu{text-aign:right; margin-top:50px;} #menu li{list-style:none; display:inline; margin-left:10px} #contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;} #footer{width:100%; height:100px; text-align:center; background-color:black;}
- ベストアンサー
- CSS
- cssスプライト positionが効かない
現在サイトを制作中で、グローバルナビのcssスプライトでつまずいてしまいました。 background-positionがなぜか効きません、、、、。 htmlとcssのチェックをしていただけないでしょうか？？ どなたか親切なかた宜しくお願い致します！！ <div id="gnav"> <ul> <li class="gnav_1"><a href="#"><img src="images/gnav_home.png" width="164" height="60" alt="ホーム" /></a></li> <li class="gnav_2"><a href="#"><img src="images/gnav_intro.png" width="164" height="60" alt="初めての方へ" /></a></li> <li class="gnav_3"><a href="#"><img src="images/gnav_staff.png" width="164" height="60" alt="スタッフ紹介" /></a></li> <li class="gnav_4"><a href="#"><img src="images/gnav_price.png" width="164" height="60" alt="料金" /></a></li> <li class="gnav_5"><a href="#"><img src="images/gnav_access.png" width="164" height="60" alt="アクセス" /></a></li> <li class="gnav_6"><a href="#"><img src="images/gnav_q&a.png" width="164" height="60" alt="よくあるご質問" /></a></li> </ul> </div><!--gnav--> --------------------------------css------------------------------ #gnav { overflow: hidden; } #gnav ul { margin: 24px 0 0 7px ; } #gnav ul li { float: left; width: 164px; height:60px; background: url(images/gnav_on.png) 0 0 no-repeat; } #gnav ul li a { display:block; } .gnav_2 { background-position: -164px 0; } .gnav_3 { background-position: -328px 0; } .gnav_4 { background-position: -492px 0; } .gnav_5 { background-position: -656px 0; } .gnav_6 { background-position: -820px 0 ; } #gnav ul li a:hover img{ visibility:hidden; }
- ベストアンサー
- CSS
- リストを横並びさせた時にできた左端の余白を消したい
いつもお世話になっております。WEBサイト制作でご質問があります。 使用ソフトはDreamweaverCS5.5。個人的に公開するものなので、Chromeのみで確認しています。 リストを横並びにしてナビゲーションを作っているのですが、画像のように左端に余白ができてしまいナビゲーションが改行された状態になってしまいます。 【html】 <div id="hedder"> <ul class="navi"> <li class="top"><a href="#">top</a></li> <li class="about"><a href="#">about</a></li> <li class="profile"><a href="#">profile</a></li> <li class="event"><a href="#">event</a></li> <li class="link"><a href="#">link</a></li> </ul><br clear="all" /> </div> 【CSS】 ul.navi { list-style-type: none; } .navi li { display: inline; float: left; } .navi li a { text-indent: -9999px; display: block; height: 78px; } .navi li.top a { background-image: url(img/btn_top.gif); width: 189px; } .navi li.about a { background-image: url(img/btn_about.gif); width: 190px; } .navi li.profile a { background-image: url(img/btn_profile.gif); width: 189px; } .navi li.event a { background-image: url(img/btn_event.gif); width: 189px; } .navi li.link a { background-image: url(img/btn_link.gif); width: 193px; } <div id="wrapper">で幅950pxの指定をしています。 よろしくお願いします。 （画像の青い四角は意図的にあとから加えた物なので本来のデザインではないものです。）
- ベストアンサー
- CSS
- IEでCSSによる背景画像の高さが伸びる原因は？
2枚の画像で、リンクを行おうとした場合、 div内にh2とulでリンクを行っています。 ところが、高さ（hight）を全てに指定しているにも関わらず、 divが引き伸ばされて、background-imageの不要な部分まで出てきてしまいます。 borderを入れると全体を挟んでいるDIVが何かによって引き伸ばされていますが、なぜIEだと引き伸ばされているのでしょうか？ FIREFOXだと綺麗に表示されます。 <!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> <!-- * { margin:0; padding:0; } h2,ul { text-indent:-9999px; list-style:none; } h2 a { width:175px; height:28px; display:block; } ul a { display:block; width:175px; height:24px; } ul li { padding:0; margin:0; } .float_right { float:right; } .mgn_btm7 { margin-bottom:7px; } div#NAVIBAR { width:175px; margin-top:43px; height:398px; background-image:url(image/test-a.gif); background-repeat:no-repeat; border:1px #FF0000 solid; } h2 a:hover { background-image:url(image/test.gif); background-position:0 0; background-repeat:no-repeat; height:23px; } ul a:hover { background-image:url(image/test.gif); background-repeat:no-repeat; height:23px; } ul a#E:hover { background-position:0 -28px; } ul a#F:hover { background-position:0 -52px; } ul a#G:hover { background-position:0 -76px; } ul a#H:hover { background-position:0 -100px; } ul a#I:hover { background-position:0 -124px; } ul a#J:hover { background-position:0 -155px; } ul a#K:hover { background-position:0 -179px; } ul a#L:hover { background-position:0 -203px; } ul a#M:hover { background-position:0 -227px; } ul a#N:hover { background-position:0 -251px; } ul a#O:hover { background-position:0 -275px; } ul a#P:hover { background-position:0 -299px; } ul a#Q:hover { background-position:0 -323px; } ul a#R:hover { background-position:0 -347px; } ul a#S:hover { background-position:0 -371px; } --> </style> </head> <body> <div id="NAVIBAR" class="float_right"> <h2><a href="#">タイトル</a></h2> <ul class="mgn_btm4"> <li><a href="#" id="E">ああああああ</a></li> <li><a href="#" id="F">いいいいいい</a></li> <li><a href="#" id="G">うううううう</a></li> <li><a href="#" id="H">ええええええ</a></li> <li class="mgn_btm7"><a href="#" id="I">おおおおおおお</a></li> <li><a href="#" id="J">かかかかかか</a></li> <li><a href="#" id="K">きききききき</a></li> <li><a href="#" id="L">くくくくくく</a></li> <li><a href="#" id="M">けけけけけけ</a></li> <li><a href="#" id="N">ここここここ</a></li> <li><a href="#" id="O">ささささささ</a></li> <li><a href="#" id="P">しししししし</a></li> <li><a href="#" id="Q">すすすすすす</a></li> <li><a href="#" id="R">せせせせせせ</a></li> <li><a href="#" id="S">そそそそそそ</a></li> </ul> <hr> </div> </body> </html>
- ベストアンサー
- HTML
お礼
わざわざありがとうございました。カテゴリ違いだったんですね。 初めてだったので、気付きませんでした。 アドバイスの通り、そちらの方で再度質門させていただきましたので、この質問は削除いたします。 親切なアドバイスで大変助かりました。