![[関西]WEBデザイン 交流会[大阪]](https://logo-imagecluster.img.mixi.jp/photo/comm/94/64/4999464_227s.gif){kind=logo}
タイトルが分かりにくくてすいません。
http://
なのですが、ロールオーバーさせている部分（[abc][def][ghi]の部分）と、その下の「あいうえお」「かきくけこ」「さしすせそ」の部分が、重なってしまいます。
ロールオーバー部は50pxとっております。
#content{
position: absolute;
}
にしていると今のように「あいうえお」部が上に重なり、
#content{
position: relative;
}
にするとロールオーバー部が上になります。
これは何故なんでしょうか？また、きちんとロールオーバー部を50ｐｘ表示するには、どうすれば良いでしょうか？
なおソースなんですが、ここに書いても良かったのですが、長くなりそうなので、上記のアドレスからダウンロードしていただけましたら幸いです。（index2.htmlとbase.cssが主に使っている分です。）
なにとぞ、宜しくお願いいたします。
http://
なのですが、ロールオーバーさせている部分（[abc][def][ghi]の部分）と、その下の「あいうえお」「かきくけこ」「さしすせそ」の部分が、重なってしまいます。
ロールオーバー部は50pxとっております。
#content{
position: absolute;
}
にしていると今のように「あいうえお」部が上に重なり、
#content{
position: relative;
}
にするとロールオーバー部が上になります。
これは何故なんでしょうか？また、きちんとロールオーバー部を50ｐｘ表示するには、どうすれば良いでしょうか？
なおソースなんですが、ここに書いても良かったのですが、長くなりそうなので、上記のアドレスからダウンロードしていただけましたら幸いです。（index2.htmlとbase.cssが主に使っている分です。）
なにとぞ、宜しくお願いいたします。
|
|
|
|
コメント(5)
初めての書き込みになりますが、どうぞよろしく。
まず、IE6・FireFox・Netscape7・Operaで表示確認しましたが、それぞれレイアウトが崩れます。
positionがどうやら曲者のようですね。
ロールオーバー部分をpositionを使わず、floatにしたらすんなり実現できました。
ちょっと長くなりますが、貼っちゃいます^^；
/* ここから */
* {
margin:0;
padding:0;
}
body {
color:#ffffff;
background:#ffffff;
}
a img {
border:none;
color:#ffffff;
background:transparent;
}
#main {
width:750px;
}
#head {
margin:0 0 20px 0;
height:250px;
background:red;
}
#head h1 {
float:left;
margin:0;
border:1px solid #ffff00;
width:350px;
height:250px;
font-size:50px;
font-weight:normal;
color:#ffffff;
background:pink;
}
#head #headMigi {
float:right;
width:384px;
height:150px;
color:#ffff00;
border:5px solid #ffff00;
background:green;
}
#head ul#alpha {
clear:both;
list-style-type:none;
}
#head ul#alpha li {
float:left;
}
#head ul#alpha li a {
display:block;
width:250px;
height:50px;
text-decoration:none;
background:blue;
}
#head ul#alpha li a:hover {
background:skyblue;
}
#content {
}
#aiueo{
float:left;
width:290px;
height:200px;
background:#cccccc;
border:solid 5px #ffff00;
}
#kaiueo{
float:right;
width:300px;
height:200px;
background-color:#666666;
color:#000000;
border-top:solid 5px #ffff00;
border-bottom:solid 5px #ffff00;
}
#saiueo{
float:right;
width:150px;
height:200px;
font-weight: bold;
border-top:solid 5px #ffff00;
border-bottom:solid 5px #ffff00;
background-color:#cccc00;
}
/* ここまで */
背景画像を使わず背景色にしたので、実装するときは変更してみてください。
こんな感じでどうでしょう？
まず、IE6・FireFox・Netscape7・Operaで表示確認しましたが、それぞれレイアウトが崩れます。
positionがどうやら曲者のようですね。
ロールオーバー部分をpositionを使わず、floatにしたらすんなり実現できました。
ちょっと長くなりますが、貼っちゃいます^^；
/* ここから */
* {
margin:0;
padding:0;
}
body {
color:#ffffff;
background:#ffffff;
}
a img {
border:none;
color:#ffffff;
background:transparent;
}
#main {
width:750px;
}
#head {
margin:0 0 20px 0;
height:250px;
background:red;
}
#head h1 {
float:left;
margin:0;
border:1px solid #ffff00;
width:350px;
height:250px;
font-size:50px;
font-weight:normal;
color:#ffffff;
background:pink;
}
#head #headMigi {
float:right;
width:384px;
height:150px;
color:#ffff00;
border:5px solid #ffff00;
background:green;
}
#head ul#alpha {
clear:both;
list-style-type:none;
}
#head ul#alpha li {
float:left;
}
#head ul#alpha li a {
display:block;
width:250px;
height:50px;
text-decoration:none;
background:blue;
}
#head ul#alpha li a:hover {
background:skyblue;
}
#content {
}
#aiueo{
float:left;
width:290px;
height:200px;
background:#cccccc;
border:solid 5px #ffff00;
}
#kaiueo{
float:right;
width:300px;
height:200px;
background-color:#666666;
color:#000000;
border-top:solid 5px #ffff00;
border-bottom:solid 5px #ffff00;
}
#saiueo{
float:right;
width:150px;
height:200px;
font-weight: bold;
border-top:solid 5px #ffff00;
border-bottom:solid 5px #ffff00;
background-color:#cccc00;
}
/* ここまで */
背景画像を使わず背景色にしたので、実装するときは変更してみてください。
こんな感じでどうでしょう？
- mixiユーザー
- ログインしてコメントしよう！
|
|
|
|
