オンライン健康相談、gooドクター

質問させていただきたいと思います。

画面の中央より下にある、divで囲んだ、idを「nav」、「main」として登録してある左右のフロートがあります。
現在、この両者の頭の部分が、「nav」の方が、少し上になっています。
両者とも、margin-topは、40pxで、揃えてあります。

自分で、HTMLの記述を見ても、今回は「」も見つからず、何故、初期状態でピッタリと同じ高さにならないのかが疑問であります。

現在、dreamweaverCS6を使用しています。HTML4.01 Strictで書いていますが、詳しい方がいましたら、よろしくお願いします。

gooドクター

A 回答 (2件)

CSSのfloatで、左右が一行目で水平にならない(

http://oshiete.goo.ne.jp/qa/7941844.html )
CSSで左右のfloatを固定化する方法( http://oshiete.goo.ne.jp/qa/7943557.html )
HTMLで、何故か左右のfloatの高さが揃わない( http://oshiete.goo.ne.jp/qa/7944740.html )
わ含めて、ごく簡単なサンプルを示しておきます。
1) HTMLは、ひたすら文書構造だけをできるだけ詳しく適切にマークアップすることだけ考えます。
 デザインを先に考えたらダメです。初心者がもっともおちいりやすい失敗です。
 デザインを想定されているとしても、それはあくまで、
  ★その文書構造を表現(プレゼンテーション)するのに、そのデザインがよい★
 ということなのですよ。
2) その上でスタイルシートでデザインして行きます。
 HTMLの文書構造にしたがってデザインしていくことになりますし、将来デザインをまったく変更することも簡単にできます。
下記サンプルで /* ★ */から/* ★ */までを、下の物に書き換えればナビゲーションの位置を変えられますね。
div.section div.section,div.section h2{margin:0;min-width:0;width:auto;}
div.section{padding-top:44px;}
div.section div.section{padding:0;}
div.section div.nav h3{display:none;}
div.section div.nav{height:44px;position:absolute;top:0;text-align:center;line-height:40px;width:100%;}
div.section div.nav ol,div.section div.nav ol li{list-style:none;margin:0;padding:0;}
div.section div.nav ol li{display:inline-block;width:20%;border:2px solid yellow;}

3) 今から十年後にあなたが見ても、いえ、誰が見てもHTMLのどこに何が書かれているかが一目瞭然でしょう。スタイルシートも分かりやすいはず。
 HTML5にするときは、そのまま
<div class="header"></div>-----><header></header>
<div class="section"></div>----><section></section>
<div class="footer"></div>-----><footer></footer>
<div class="nav"></div>--------><nav></nav>
にすればよいだけです。

★下記サンプルは、リキッドなのでスマホも幅広ディスプレイも関係なく利用できるはずです。ウィンドウ幅を変えてみてください。
★印刷は、率直に印刷されるはず
★タブは_に置換してあるので戻すこと!!!
★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.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" media="screen">
<!--
html,body{margin:0;padding:0;}
body{background-color:blue;}
h1,h2,h3,p{margin:0;line-height:1.6em;}
p{text-indent:1em;}

div.header,div.section,div.footer{width:80%;min-width:640px;max-width:800px;margin:0 auto;position:relative;}
/* ★ */
div.section div.section,div.section h2{margin:0 0 0 150px;;min-width:0;width:auto;}
div.section div.nav{position:absolute;left:0;top:0;width:150px;height:100%;}
/* ★ */

/* 分かりやすいように色分けと最小サイズ指定 */
div.header{background-color:silver;min-height:100px;}
div.section{}
div.section div.nav{background-color:red;}
div.footer{background-color:yellow;}
div.section div.section{background-color:lime;min-height:200px;}

-->
</style>
</head>
<body>
<div class="header">
<h1>タイトル</h1>
<p>このページでは・・・・</p>
</div>
<div class="section">
<h2>本文</h2>
<div class="section">
<h3>見出し</h3>
<p>・・・</p>
</div>
<div class="section">
<h3>見出し</h3>
<p>・・・</p>
</div>
<div class="nav">
<h3>目次</h3>
<ol>
<li>リンク</li>
<li>リンク</li>
<li>リンク</li>
</ol>
</div>
</div>
<div class="footer">
<h2>文書情報</h2>
<dl class="documentHistry">
<dt id="FIRST-PUBLISHED">First Published</dt>
<dd>2012-08-10</dd>
<dt id="LAST-MODIFIED">Last Modified</dt>
<dd>2012-08-10 12:00:00 (JST)</dd>
</dl>
<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
</div>
</body>
</html>

この回答への補足

いつも、詳しい解説をありがとうございます。
この質問は、解決できました。可能であれば、
http://oshiete.goo.ne.jp/qa/7945114.html
について、ご存知でしたら、教えていただければ幸いです。

補足日時:2013/02/14 18:07
    • good
    • 0
この回答へのお礼

ご回答、ありがとうございます。大変参考になりました。

お礼日時:2013/02/14 18:08

Operaで直接編集した結果なので他にも要因があるかもしれません



id="base"内のmain1個上に存在する<P>がスタイル指定されていません。
ですのでデフォルトスタイルのp{margin-bottom:1em;}が適応されmainの高さが1em下にずれています
解決方法としてはcssでp{margin:0;}を指定するか*{margin:0;}でmarginを消す必要があります
    • good
    • 0
この回答へのお礼

ご回答、ありがとうございます。大変参考になりました。

お礼日時:2013/02/14 18:08

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

gooドクター

人気Q&Aランキング