プロが教える店舗＆オフィスのセキュリティ対策術

clearfix の後marginが効かない

解決済

  • 質問者：mayuge0033
  • 質問日時：
  • 回答数：2件

はじめました。web制作初心者です。
ご教授お願い致します。

グローバルナビゲーションを<li>で作り、それをfloatして横並びにし、マウスオーバーするように指定しました。その後、最初はclear:bothを指定していたのですが、ネットで「clearfix」の方が良いとのことでしたので初めて使いました。

すると次の<div>以降のmargin-topが効きません！！
今のブラウザはIEです。

<div id="wrapper">
<div id="navi">
<ul>
<li class="menu"><a href="" title="お品書き" class="active">お品書き</a></li>
<li class="drink"><a href="" title="ドリンク">ドリンク</a></li>
</ul>
</div>
</div>

<!-- ++++++++++++++++++++ E N D navi SECTION ++++++++++++++++++++ -->

<!-- ++++++++++++++++++++ BEGIN contentss SECTION ++++++++++++++++++++ -->

<div id="contents" class="clearfix">
<div id="left">
　 <div id="kodawari">
<img src="image/top_bar_coment.jpg" alt="###" width="635" height="40" />
</div>
</div>
</div>
</div>


#wrapper {
width: 900px;
}

#navi ul,
#navi ul li{
float: left;
}

/* afterに対応したブラウザ向け */
#contents .clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility:
hidden;
}

/* IE6 */
* htm .clearfix {
height: 1%;
}

/* IE7 */*:first-child+html .clearfix {
height: 1%;
}

#contents {
width: 900px;
padding-top: 5px;
padding-right: 13px;
padding-left: 12px;
}


#contents #left {
width: 660px;
margin-top: 15px;　←これが効かない
}

ごめんなさい。このCSSでわかりますでしょうか？
よろしくお願い申し上げます。

通報する

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

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

＞最初はclear:bothを指定していたのですが、ネットで「clearfix」の方が良いとのことで


　ネット上の情報の大半は間違いが多いですね。玉石混淆、藁の山から針を探すようなものです。一度仕様書の全体に目を通されることをお勧めします。
　デザインのためにHTMLを書くのは、「構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」からして疑問です。

★clear:fixなんて、まったく要りません!!!、デザインのために無用なタグや属性を書くのは、HTMLの趣旨から外れています。

<body>
<div class="header"><!-- 文書のヘッダ -->
<h1>ページのタイトル</h1>
<div class="nav"><!-- ナビゲーション -->
<ul>
<li><a href="" title="お品書き" class="current">お品書き</a></li><!-- カレント(現在地) -->
<li><a href="" title="ドリンク">ドリンク</a></li>
</ul>
</div>
</div>
<div class="section">
<p id="kodawari">
<img src="image/top_bar_coment.jpg" alt="###" width="635" height="40">
</p>
</div>
</body>
</html>
・・・・デザインは考慮せず、基本どおりHTMLを書けばこんなに簡単・・・
・・・・そのためスタイルシートも簡単でわかりやすくなる・・・
肝心な部分は、
div.header{position:relative;}/* 子孫の要素の基準にするためrelativeにしておく */
div.header div.nav{/* header内のnavについて */
position:absolute;left:0;bottom:-30px;/* 絶対配置でheaderの下 */
width:100%;
line-height:30px;height:30px;
}
div.header div.nav ul,div.header div.nav ul li{
display:block;list-style:none;
margin:0;padding:0;
height:26px;/* 20px - 2*(2px) */
text-align:center;
}
div.header div.nav ul li{
float:left;width:20%;
}
これだけです。
★ウェブ標準のHTML4.01strictです。
★ウィンドウ巾はリキッドにしてあります。i-phoneにも対応
★メニュー項目は増減できます。巾を調整する
★calss名は、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML4.01仕様書( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より
　に従っています。HTML4.01ではここが混乱の元になったので、HTML5では<header><section><nav><footer>のように明確になります。

★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済み

全体は、
<!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;paddng:0;}
div.header,div.section{/* セレクタはグループ化して同じプロパティを重複させない */
width: 90%;margin:0 auto;padding:0;/* padding:0でサイズが変化しないよう */
min-width:640px;/* i-phone */
}
div.header{position:relative;}/* 子孫の要素の基準にするためrelativeにしておく */
div.header h1{margin-top:0;}
div.header div.nav{
position:absolute;left:0;bottom:-30px;/* 絶対配置でheaderの下 */
width:100%;
line-height:30px;
height:30px;
}
div.header div.nav ul,div.header div.nav ul li{
display:block;list-style:none;
margin:0;padding:0;
height:26px;/* 20px - 2*(2px) */
text-align:center;
}
div.header div.nav ul li{
float:left;
width:20%;
}
div.header div.nav ul li+li{
margin-left:5px;
}
div.header div.nav ul li a{
display:block;
height:100%; width:100%;
text-decoration:none;
background-color:yellow;
border:outset 2px gray;
}
div.section{
margin-top:30px;
}
/* リンクの動的な擬似クラス */
div.header div.nav ul li a:visited{backgrond-color:rgb(160,160,0)}
div.header div.nav ul li a:hover{background-color:pink;}
div.header div.nav ul li a:active{background-color:red;border-style:inset;}
/* 位置関係をわかりやすくするため色づけ */
div.header{background-color:aqua;height:100px;}
div.section{background-color:lime;height:400px;}

-->
</style>
</head>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： DrFell
  • 回答日時：

説明の通りだとすると、


#navi ul,
#navi ul li{
float: left;
}
の、「#navi ul,」は不要。むしろ邪魔。

clearfixをclear:bothの代わりに持ってきてもダメ。clearfixを誤解している。もう一度勉強してみてください。

ヒント
floatすることは自身の高さをもてなくするので表示はされていても高さ0になる。基準点が思っている箇所と違うので、考えている数値にならなだけ。margin-top:15pxは現在でも効いている。試しに数値を150px等にすると変化するはず。それは効いているということ。効かない時は反応がない。

前に使われたclearboxと違い後ろの要素ではなく、自身のafterに使用するのがclearfixの用法。
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報