☆最新記事

2004年02月29日

CSS変更履歴:タイトルを画像にして右側に表示したい

 HOMEブログについて(CSSなど・・) ⇒ この記事

タイトルを画像にしてみたかった!!

ありふれた生活さんの[タイトルを画像にしてみる」を参考にさせてもらいました!
設置方法かなりわかりやすかったです・

私は右側に表示したかったのでちょっと変更。
style.cssの中で「position」とかかれている箇所を探してながめてみることに。


バナーを右側で表示したかったので、次の赤字部を「LEFT」から「RIGHT」に変更してみた。

(#banner)
position:absolute;right:600px;top:5px;

でもブラウザに対して一番右に表示されてしまって失敗。


なのでサイドメニューに合わせてみることに。
次の赤字部を確認。

(#links)
position:absolute;left:590px;top:130px;

でそのまま「590px」を入れたらちょっとずれたので「600px」にしました。



そういえば、h1のタイトル文字、なくそうかと思ったけど迷ったので、
文字のポイントを2px固定にして画像に忍び込ませました。
良く見たら見えちゃうけど、0型の私としてはコレでOK
カウンターも被ってるから、画像と合うカウンター画像と入れ替えようかな。

★結果、変えたとこを記録。

h1 {
margin-top:0px;
padding-top:0px;
font-weight:bolder;
font-size:2px;
padding: 0px;
}

h1 a{
 width:200px;
 height:120px;
color:#333333;
text-decoration: none;
font-family:sans-serif;
font-weight:bolder;
}

#banner {

 width:210px;
 height:120px;
 background-image:url("xxx.jpg");
position:absolute;left:600px;top:5px;
background-repeat: no-repeat;

}

#links {
font-weight:normal;
margin-left: 10px;
position:absolute;left:590px;top:130px;
width:220px;
}

posted by アウラ at 15:39 | Comment(0) | TrackBack(1) | ブログについて(CSSなど・・)
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:



この記事へのTrackBack URL


デザイン考案中
Excerpt: バナー部分を変更して画像にリンクを貼ってみようと思ったら失敗しましたー。でも、いろいろと参考にさせていただきました。感謝!
Weblog: Another Fulcrum
Tracked: 2004-04-20 13:41