top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_15

【ボックス】gif画像なしで 角丸ボックスだ

 2008-04-06

 現在作成しているサイトでの 吸収した知識・技術ネタ・・・

 ◎ gif画像など使わないで、簡単にCSSだけで、角丸ボックスを創りたかった!

[ネタ元]ありがとうございました!

CSSで角丸ボックス

画像を使わずに角丸ボックス

 

 


more

[実現手順]

・CSSの配置

 #menubox1 { /* 親ボックス */
width: 130px;
background-color: #ff8c00;
position: absolute;
top:22px;
left: 260px;
}

#menubox1 p{
margin:0px;
padding:0.5em 1em;
background-color:#ff8c00;
vertical-align:middle;
}

.rtop1, .rbottom1{
background:#FFFFFF;
}

.rtop1 span, .rbottom1 span{
display:block;
height:1px;
overflow:hidden;
background-color:#ff8c00;
}

・HTMLで読み込む

<div id="menubox1">
<div class="rtop1">
<span class="r1"></span><span class="r2"></span><span class="r3"></span><span class="r4"></span>
</div>
<p><br><a href="">こんな</a><br>
<a href="">感じ</a><br><br></p>
<div class="rbottom1">
<span class="r4"></span><span class="r3"></span><span class="r2"></span><span class="r1"></span>
</div>
</div>

[チョイ技]

・ボックス固定して、左右に3つ並べる

position: absolute;
top:22px;
left: 260px;

・高さ決まったボックスで、文字をボックスのmiddleにする

<p><br><a href="">こんな</a><br>
<a href="">感じ</a><br><br></p>


[次回課題]

・この方式で、マウスオーバーでボックス全体の色変更

commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/15-497833c9
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

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