いくら頑張ってもずれます。。
どこを変更すればよいのでしょうか?
ご指導下さい。
CSSは以下です。
/******************************************/
body{/*全体的な設定*/
margin:0px; /*全体の余白*/
text-align:center;/*センタリングIEバグ回避用*/
background: url(04.jpg) left top repeat-x;/*全体の背景の設定*/
}
/******************************************/
a:link , a:visited , a:hover , a:active{ /*リンクフォントの設定*/
color: #a44; /*リンクの色*/
text-decoration: underline; /*リンク下線の設定。
}
/******************************************/
#baseBlock1{/*コンテンツ全体の設定*/
font-family:Verdana, "Tahoma,Arial,sans-serif,MS Pゴシック",MS UI Gothic, Osaka;/*フォントの設定*/
color:#aaa; /*文字色の設定*/
margin-left:auto; /*センタリングのための左の余白*/
margin-right:auto; /*センタリングのための右の余白*/
width:850px; /*コンテンツ全体の幅*/
text-align:left; /*IEセンタリングバグ回避用。*/
font-size: 0.82em; /*文字サイズ。
文字サイズはInternet Explorerの文字のサイズ-中、Firefoxの文字サイズ-標準サイズに合わせてあります。*/
}
/******************************************/
#title{/*タイトル部分*/
margin-left:10px;
width:1360px; /*タイトル部分の幅*/
height:200px; /*タイトル部分の高さ*/
background:url(01.jpg) no-repeat;/*タイトル部分の背景設定*/
border:1px solid #fff;/*枠線の設定*/
}
/******************************************/
h1{/*タイトル部分のフォント、文字位置の設定*/
font-size:1.3em;/*タイトル文字の大きさ 1emでbaseBlock1のfont-sizeと同じ大きさになります*/
color:#fff; /*タイトル文字の色*/
padding-top:80px;/*文字上側の余白*/
padding-left:50px;/*文字左側の余白*/
margin:0px; /*Firefoxでの余分な余白を削除*/
}
/******************************************/
h2{/*サブタイトル部分の設定*/
color:#fff;/*文字色*/
padding-left:50px;/*左に余白*/
padding-top:0px;/*上に余白*/
padding-right:50px;/*右に余白*/
font-size:1.0em;/*文字サイズ*/
margin:0px;/*余白の設定*/
font-weight:normal;/*文字の太さ*/
}
/******************************************/
#main{/*メインコンテンツ部分の位置設定*/
width: 1078;/*メインコンテンツの幅*/
float: none;/*メインコンテンツ位置設定*/
padding-top: 31px; /*文字上部の余白*/
padding-bottom:30px;/*フッターとの間隔*/
;padding-left: 226px;}
/******************************************/
#maintext{/*IEとfirefoxのズレ対策用*/
padding:30px;/*文字左側の余白。*/
}
/******************************************/
h3{/*見出しの設定*/
border-bottom:1px solid #acf;/*下に枠線*/
border-left:4px solid #acf;/*右に枠線*/
padding-left:4px;/*左に余白*/
font-size:1.1em;/*文字サイズ*/
font-weight:normal;/*文字の太さ*/}
/******************************************/
#menu{/*メニュー部分の設定。*/
width:219px; /*メニューの幅*/
float:left; /*メニュー位置設定*/
font-size:0.9em;/*メニューの文字サイズ*/
text-align:center;/*文字位置の設定
padding-top:30px;/*上に余白*/
}
/******************************************/
#me-top{/*メニュー上部画像用*/
height:34px;/*高さ*/
width:228px;
background:url(02t.jpg) no-repeat;/*背景の設定*/
}
/******************************************/
#me-mid{/*メニュー中部画像用*/
width:224px;
background:url(03.jpg) repeat-y;/*背景の設定*/}
/******************************************/
#me-bot{/*メニュー下部画像用*/
height:32px; /*高さ*/
width:228px;
background:url(04b.jpg) no-repeat;/*背景の設定*/}
/******************************************/
#menutext{/*IEとfirefoxのズレ対策用*/
padding-left:10px;/*左の余白設定*/
}
/******************************************/
.m-title{/*メニュータイトルの設定。*/
height:20px; /*高さ*/
font-size:1.2em; /*テキストサイズ*/
border:1px solid #666; /*枠線の設定*/
color:#aaa; /*テキスト色*/
background:#fff url(05.jpg) no-repeat;
margin-top:0px; /*上部に余白*/
margin-left:10px;/*左に余白*/
margin-right:22px;/*右に余白*/
margin-bottom:5px;/*下に余白*/
}
/******************************************/
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
DOCTYPEスイッチ - Google 検索 (
https://www.google.co.jp/search?q=DOCTYPE%E3%82% … )でIEが標準モードで動作すように、HTMLを見直してください。標準モードでは、ブロックのサイズはpadding辺の内側ですが、互換モードではborder辺になります。などなど・・・
あわせて文法チェックで、DOCTYPEとHTMLの文法があっているかもチェックしておくと良いでしょう。
html,body{margin:0;padding:0;}
body{
font-family:Verdana, "Tahoma,Arial,sans-serif,MS Pゴシック",MS UI Gothic, Osaka;/*継承されるプロパティなのでここ*/
background: url(04.jpg) repeat-x;/*デフォルトで指定されているものは書かない*/
}
a:link{color:blue;}
a:visited{color:maroon;}
a:hover,a:focus{color:red;}
/* ユーザーインターフェースに関わる部分は手をつけないほうが良い*/
以下省略
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
なぜ左に寄っているの?
-
インラインフレームの表示位置...
-
text-alignの解除の方法
-
CSSのtransform: translate(-50...
-
Formタグのブロックの高さについて
-
コードを書いて下さい( ; ; )...
-
<h1>タグの後の行間を詰めたい。
-
複数のDivタグを中央ぞろえ(Dr...
-
アップロードするサーバーによ...
-
WEBデザインで文字の配列がおか...
-
css。横並びBOXに長文textを流...
-
タイトルのみセンタリングさせたい
-
上下マージンの取り方(CSS)
-
【外部CSS】 マージン設定がIE...
-
右寄せ表示方法
-
macとwindowsのレイアウト崩れ...
-
ホームページ 背景二枚重ね ...
-
INPUT TEXT内の文字位置を指定...
-
CSS(スタイルシート)で画像の縦...
-
chromeだけbody直下に空白が開く
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
<h1>タグの後の行間を詰めたい。
-
HTMLフォームのSELECTの幅を一...
-
インラインフレームの表示位置...
-
コードを書いて下さい( ; ; )...
-
端から端まで横線を引きたい
-
INPUT TEXT内の文字位置を指定...
-
なぜ左に寄っているの?
-
FireFoxで見るとブラウザの幅に...
-
iPhone用のサイトの文字がずれ...
-
<legend>で表示されるタイトル...
-
Formタグのブロックの高さについて
-
macとwindowsのレイアウト崩れ...
-
CSSでh1とその下の文字との行間...
-
Dreamweaverで画面サイズを一定...
-
ホームページビルダー 空白の...
-
text-alignの解除の方法
-
パソコンのみで反映される余白...
-
Firefox 横スクロールバーを表...
おすすめ情報