みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

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

解決済みの質問

リンクBOXと見出しに空白が出来る

ただ今独学でhtmlとcssの勉強をしているのですがcssとhtmlでリンクBOXを作ってその下に見出しをつけようと思ったら添付画像のように空白が出来ます。ソースのどこが悪いのでしょうか。
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML1.0 Transitional//EN"http://www.w3 org/TR/xhtml1/DTD/xhtml1-transitional.did">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html;charset=utf-8"/>
<title>会社方針</title>
<style type="text/css">
div#container{border:solid 2px black;
padding:10px;
width:1200px;
margin-left:auto;
margin-right:auto}
div#top a {
display:block;
width:166px;
height:64px;
background:#ffcc00;
position:relative;
top:-31px;
left:1px;
border:1px solid #a7e;
color:#000000
text-indext:-9999px;
text-decoration:none;
text-align:center;
font-size:1.25em;
}

div#about1 a {
display:block;
width:166px;
height:64px;
background:#ffcc00;
position:relative;
top:-97px;
left:165px;
border:1px solid #a7e;
color:#000000
text-indext:-9999px;
text-decoration:none;
text-align:center;
font-size:1.25em;
}

div#about2 a {
display:block;
width:166px;
height:64px;
background:#ffcc00;
position:relative;
top:-163px;
left:326px;
border:1px solid #a7e;
color:#000000
text-indext:-9999px;
text-decoration:none;
text-align:center;
font-size:1.25em;
}

div#about3 a {
display:block;
width:166px;
height:64px;
background:#ffcc00;
position:relative;
top:-229px;
left:490px;
border:1px solid #a7e;
color:#000000
text-indext:-9999px;
text-decoration:none;
text-align:center;
font-size:1.25em;
}

div#about4 a {
display:block;
width:166px;
height:64px;
background:#ffcc00;
position:relative;
top:-295px;
left:654px;
border:1px solid #a7e;
color:#000000
text-indext:-9999px;
text-decoration:none;
text-align:center;
font-size:1.25em;
}

div#about5 a {
display:block;
width:166px;
height:64px;
background:#ffcc00;
position:relative;
top:-361px;
left:818px;
border:1px solid #a7e;
color:#000000
text-indext:-9999px;
text-decoration:none;
text-align:center;
font-size:1.25em;
}

div#about6 a {
display:block;
width:168px;
height:64px;
background:#ffcc00;
position:relative;
top:-427px;
left:979px;
border:1px solid #a7e;
color:#000000
text-indext:-9999px;
text-decoration:none;
text-align:center;
font-size:1.25em;
}
h2{
padding:-1000px 0px 0px 0px;
font-size:1.15em;
border-left:solid 18px #ffcc00;
padding-left:5px;
margin:3px;
}
p {
margin: 0.5em 0px;
}
</style>
</head>
<body>
<div id="container">

<h1><img src="title.png" alt="株式会社****"/></h1>
<div id="top">
<a href="../index/index.html"><p align="center">TOP</p></a>
</div>
<div id="about1">
<a href="about1.html"><p align="center">会社方針</p></a>
</div>
<div id="about2">
<a href="about2.html"><p align="center">企業概要</p></a>
</div>
<div id="about3">
<a href="about3.html"><p align="center">製品</p></a>
</div>
<div id="about4">
<a href="about4.html"><p align="center">福祉サービス</p></a>
</div>
<div id="about5">
<a href="about5.html"><p align="center">スタッフ紹介</p></a>
</div>
<div id="about6">
<a href="about6.html"><p align="center">お問い合わせ</p></a>
</div>
<h2>会社方針</h2>
</div>
</body>
</html>

投稿日時 - 2013-04-02 19:29:41

QNo.8024014

すぐに回答ほしいです

質問者が選んだベストアンサー

div id=about*に適用されている、display:block;が入っているために下がっています。
それではなく、float:leftを適用させればご質問者様のお考え通りの機能になるのではと想像しまして。

スマートな方法ではないかもしれませんが、div#top aとdiv#about* a のdisplay:block;とtop:-*pxとleft:*pxを消します。
その後で"div#about* a"に "float:left"を追加して左揃えにします。
更に、h2の要素に"clear:left;"を追加して、あとはh2の要素を適宜いじればいけるのではないでしょうか。

以下ソース

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML1.0 Transitional//EN"http://www.w3 org/TR/xhtml1/DTD/xhtml1-transitional.did">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html;charset=utf-8"/>
<title>会社方針</title>
<style type="text/css">
div#container{border:solid 2px black;
padding:10px;
width:1200px;
margin-left:auto;
margin-right:auto}
div#top a {
width:166px;
height:64px;
background:#ffcc00;
position:relative;
float:left;
left:1px;
border:1px solid #a7e;
color:#000000
text-indext:-9999px;
text-decoration:none;
text-align:center;
font-size:1.25em;
}

div#about1 a {

width:166px;
height:64px;
background:#ffcc00;
position:relative;
float:left;

border:1px solid #a7e;
color:#000000
text-indext:-9999px;
text-decoration:none;
text-align:center;
font-size:1.25em;
}

div#about2 a {

width:166px;
height:64px;
background:#ffcc00;
position:relative;
float:left;

border:1px solid #a7e;
color:#000000
text-indext:-9999px;
text-decoration:none;
text-align:center;
font-size:1.25em;
}

div#about3 a {

width:166px;
height:64px;
background:#ffcc00;
position:relative;
float:left;

border:1px solid #a7e;
color:#000000
text-indext:-9999px;
text-decoration:none;
text-align:center;
font-size:1.25em;
}

div#about4 a {

width:166px;
height:64px;
background:#ffcc00;
position:relative;
float:left;

border:1px solid #a7e;
color:#000000
text-indext:-9999px;
text-decoration:none;
text-align:center;
font-size:1.25em;
}

div#about5 a {

width:166px;
height:64px;
background:#ffcc00;
position:relative;
float:left;

border:1px solid #a7e;
color:#000000
text-indext:-9999px;
text-decoration:none;
text-align:center;
font-size:1.25em;
}

div#about6 a {

width:168px;
height:64px;
background:#ffcc00;
position:relative;
float:left;

border:1px solid #a7e;
color:#000000
text-indext:-9999px;
text-decoration:none;
text-align:center;
font-size:1.25em;
}
h2{
clear:left;
padding:0px 0px 0px 0px;
font-size:1.15em;
border-left:solid 18px #ffcc00;
padding-left:5px;
margin:3px;

}
p {
margin: 0.5em 0px;
}
</style>
</head>
<body>
<div id="container">

<h1><img src="title.png" alt="株式会社****"/></h1>
<div id="top">
<a href="../index/index.html"><p align="center">TOP</p></a>
</div>
<div id="about1">
<a href="about1.html"><p align="center">会社方針</p></a>
</div>
<div id="about2">
<a href="about2.html"><p align="center">企業概要</p></a>
</div>
<div id="about3">
<a href="about3.html"><p align="center">製品</p></a>
</div>
<div id="about4">
<a href="about4.html"><p align="center">福祉サービス</p></a>
</div>
<div id="about5">
<a href="about5.html"><p align="center">スタッフ紹介</p></a>
</div>
<div id="about6">
<a href="about6.html"><p align="center">お問い合わせ</p></a>
</div>
<h2>会社方針</h2>
</div>
</body>
</html>

投稿日時 - 2013-04-02 22:40:29

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

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

回答(2)

ANo.2

なぜそんなに長大で複雑怪奇なHTMLスタイルシートになるのでしょう。他人は無論、あなた自身も手がつけられないのでは?
 理由は単純です。
【引用】____________ここから
relative
   ボックスの位置はまず通常フローにて計算され(この計算で得られた位置
  を通常位置と呼ぼう)、その通常位置から相対的に配置される。 なお、あ
  るボックスBが相対配置される場合、それに後行するボックスの位置は、
  Bが相対配置されていないかのように計算される。
  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[視覚整形モデル(
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#propdef-position )]より

と言うことです。元々あったところは席は空くけど席は残っている。

 しかし、それ(スタイルシートでデザインする)より前に、HTMLの文法チェックを~必ずしましょう。ミスがあると期待通りにデザインでき ませんし、ブラウザ間でエラー処理が異なるため表示差で悩まされます。
・A要素の中に<p>は入れられません。
・idやclass名は文書構造を補完するために書くのであって、デザインのために書くのではありません。その文書構造を利用してスタイルは 書きますが。
 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。』

 また、現在作成されるならHTML4.01strictが良いでしょう。transitionalは使うべきではありません。
 1999年のHTML4.01の勧告以来・・『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』
 次期HTML5、や現行のXHTML1.1にはtransitinal(互換仕様)はありません。strictを学んでおけば、HTML5 にはすぐ移行出来るでしょう。
★横幅1200pxは広すぎます。スマホや最も普及している1028pxのディスプレイでは苦痛です。

下記サンプルはスマホの640px以上でしたら伸縮して表示されます。幅広ディスプレイだと中央
★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )
 でチェック済みのHTML4.01strictです。
★タブは_に置換してあるので戻すこと。また文字コードはShift_JISです。

<!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">
<!--
div.header,div.section,div.footer{
_border:2px black solid;
_margin:0 10px;
_width:95%;max-width:1000px;min-width:620px;
_margin:0 auto;padding:10px;
}
div.header h1{
_width:95%;margin:0 auto;
_position:relative;
_text-align:center;
}
div.header h1 img{display:block;width:100%;height:auto;}
div.header{
_border-bottom-width:0;
_padding-bottom:70px;
_background-color:
_rgb(255,204,00);
}
div.section{border-width:0 2px;clear:left;}
div.footer{border-top-width:0;}
h1,h2,h3,p,ol,ul{margin:0;line-height:1.6em;}
div.header ol,div.header ol li{
list-style:none;display:block;
text-align:center;
line-height:64px;font-size:0.9em;
}
div.header div.nav ol li{width:13.5%;float:left;border:solid 1px black;}
div.header div.nav ol li
a{background-color:#FFCC00;display:block;width:100%;height:100%;text-decoration:none;}
div.header div.nav ol li a:hover{background-color:yellow;}

-->
_</style>
</head>
<body>
_<div class="header" id="TOP">
__<h1><img src="./images/title.png" alt="株式会社****" width="600" height="60"></h1>
__<div class="nav">
___<ol>
____<li><a href="../index/index.html">TOP</a></li>
____<li><a href="about1.html">会社方針</a></li>
____<li><a href="about2.html">企業概要</a></li>
____<li><a href="about3.html">製品</a></li>
____<li><a href="about4.html">福祉サービス</a></li>
____<li><a href="about5.html">スタッフ紹介</a></li>
____<li><a href="about6.html">お問い合わせ</a></li>
___</ol>
__</div>
_</div>
_<div class="section">
__<h2>会社方針</h2>
__<p>・・・</p>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2012-08-10</dd>
__</dl>
__<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>

投稿日時 - 2013-04-02 22:46:36

あなたにオススメの質問