投稿2016/09/07 03:13
お世話になっております。
今現在古いWebページの移植をしようとしております。
ですがフォント移植がうまく行かないのでご助力頂けないでしょうか？
長々と失礼します。
html
1<!--古い方--> 2<div id="menu"> 3<ul> 4<li><a href="../company/index.html">会社</a></li> 5<li><a href="../product/index.html">製品</a></li> 6<li><a href="../other/index.html">その他</a></li> 7<li><a href="../recruit/index.html">採用</a></li> 8</ul> 9</div>
html
1<!--新しい方--> 2<div id="menu2"> 3<ul id="dropmenu"> 4<li><a href="../company/index.html">会社</a></li> 5<li><a href="../product/index.html">製品</a></li> 6<li><a href="../other/index.html">その他</a></li> 7<li><a href="../recruit/index.html">採用</a></li> 8</ul> 9</div>
上記
会社 製品 その他 採用
のフォントを一緒にしたいと思っております。
DreamWeaverで古い方を見た際に表示されるのは
<body><div#wrap><div#header><div#menu><ul><li><a> ですので関連があると予想される所を貼ります。css
1body { 2 background-color: /*#DEE0E0*/#FFFFFF; 3 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; 4 font-size: 14px ; 5} 6 7#wrap { 8 width: 940px; 9 margin: 0 auto; 10 background-color:#FFF; 11 overflow : hidden; 12} 13 14#header { 15 position: relative; 16 height: 100px; 17} 18 19#menu { 20 position: absolute; 21 top: 60px; 22 background-image: url(../img/common/menu-bk.png); 23 background-repeat: repeat-x; 24} 25 26#menu li { 27 float: left; 28 background-repeat: no-repeat; 29 background-image: url(../img/common/menu.png); 30 width: 235px; 31 text-align: center; 32 line-height: 40px; 33 height: 40px; 34 font-size: 16px; 35}
なので
css
1#menu2{ 2 position: absolute; 3 top: 95px; 4 background-image: url(../img/common/menu-bk.png); 5 background-repeat: repeat-x; 6} 7 8#dropmenu { 9 list-style-type: none; 10 width: 940px; 11 margin: 0px auto 64px; */ 12 margin: -40px auto 30px;/*なんか横幅指定?*/ 13 padding: 0; 14 background-image: url(../../img/common/bk.png); 15 font-size: 14px ;*/ 16} 17 18#dropmenu li { 19/*そのままもってきたココから/ 20 float: left; 21 background-repeat: no-repeat; 22 background-image: url(../../img/common/menu.png);// 23 width: 235px; 24 text-align: center; 25 line-height: 40px; 26 height: 40px; 27 font-size: 16px; 28/*そのままもってきたココまで*/ 29 font-size: 16px; 30 position: relative; 31 width: 25%; 32 float: left; 33 margin: 0; 34 padding: 0; 35 text-align: center; 36 font-size:24px; 37} 38 39#dropmenu li a { 40 display: block; 41 margin: 0; 42 padding: 16px 0; 43 color: #fff; 44 font-size: 14px; 45 font-weight: bold; 46 line-height: 1; 47 text-decoration: none; 48 background-image: url(../../img/common/menu.png); 49} 50
としているのですが
会社 製品 その他 採用
のフォントが一緒になりません。
指定方法が違うのでしょうか？
申し訳ないのですがご助力頂けますと嬉しく思います。
回答2件
0
ブラウザの開発者ツールを利用してみてはいかがでしょう。
その要素に適用されているCSSが、ファイル名含め明示されますので、どこの指定が反映されているかはわかると思います。
投稿2016/09/07 05:10
総合スコア5405
0
元のCSSでは、font-familyの指定はbodyにあるだけですが、他の要素で指定しない場合、それが継承されます。
新しい方でもbodyでfont-familyを指定してみてください。
投稿2016/09/07 03:18
総合スコア145184
あなたの回答
tips
プレビュー
Q&A
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。