Announcement

**Chrischaaan** · 11.01.2010, 11:43

das st�rt deswegen, weil in map_canvas eine google-karte angezeigt wird. diese hat oben rechts das men� zur kartenauswahl. wenn das optionsmen� dar�berliegt sieht man die kartenauswahl nicht. da st�rt es dann. generell werden eben inhalte aus map_canvas verdeckt...

bye, Christian.

**Falk Pr�fer** · 11.01.2010, 12:07

Originally posted by Chrischaaan View Post

...generell werden eben inhalte aus map_canvas verdeckt...

Solange du das option-div nicht in irgendeiner Form absolut positionierts sollte das nicht passieren. Text wird um das div herumfliesen und ein Bild, welches nicht links daneben passt, wird soweit nach unten verschoben, bis es eben unter dem div steht.

**Chrischaaan** · 11.01.2010, 13:37

eben. und genau da liegt das problem. bilder werden nach unten verschoben. und das soll halt nicht sein. so wie ich es jetzt hab geht es eigentlich. problem ist halt nur, dass das map_canvas nicht bis ans option-div rangeht wenn das option div schmaler als 25% ist...

**Falk Pr�fer** · 11.01.2010, 14:59

Originally posted by Chrischaaan View Post

eben. und genau da liegt das problem. bilder werden nach unten verschoben. und das soll halt nicht sein. ...

Wenn das Bild in map_canvas breiter ist als dieser Bereich, was soll denn dann mit dem Bild passieren? Ich verstehe das Problem nicht? Warum verpasst du dem #map_canvas nicht einfach noch ein "overflow: auto"? Dann werden Scrollbalken eigeblendet, wenn das Bild gr��er ist als der verf�gbare Bereich.

[highlight=css]
...
#map_canvas
{
height: 100%;
background-color: green;
overflow: auto;
}
...
[/highlight]

Gru� Falk

**Chrischaaan** · 11.01.2010, 15:23

das problem ist, dass das map_canvas mit deiner variante hinter dem option-div liegt. die gesamte breite des map_canvas darf nur bis an das option div heranhreichen. das option div darf keinen bereich von map_canvas verdecken...

**Falk Pr�fer** · 12.01.2010, 10:48

Hallo,

Originally posted by Chrischaaan View Post

das problem ist, dass das map_canvas mit deiner variante hinter dem option-div liegt. ...

Nein, dass Problem ist das du mir nicht zuh�rst oder mir nicht glaubst! Hast du meine Vorschl�ge ausprobiert oder denkst du nur das es so ist?

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
  <title>Titel</title>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

  <style type="text/css">
    #content
    {
      top:                100px;
      left:               5px;
      right:              5px;
      bottom:             5px;
      position:           absolute;
      overflow:           auto;
    }

    #map_canvas
    {
      height:             100%;
      background-color: green;
      overflow: auto;
    }

    #options
    {
      background-color:   rgb(64, 64, 64);
      float:              right;
      max-width:          300px;
      height:             100%;
    }
  </style>
</head>
<body>
<div id="content">
  <div id="options">

    <fieldset><legend><b>Alle Fahrzeuge</b></legend></fieldset>
  </div>
  <div id='map_canvas' class="scroller" >
      Hier ist map_canvas!
      <img src="sonne5.jpg" alt="Sonne" title="Sonne" width="600" height="450" />
  </div>
</div>
</body>
</html>

Ergebnis bei ausreichend Platz: siehe Anhang anzeige1.jpg
Ergebnis bei zu wenig Platz: siehe Anhang anzeige2.jpg

Da wird NICHTS vom option-div verdeckt!

Gru� Falk

Attached Files

**Chrischaaan** · 12.01.2010, 11:00

hallo,

ich glaube dir sehr wohl was du sagst, da du viel mehr erfahrung hast als ich. und selbstverst�ndlich h�r ich dir auch zu. und ich habs ausprobiert. wenn ich das option div nur 90% hoch mahc, seh ich, dass der gr�ne bereich unter dem option div weitergeht. das problem bei der google karte ist jetzt, dass die eben reingeladen wird und durch das reinladen verlagert sich das map_canvas �ber das option-div... so ist entweder das option-div verschwunden oder wenn ich f�r das map_canvas noch float: left; setze ist ein teil der karte weg...

da sone karte ja im prinzip unterschiedlich gro� sein soll, kann und ist sollte das an deinem beispiel erkl�rt folgenderma�en aussehen:

bild 1: es ist nix gr�nes zu sehen ( soll nict zu sehen sien. das bild erstreckt sich �ber die ganze breite. entf�llt der inhalt f�r das option div ist dieses 0px gro�. also anzeige entf�llt. karte erstreckt sich trotzdem �ber die ganze breite...

verstehst du was ich meine? im prinzip hab ich ein monstr�s riesiges bild von dem ein ausschnitt in dem map_canvas angezeigt werden soll...

**Falk Pr�fer** · 12.01.2010, 11:28

Originally posted by Chrischaaan View Post

...wenn ich das option div nur 90% hoch mahc, seh ich, dass der gr�ne bereich unter dem option div weitergeht.

Ja gut, die gr�ne Farbe ist doch eher irrelevant, die kann man der normalen Hintergrundfarbe anpassen, damit sieht das keiner mehr. Viel entscheidender ist doch das der Inhalt (Text, Bild, etc.) richtig angezeigt wird.

Originally posted by Chrischaaan View Post

...das problem bei der google karte ist jetzt, dass die eben reingeladen wird und durch das reinladen verlagert sich das map_canvas �ber das option-div... so ist entweder das option-div verschwunden oder wenn ich f�r das map_canvas noch float: left; setze ist ein teil der karte weg...

Das ist doch dann aber kein Problem des Layouts, sondern eher von dem "Code" der die Karte l�dt.

Originally posted by Chrischaaan View Post

...verstehst du was ich meine? im prinzip hab ich ein monstr�s riesiges bild von dem ein ausschnitt in dem map_canvas angezeigt werden soll...

Ehrlich gesagt, nein. Anhand deiner Beispiele kann ich es nicht nachvollziehen! Was ist an meinem Beispiel anders? Da ist auch ein Bild drin. Und wenn der Platz nicht ausreicht, dann wird nichts �berlagert oder verdeckt, sondern einfach Scrollbalken eingeblendet. Was soll denn sonst passieren wenn der Platz nicht ausreicht? Soll sich das Bild automatisch verkleinern oder was?

Gru� Falk

**Chrischaaan** · 12.01.2010, 12:08

hi,

das gr�n ist zugegebenerma�en egal. es ging mir nur darum, das problem zu demonstrieren...

ich hab jetzt folgende bilder gemacht und poste den entsprechenden css code dazu um zu zeigen, was wann passiert:

Code:

#content
{
    top:                105px;
    left:               5px;
    right:              5px;
    bottom:             5px;
    position:           absolute;
}

    #map_canvas
    {
        height:             100%;
    }


    #options
    {
        background-color:   rgb(64, 64, 64);
        float:              right;
        max-width:          300px;
        height:             100%;
        overflow:           auto;
    }

Code:

#content
{
    top:                105px;
    left:               5px;
    right:              5px;
    bottom:             5px;
    position:           absolute;
}

    #map_canvas
    {
        height:             100%;
        float:              left;
    }


    #options
    {
        background-color:   rgb(64, 64, 64);
        float:              right;
        max-width:          300px;
        height:             100%;
        overflow:           auto;
    }

f�ge ich jetzt bei map_canvas im letzten beispiel wieder width 100% hinzu, rutscht wieder das option div runter.

Code:

#content
{
    top:                105px;
    left:               5px;
    right:              5px;
    bottom:             5px;
    position:           absolute;
}

    #map_canvas
    {
        height:             100%;
        float:              left;
        min-width:          75%;
        max-width:          100%;
        right:              0px;
    }


    #options
    {
        background-color:   rgb(64, 64, 64);
        float:              right;
        max-width:          25%;
        height:             100%;
        overflow:           auto;
    }

hier entsteht fast das, was gewollt ist: beide elemente sind nebeneinander. ist das gesamte fenster kleiner, so verschwindet auch noch der wei�e bereich zwischen den elementen. das entsteht nur, weil die breite des option-div eine max-width von 25% hat. ist der inhalt schmaler, entsteht halt der wei�e rand. idealerweise sollte nun die karte auch diesen wei�en restbereich ausf�llen...

hoffe, ich konnte es noch etwas lichten, das problem. den "effekt" mit option-div �ber karte hab ich jetzt nich nochmal hinbekommen.war jedenfalls auch paar mal beim probieren vorgekommen...

bye, Christian.

**Falk Pr�fer** · 13.01.2010, 15:40

Hallo,

ist denn das Bild unterschiedlich gro�? Sorry wenn ich das nicht nachvollziehen kann, ich hab mich noch nicht mit dem Google-Maps-API besch�ftigt.

Du hast im ersten Fall ein gro�es Bild, das passt nicht - logisch. Mit meiner Scroll-L�sung w�re das Option-Div aber oben sichtbar und du k�nntest die Karte Hin- und Herscrollen. Das zweite Bild ist sehr schmal (sieht etwas sch... aus) aber was hat das mit der Formatierung der Divs zu tun ?

Das dritte Bild hat praktisch die richtige Gr��e, hier w�rdest du dann nicht scrollen m�ssen...

Also Sorry, ich wei� langsam nicht mehr worauf du hinaus willst... Auf meine Vorschl�ge gehst du nicht ein, meine Fragen beantwortest du nicht. Stattdessen bringst du drei unterschiedliche Screenshots mit jeweils anderem Bild und unterschiedlichen Formatierungen, die dadurch �berhaupt nicht vergleichbar sind

Ich kann dir dann wahrscheinlich nicht helfen!

Gru� Falk

**Chrischaaan** · 13.01.2010, 16:21

hi,

an sich ist ja so eine karte wie ein riesiges bild, von dem ich in dem div nur einen ausschnitt habe. der bildausschnitt ist somit unterschiedlich gro�, ja. map_cancas muss meiner meinung nach nicht scrollbar sein. den kartenausschnitt zu ver�ndern �bernimmt die karte selbst. map_canvas soll daher nur eine gewisse breite und h�he haben. beides maximal. wenn ich overflow: auto setze macht der die karte trotzdem wieder so schmal wie in bild 2. scrollbalken kommen dann zwar, aber das macht halt wenig sinn weil ich mich ja nicht durch die ganze welt scrollen kann und das �bernimmt die karte eh selbst...

deine vorschl�ge finden beachtung, falk. ich �bergehe diese nicht, ohne sie getestet zu haben. deswegen habe ich die 3 bilder gepostet und die quelltexte dazu. die vorschl�ge die du unterbreitet hattest liefen alle darauf hinaus, dass das ergebnis entweder dem 1. oder zweiten bild entspricht.

wei�t du prinzipiell was ich mit der darstellung erreichen m�chte?

bye, Christian.

**Falk Pr�fer** · 13.01.2010, 23:12

Originally posted by Chrischaaan View Post

...wei�t du prinzipiell was ich mit der darstellung erreichen m�chte?

Was du erreichen m�chtest ist mir (glaube ich zumindest) prinzipiell klar. Mein Problem ist, dass ich das deine nicht nachvollziehen kann und wir deshalb wohl aneinander vorbeireden. Mir ist eben nicht klar, wie das Google-Bild zustande kommt, woher die Information f�r die Breite bezogen wird. Wenn du dir mit Javascript den Wert von offsetWidth f�r das Canvas-div ausgeben l��t, dann entspricht das exakt dem tats�chlich sichtbaren Bereich - ohne das Option-div.

Ich gehe mal davon aus, dass die Google-Map mit Javascript eingebunden wird. Javascript wird also sowieso ben�tigt. Versuch doch mal innerhalb des (wie von mir vorgeschlagen) formatierten Canvas-div ein weiteres div anzulegen. F�r dieses setzt du per onload die Eigenschaft style.width auf den Wert document.getElementById('map_canvas').offsetWidth+ 'px'. Dieses so (mit fester Breite) formatierte div gibst du dann als Container f�r die Google-Map an.

Gru� Falk

**Chrischaaan** · 14.01.2010, 02:01

das funktioniert :-) :-) :-) :-) :-) geil! danke!

hier nochmal der komplette quellcode, f�r alle, die das selbe problem haben und die l�sung brauchen.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <title>Titel</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css">
            #content
            {
                top:                5px;
                left:               5px;
                right:              5px;
                bottom:             5px;
                position:           absolute;
            }

                #fullsize
                {
                    height:             100%;
                    overflow:           auto;
                    background-color:   green;
                }

                #map_canvas
                {
                    height:             100%;
                    overflow:           auto;
                }

                #options
                {
                    background-color:   rgb(64, 64, 64);
                    float:              right;
                    max-width:          25%;
                    height:             100%;
                    overflow:           auto;
                }
        </style>
        <script type="text/javascript">
            function setFullsize()
            {
                document.getElementById('fullsize').style.width = document.getElementById('map_canvas').offsetWidth+ 'px';
            }
        </script>
    </head>
    <body onload="setFullsize();">
        <div id="content">
            <div id="options">
                Hier stehen Optionen
            </div>
            <div id="fullsize">
                <div id='map_canvas'>
                    Hier ist mein Inhalt
                </div>
            </div>
        </div>
    </body>
</html>

vielen dank falk f�r deine geduld und deine kompetente hilfe!

bye, Christian.

Announcement

kleines DIV Positionierungsproblem

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment