CSS: divタグ内のリンク表示について

締切済

質問者：maple0823
質問日時：2014/03/22 05:55
回答数：2件

こんにちは。現在cssを学習中の者です。
下記の表示トラブルにつまずいており、色々と試していますがまだ解決できておりません。
初歩的なことで申し訳ありませんが、アドバイスを頂けると幸いです。

あるページのトップのdivタグの中に、ENとFRを選択すると別のページに遷移する簡単なメニューを『EN | FR』と表示したいのですが、
下記通りコーディングすると
|
EN
FR
のように上下が揃わず表示されてしまいます。
&nbsp|&nbspを削除しhrefタグ２つのみ残すと問題なく表示されます。

CSSのlang下のvertical-alignやwidthを調整し、display: blockとfloat:leftを追加してみましたが、
問題は解決されません。
他に良い方法はありますでしょうか。

説明不足で申し訳ありませんが、アドバイスをお願いいたします。

* HTML
<div>
<span>
<div class="lang">
<a href="/abc.com/en">EN</a>&nbsp|&nbsp
<a href="/abc.com/fr">FR</a>
</div>
Please choose English or French.
</span>
</div>

* CSS
.lang {
display: block;
position:relative;
left: -470px;
top:-7px;
margin-right:24px;
width:60px;
height:28px;
float:left;
vertical-align: middle;
}

.lang a {
display: block;
height:14px;
float:left;
color:#ffffff;
width:16px;
padding:7px;
text-align:center;
}

通報する

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

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： nanden1548
回答日時：2014/03/22 14:04

４．０１での解説は、詳しく書かれているので、HTML5で説明

listで記述した方が、楽では？・・・floatを使っても可能！
記述方法はいろいろあります。

構造の分離は、もちろんですが・・・・・
いかに少ないステップ数で読みやすい記述をするか？？？
その辺が、製作者の技量を問われる部分です。

<section id="lang">
<ul>
<li>EN</li>
<li>FR</li>
</ul>
</section>

*****************************************
CSS

#lang ul{
text-align:center;
}
#lang ul li{
list-style:none;
display:inline;
padding-right:10px;
}

この程度でいいのでは？・・・

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2014/03/22 10:46

＞こんにちは。

現在cssを学習中の者です。
　その前にHTMLを徹底的に復習しましょう。
『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.( http://jigsaw.w3.org/css-validator/#validate_by_ … )』
　スタイルを指定する前に
　⇒Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　などでHTMLをチェックする。
＞<div><span><div class="lang"><a href="/abc.com/en">EN</a>&nbsp|&nbsp
<a href="/abc.com/fr">FR</a></div>Please choose English or French.</span></div>
　spanはインライン要素ですから、内部にブロック要素をもてません。
　・<!ELEMENT SPAN - - (%inline;)*　(注)inline要素を0個以上(*)
　　　( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

※スタイルシートを導入する最大の目的は
・構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　です。リンク先を必ず読んでください。HTMLはデザイン目的で書いてはならない!!

＞あるページのトップのdivタグの中に、
　DIVは「id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」ための物であって、デザインするための要素ではありません。

＞vertical-align: middle;
　table-cell以外には無効です。line-heightで指定します。

[HTML]
<p class="SelectsInLanguage">
　　　<a href="/abc.com/en" lang="en-us">EN</a>|<a href="/abc.com/fr" lang="fr">FR</a>Please choose English or French.</p>
　で良いでしょう。

【絶対に守ること】
　「構造とプレゼンテーションの分離」
　HTMLはデザイン目的で書かないこと。そのためにスタイルシートでデザインするのですから・・

【サンプル】
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_ … )
　でチェック済みのHTML4.01strict+CSS2.1 ウェブ標準です。
★タブは＿に置換してあるので戻す。

※HTMLには文書構造しか書かれていませんので自由にデザインできます。
　逆に言うときちんとHTMLがマークアップされていれば、プレゼンテーションは同じに出来ます。
※スタイルシートを除いたHTMLと比較してみましょう。

<!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>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">

＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p class="SelectsInLanguage"><a href="/abc.com/en" lang="en-us">EN</a>|<a href="/abc.com/fr" lang="fr">FR</a>Please choose English or French.</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>本文はsection</p>
＿＿<div class="SelectsInLanguage">
＿＿＿<ul>
＿＿＿＿<li><a href="/abc.com/en" lang="en-us">EN</a></li>
＿＿＿＿<li><a href="/abc.com/fr" lang="fr">FR</a></li>
＿＿＿</ul>
＿＿＿<p>Please choose English or French.</p>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</div>
</body>
</html>