こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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

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

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

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;
}

投稿日時 - 2014-03-22 05:55:03

QNo.8523704

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

13人が「このQ&Aが役に立った」と投票しています

回答(2)

4.01での解説は、詳しく書かれているので、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;
}

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

投稿日時 - 2014-03-22 14:04:46

ANo.1

>こんにちは。現在cssを学習中の者です。
 その前にHTMLを徹底的に復習しましょう。
『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.( http://jigsaw.w3.org/css-validator/#validate_by_input )』
 スタイルを指定する前に
 ⇒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-html401j/struct/global.html#edef-SPAN )

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

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

>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_input+with_options )
 でチェック済みの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">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}

/* 共通指定 */
*.SelectsInLanguage{text-align:center;}
*.SelectsInLanguage a{
display:inline-block;
width:3em;height:2em;line-height:2em;
text-decoration:none;
background-color:gray;
color:white;
margin:0 0.5em;
}
*.SelectsInLanguage a:hover,p.SelectsInLanguage a:focus{
background-color:silver;color:red;
}

/* SelectsInLanguageクラスの段落 */
p.SelectsInLanguage{text-indent:0;}

/* SelectsInLanguageクラスのDIV */
div.SelectsInLanguage ul,div.SelectsInLanguage ul li{list-style:none;margin:0;padding:0;display:inline-block;}
div.SelectsInLanguage ul{font-size:0;}
div.SelectsInLanguage ul li{font-size:16px;}
div.SelectsInLanguage ul li+li:before{content:"|";}
div.SelectsInLanguage p{display:inline-block;text-indent:0;}

/* 色分け */
body{background-color:gray;}
div.header,div.section,div.footer{background-color:white;}
-->
_</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>

投稿日時 - 2014-03-22 10:46:37

あなたにオススメの質問