0

私は試しましたが、グーグルマップのレイアウトの上に行くインターフェースを配置するのに完全に失敗しました。私がやろうとしたことはこれです：

ここに画像の説明を入力してください

しかし、私はこれで終わりました

私が持っているフォーマットは次のようなものです：

<div id="GoogleMap"> // the containing google maps layer
    <!-- map will go here <div id="GoogleMapCanvas"></div> --> //eventual map
    <div class="map-topmenu"></div>   //my interface
    <div class="map-leftmenu"></div>  //my interface
    <div class="map-rightmenu"></div> //my interface
    <div class="map-bottommenu"></div>//my interface
</div>

トップメニューを横中央、画面上から10pxにすることに成功しました。

左右のメニューを縦に中央揃えにすることができず、左のメニューを中央揃えにするために必要なコードがおかしくなっていることに気づき始めました。そして、一番下のメニューに関しては、私は完全に失敗しました-しかし、私が試した多くの異なる方法。

誰かが私のコードを見て、どこで混乱したか教えてもらえますか？本当にありがとう！

body {
    border: 0 none;
    margin: 0;
    padding: 0;
    height:100%;
}
#GoogleMap {
    position:absolute;
    background-color: grey;
    background-position: 50% 50%;
    background-repeat: repeat;
    height: 100%;
    overflow: hidden;
    width: 100%;
}
.map-topmenu {
    height: 52px;
    width: 353px;
    background-image: url(http://i.imgur.com/KlyKR.png);
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
.map-leftmenu {
    height: 263px;
    width: 77px;
    margin-left: 10px;
    top:50%;
    position: absolute;
    margin-top: -150px;
    background-image: url(http://i.imgur.com/Q3d1r.png);
}

.map-rightmenu {
    background-image: url(http://i.imgur.com/si6dl.png);
    height: 147px;
    width: 280px;
    margin-right: 10px;
    float: right;
    top:50%;
}
.map-bottommenu {
    background-image: url(http://i.imgur.com/iDmuP.png);
    height: 52px;
    width: 312px;
    margin-right: auto;
    margin-bottom: 10px;
    bottom: 0;
    margin-left: auto;
}
4

2 に答える 2

2

負のマージンで絶対ポジショニングを使用します。

http://jsfiddle.net/PJTDy/3/

#GoogleMap {
    position:absolute;
    background-color: grey;
    height: 100%;
    overflow: hidden;
    width: 100%;
}

.map-topmenu, .map-leftmenu, .map-rightmenu, .map-bottommenu {
    z-index:1;
    position:absolute;
    background:blue;
} 
.map-topmenu {
    top:0;
    left:50%;
    margin-left:-176px;
    height: 52px;
    width: 353px;
}
.map-leftmenu {
    height: 263px;
    width: 77px;
    left:0px;
    margin-top:-131px;
    top:50%;
}
.map-rightmenu {
    height: 147px;
    width: 280px;
    right:0;
    top:50%;
    margin-top:-73px;
}
.map-bottommenu {
    height: 52px;
    width: 312px;
    bottom: 0;  
    left:50%;
    margin-left:-156px;   
}
于 2012-06-30T18:50:06.723 に答える
0

メインコンテナdiv（id = "GoogleMap"）を絶対に配置する理由は何ですか？下部のメニューには位置プロパティが設定されていません。それ以外の場合は、下部が0の上部のメニューとまったく同じ方法で配置できます。

于 2012-06-30T18:52:31.263 に答える