0
テーブルの上の空白部分に問題があります。私は2つのボタンを保持しているテーブルを持っていますし、そのすぐ下にGoogleマップがあります。私はあなたが望むなら、それらをリストに載せるのではなく、地図の上にテーブルを浮かべたいと思います。私は約10ピクセルの空白を取得し、私はそれほど多くの問題を抱えています。何か案は？ここに私のHTMLの最初の部分は次のとおりです。不思議な白い空白ページの上部に
<body onload="initMap()">
<div>
<table width="100%" >
<tr>
<th height="45" align="right" bgcolor="#CED0D0" scope="col">
<a href = http://search.html class="classname">Search</a>
<a href = http://loggedout.html class="classname">Log Out</a>
</th>
</tr>
</table>
</div>
<div id="map_canvas" style="float:left; width:100%; height:100%"></div>
地図CSS
html { height: 100% }
body { height: 100%; margin: 0; padding: 0; }
#map_canvas { height: 100% }
table.alerts {
border-width: 8px;
border-spacing: 2px;
border-style: outset;
border-color:#FFF;
border-collapse: separate;
background-color:#FFF;
bottom:0;
position:absolute;
font-family:Lucida Grande, Tahoma, Arial, Verdana, sans-serif;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
float:left;
margin-right: 5px;
}
table.alerts th {
border-width: 8px;
padding: 0px;
border-style: none;
border-color:#999;
background-color:#FFFFFF;
font-family:Arial-Black,Helvetica,sans-serif;
height: 40px;
text-align: center;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-size:130%;
}
table.alerts td {
border-width: 0px;
padding: 3px;
border-style: none;
border-color:#039;
background-color: rgb(247, 247, 242);
font-family:"Arial", Gadget, sans-serif;
font-weight:bold;
}
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.60;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 20%;
left: 13%;
width: 100%;
height: 60%;
padding: 10px;
background-color: white;
z-index:1002;
overflow: auto;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
#bar {
position:absolute;
top: 0px;
right: 0px;
}
#body {
margin:0;
padding:0;
}
.greyBox{
padding:7px;
background-color:#c6c6c6;
margin-bottom:0px;
margin-left:4px;
width:200px;
height:26px;
font-family:Arial,Helvetica,sans-serif;
text-align : center;
font-size:130%;
}
.bottom{
position: absolute;
bottom: 0;
}
p.hide {
display: none;
}
ボタンのCSS：
.classname {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
background:-moz-linear-gradient(center top, #ededed 5%, #dfdfdf 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}.classname:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed));
background:-moz-linear-gradient(center top, #dfdfdf 5%, #ededed 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}.classname:active {
position:relative;
top:1px;
}
CSSから専門用語をすべて削除しました。それは私が取り出して知っていたはずの以前のテストからでした。私はあなたの提案を追加しましたが、うまくいかないようです。何か不足していますか？ – mkyong
気にしない、わかった。別のCSSファイルから相反するコードがありました。しかし、助けてくれてありがとう。 – mkyong
私が最近学んだことは、インラインブロック要素は、実際のhtmlツリーの空白からそれらの間にスペースを持っています。しかし、それはおそらくここのソースではありません。質問のコードを整理しましたか？もしそうなら、私は再テストするでしょう。しかし、私はテーブルを使用しないことをお勧めします。この場合、明らかな価値がないためです。 – Anthony