トップページイラスト(ナナセミキ様作成)

イラストの情報はこちらから≫

Jimdo・みんビズカスタマイズ 突き抜けろメニューバー(float設定の子ボックスが親ボックスの外にはみ出す現象を回避)

ほぼ自分用メモなので内容が乱暴なのはご勘弁を。
意外と情報が無いので紹介します。

このサイトのメニュー部分は当初、HTMLが下記コード内容で記載されていました。

<div id="menu">
    <div id="wrap_menu">
        <div id="navigation">
            <var>navigation[1|2|3]</var>
        </div>
    </div>
</div>

また、CSSは下記コードで記載されていました。

#menu
{
clear: both;
display: block;
background:#222222;
border-bottom: 5px solid #CD691E;
}

#wrap_menu
{
clear: both;
display: block;
margin:0 auto;
width: 1000px;
}

※navigationや2階層目非表示CSSは省略しています。
※2012年9月時点、背景設定等は異なりますが、ほぼ同じコードを使用しています。

上記CSSでは、menu部分がうまく動作しませんでした。

原因を調べていくうち、どうやら「#navigation」部分のCSSに設定した「float」が原因という事が分かりました。
そこでCSSを下記の様に修正しました。

#menu
{
clear: both;
display: block;
background:#222222;
border-bottom: 5px solid #CD691E;
}

/* start: clearfix ------------------------------ */
#menu:after {
content:".";
display:block;
height:0px;
clear:both;
visibility:hidden;
}

#menu { display:inline-table; }

/* Hides from Mac IE \*/
* html #menu { height:1px; }
#menu { display:block; }
/* */
/* end: clearfix ------------------------------ */

#wrap_menu
{
clear: both;
display: block;
margin:0 auto;
width: 1000px;
}

「clearfix」というCSSを追加したところ、無事反映しました。
Jimdoでのメニュー制作や、その他CSSのご参考にご活用ください。

参考にしたサイト(より詳しく専門的に書いてあります)

<BLOG × WORLD ENDING>
http://blog.worldending.jp/web/clearfix.php
※2012年9月時点、サイトが表示されないためリンクを削除しています。

Jimdoのメニューを横レイアウトにするときはこちらのサイトが参考になります

<Jimdoでつくる簡単ホームページ>
http://jp-m.jimdo.com/

▲このページのトップへ