![[関西]WEBデザイン 交流会[大阪]](https://logo-imagecluster.img.mixi.jp/photo/comm/94/64/4999464_227s.gif){kind=logo}
div#headerの中にあるメニュー1〜7を横並びに表示させ，
メニュー8,9を横並びに表示させた上に表示するようにしたいのですが
divとpの間に一文字分の隙間が空いてしまいます。
メニュー8,9の指定方法がまずいのでしょうか！？？
↓こんな感じに表示させたいのです。
メニュー8 メニュー9
==============================
メニュー1 メニュー2 メニュー3 〜
==============================
<p>コンテンツ</p>
ご指導お願い致します。
■ソース■
<html>
<head>
<style type="text/css">
<!--
div#container{
width:750px;
margin:0 auto;
}
div#navcontainer {
padding: 0;
margin: 0;
height: 39px;
background: #00FFFF;
}
div#navcontainer li {
display:inline;
list-style-type:none;
}
div#navcontainer li.menu1 a,div#navcontainer li.e-shop a,div#navcontainer li.menu2 a,div#navcontainer li.menu3 a,div#navcontainer li.menu4 a,div#navcontainer li.menu5 a,div#navcontainer li.menu6 a,div#navcontainer li.menu7 a {
display:block;
float:left;
text-indent:-9877em;
text-decoration:none;
overflow:hidden;
height: 39px;
}
div#navcontainer li.menu8 a {
top: -20px;
position: relative;
left: 550px;
}
div#navcontainer li.menu9 a {
top: -20px;
position: relative;
left: 550px;
}
div#header p {
background: #FF0000;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>ここにh1</h1>
<div id="navcontainer">
<ul>
<li class="menu1"><a href="#">メニュー1</a></li>
<li class="menu2"><a href="#">メニュー2</a></li>
<li class="menu3"><a href="#">メニュー3</a></li>
<li class="menu4"><a href="#">メニュー4</a></li>
<li class="menu5"><a href="#">メニュー5</a></li>
<li class="menu6"><a href="#">メニュー6</a></li>
<li class="menu7"><a href="#">メニュー7</a></li>
<li class="menu8"><a href="#">メニュー8</a></li>
<li class="menu9"><a href="#">メニュー9</a></li>
</ul>
</div><!--navcontainer-->
<p>ここに文章ここに文章ここに文章ここに文章ここに文章<br />
ここに文章ここに文章ここに文章ここに文章<br /><br /><br />
</p>
</div><!--header-->
</div><!--container-->
</body>
</html>
メニュー8,9を横並びに表示させた上に表示するようにしたいのですが
divとpの間に一文字分の隙間が空いてしまいます。
メニュー8,9の指定方法がまずいのでしょうか！？？
↓こんな感じに表示させたいのです。
メニュー8 メニュー9
==============================
メニュー1 メニュー2 メニュー3 〜
==============================
<p>コンテンツ</p>
ご指導お願い致します。
■ソース■
<html>
<head>
<style type="text/css">
<!--
div#container{
width:750px;
margin:0 auto;
}
div#navcontainer {
padding: 0;
margin: 0;
height: 39px;
background: #00FFFF;
}
div#navcontainer li {
display:inline;
list-style-type:none;
}
div#navcontainer li.menu1 a,div#navcontainer li.e-shop a,div#navcontainer li.menu2 a,div#navcontainer li.menu3 a,div#navcontainer li.menu4 a,div#navcontainer li.menu5 a,div#navcontainer li.menu6 a,div#navcontainer li.menu7 a {
display:block;
float:left;
text-indent:-9877em;
text-decoration:none;
overflow:hidden;
height: 39px;
}
div#navcontainer li.menu8 a {
top: -20px;
position: relative;
left: 550px;
}
div#navcontainer li.menu9 a {
top: -20px;
position: relative;
left: 550px;
}
div#header p {
background: #FF0000;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>ここにh1</h1>
<div id="navcontainer">
<ul>
<li class="menu1"><a href="#">メニュー1</a></li>
<li class="menu2"><a href="#">メニュー2</a></li>
<li class="menu3"><a href="#">メニュー3</a></li>
<li class="menu4"><a href="#">メニュー4</a></li>
<li class="menu5"><a href="#">メニュー5</a></li>
<li class="menu6"><a href="#">メニュー6</a></li>
<li class="menu7"><a href="#">メニュー7</a></li>
<li class="menu8"><a href="#">メニュー8</a></li>
<li class="menu9"><a href="#">メニュー9</a></li>
</ul>
</div><!--navcontainer-->
<p>ここに文章ここに文章ここに文章ここに文章ここに文章<br />
ここに文章ここに文章ここに文章ここに文章<br /><br /><br />
</p>
</div><!--header-->
</div><!--container-->
</body>
</html>
|
|
|
|
|
|
|
|
CSSテクニック 更新情報
CSSテクニックのメンバーはこんなコミュニティにも参加しています
人気コミュニティランキング
- 1位
- 30代〜40代から友達作り【友活】
- 35809人
- 2位
- 福岡 ソフトバンクホークス
- 42879人
- 3位
- 横浜ＤｅＮＡベイスターズ
- 36155人