CSS　フォントサイズの違うリストの横並び

解決済

質問者：onyan
質問日時：2008/12/03 11:14
回答数：3件

http://www.muji.net/ie/

上記のサイトのようにグローバルメニューのフォントサイズの違うものを横並びにし、
さらにはフォントの変わるところで縦線も入れたいです。
リストスタイルには任意の画像を使いたいと思って試行錯誤していますが、
どうしてもフォントサイズを変えるとずれてしまいます。

特にIE6で見ると何を直して良いのか分からないくらいです。

わかりづらい文章で申し訳ないですが教えてください。
よろしくお願いします。

通報する

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

質問の本文を隠す

回答 (3件)

No.1

回答者： lesstia
回答日時：2008/12/03 11:18

この文字はテキストではなく画像ですね。

普通に大きさの違う文字が描かれている画像を並べてアンカーにしているだけかと。

- 0
- 件

通報する

この回答へのお礼

早速ありがとうございます。

画像ではなくテキストで作りたいと思っています。
説明不足で申し訳ありませんでした。

それでも方法としては同じなのでしょうか？
面倒でなかったらコードも教えていただけるとありがたいです。

よろしくお願いいたします。

通報する

お礼日時：2008/12/03 11:35

No.2

回答者： ORUKA1951
回答日時：2008/12/03 11:55

たとえば

<ol id="siteMap">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href="" class="sub"></a></li>
<li><a href="" class="sub"></a></li>
<li><a href=""></a></li>
</ol>
というHTMLだと
<ol></ol>を絶対配置、blockにしてpaddingを0pxにする。
<li></li>をblockにして、その幅を%で指定してfloatで並べる。
隣接セレクタを使って、classセレクタが変わる所でborder: solid 1px blackを指定する。
・・・というところでしょうか。
背景画像は<ol>で、各リンクの背景は<a>に対して行う。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。

＞<ol></ol>を絶対配置、blockにしてpaddingを0pxにする。
これは

#test{
display:block;
padding:0;
}

＞<li></li>をblockにして、その幅を%で指定してfloatで並べる

#test2 {display:block;
padding:●●%;
float:left;
}

ということですか？
初心者の質問で申し訳ないのですが
教えていただけると嬉しいです。
よろしくお願いいたします。

通報する

お礼日時：2008/12/03 15:09

No.3ベストアンサー

回答者： ORUKA1951
回答日時：2008/12/03 16:53

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "

http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>Untitled</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">

</style>
</head>
<body>
<h1>title</h1>
<h2>subTitle</h2>
<div class="abstract">
<p>
要約
</p>
</div>
<div class="Text">
<h2>ArticleTitle</h2>
<p>
記事
</p>
</div>

<ol id="SiteMap">
<li><a href="#">リンク(1)</a></li>
<li><a href="#">リンク(2)</a></li>
<li><a href="#">リンク(3)</a></li>
<li class="sub"><a href="#">リンク(4)</a></li>
<li class="sub"><a href="#">リンク(5)</a></li>
<li><a href="#">リンク(6)</a></li>
</ol>
</body>
</html>