- ベストアンサー
[CSS]文字の位置を指定する。
ブログのデザインを修正中です。 左メニューが、バックに画像上に文字と言う形でレイアウトされています。 その部分のCSSは以下のようになっています。 h3.sidebar-cap{ height: 25px; font: 800 120% Georgia,arial, sans-serif; background: url("Images/tabu.001.gif") no-repeat; border: 0px solid #b3b3b3; margin : 0; letter-spacing: 2px; color: #4040a9; } さて、この状態だと、イメージの上にある文字列が上寄せ状態になってしまっています。 これを中央寄せ(または数値で下に移動)させるにはどうしたらいいですか? 素人考えで position: relative; top: 20px; を追加してみましたが、バック画像ごと下方向に移動してしまいました。 文字列だけ移動させる方法を教えてください。
- master-3rd
- お礼率39% (524/1325)
- CSS
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
＃２のgrizzlycatです。 出先から戻って補足で頂いたソースで簡単にサンプルを作ってみました。htmlに保存してご確認いただいて宜しいでしょうか？ ※特に使わないスタイルは省略してあります。またそのままソースを貼り付けるとドキュメント宣言あたりに変なスペースが入ってしまうかも知れません。 <?xml version="1.0" encoding="Shift_JIS" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <style type="text/css"> #recently, #menu, #categories, #comments, #trackbacks, #archives, #tags, #others { font-size: 90%; color: #000084; } h3.sidebar-cap{ font-size: 100%; /*** ここを調整 *****************/ height: 20px; padding-top:5px; /********************************/ font: 800 120% ; background: url("images/test.png") repeat; border: 0px solid #b3b3b3; margin : 0; letter-spacing: 2px; color: #444445; } .sidebar-body{ border: 1px dotted #b3b3b3; border-top-width: 0; background-color: #ffffe5; padding: 5px; margin-bottom: 15px; } .sidebar-body a{ font-weight: normal; } .sidebar-foot { /*margin-top: 0; padding-top: 0;*/ } span.expand-icon { /* サイドボックス展開用ボタン */ display: block; width: 13px; height: 13px; font-size: 1px; margin: 1px 2px 2px 0; background: url(Images/toggle.png) 0px 0px no-repeat; float: right; cursor: pointer; z-index: 1000; } /* UL指定 デフォルトではマークなし */ ul, ol { list-style: none; } ul.sidebar-menu { /* # メニュー用 */ text-align: center; list-style: none; } </style> <title>test</title> </head> <body> <div id="recently"><h3 class="sidebar-cap" title="最近の書き込み"><span class="expand-icon" title="閉じる" onclick='toggleMenu("recently",this);return false;'></span> 最近の書き込み</h3> <ul class="sidebar-body sidebar-recently " style="display:block;"> <li><a href="index.php?UID=1150525379" title="テスト書き込みその2 2006/06/17">テスト書き込みその2</a></li> <li><a href="index.php?UID=1150524543" title="テスト書き込みその1 2006/06/17">テスト書き込みその1</a></li> </ul> <div class="sidebar-foot"></div><!--#sidebar-recently--> </div><!--#recently--> </body> </html> 一通り文字の位置を動かしてみたのですが、padding-topとheightの値を調整すると文字位置が変化しました(環境の違いのせいかも知れません)。※背景用の画像は10x25pxのtest.png画像をrepeatで使いました。 MozillaとIEではpaddingとheightで表現される範囲に差異が現れるので注意が必要です。
その他の回答 (3)
- tany180sx
- ベストアンサー率63% (239/379)
こんな感じでどうですか。 h3.sidebar-cap{ padding-top:15px; } .sidebar-body{ margin-top:10px; }
- grizzlycat
- ベストアンサー率47% (21/44)
高さが、【height: 25px;】で固定ということでしたら 合計25pxになるように【padding-top: **px】で調整してみてはいかがでしょうか？ 例えば下記の様に height: 20px; padding-top: 5px いかがでしょうか
height: 25px; ↑これがおそらくメニューの文字の行高さを指定しているのではないかと思うので、ここの数値を変更してみてはいかがでしょう。
補足
返答ありがとうございます。 残念ですが、変更すると画像下のリストが下がってしまいました。
お礼
あ、すみません。 下にずらしたいのは<h3>に囲まれた「最近の書き込み」の文字列です。
補足
返答ありがとうございます。 しかし、変化無しです。 とりあえず、すべて貼り付けます。 /* -----------------------[ サイドバー関連 ]--------------------- */ #recently, #menu, #categories, #comments, #trackbacks, #archives, #tags, #others { font-size: 90%; color: #000084; } h3.sidebar-cap{ font-size: 100%; height: 25px; font: 800 120% ; background: url("Images/tabu.001.gif") no-repeat; border: 0px solid #b3b3b3; margin : 0; letter-spacing: 2px; color: #444445; } .sidebar-body{ border: 1px dotted #b3b3b3; border-top-width: 0; background-color: #ffffe5; padding: 5px; margin-bottom: 15px; } .sidebar-body a{ font-weight: normal; } .sidebar-foot { /*margin-top: 0; padding-top: 0;*/ } span.expand-icon { /* サイドボックス展開用ボタン */ display: block; width: 13px; height: 13px; font-size: 1px; margin: 1px 2px 2px 0; background: url(Images/toggle.png) 0px 0px no-repeat; float: right; cursor: pointer; z-index: 1000; } /* UL指定 デフォルトではマークなし */ ul, ol { list-style: none; } ul.sidebar-menu { /* # メニュー用 */ text-align: center; list-style: none; } /* # 最近のエントリー・コメント・トラックバック用スタイル */ ul.sidebar-recently, ul.sidebar-comments, ul.sidebar-trackbacks, ul.sidebar-archives, ul.sidebar-others { width: auto; padding-left: 7px; } ul.sidebar-recently li, ul.sidebar-comments li, ul.sidebar-trackbacks li { padding: 3px 0 2px 15px; background: url(Images/listmark4.gif) 2px 8px no-repeat; } ul.sidebar-comments ul li.nest1 { margin-top: 1px; margin-left: 9px; padding : 0px 0px 2px 20px; background: url(Images/nest1.png) 0 1px no-repeat; } ul.sidebar-trackbacks ul li.nest1 { background: url(Images/nest1.png) 0 1px no-repeat; padding : 0px 0px 2px 20px; } ul.sidebar-trackbacks li.no-ping { /* tBがまだないとき */ color: #bbb; background: none; padding-left: 2em; font: small-caps 13px Century Gothic,Arial,sans-serif; } ul.sidebar-comments ul li.nest2 { margin-left: 27px; padding-left: 20px; background: url(Images/nest2.png) 0 3px no-repeat; } ul.sidebar-comments ul li.show-all-comments a { color: navy; padding-bottom:5px; font-size: x-small; } ul.sidebar-comments ul li.show-all-comments a:before { content: " ↓ "; } ul.sidebar-categories { /* サイドバーカテゴリー表示 */ text-align: left; } ul.sidebar-categories * a { font-size: 90%; } ul.sidebar-categories li.main-category { background: url(Images/listmark4.gif) 15px 4px no-repeat; padding : 0px 0px 2px 35px; } ul.sidebar-categories li.sub-category { background: url(Images/nest1.png) 25px 1px no-repeat; padding : 0px 0px 2px 45px; } ul.sidebar-categories span { /* 記事数がゼロのとき */ font-size: 90%; color: #aaa; } ul.sidebar-archives li { /* サイドバーアーカイブ用 */ padding-right: 2em; text-align: right; } ul.sidebar-others { /* サイドバーOTHERS用 */ text-align: center; padding-top: 5px; } ul.sidebar-others li { } ul.sidebar-tags li { /* サイドバータグ用 */ display: inline; } ■■■■■■■■■■■■■■■■■■ <div id="recently"><h3 class="sidebar-cap" title="最近の書き込み"><span class="expand-icon" title="閉じる" onclick='toggleMenu("recently",this);return false;'></span> 最近の書き込み</h3> <ul class="sidebar-body sidebar-recently " style="display:block;"> <li><a href="index.php?UID=1150525379" title="テスト書き込みその2 2006/06/17">テスト書き込みその2</a></li> <li><a href="index.php?UID=1150524543" title="テスト書き込みその1 2006/06/17">テスト書き込みその1</a></li> </ul> <div class="sidebar-foot"></div><!--#sidebar-recently--> </div><!--#recently-->