習慣e気持ち！本日発売２

▲TOP

メニューもいじっちゃえ。
メニューを右側に変えたければ、
.menu {
width : 180px ;
float : left ;
background-color : ;
}
でfloat: right ;にしてみて。

メニュー項目の下に線を引くのは.menu-headerの中で
border-bottom:のところを

2px solid red;として　2pxの太さの実線（solid)　赤色を指定します。

前回下書き登録したハート大を表示させてみます。

同じく、.menu-header の中で
background-color: white;
background-image: url("/img/uxxxxx/FIxxxxxxx_xE.gif") ;
background-repeat:no-repeat ;

background-image:url(" ");でハート大のファイル名を指定します。
ハートが一つ表示されるようbackground-repeat:をno-repeatに指定します。

このままだとメニュー項目の表示がハートに重なってしまいます。
そこで
.menu-header のなかのpaddingをもとの10pxから30pxに変更して右にずらします。

padding : 0px 0px 0px 30px ;

paddingは上、右、下、左の順に指定できますので右に文字をずらす場合、
左側のｐｘ数を多めに指定します。つまりもとの10pxから
20px文左に文字を移動させます。

ちなみに間違って一行下のマージンを

margin : 0px 0px 0px 30px ;
にしてしまうと、メニューの文字だけでなく、ハートや下線まで
全て一緒に右にずれてしまいます。

paddingとかmarginってなんだ？て思いますが、これは、また今度
説明します。

メニューかわいくなって　e気持ち！

/*---------------------------------------------*/
/* メニュー */
/*---------------------------------------------*/
.menu {
width : 180px ;
float : left ;
background-color : ;
}

.menu-header {
font-family: "ＭＳ Ｐゴシック", Osaka, sans-serif ;
font-size : ;
font-weight : bold ;
line-height : 125% ;
color : #333333;
padding : 0px 0px 0px 30px ;
margin : 0px 0px 0px 10px ;
border-bottom : 2px solid red ;
background-color: white;
background-image: url("/img/uxxxxx/FIxxxxxxx_xE.gif") ;
background-repeat:no-repeat ;
voice-family : ""}"";
voice-family : inherit;
}

.menu-contents {
font-family : "ＭＳ Ｐゴシック", "Osaka", "sans-serif" ;
font-size : 75% ;
line-height : 150% ;
padding : 5px 0px 0px 0px ;
margin : 0px 0px 20px 10px ;
word-break : break-all ;
}

.menu-contents p {
margin : 0px 0px 3px 0px ;
}

.menu-contents hr {
color : #999999 ;
background-color : #999999 ;
width : 95% ;
height : 1px ;
border : none ;
padding : 0px 0px 0px 0px ;
margin : 0px 0px 0px 0px ;
}

.menu input {
width : ;
}

.menu table {
text-align : center ;
font-size : 12px ;
color : #333333 ;
width : 170px ;
}

Comment (0) | Trackback () | ▲TOP