超超初心者のころナビで困ったこと色々思い出してみた

最初のころは理解に苦しんだul li の横並び(float)などなどは、自分としてはとても混乱したところかな、と思います。
例えば、横並びにはなったけど、高さ(height)が反映されないよー!とか。

今回は、ナビゲーションを2つご紹介します。 “超超初心者のころナビで困ったこと色々思い出してみた” の続きを読む

関連記事 (YARPP) で、タイトルとイベント開催日を表示したい!

とあるサイトで関連記事を表示させたくって、WordPressのプラグインYet Another Related Posts Plugin(YARPP)にお世話になっています。

イベントのまとめサイト的なもので、記事のタイトルをイベント名にしており、カスタムフィールドに開催日、としていました。
イベントは一日だけのものと、複数日のものがありますので、開始日と、終了日を入れるという方式にしています。

そんな前提で、今回やりたいこと。

イベント名と開催日を、関連記事として表示させたい!

“関連記事 (YARPP) で、タイトルとイベント開催日を表示したい!” の続きを読む

:nth-childでaタグにCSSでボタン実装したいんですが反映されません

ナビゲーションの実装。
こんなタグでナビゲーションを作ってみました。

<ul class="nav">
	<li><a href="#">浜寺公園</a></li>
	<li><a href="#">大山公園</a></li>
	<li><a href="#">大泉緑地</a></li>
	<li><a href="#">大浜公園</a></li>
</ul>

これを横並びにfloatして背景画像をあてたい!
めちゃくちゃ初歩的なことだっただろうと思うのですが、
私はちょっと勘違いしておりハマりましたので、書いておきます。

条件は、liにidなどを付けずに、疑似クラス「:nth-child」を使ってそのナビゲーションを実装するということでした。
:nth-childについては下記のページを参考にさせていただいた。
http://weboook.blog22.fc2.com/blog-entry-285.html

ここで見ながら気楽に書いてた。
「.nav li a」に「:nth-child」をつけて、
.nav li a:nth-child(2)
にCSSを指定してゆけばよいのだと思っていました。
大間違い!!
a:nth-childじゃ動いてくれなかった!!!!

試行錯誤の結果・・・・・下記のような感じで使わなければならないのでした・・・・・
li:nth-child(2) a です!

.nav li:nth-child(2) a {
float: left;
background-image: url(../images/nav.png);
display: block;
height: 40px;
text-indent: -999999px;
width: 166px;
background-position: -255px 0px;
}

最近気になっている本