2010-05-07 10 views
10

Wie schwimme ich ein div "Menü" oben auf meiner Google Maps API "Karte" div. Und eventuell eine Transparenz von 50% auf dem Menü div hinzufügen. Kann das gemacht werden?div über div mit Google Maps API

#map {width: 835px; height 540px; float: left;} 
#menu {width: 145px; float: right; padding-top: 10px;} 

<div id="map"></div> 
<div id="menu"></div> 
+0

Haben Sie ein Live-Beispiel, das wir uns anschauen können? – Kyle

Antwort

17

Kann nicht geändert, um die Positionen der DIVs wie folgt aus:

<div id="menu"></div> 
<div id="map"></div> 

Wenn Sie nicht so etwas wie dies gehen könnte:

<div id="map"></div> 
<div id="menu"></div> 

#menu 
{ 
    position: absolute; 
    top: 10px; /* adjust value accordingly */ 
    left: 10px; /* adjust value accordingly */ 
} 

Update 2

Cross- Browser Transparenzart:

.dropSheet 
{ 
    background-color: #000000; 
    background-image: none; 
    opacity: 0.5; 
    filter: alpha(opacity=50); 
} 

Wenden Sie einfach die Klasse dropSheet auf das Element an, das transparent gemacht werden soll.

+0

perfekt! Eine weitere Frage .. Wie würde ich eine Cross-Browser-transparente Hintergrundfarbe/-bild zum Menü hinzufügen? –

+0

@ JHM_67: Siehe meine aktualisierte Antwort dafür bitte. – Sarfraz

+0

@Sarfraz - ist das Cross-Browser? Was ist mit IE6? –

2

Nun, die Grundstruktur eines Schwimmers sollte ein Verpackungselement enthalten, das seine Position Eigenschaft hat etwas anderes als Standard festgelegt, und ein Element, das den Schwimmer am Ende löscht.
Like this:

#wrapper { 
    position:relative; 
} 
#menu { 
    float:right; 
} 

<div id="wrapper"> 
    <div id="map"></div> 
    <div id="menu"></div> 
    <br clear="both" /> 
</div> 

Der Code zur Verfügung gestellt hat nicht speziell getestet worden, aber der Schwimmer und die Tatsache, dass das Menü der höheren Schicht als die Karte ist, sollte das Menü oben auf der Karte in der rechten machen Seite. Informationen zum Problem mit der Transparenz finden Sie unter this fantastic resource.

Hoffnung, die dir geholfen hat.

+0

Das ist eine großartige Ressource! – Kyle

+0

Haben '
' -Tag wirklich das Attribut 'clear', von dem ich nichts wusste? – falsarella