[CSS]文字の位置を指定する。

解決済

質問者：master-3rd
質問日時：2006/06/17 14:51
回答数：4件

ブログのデザインを修正中です。
左メニューが、バックに画像上に文字と言う形でレイアウトされています。
その部分の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;
を追加してみましたが、バック画像ごと下方向に移動してしまいました。
文字列だけ移動させる方法を教えてください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： grizzlycat
回答日時：2006/06/17 22:28

＃２の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.dt …
<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>
</div>

</body>
</html>

一通り文字の位置を動かしてみたのですが、padding-topとheightの値を調整すると文字位置が変化しました(環境の違いのせいかも知れません)。※背景用の画像は10x25pxのtest.png画像をrepeatで使いました。

MozillaとIEではpaddingとheightで表現される範囲に差異が現れるので注意が必要です。

- 0
- 件

通報する

No.4

回答者： tany180sx
回答日時：2006/06/18 00:50

こんな感じでどうですか。

h3.sidebar-cap{
　padding-top:15px;
}

.sidebar-body{
　margin-top:10px;
}

- 0
- 件

通報する

No.2

回答者： grizzlycat
回答日時：2006/06/17 17:26

高さが、【height: 25px;】で固定ということでしたら

合計25pxになるように【padding-top: **px】で調整してみてはいかがでしょうか？

例えば下記の様に
height: 20px;
padding-top: 5px

いかがでしょうか

この回答への補足

返答ありがとうございます。
しかし、変化無しです。

とりあえず、すべて貼り付けます。

/* -----------------------[ サイドバー関連 ]--------------------- */
#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>
</div>