- ベストアンサー
一部のCSSが効いていない？
- タブ切り替えができるページを作成中ですが、一部のCSSが効かないようです。
- サンプルコードのままでは、最初の画面で全てのタブの情報が表示されてしまいます。
- CSS部分の「#tabs .panel {display:none; clear:both; width:780px; border:1px solid #ccc; padding:10px;}」が効いていないようです。
- rabbit-kimura
- お礼率91% (102/112)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- ｃｓｓでタブの２段重ねの方法を教えてください
当方、ｈｔｍｌ、ｃｓｓ初心者です。javascriptに関しては全くちんぷんかんぷんです。 http://xampp.utun.net/ このようなサンプルがあったのですが、これを改造して、 タブを縦２段でレイアウトしたいのですが、 方法を教えて頂けないでしょうか？ CSSソース ----------------------------------------------------------------------- <style type="text/css"> /* ▼(A)表示領域全体 */ div.tabbox { margin: 0px; padding: 0px; width: 400px; } /* ▼(B)タブ部分 */ p.tabs { margin: 0px; padding: 0px; } p.tabs a { /* ▼(B-2)リンクをタブのように見せる */ display: block; width: 5em; float: left; margin: 0px 1px 0px 0px; padding: 3px; text-align: center; } /* ▼(B-3)各タブの配色 */ p.tabs a.tab1 {background-color: blue;color: #000;} p.tabs a.tab2 { background-color: #aaaa00; color:white;} p.tabs a.tab3 { background-color: red; color: white; } p.tabs a.tab4 { background-color: red; color: white;} background-color: #F00; color: white; } p.tabs a:hover { color: yellow; } /* ▼(C)タブ中身のボックス */ div.tab { /* ▼(C-2)ボックス共通の装飾 */ height: 150px; overflow: auto; clear: left; } /* ▼(C-3)各ボックスの配色 */ div#tab1 { border: 2px solid blue; background-color: #ccffff; } div#tab2 { border: 2px solid #aaaa00; background-color: #ffffcc; } div#tab3 { border: 2px solid red; background-color: #ffcccc; } div#tab4 { border: 2px solid red; background-color: #ffcccc; } div.tab p { margin: 0.5em; } </style> ----------------------------------------------------------------------------- 上記の通りです。 ご指導、ご鞭撻の程を宜しくお願いします。
- 締切済み
- CSS
- Cssで
次のようなHTMLとCssを作成し、見出しを表示しようとしています。 1つ目の見出しと2つ目の見出しは全く違うものにしたいので、2つ目の見出しにはh2にクラス名を指定しています。 しかし2つ目の見出しは1つ目の見出しの属性を引き継いでいるようで、 border-left: 5px solid #0086b9;などは有効になり2つ目の見出しでも左側に線が表示されてしまいます。 1つ目のcssの情報を完全に消した後、2つ目の見出しを表示する方法をご教授下さい。 ▼HTML <h2>見出し２</h2> <h2 class="sample1">見出し２</h2> ■Css h2 { font-size: 145%; margin-top: 10px; margin-bottom: 10px; padding-left: 10px; border-left: 5px solid #0086b9; border-right: 1px solid #0086b9; border-top: 1px solid #0086b9; border-bottom: 1px solid #0086b9; line-height: 1.4; background-color:#F7F7EF; } h2.sample1{ border-right:solid 2px #808080; border-bottom:solid 2px #808080; background-color:#c0c0c0; padding-top:3px;padding-left:3px; width:300px; }
- 締切済み
- HTML
- CSSで文法エラーが出ました
CSS素人です、 CSS Validator検証結果で下記エラーが出ました、IE6・IE7・IE8・firefoxでは表示は崩れませんが 下記エラーを無くしたいのですがどなたかご指導いただけませんでしょうか？ #mnu1 img 文法解析エラーが発生しました @vertical-align:text-bottom; #mnu1 img Parse error - Unrecognized } .td01 文法解析エラーが発生しました @border-width : 1px 1px 1px 1px; 文法解析エラーが発生しました : solid solid solid solid;border-color : #999999 #999999 #999999 #999999;border-width : 1px 1px 1px 1px;} .td01a CSS記述は以下の通りです ul#menu{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; padding: 0px; } ul#menu li{ list-style-type : none; } ul#menu li a{display: block; text-decoration: none; outline: none; } #mnu1 a{ background-image : url(menu/menu1.gif); text-decoration : none; background-repeat : no-repeat; outline: none; display : block; width : 108px; height : 40px; } #mnu1 a:hover{ background-position : left bottom;} #mnu1{ margin-top : 0px; margin-bottom : 0px; } #mnu1 img{border-width : 0px 0px 0px 0px; vertical-align:text-bottom; } .td01{ font-size : 13px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; background-color : #dce6f4; padding-top : 2px; padding-bottom : 2px; padding-left : 2px; border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-color : #999999 #999999 #999999 #999999;border-width : 1px 1px 1px 1px;} .td01a{ font-size : 13px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; background-color : #c1cdde; padding-top : 2px; padding-bottom : 2px; padding-left : 2px; border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-color : #999999 #999999 #999999 #999999;border-width : 1px 1px 1px 1px;} ※ #mnu1 img内の vertical-align:text-bottom;は 縦にメニューを並べているのですが各上下に隙間が入るので vertical-align:text-bottom;を入れたら隙間が無くなったので 使用した次第です。 以上、宜しくお願いします。
- ベストアンサー
- C・C++・C#
- borderの範囲
cssコーディングに関しての質問です。 現在以下のようなスタイルとHTMLを組んでいます。 ==css============ #style1 { width:500px; padding: 15px 0 0 15px; border-left:1px solid #ccc; border-top: 1px solid #ccc; } #style1 p { margin:0; padding:0; } .style2 { float:right; clear:both; margin:0 0 20px 30px; } .style2 img{ margin:0; padding:0; } ==html============ <body> <div id="style1"> <div class="style2"><img src="sample.jpg" width="200" height="200"></div> <div class="style2"><img src="sample.jpg" width="200" height="200"></div> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </body> イメージをfloat:right;に指定し、 縦並びにしたいので、clear:both;を入れた所、 border-left:1px solid #ccc;のborderが文字までは表示されるのですが、 画像の延長上は無くなって表示されてしまいます。 右に画像を配置し borderを伸ばしたい時はどのようにすればよいのでしょうか？ よろしくお願いします！
- ベストアンサー
- HTML
- ＣＳＳを消して表に色を付けたい！！！
参考サイトのソースをそのまま使って編集してたら、表を挿入して、色を付けようとしたら「ＣＳＳが設定されているため・・・」と出て表に色がつけられません。 <!-- BODY { MARGIN-TOP: 3px; COLOR: #000000; BACKGROUND-COLOR: #e6eee6; TEXT-ALIGN: center ;} TABLE { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; WIDTH: 900px; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px ;} TD { FONT-SIZE: 11pt; MARGIN: 0px; WIDTH: 140px; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #48D1CC; TEXT-ALIGN: center ;} DIV { BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; BORDER-LEFT: #999999 1px solid; WIDTH: 900px; BORDER-BOTTOM: #999999 1px solid; BACKGROUND-COLOR: #ffffff ;} .menu { BORDER-RIGHT: #66cc99 0px solid; PADDING-RIGHT: 3px; BORDER-TOP: #66cc99 0px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #66cc99 0px solid; WIDTH: 100%; COLOR: #ffffff; PADDING-TOP: 3px; BORDER-BOTTOM: #66cc99 0px solid; BACKGROUND-COLOR: #1E90FF; TEXT-DECORATION: none ;} .menu:hover { COLOR: #004411; BACKGROUND-COLOR: #FFF8DC ;} .close { BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 11pt; BORDER-LEFT: #ff0000 1px solid; COLOR: #dd0000; BORDER-BOTTOM: #ff0000 1px solid; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none ;} .close:hover { COLOR: #ffffff; BACKGROUND-COLOR: #ff0000 ;} --> １．ＣＳＳを全て解除しなければいけないのですか？ ２．メニューにカーソルをあてたら色が変わるようにしています。表に色をつけるようにするには、どこを削除すればいいのですか？
- 締切済み
- HTML
- CSSを独学中です。が背景の設定がどうしてもうまくいきません。
CSSを使ってwebを作ろうとしている素人です。 header（見出しのロゴなど） main この中にコラムを２つ。左コラムに縦並びメニュー 背景画像あり。 footer（copyright表記など） 色はグレー。 いろいろ参考資料を見ながら、このような構成にしたのですが、 本文(main)のところが、footerと同じグレー１色になってしまい、 予定していた背景画像が表示されません。 とりあえず全体的なレイアウトは何とか大丈夫なようなのですが、 何か原因がお分かりでしたらご教示いただけると幸いです。 おそらく単純なミスなのかもしれませんが。 以下に、cssとhtmlファイルの抜粋を載せておきます。 ------- css ------- body { margin: 0; padding: 0; background-color: #999999; color: #FFFFFF } .header {略} .main { padding: 0px; background-color: #FFFFFF; color: #000000; background-image: url(images/background-check.gif); } .footer{ clear: both; padding: 2px 0 2px 0; border-top: solid 1px #333333; color: #FFFFFF; text-align: center; } p { margin: 0 0 12px 20px; padding: 0; line-height: 130%; color: #000000 } ul { list-style: none; margin: 0; padding: 0; } img { border: none; } /*------ 左の縦メニュー------------ */ .menutate { width: 120px; margin: 0px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } .menutate li a { height: 32px; text-decoration: none; } .menutate li a:link, .menutate li a:visited { color: #FFFFFF; display: block; background: url(images/menutate.gif); padding: 8px 0 0 5px; } .menutate li a:hover, .menutate li #current { color: #990099; background: url(images/menutate.gif) 0 -32px; padding: 8px 0 0 5px; } /*-------- コラム分け---------------- */ .leftcolumn { float: left; width: 120px; } .rightcolumn { float: left; overflow: auto; padding: 0 0 0 20px; } /*----- 本文-------------- */ h1{ padding: 6px 5px 6px 5px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 15px solid #CC0099; background-color: #FFFF99; } h2{ padding: 2px; border-left: 15px solid #CC0099; border-bottom: 1px solid #666666; } ------ html ------ <body> <div class="header"> （略） </div> <!-- メインパート --> <div class="main"> <!-- 左のタテメニュー --> <div class="leftcolumn"> <div class="menutate"> <ul> <li><a id="current" href="index.html">home</a></li> <li><a href="others.html">others</a></li> <li><a href="aboutme.html">about me</a></li> </ul> </div> </div> <!-- 右のコラム --> <div class="rightcolumn"> <h1>いろいろ</h1> <h2>あれこれ</h2> <p>などなど</p> </div> </div> <div class="footer"> Copyright: 2007 xxx. All rights reserved. </div> </body> </html>
- 締切済み
- CSS
- ＣＳＳについて
CSSで下記のように記載すると高さ200pxのボーダ枠の中にaaaaaと記載されるのまでは、よいのですが、上詰めになってしまうのです。高さ200pxの中央に表示させるにはどうしたらよいのでしょうか。 どうぞよろしくお願いいたします。 ▼CSSソース -------------------------- #contents{ border: solid 1px #ccc; margin: 0; padding: 0; width: 500px; height: 200px; text-align: center; } -------------------------- ▼HTMLソース <div id="contents">aaaaa</div> --------------------------
- 締切済み
- CSS
- CSSを使いたいのですが上手くいきません
テーブル型のメニューを マウスオンで背景の色を変えたいのですが… CSSの解説HPを見たのですが、どこの記述に誤りがあるのか 恥ずかしながら分かりません。 お分かりになる方いらっしゃいましたら、ご教授お願い致します。 <html> <head> <meta Http-equiv="content-type" Content="text/html; charset=Shift_JIS"> <title>テスト</title> <style type="text/css"> <!-- container{ width:100px;} container ul{ margin:0; padding:0; list-style:none; border-top:1px solid #666666; border-left:1px solid #666666; font-size:small; line-height:150%; border-right:1px solid #666666;} container ul li{ margin:0; padding:0; display:inline;} container ul li a{ margin:0; padding:5px 0; width:180px; display:block; text-align:center; color:#000000; text-decoration:none; background:#CCCCCC; border-bottom:1px solid #666666;} container a:hover{ color:#FFFFFF; text-decoration:none; background:#666666;} --> </style> </head> <body> <div id="container"> <ul> <li><A Href="01.html" Title="test">test1</A></li> <li><A Href="02.html" Title="test">test2</A></li> </ul> </div> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSのボックスのブラウザごとの解釈の違いについて
見出し（h3）と内容をそれぞれ罫線で囲んだものをCSSで作るため、以下のCSSを作りました。 IEでもFirefoxでも思ったように表示されました。 見出しと内容部分のwidthとborderとpaddingを足した数値を同じにしたので、IEで見出しと内容部分の幅が同じに表示されるのはいいのですが、Firefoxでも幅が同じにに表示されるのはなぜでしょうか？widthだけの幅は違うので、見出し(h3）の方が2px狭く表示されると思ったのですが・・・ そもそもの考え方が間違っているのでしょうか。 ご教授のほど宜しくお願い致します。 h3 { font-size: 13px; padding: 3px 3px 3px 5px; border-top: 1px solid #009933; border-right: 1px solid #009933; border-left: 5px solid #009933; margin: 0px; width: 286px; } p { font-size: 11px; border: 1px solid #009933; margin: 0px; padding: 5px; width: 288px; line-height:130%; }
- 締切済み
- HTML
- display:table;を多段表示させたい
<style> .navi { display:table; } .navi li:nth-child(3n+1) { display:table-row; color:#F00; } .navi li { display:table-cell; width:50%; } /* 色づけ */ * {margin:0;padding:0;list-style:none;} .navi {width:600px;border-top:solid 1px #CCC;border-left:solid 1px #CCC;margin:0 auto;} .navi li {border-right:solid 1px #CCC;border-bottom:solid 1px #CCC;padding:5px;} </style> <ul class="navi"> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>ｆ</li> </ul> こうすると、1,4,7,10…番目の要素が改行されますが、 <li></li>に何も入れないようにしなければならず、 行き詰ってしまいました。 table要素で多段表示させることはできないのでしょうか？
- 締切済み
- CSS
お礼
出来ました!! class設定だったんですね!! 本当に、ありがとうございます!!