Ads by Google

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

その4〜左サイドバーを整頓〜

おはようございます。
昨年とはうってかわって「朝起き+弁当作る+勉強」が
できています。
なかなかいいスタートの2005年、びおびおです。

今日は左サイドバーを、整頓しました。
[CSS]
#left {
position:absolute;  ←これがよくわかりませぬ。。
top:110px;     
left:55px; ←  ←  ←ずいぶん左に離れてたので
margin-top: 15px;    呼び戻しました。
width: 200px;
background-color: #;
height: auto; /* temp */ ←200pxだったのをautoに。
font-size:75%;     ←80%だったのを小さく。
text-align:left;     ←センターにきてたので左揃えに。
padding:5px;     ←ちょっと疑問が。。
border:1px solid #666;
}

ul.olを使うと左端が空くのがいやなので、
はずしてみました。
[HTML]
<div class="info"> <!--インフォ-->
<%author_name>のblog<br>
<%introduction2><br>
<a href="<%url>?xml">RSS</a><br>
<%ad><%ad2>
</div>  ←<li></li>もはずして<br>を入れてみた。


<h3>びおのエントリーたち</h3>
<div>
<!--recent--> <!--最近の記事一覧-->
<li><a href="<%recent_link>"
title="<%recent_body>"><%recent_title></a>
<span>(<%recent_month>/<%recent_day>)</li>
<!--/recent-->
</div>   ←<li></li>は残してみた。

[?] <li></li>って単独で使ってもいいのかなあ。

[メモ]
div 一段落、前後に空きがない。
p  一段落、前後に空きがある。(文章中に使うといいね)


[?] 
relative→標準表示位置からの相対位置で配置
absolute→親要素に対する絶対位置で配置
探してきました「absolute は、relative または absolute を
指定した親要素(無ければページ)の左上を原点とします」

わからないです。。頭がわかってくれないです。
今日一日、考えてみます。

[?]
昨日marginとpaddingのくらべっこして、理解したと
思ってるんですが、左サイドにpaddingを5px以上入れると
右に幅がのびて、センターにかかってしまいます。
なんでだろう。。

今日は、やってるうちにいろいろ[?]が出てきたので
いろいろ、調べたりします。
次回の〜右サイドの整頓〜はちょっと先になるかな。。
亀の歩みは、力強く!(なんですか。それ)

では。よい一日を!ね。びおびおくん。
<<途中経過〜ただいま、考え中〜 | ホーム | 試してみる〜marginとpadding〜>>

Thanks Comment !

  

relative と abusolute

relative は直前の囲みタグに対して相対的に、 absolute (上、スペル間違っています)は直前の relative からの絶対位置に表示…と文章にするとカンタンですが、結構厄介。

ムズかしいと思うので、結論から。左右のサイドバーが離れてしまっているのは、sidebar が center の外側に書かれているから。つまり、banner -> center -> sidebar という順に書かれており、かつ、sidebar のひとつ外側はなに?となったときに、body がその外側にあるから、ということに。

図にすると
body
+- banner
|
+- center
| +- contents
|
+- sidebar

となっているのを
body
+- banner
|
+- center
| +- contents
| |
| +- sidebar
|
+- ...
とすれば直ります。
つまり、sidebar の外側にあるくくりが body なので、「relative がない場合等は、ページの原点を基準とする」 というルールに従って、左上から表示している、ということになります。故に、sidebar に absolute や relative をつけても、位置が変わらない…という現象がおきます。

center に relative をつけて、その内側に sidebar を入れるとどうなるでしょう?
sidebar のすぐ外側が center になるので、center の左上を基準として、絶対位置で表示、ということになります。

#left {
position:absolute;
top:110px;
left:5px; ←左端余白分
...
}

と直せば左サイドバーは直ります。右側は次のようにします。
#right {
position: absolute;
top:110px;
right:5px; ←これが大事
...
}
right は、右側の余白になります。

これで center をいくらいじっても、その左右にサイドバーが張り付いた状態になるはずです。
  1. 2005/01/13(Thu) 17:45:36 |
  2. URL |
  3. V.J.Catkick #qbIq4rIg
  4. [ちょと手直し]
  

うう。スペルも間違えてましたです。
たぶん、これ以上ないというくらい
やさしく説いてくださってるお師匠さんのご説明が、
びおのにぶい頭に、入ってこない〜。
じっくり、取り組ませていただきます。

ので、お時間ください。。
むっ。むづかしい。。
  1. 2005/01/13(Thu) 22:16:49 |
  2. URL |
  3. びおびお #-
  4. [ちょと手直し]

comment:
biobioのみ、表示を許可する