
HP全体を左寄せ配置するCSSの記述について。
CSS付きで中央表示の無料テンプレートを頂きました。
これを左寄せ配置で表示させる方法を教えて下さい。
(base.css)
@charset "Shift_JIS";
/* 基本設定 */
*{
margin:0px;
padding:0px;
font-size:12px;
font-family:Verdana, Helvetica, sans-serif;
}
body{
color:#333;
text-align:center;
}
br{
letter-spacing:normal;
}
a{
color:#333;text-decoration:none;
}
a:hover{
color:#fff;text-decoration:none;
}
img{
border:0px;
}
/* テンプレート */
#temp{
width:500px;
text-align:center;
line-height:18px;
letter-spacing:1px;
margin:10px auto;
}
#header{
background:#fff url(img/cat.gif) no-repeat 0px 0px;
width:500px;height:120px;
text-align:left;
border:1px solid #333;
}
#menu{
background-color:#333;
width:500px;height:24px;
color:#fff;
margin:10px 0px;
border:1px solid #333;
}
#main{
background:#fff;
width:480px;
text-align:left;
padding:10px;
border:1px solid #333;
}
#footer{
background:#fff;
width:500px;height:30px;
color:#333;
line-height:30px;
margin:10px 0px;
border:1px solid #333;
}
/* タイトル部分 */
#header h1{
padding:30px 0px 0px 190px;
}
/* メニュー部分 */
#menu ul{
list-style-type:none;
height:24px;
margin-left:30px;
}
#menu li{
display:inline;
padding:0px
}
#menu a{
color:#fff;
line-height:24px;
float:left;
text-decoration:none;
padding:0px 5px;
}
#menu a:hover{
color:#DB9400;
text-decoration:none;
}
/* メインコンテンツの見出し */
#main h2{
background:url("img/mark.gif") no-repeat;
padding:1px 0px 3px 25px;
color:#DB9400;
よろしくお願いします。
No.1ベストアンサー
- 回答日時:
#temp{
width:500px;
text-align:center;
line-height:18px;
letter-spacing:1px;
margin:10px 0;
}
この部分だけ置き換えてみてください。
No.2
- 回答日時:
上から、
@charset "Shift_JIS";
/* 基本設定 */
*{
margin:0px;
padding:0px;
font-size:12px;
font-family:Verdana, Helvetica, sans-serif;
}
body{
color:#333;
/* ここを削除した */
}
br{
letter-spacing:normal;
}
a{
color:#333;text-decoration:none;
}
a:hover{
color:#fff;text-decoration:none;
}
img{
border:0px;
}
/* テンプレート */
#temp{
width:500px;
text-align:center;
line-height:18px;
letter-spacing:1px;
margin:10px 0; /* ここの auto をゼロにした */
}
/* ~~ 以下変更無しで同じなので省略 ~~ */
text-align:center;を削除したところ
レイアウトが若干崩れてしまいました。
私のPC環境のせいかもしれません。
後は上手くいきました。
回答を頂けたことに感謝しています。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
css初心者 フレックスボックス...
-
cssで「下よせ」ってどうやって...
-
form input テキストを上下中央...
-
背景が下まで表示されないんです。
-
CSSで左に画像、右にテキストを...
-
CSSで3分割した背景画像を配置...
-
横並びリスト ブラウザ縮小 カ...
-
CSSのposition値の上書き(打消...
-
定義リストに下線をつけたいと...
-
【HTML】【CSS】【Swiper】 元...
-
IEだとdivが横に並びません
-
ウェブページの上下に暗幕を表...
-
widthやheightの数値に単位(px...
-
CSS(0の単位)について
-
【CSS】ヘッダーの高さが不明の...
-
画像と一緒にスライドするリン...
-
htmlのolやulなどlistにtitleや...
-
CSSのa:hoverが急に一部だけ効...
-
<li>タグの数が増えすぎたので...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
【CSS】ヘッダーの高さが不明の...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
画像イメージの上下左右、欲し...
-
余分な縦スクロールバーが出て...
-
CSSがなぜかfont-sizeだけ効か...
-
<div>と<div>の間の10px程の...
-
htmlでheightが自動で延長
-
画像リンクの下に文字を付けた...
-
ネガティブマージン
-
table周辺の隙間をなくしたい。
-
入力フォームとセレクトボック...
-
定義リストに下線をつけたいと...
-
ライトボックスでスクロールバー
-
footer を横幅いっぱいに広げる...
-
CSSについて。このサイトの背景...
-
テーブルのセル間に余白が空い...
-
XHTML+CSS で、ブラウザごとに...
おすすめ情報