HTML: OpenLayers Karte+Footer darunter

Hi, ich arbeite gerade an einer Karte und das i Tüpfelchen will einfach nicht klappen!
Ich möchte die Karte und einfach darunter einen Footer anzeigen, so wie es http://olm.openstreetmap.de auch macht.

Also habe ich im Body 2 DIVs untereinander stehen und schon alle möglichen CSS Verrenkungen ausprobiert. Nur leider verschwindet die Karte immer, wenn ich beide Angaben mit % nur relativ mache. So ist das aber nicht sehr schön, da die Karte bei Größenänderungen sich nicht mit verkleinert.

Hat da jemand eine Idee? Aus den Beispielen die ich gesehen habe, werde ich nicht schlau, da ich das alles irgendwie schon probiert habe :confused:

Vielleicht solltest Du Deine Divs hier auch mal wiedergeben? :slight_smile:

Ich hab’ auch schon mit verschwindenden Karten gekämpft, meist lag es an einer Mischung aus % und Pixelangaben, vor allem wenn bei den Pixeln die Angabe px gefehtl hat.

bye
Nop

nun das ist nichts spannendes:


<body>
  <div id="map" style="width:100%;height:100%">
  </div>
  <div id="footer style="height:30px; margin-bottom:0px ....">
  </div>

Hmmm, 100% + 30px das passt nicht zusammen.
Probier mal statt height:100% im ersten

height:95% (oder 99%) zu verwenden.

Nur geraten
Edbert (EvanE)

ok? Aber muss ich dem unteren nicht die Aufteilung dann als 5% oder so geben?
Das hätte doch dann aber den Nachteil, dass er sich unter Umständen bei anderen Auflösung zu viel/wenig Platz schnappt als für den Text gebraucht?

Sieht Dein Code wirklich so aus?

<div id="footer style="height:30px; margin-bottom:0px ....">

Dann reicht vielleicht schon eine kleine Fehlerkorrektur :slight_smile:

<div id="footer" style="height:30px; margin-bottom:0px ....">

Sonst sehe ich bei 100% Höhe und Breite keine Probleme. Bei der ÖPNV-Karte funktioniert es zumindest :slight_smile:

Moin,

ne das war nur so aus dem Gedächtnis, war da nicht am betreffenden Rechner. Hier mal das Orginal, das trotz Änderungen nicht läuft :frowning:


<body>
        <div id="map" style="width:100%; height:95%;"></div>
        <div id="footer" style="padding-left:15px;font-size:11px;color: #000000;font-family: Arial,sans-serif;background-color: #CBEEA7;width:100%;height:30px;position: absolute; bottom: 0;">
            <p>
            Data harvested by <a href='http://wiki.openstreetmap.org/wiki/User:UserGroupsBot'>UserGroupsBot</a> at <script> document.write(export_date);</script>
            </p>
        </div>
     ....

also bei mir läufts so:


...
<body onload="init();">
    <!-- define a DIV into which the map will appear. Make it take up the whole window -->
    <div style="width:100%; height:95%" id="map"></div>
        <div id="footer" style="padding-left:30px;font-size:11px;color: #000000;font-family: Arial,sans-serif;background-color: #CBEEA7;width:100%;height:30px;position: absolute; bottom: 0;">
            <p>
            Data harvested by <a href='http://wiki.openstreetmap.org/wiki/User:UserGroupsBot'>UserGroupsBot</a> at <script> document.write(export_date);</script>
            </p>
        </div>    
</body>
</html>

Ich würde aber auch dazu tendieren, die Bildschirmfläche prozentmäßig aufzuteilen, nicht oben % und unten px.

Grß,
ajoessen

Also ich habe deinen Code 1:1 eingebaut und bei mir geht es nicht :confused: Ich muss bei der mpa height:500px nehmen. Habs unter FF und IE getestet. Kann das sein, dass ich da vorher was beim OpenLayers noch setzen muss?

Ich habs in meinen OSMviewer von
http://bahnradwandern.bplaced.net/gpxviewer.zip
eingebaut. Da gibts noch ein style.css, aber das ist original von OL.

Wenn du deinen footer auf 95% Breite skalierst, verschwinden auch die scrollbalken.

Gruß,
ajoessen

Also auch auf die Gefahr hin, dass ich mich lächerlich mache aber ich finde den Fehler nicht :confused:
Ich habe deine Sachen nochmal gründlich mit meinen vergleichen aber es klappt einfach nicht.

Könnte sich einer von euch sich bitte mal mit klarem Auge ransetzen? So ein Mist…
http://wwwstud.informatik.uni-rostock.de/mm337/osm/usergroups/

Ich bin eigentlich keiner von denen, die gerne Arbeit andere machen lassen aber irgendwie stehe ich mir gerade arg auf dem Schlauch :frowning:

Bei mir funktionierts im Firefox und Safari, wenn ich dem html- und body-Tag auch eine Höhe von 100% gebe. Vermutlich umgeht man damit ein paar Browservoreinstellungen. Die ÖPNV-Karte hat es wohl auch anders gelöst

Nicht zum eigentlichen Thema, aber
Bad Neuenahr-Ahrweiler ist ins Elsaass, SW Strassburg geraten!

Ich seh was :wink:
Firefox, K-Meleon, IE6
Nur mit Auflösung 800x600 verschwindet der footer hinter der Karte.
Ist ja auch logisch, wenn die Karte 500px hoch sein soll, und der Browserkopf eine gewisse Höhe hat.
Bei höheren Auflösungen sehe ich beides.

Gruß,
ajoessen

Ja und wie kriege ich das mit der relativen Größe hin und dass die Karte somit maximal groß ist?

90% für die Karte und 10% für den footer; oder 95%/5%. Nur eben keine festen Angaben, weil du nicht weisst, mit welcher Auflösung der Endnutzer am PC/netbook/Smartphone werkelt.

Und für die Breite nur 95%, damit die Rollbalken verschwinden.

gruß,
ajoessen

Leute aber dann verschwindet meine Karte doch xD deswegen hatte ich doch gebeten, dass mal einer einen frischen Blick über meinen Code schaut…

Danke, die hatten einen Fehler im Template, deswegen war das natürlich auf der www.openstreetmap.de Seite auch so :slight_smile:

ok habe es endlich selber hinbekommen, musste noch “position:absolute” rein.

Wenn ich mich da mal dranhängen darf.
Bonn fehlt bei dir komplett, ist aber auf www.openstreetmap.de vorhanden.

Edbert (EvanE)