外部CSSがIEで無反映
- ポートフォリオサイトの外部CSSがInternet Explorerで反映されない問題について
- Web制作初心者が2つのサイトで外部CSSがChromeでは正しく表示されるが、IEでは反映されない問題に直面
- IEでの外部CSSの反映不具合の解決方法を求める
- ベストアンサー
外部CSSがIEで無反映
Web制作初心者です。 ポートフォリオとしてサイトを2つくらい作ったのですが、2つとも Google Chromeで表示確認をしていて、出来上がってから Internet Explorerでも表示確認をしてみたら、IEでは 外部CSSが全く反映されていない状態でした。 何がダメなのか全くわかりません。 お手数ですがご助言お願い致します。 ------------HTML----------------- <!doctype html> <html> <head> <meta charset="text/html; charset=utf-8"> <meta name="descrption" content=""> <meta name="keywords" content=""> <link rel="stylesheet" type="text/style" href="common.css"> <link rel="stylesheet" type="text/style" href="index.css"> <title> Profile-TOP- </title> </head> <body> <div id="wrapper"> <!--*************ヘッダー部分*************--> <div id="header"> <h1>My Profile Site</h1> <!--ナビゲーション部分--> <div class="navi"> <ul> <li class="top">TOP</li> <li><a href="profile.html">Profile</a></li> <li><a href="design.html">Design</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div><!--/navi--> </div><!--/header--> <!--************コンテンツ部分************--> <div id="content"> <a href="profile.html"><img src="images/NY.png" alt="ny"></a> <p class="please">↑<br>Please click the image!</p> <p class="site">当サイトは私のプロフィールやポートフォリオを掲載しています。</p> </div><!--/content--> <!--*************フッター部分*************--> <div id="footer"> <p>Copyright © 2013 nnn All Rights Reserved.</p> </div><!--/fotter--> </div><!--/wrapper--> </body> </html> --------------CSS----------------- -----common----- /*----------body部分---------*/ * { font-family: serif; } body,html { background: url("images/wood_texture4.jpg") ; color: #ffffcc; margin: 0; padding: 0; line-height: 20px; height: 100%; } img { border: none; } /*--------wrapper--------*/ #wrapper { width: 900px; margin: 0 auto; padding: 0; } /*---------header---------*/ #header { background-color: #000000; margin: 0; height: 120px; padding-top: 1px; } h1 { float: left; font-size: 40pt; padding-top: 10px; padding-left: 30px; padding-right: 60px; width: 440px; margin-top: 0; margin-right: 30px; } .navi ul { margin-top: 0; } .navi ul li { list-style-type: none; float: left; width: 80px; margin-top: 28px; margin-right: 2px; padding: 6px 10px; text-align: center; background-color: #151515; font-weight: bold; } a:link { color: #cccccc; text-decoration: none; } a:visited { color: #cccccc; } a:hover { color: #ff6600; } /*------------content---------------*/ #content { background-color: #6e6e3c; clear: left; color: #000000; margin: 0; height: auto; } /*-------footer-------*/ #footer { background-color: #000000; height: 40px; padding: 10px; clear: both; padding-right: 20px; margin-top: 0; margin-bottom: 0; } #footer p { text-align: right; vertical-align: middle; } --------index.css--------- /*content*/ #content img { position: relative; left: 50px; } p { text-align: center; margin-bottom: 0; } .please { color: #ffffff; font-weight: bold; font-size: 15pt; } .site { padding-bottom: 20px; } /*現在のページナビ*/ .top { color: #990000; }
- a09gdh
- お礼率82% (34/41)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
cssのlink typeのところです。 <link rel="stylesheet" type="text/style" href="common.css"> ではなく <link rel="stylesheet" type="text/css" href="common.css">
関連するQ&A
- CSSが悪いんでしょうか？
下記ソースをIE6で見ていただくとわかりますが、ナビ部分にカーソルをもっていくと、footerの背景が伸びたり縮んだりします。 IE6だけでこのような現象が出ています。 ※手元のデータは外部リンクです。 -----ソース----- <!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"> <style type="text/css"> body {background: #EFEFEF;} #wrapper{background: #fff; padding: 0; width: 700px; line-height: 1.4em;} #header{border: 3px solid #333;} #nav{float: left; width: 150px;} #nav ul{margin:0; padding:0; list-style-type:none;} #nav li a{display:block; width:150px; margin:0 0 1px 0; background-color:#CCC;} #nav li a:hover{background-color:#FF9900; color:#000000;} #rightbox{padding:0 5px; width: 140px;} #main{border:4px solid #FF0000; float: right; width: 542px;} #footer{background-color:#CCC; clear: both;} </style> <title>test</title> </head> <body> <div id="wrapper"> <div id="header"> <h1>header</h1> </div> <div id="nav"> <ul> <li><a href="#">nav1</a></li> <li><a href="#">nav2</a></li> <li><a href="#">nav3</a></li> </ul> </div><!-- end nav --> <div id="main"> <h2>main</h2> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> </div><!-- end main --> <div id="footer"> footer </div><!-- end footer --> </div><!-- end wrapper --> </body> </html>
- ベストアンサー
- HTML
- 直接書き込むCSSを外部ファイルに設定したい
CSS初心者です。下記の携帯テンプレートを使ってサイトを作りたいです。 タグに直接書き込むタイプのCSSが多いのですが、 このソースの一部を外部ファイルに設定するには、どういう書き方をしたら良いでしょうか？ 【外部に設定したい項目】 ★タイトル下線のMARGIN-RIGHT: 47% ★真ん中の線(画像位置)BACKGROUND-POSITION: 53% ★一番下線のMARGIN-LEFT: 53%; 外部にしたい理由は携帯とパソコンで見た時にそれぞれ線の位置を変えたいと思って いるからです。出来ますでしょうか？CSSに詳しい方、どうかお願いします(>_<) 【全タグ】 <html> <HEAD> <TITLE>TITLE</TITLE> </HEAD> タイトル <H1 style="PADDING-LEFT: 7px; MARGIN: 0px; PADDING-TOP: 10px; BACKGROUND-COLOR: #ffffff"></H1> <DIV style="BACKGROUND-POSITION: 53% 40%; BACKGROUND-IMAGE: url(http://deai.mokuren.ne.jp/up/src/up3891.gif); BACKGROUND-REPEAT: repeat-y"> <DIV style="BORDER-TOP: #000000 1px solid; MARGIN-RIGHT: 47%"> <P style="PADDING-RIGHT: 0px; PADDING-LEFT: 15px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 7px"></P></DIV> <DIV style="MARGIN-LEFT: 40%; PADDING-TOP: 17px"> <DIV style="WIDTH: 300px; MARGIN-RIGHT: 20px"> <H2 style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 13px; PADDING-BOTTOM: 2px; MARGIN: 0px 0px 3px; PADDING-TOP: 3px; BACKGROUND-COLOR: #000000"> <font color="#ffffff">コンテンツ</font></H2></font> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説２</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">その他</a></div> </DIV></DIV> <DIV style="MARGIN-LEFT: 53%; BORDER-BOTTOM: #000000 1px solid"> <P style="PADDING-RIGHT: 5px; MARGIN: 0px; PADDING-TOP: 17px" align=right></DIV></DIV> <P style="PADDING-RIGHT: 5px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; MARGIN: 0px; PADDING-TOP: 5px" align=right> </HTML>
- 締切済み
- CSS
- HTML・CSSタグの書き方教えてください！
画像では見づらいのですが、HOMEの左側にボーダーがピンク色で表示されています。 このHOMEの左側のボーダーを消したい（又は見えなくする）タグを教えてください。 最初のリンクのところだけグループ化して, CSSに{border-left-style: none;}と加えてみたり、 .menu ul li a .first {border-left: none;}等してみたのですが、 変わらず…。 どういうタグを加えれば、左側のボーダーが見えなくなりますでしょうか？ よろしくお願いいたします。 ＜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"> <meta http-equiv= "content-style-type" content= "text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link href="css/style.css"rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <h1> 作りかけページ </h1> <p>テストページ</p> </div><!-- header終わり --> <div class="menu"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">サービス概要</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">サイトマップ</a></li> </ul> </div><!-- menu終わり --> <div id="main"> <div id="contents"> ***コンテンツ*** </div><!-- contents終わり --> <div id="leftsidebar"> ***左サイドバー*** </div><!-- sidebar終わり --> </div><!-- main終わり --> <div id="rightsidebar"> ***右サイドバー*** </div><!-- sidebar終わり --> <div id="footer"> ***フッター*** </div><!-- footer終わり --> </div><!-- wrapper終わり --> </body> </html> ＜CSS＞ <style type="text/css"> * { margin: 0; padding: 0; } #wrapper{ width: 760px; /*全体の幅（#wrapper）を760pxの固定幅とする。 */ position: absolute;/*絶対位置*/ left: 50%;/*左端から右方向の位置を指定する */ margin-left: -380px;/*はみ出た半分を戻す */ } /*ヘッダー*/ #header{ width: 758px;/*ヘッダー部分の幅（#content）を758pxとする。*/ height: 200px; background-color:#ffd700; background-repeat: no-repeat; background-position: -50px -70px; text-align: right; border: solid 1px gray; } #header h1{ margin: 0; font-size: 30px; padding: 20px 10px 0px 0px; font-family:arial unicode ms; } #header p{ margin: 0; font-size: 1em; padding-right: 10px; margin-top: 8px; } /*ヘッダー終わり*/ /*body*/ /*menu部分*/ .menu {font-size:20px; height:30px; background-color:#0c907c; text-align:center; } .menu ul{ margin: 0; padding: 0; 760px; } .menu ul li{ float: left; list-style: none; margin: 0; padding: 0; } .menu ul li a{ display:block; width: 151.2px; line-height: 30px; border-left: solid 1px #FF3366; color:#ffffff; text-align: center; text-decoration: none; } .menu ul li a:hover{background-color: #99cc00} /*menu部分終わり*/ #contents{ width: 388px;/*コンテンツ部分の幅（#content）を388pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #leftsidebar{ width: 166px; /*左サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: left;/* 左に配置 */ } #main{ width: 574px; float: left;/* 左に配置 */ } #rightsidebar{ width: 166px;/*右サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #footer{ width:760px; background-color:#FF3366; clear: both;/* float解除 */ height: 50px; }
- ベストアンサー
- HTML
- CSSが正確に反映されません。
４つの枠を丸で囲み、かつそれぞれの枠を等間隔で空けたいと思います 丁度以下の2つを表示した場合の、contentsとmainの間の間隔が理想的です。 しかし書いたCSSの設定が正確に反映されません。 headerとfooterもこの大きさで広げたいと思うのですが、広がりません。 また、なぜheaderは丸くならず、footerはサイズからはみ出すのでしょうか。 背景を赤に設定しているのですが、それも反映されません。 なぜこうなるのかどなたかご存知の方、ご指摘いただけると助かります。 どうかよろしくお願いします。 以下、2つのファイルは同じフォルダに保存しました。 dreamweaverのアカデミック版で作り、firefox3.6.13で表示しています。 style.css ---------------------------------------------------------- @charset "utf-8"; /* CSS Document */ <!-- * { margin:0; padding:0; } h1, h2, p { margin: 0 1em; } <!--背景の設定--> 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>
- 締切済み
- CSS
- html、CSS共に初心者です。３段目の２列目の右に、４段目の右の内容
html、CSS共に初心者です。３段目の２列目の右に、４段目の右の内容を持っていきたいのですが、どうしてもうまくいきません！ 解決できる方がいましたら、どうかご教示願います！ <style type="text/css"> <!-- * { padding : 0 ; margin : 0 ; } #wrapper { width : 700px; margin-left : auto ; margin-right : auto ; background-color : #eeffff ; } #header { width : 700px; height : 150px ; background-color : #335555 ; } #navigation { /* background-color : #cceeee ; */ width : 300px; float : left ; } #navigation h2 { width : 150px; background-color : #99bbbb ; } #navigation ul { width : 150px ; } #navigation li { width : 150px ; height : 30px ; } #navigation a { width : 150px ; height : 30px ; background-color : #bbdddd ; display : block ; } #content { background-color : #eeeeee ; width : 350px; float : right ; } #subcontent { width:200 float : left ; clear :both ; } #subcontent h4 { width : 150px; background-color : #99bbbb ; } #subcontent ul { width : 150px ; } #subcontent li { width : 150px ; height : 30px ; } #subcontent a { width : 150px ; height : 30px ; background-color : #bbdddd ; display : block ; } #thirdcontent { background-color : #eeeeee ; width : 500px; float : right ; } #footer { background-color : #335555 ; width : 700px ; clear : both ; } //--> </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>pppppppppppppppppppppppppppp</h1> </div> <div id="navigation"> <h2>pppppppp</h2> <ul> <li><a href="#">pppppppp</a></li> <li><a href="#">pppppppp</a></li> <li><a href="#">pppppp</a></li> <li><a href="#">pppppppp</a></li> </ul> </div> <div id="content"> <h2>welcome to my hp</h2> <br> <h3>ppppppp</h3> <p>ppppppppppp</p> <h3>pppppppp</h3> <br> <p>pppppppp</p> </div> <div id="subcontent"> <h4>この横にカテゴリーを配置させたいのです</h4> <ul> <li><a href="#">pppppppp</a></li> <li><a href="#">pppppppp</a></li> <li><a href="#">pppppppp</a></li> <li><a href="#">ppppppppp</a></li> </ul> </div> <div id="thirdcontent"> <h4>カテゴリー(これを一段上に)</h4> <br> <h5>pppppppppp</h5> <p>ppppppppp</p> <h5>ppppppp</h5> </div> <div id="footer"> <br> </div> </div> </body> </html>
- ベストアンサー
- 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%; } -------------------------------------------------------------------------- 以上が内容になります。 どうかよろしくお願いします。
- ベストアンサー
- HTML
- HTMLやcssに詳しい方教えてください
HTML、cssに詳しい方、助言お願いします。 footerの部分なのですが、footerより上の部分（サイドのナビやメイン部分）にj Query、javascriptを入れる（入れたのはアコーディオン）と、footerの部分がおかしくなります（footerのbackground-colorが一部消えるなど） どなたか、もしおかしい部分があるのでしたら、おかしい部分の指摘をお願いします。xxxはテキストを入れている部分です。 footerのHTML <div class="footercolor clearfix"> <div id="footer"> <div class="footerbox1"> <ul class="footertext1"> <li><a href="../ranking.html">ｘｘｘ</a></li> <li><a href="../area-top/area.html">ｘｘｘ</a></li> </ul></div> <div class="footerbox2"> <ul class="footertext2"> <li><a href="../index.html">ｘｘｘ</a></li> <li><a href="../site.html">ｘｘｘ</a></li> <li><a href="../info.html">ｘｘｘ</a></li> <li><a href="../system.html">ｘｘｘ</a></li> </ul></div> <div class="footerbox3"> <ul class="footertext3"> <li><a href="../inquiry.html">ｘｘｘ</a></li> </ul></div> </div> <address class="copyright">Copyright (C) ｘｘｘ.com 2014 All Rights Reserved.</address> footerのcss .footercolor{ background-color:#FFCC99; } #footer{ width:960px; margin:0 auto; } .footerbox1{ width:320px; float:left; } .footerbox2{ width:320px; float:left; } .footerbox3{ width:320px; float:left; } .footertext1{ text-align:center; margin-top:12px; list-style:none; padding:3px; } .footertext2{ margin-top:12px; list-style:none; padding:3px; text-align:left; margin-left:80px; } .footertext3{ text-align:center; margin-top:12px; list-style:none; padding:3px; margin-left:50px; } .footertext1 a:hover{ filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } .footertext2 a:hover{ filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } .footertext3 a:hover{ filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } .copyright{ clear:both; text-align:center; font-weight:bold; padding-top:50px; padding-bottom:10px; }
- 締切済み
- SEO
- CSSの継承について...
CSSの勉強をしつつ、HPビルダー17を使ってHPの制作しているですが、 前のulタグで使った背景画像がずっと継承されて困っております。 当方の内容です↓ 【CSS記述】 ----------------------- #manu-nanyo{ display: block; position: absolute; background-image: url(fu/area_nanyo.png); background-repeat: no-repeat; background-position: center top; color: black; width: 200px; height: 40px; } .job-menu ul{ display: block; list-style-type: none; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 10px; padding-bottom: 10px; border-right-width: 1px; border-right-style: solid; border-right-color: silver; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: silver; text-decoration: none; } .job-menu li{ margin: 0; padding: 0; background: url(img/migi_aka.png) left no-repeat; } .job-menu a{ display: block; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 14px; color: black; font-size: 15px; text-decoration: none; } .job-menu a:hover{ background-color: rgb(204, 204, 204); color: red; } #newshop_bunner{ frot: left; width: 200px; padding-top: 10px; text-align: left; background-position: top left; } .newshop-banner ul{ margin-top: 20px; margin-left: 0; padding-left: 0; } .newshop-banner li{ text-decoration : none; text-align : right; font-size: 12px; } .newshop-banner a{ margin-top: 0px; padding-top: 5px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; color: blue; font-size: 12px; text-decoration: none; text-align: right; } .newshop-banner a:hover{ background-color: white; color: lime; } ul.sample{ width:100%; margin-top:20px; font-size:10px; padding-left:0; margin-left:0; } ul.sample li{ list-style-position: outside; background-color: transparent; background-repeat: repeat; background-attachment: scroll; background-position: 0% 0%; background-size: auto auto; background-origin: padding-box; background-clip: border-box; padding-top: 3px; padding-right: 10px; padding-bottom: 3px; padding-left: 10px; width: 120px; float: left; border-width: 2px; border-color: rgb(255, 238, 219); border-style: ridge; } .list-test1{ float: left; list-style-type: none; margin-top: 40px; padding-top: 40px; color: orange; } 【HTML記述】 ----------------------- <div id="manu-nanyo"> <div class="job-menu"> <ul> <li><a href="*">野球</a> <li><a href="*">サッカー</a> <li><a href="*">テニス</a> <li><a href="*">ゴルフ</a> <li><a href="*">バスケ</a> </ul> </div> <div id="newshop_bunner"><img src="img/newstore-img.png" alt="新店舗"> <ul class="newshop-banner"> <li><a href="*"><img src="#">店名○○○○○お店ネーム</a> <li><a href="*"><img src="#">店名○○○○○お店ネーム</a> </ul> <ul class="sample"> <li><a href="#">テスト1</a> <li><a href="#">テスト2</a> <li><a href="#">テスト3</a> <li><a href="#">テスト4</a> <li><a href="#">テスト5</a> </ul> <ul class="list-test1"> <li><a href="#">トップページ</a> <li><a href="#">テストページ1</a> <li><a href="#">テストページ2</a> </ul> </div> ----------------------- .job-menu li で使った背景画（矢印）・スタイルが、その後 li を使う度に継承されてしまいます。 クラス名やID名を付けてそれぞれの属性を指定すれば分居ができるのかと色々と試してみたのですが旨くいかず・・・ (ul属性・a属性で分けても継承されてしまいます） 試し過ぎて、もう意味が分からなくなってしまって自分では解決出来そうにないので、初歩的なことで申し訳ありませんが、質問をさせて頂きました。 ネット等で調べた感じでは、「クラスを分けて指定すればulの住み分けが出来る」と判断したのですが、そういうことではないのでしょうか？ それとも根本的な何かを履き違えしているのでしょうか？ 宜しくお願い致しますm(_ _)m
- 締切済み
- デザイナー・クリエイティブ職
- トップページの横幅を画面いっぱいに表示させたい。
トップページの横幅を画面いっぱいに表示させたいのですが、イメージ画像を張り付けた上部は画面いっぱいに表示しますが、下のナビ部分のバックカラーが右に広く白場が出来てしまいます。flotを使っているためなのか…。 色々試してみたのですがどうしてもできません。 よろしくお願いします。 <body> <div class="back_color"> <div class="wrapper"> <p> <img src="images/ｘｘｘ.jpg" width="1200" height="510" ></p> </div><!-- / .wrapper --> </div><!-- / .back_color --> <div class="back_color2"> <div id="nav"> <ul> <li id="top"><a href="index.html"><span>top</span></a></li> <li id="profile"><a href="profile.html"><span>profile</span></a></li> <li id="audition"><a href="audition2.html"><span>audition</span></a></li> <li id="news"><a href="news.html"><span>news</span></a></li> <li id="contact"><a href="mail.html"><span>mail</span></a></li> <li id="link"><a href="link.html"><span>link</span></a></li> </ul> </div><!-- / #nav --> <p style="color:#FFFFFF; font-size:12px; text-align:center; margin-top:60px; ">00000000000000</p> </div><!-- / .back_color2 --> </body> .wrapper { padding: 0px; height: auto; width: 1200px; margin-left:auto; margin-right:auto; } .back_color { background-color: #231a5f; width: 100%; height: 510px; } .back_color2 { background-color: #000000; width: 100%; height:150px; padding-top: 35px; padding-bottom: 35px; border-top-width: 1px; border-top-style: solid; border-top-color: #FFFFFF; margin-left:auto; margin-right:auto; } #nav { width:730px; height:30px; background-color: #000000; margin-left:auto; margin-right:auto; } #nav ul { line-height: 0; } #nav ul li { float: left; border-left-width: 1px; border-left-style: solid; border-left-color: #FFFFFF; } #nav ul li a { display: block; text-decoration: none; width:90px; height:30px; margin-left:15px; margin-right:15px; } #nav ul li a span { position: absolute; width: 0; height: 0; overflow: hidden; }
- 締切済み
- CSS
- cssの質問です。
フッターの文字を白くしたいのですが、なぜか紫になってしまいます。 どうすれば白くなるでしょうか？ 回答のほう、よろしくお願いします。 html <div id="footer"> <ul> <li><a href="yahoo.co.jp">会社概要</a></li> <li><a href="yahoo.co.jp">当社掲載記事</a></li> <li><a href="yahoo.co.jp">環境活動</a></li> <li><a href="yahoo.co.jp">採用情報</a></li> <li><a href="yahoo.co.jp">プライバシーポリシー</a></li> <li><a href="yahoo.co.jp">特定商取引に基づく表示</a></li> <li><a href="yahoo.co.jp">すしおけ</a></li> <li><a href="yahoo.co.jp">当社へのリンク</a></li> <li><a href="yahoo.co.jp">リンク</a></li> <li><a href="yahoo.co.jp">サイトマップ</a></li> <li><a href="yahoo.co.jp">ブログ</a></li> </ul> </div> スタイルシート #footer{ width:900px; height:50px; background-color:orange; padding: 20px; color: white; } #footer ul{ list-style-type: none; margin: 0; padding: 0; font-size: 12px; color: white; } #footer li{ float: left; width: 180px; height: 20px; margin-bottom:5px; margin: 0; color: white; } #footer a:link { color: white; } #footer a:visited { color: purple; } #footer a:hover { color: blue; }
- ベストアンサー
- CSS
お礼
仰る通りでした！ まさか、丸暗記しておかないといけない基礎の基礎部分が違うだなんて思っても見ませんでした（苦笑 大変助かりました！ ありがとうございました！