当ブログについて | 管理人プロフィール | コンタクト
<スポンサードリンク>

[1日更新]マックでスタイルシート修正の続き

2007.01.30 日記・コラム・つぶやき C(0) TB(0) このエントリーを含む「はてなブックマーク」 この記事を「livedoorクリップ」! 「Yahoo!ブックマーク」に登録

写真午後の大塚でのアポも終わって、今は千石一丁目の交差点のところにあるマックの2階席。天気もいいし、ここ数日運動を怠っているので、少し歩こうかと。

前回、新年会の帰りに歩いたのと同じルート。
写真に写っているのは、白山通りと不忍通りの交差点だ。

2007年の初ウォーキング(池袋~上野)

さて修正作業再開。

Firefoxの表示を見ながら、スタイルシート記述ミスをひとつずつつぶしていく。

1.フッター部分(「このサイトについて」など)がGoogle AdSenseの右に回りこんでしまっている
2.箇条書き部分の左側の余白(マージン?)をなくしたい

この2点だ。
この記事を一度アップして、修正作業を続けようと思う。
 
 
+++
 
 
写真

トップページの構成はこんな感じ。
各ブロック毎のスタイルは、現在こんな風に記述している。


#container {
       width: 800px;
       text-align: left;
       font-size: 12px;
       line-height: 120%;
       padding: 0px 15px 10px 15px;
       margin:0px auto;
}
#topcenter {
       position: relative;
       width: 580px;
       float: left;
}
#topright {
       position: relative;
       width: 160px;
       float: left;
       margin-left: 30px;
}
#footer {
       background: #FFFFCC;
       text-align: center;
}
#copyright {
       text-align: right;
       font-size: 10px;
       color: #999999;
}

コンテンツ部分の全体幅は800ピクセル、両脇の余白が15ピクセルずつで30ピクセル。右側のGoogle AdSense領域が160ピクセルで、そこと580ピクセルある真ん中部分との間に30ピクセルの余白がある。

真ん中部分(#topcenter)は、「position: relative」相対位置、「float: left」左寄せ。
右部分(#topright)も同じだ。

結果、そのふたつにブロックの下に配置したいフッター部分(#footer)も、右側部分の右にさらにまわりこんでしまっている(Firefoxなどで閲覧した場合)。

回り込み解除、「br clear="all"」じゃだめなんだな。
スタイルシートで回り込み指定しているので、スタイルシートでそれを解除する感じがするのだが、どうすればいいのだろう?(これ、前も調べて覚えたのにすっかり度忘れ)

そんな時はGoogle検索。

回り込みの解除を行う - スタイルシート(イーウェブ)

ふむふむ。これでいいのかな?
とりあえずやってみよう。


#footer {
       background: #FFFFCC;
       text-align: center;
       clear: left;
}

回り込みを解除したいのは「#footer」の直前なので、そこに「clear: left;」を加えてみた。

写真

いけた!



コメント





トラックバック
http://app.cocolog-nifty.com/t/trackback/5901/13716853

内容に関連性のある記事からのトラックバックは歓迎です。記事内リンクも特に必要ありません。過去交流のないブログでもまったく問題ありません。ただし「単に部分的なキーワードつながり(関連性が薄すぎ)」「自動で大量トラックバック送信」「自身がトラックバックを受付けていないブログからの一方的なトラックバック」は、削除します。

最新の記事

管理人プロフィール

和田 亜希子

利根川流域に生息するアラフォー独女。ニッチなテーマで小さなサイトを作る「ミニサイト職人」で、主に運営サイトの広告収入で生計たてるようになり早10年経ちました。「パソコン一台携え、旅しながらサイト運営で生計立てる」ベドウィン・モバイラーの夢まであと一歩。大切にしたいのは「好奇心」と「向上心」。うさぎは2011年の干支、ヘビ年バージョンはこちらです。(詳細

Twitter

著書一覧(Amazon)
Yahoo!プロフィール
YouTube動画一覧

AMNパートナーブログ