- 幅があれば、マージンを指定できる。#containerに幅を指定する。指定することでmargin:o auto;の記述が意味を成す。
- ulも同じ。幅を指定しないと、親要素の幅いっぱいなのか？幅を指定すれば親要素に対して位置を決められる。
- ulで幅を決めると、左右の置き場所を指定しやすい。
- liでは高さを決める。文字要素なので高さはline-heightで指定する。
- display:bolck;したli aで高さを決めるときは、blockレベルの要素なので、heightで指定する。このときにborderをつけると、その分だけ大きくなることに注意。
- CSSスプライトを使う機会はどれ程なのか？いずれにせよ、liで高さを指定、li aでborderを指定するのがいいと思う。
- 下のコードではulに高さを指定していない。だから、上に#containerとの隙間がほしい場合は、paddingで指定する。
- そんなところが気づき。まだ誤解があるような…気がします。
追記 2日後に nv02 を修正
- 左側の三角形も hover した時に色を変えるように修正。三角を見たら hover したくなるだろう…ということです。
- 最初は li の中にインラインで画像を読み込んでいたが、画像も色が変わるとなると根本的な構造を変えることになる。同ポジの乗り替わり。
- まずは、色の違う三角を制作。
- それから背景として画像を読み込む。
#container{
width: 400px;
background: #FFFFFF;
margin: 20px auto;
}
ul{
width: 160px;/*幅を指定すれば,左右の位置が指定できる。指定しなければ親要素の幅になる。*/
margin: 0 auto;}
/*左右の中間においてあげられる！
だけど高さは指定していないので何もできない
ここで高さは計算するのが面倒…*/
li{
line-height: 80px;}
/*だから高さはこっちで指定する。文字ブロックの高さはline-heightで指定。*/
li a {
border: 3px solid;/*ここで枠線をつければ、全体の大きさは変わらない。*/
display: block;
color: #FFFFFF;/*枠内の詳細はli aで*/
text-align: center;
margin-top: 24px;
}
