kleines DIV Positionierungsproblem

[Chrischaaan]

hallo zusammen,

ich habe ein problem mit der anordnung von divs. wahrscheinlich ist es recht lecht zu lösen aber ich komm nicht drauf. hab mit den divs noch nicht sooo viel erfahrung.

ich habe ein großes div für den inhalt der seite. es heißt divcontent. dieses div soll, wenn der inhalt nicht die ganze seite ausfüllen würde so groß wie möglich dargestellt werden. also seitenfüllend was die höhe betrifft. ist der inhalt größer als die bildschirmhöhe soll das div so angepasst werden, dass der ganze inhalt reinpasst.
neben diesem großen divcontent ist eines für optionen. es heißt options und soll, wenn inhalt vorhanden ist 300px breit sein. ansonsten einfach keine breite sozusagen. also es soll nur erscheinen wenn inhalt da ist und wenn inhalt da ist dann mit einer bestimmten breite.

die breite von divcontent soll sich entsprechend maximal anpassen. also wenn optionen vorhanden sind dann bis an das optionenfenster heran und wenns keine optionen gibt dann immernoch so breit wie möglich...

hat jemand ne idee wie dies zu machen ist?

bye, Christian.

[Falk Prüfer]

Hallo,

mit dem Problem 100% Höhe habe ich mich vor einiger Zeit mal in meinem Blog auseinandergesetzt. Evtl. helfen dir ja die Bsp. dort schon weiter: Fusszeile und 100% Höhe.
Das Problem für dein "Optionen"-div läßt sich mit CSS allein nicht lösen. Mir ist keine Selektor bekannt, der auf untergeordnete Elemente prüft. Hier wirst du nach einer dynamischen Lösung suchen müssen. Also entweder beim Erzeugen des Content den Container mit Ausgeben oder eben nicht bzw. nachträglich mit einer clientseitigen Scriptsprache - z.B. Javascript - eine Formatierung anbringen.

Gruß Falk

[Chrischaaan]

hi,

wegen dem optionen div hab ich mir inzwischen folgendes überlegt: ich lege nur die max-width von 300px fest. wenn kein content drin ist hats dann eh keine breite. der schmale graue streifen der dann allenfalls entsteht stört mich nicht weiter. wegen der 100% höhe das guck ich mir noch an. problem wäre nur die dynamische breite die bis eben dahin reicht, wo das optionen-div rechts daneben anfängt... meinetwegen auch ne feste breite fürs optionen div von 300px und das inhalts-div volle breite-300px oder so...

danke schonmal, christian.

[Falk Prüfer]

Hallo,

schonmal mit "float" probiert?

<style type="text/css">
  div.optionen {
    float: right;
    max-width: 300px;
  }
</style>
...
<div class="optionen">Hier stehen die Optionen</div>
<div class="content">Hier steht der Inhalt</div>

Gruß Falk

[Chrischaaan]

ne, hatte ich noch nich. float kannte ich noch garnich. hab das nur mal gelesen gehabt aber... hab das jetz mal reingenommen und es funktioniert soweit ganz gut. hier mal die css anweisungen für meinen containerelement und das content div, sowie das options div.

#content
{
    top:                100px;
    left:               5px;
    right:              5px;
    bottom:             5px;
    position:           absolute;
    overflow:           auto;

}

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

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

problem ist halt noch die breite des #map_canvas. das muss noch die maximale breite bekommen... wie stell ich das an? wenn ich width: 100% reinnehm geht der halt nicht nur bis an das option ran sondern bis an den rand des content divs...

[Falk Prüfer]

... wie stell ich das an? ...

Nimm das float: left; bei #map_canvas weg.

[Chrischaaan]

das hatte ich schon probiert. dann macht er mir zwar die breite auf 100%, schiebt aber das option div nach unten. es soll halt beides nebeneinander sein. nicht das option unter dem map_canvas

[Falk Prüfer]

Wenn du es so auszeichnest wie in meinem Bsp. dann sollte das nicht so sein. Das Option-Div muß im HTML VOR dem map_canvas-Div kommen.

[Chrischaaan]

ich hab das jetzt so gemacht und jetzt ist das option-div hinter dem map_canvas...

[Falk Prüfer]

Wir können hier noch lange hin- und herrätseln...
Wir wäre es wenn du mal ein wenig Code (HTML+CSS) zeigst, mit dem sich das nachvollziehen läßt!
Oder vlt. gibts ja auch eine URL...!?

[Chrischaaan]

ok. hier ist der html code

                <div id="content">
                    <div id="options">
                        <?php
                            echo "<fieldset><legend><b>Alle Fahrzeuge</b></legend>";
                            listCars();
                            echo "</fieldset>";
                        ?>
                    </div>
                    <div id='map_canvas'>
                        &nbsp;
                    </div>
                </div>

und oben steht das css ja schon. das content div ist in ein großes div eingebettet, welches base heißt und einfach über die ganze seite geht. dabei geht es nur um die zentrierung des gesamten inhaltes im browserfenster...

reicht das? kann auch das gesamte posten...

[Falk Prüfer]

ich hab das jetzt so gemacht und jetzt ist das option-div hinter dem map_canvas...

Wenn ich deine "Auszüge" zusammenstelle:

<!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;
    }

    #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'>
    Hier ist map_canvas!
  </div>
</div>
</body>
</html>

Dann kann ich das o.g. Problem nicht nachvollziehen.

[Chrischaaan]

naja, da ist noch mehr inhalt. ich poste mal den rest...

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
        <title>Titel</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
        <script ...>
bissl javascript zeug
        </script>
    </head>
    <body onload="initialize();" onunload="GUnload()">
        <form method='post' action="">
            <div id="base">
                <div id="head">
                    <div id="accountname">
                        <span class="accountname">accountname</span>
                    </div>
                    <div id="status">
                        statustext, mal mehr mal weniger viel
                    </div>
                    <div id="topmenu">
                        <span style='font-family:Webdings'>h</span>
                        <a href="help.php" target="none"><span class="white">Hilfe</span></a>&nbsp;
                        <span style='font-family:Webdings'>r</span>
                        <a href="logout.php"><span class="white">Logout</span></a>
                    </div>
                </div>
                <div id="menu">
                    <div id="mainmenu">
                        <div id="showservice">
                            <span class="showservice">hier steht bloß text</span>
                        </div>
                        <div id="optionbar">
                            ein paar buttons
                        </div>
                        <div id="showprovider">
                            <span class="showprovider">firmenname</span>
                        </div>
                    </div>
                    <div id="submenu">
                        <div class='optleft'>
                            noch ein button
                        </div>
                        <div class="clear">
                            &nbsp;
                        </div>
                        <div class='optleft'>
                            noch ein button
                        </div>
                        <div class="clear">
                            &nbsp;
                        </div>
                        <div class='optright'>
                            ein kleines bild
                        </div>
                    </div>
                </div>
                <div id="content">
                    <div id="options">
                        <?php
                            echo "<fieldset><legend><b>Alle Fahrzeuge</b></legend>";
                            listCars();
                            echo "</fieldset>";
                        ?>
                    </div>
                    <div id='map_canvas'>
                        &nbsp;
                    </div>
                </div>
            </div>
        </form>
    </body>
</html>

und hier das komplette css zeug:

body
{
    font-family:        Verdana;
    font-size:          11px;
    background-color:   rgb(0, 88, 176);
    color:              white;
}

#base
{
    border:             1px solid white;
    margin:             0px auto;
    position:           absolute;
    top:                10px;
    bottom:             10px;
    left:               10px;
    right:              10px;
}





#head
{
    border:             0px solid black;
    width:              100%;
    height:             auto;
}

    #accountname
    {
        position:           relative;
        float:              left;
        min-width:          200px;
    }

    #status
    {
        text-align:         center;
        border:             0px solid white;
        position:           relative;
        float:              left;
        height:             auto;
        max-width:          500px;
    }

    #topmenu
    {
        text-align:         right;
        vertical-align:     middle;
        background-color:   rgb(0, 88, 176);
        float: right;
        right:              10px;
        position:           relative;
    }



#menu
{
    width:              100%;
    background-color:   #FFFFFF;
    position:           absolute;
}

    #mainmenu
    {
        position:           absolute;
        left:               5px;
        right:              5px;
        top: 30px;
    }

        #showservice
        {
            position:           relative;
            float:              left;
        }

        #optionbar
        {
            position:           relative;
            float:              left;
        }

        #showprovider
        {
            position:           relative;
            float:              right;
        }



    #submenu
    {
        vertical-align:     middle;
        top: 60px;
        background-color:   rgb(32, 192, 255);
        position:           absolute;
        height:             37px;
        left:               5px;
        right:              5px;
    }

        div.optleft
        {
            border:             1px;
            border-color:       rgb(128, 128, 128);
            border-style:       solid;
            background-color:   rgb(130, 190, 190);
            float:              left;
            position:           relative;
            left:               5px;
            top:                5px
        }

        div.clear
        {
            float:              left;
            width:              10px;
            position:           relative;
        }

        div.optright
        {
            float:              right;
            position:           relative;
            right:              5px;
            top:                3px;
        }



#content
{
    top:                100px;
    left:               5px;
    right:              5px;
    bottom:             5px;
    position:           absolute;
    overflow:           auto;
    background-color:   white;
}

    #map_canvas
    {
        height:             100%;
    }

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

eigentlich solls so sein man hat die head-leiste. da drin steht links der accountname, das div wird so breit wie der text wird. dann der statustext. der ist so breit wie rest an platz bleibt. ganz rechts die paar links. die haben auch so viel platz wie sie eben brauchen um in eine zeile zu passen. die höhe des statustext ist eben so hoch wie man höhe braucht um allen text unterzubringen... das klappt auch noch nicht :S
dann kommt ne menüleiste. die ist eben direkt unter dem head.
dann kommt das submenü. das funktioniert soweit wie es eigentlich soll. die buttons sollten zentriert sein. das klappt auch noch nicht.
darunter kommt dann das ding mit dem content und dem option-div.

hmmm... konnte ich das problem ausreichend beschreiben? weißt du wie ich das meine?

[Chrischaaan]

Wenn ich deine "Auszüge" zusammenstelle:

<!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;
    }

    #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'>
    Hier ist map_canvas!
  </div>
</div>
</body>
</html>

Dann kann ich das o.g. Problem nicht nachvollziehen.

hi,

ich hab mir die seite nochmal angeguckt. das problem was ich habe besteht hier auch noch: wenn man das option-div nur 90% groß macht, sieht man dass das mapcanvas bis rüber geht. und das soll ja nicht sein. wie krieg ich das passend bis an den rand des option-divs?

bye, Christian.


EDIT:

des rätsels lösung besteht darin:

#content
{
    top:                100px;
    left:               5px;
    right:              5px;
    bottom:             5px;
    position:           absolute;
    overflow:           auto;
    background-color:   rgb(0, 88, 176);
}

    #map_canvas
    {
        height:             100%;
        float:              left;
        background-color:   rgb(0, 88, 176);
        min-width:          75%; <-- HIER
        max-width:          100%; <-- HIER
    }

    #options
    {
        background-image:   url("http://unismart.de/foreversmart_de/palettenkonto/images/farbverlauf.png");
        background-color:   rgb(64, 64, 64);
        float:              right;
        max-width:          25%; <-- HIER
        height:             100%;
    }

[Falk Prüfer]

...wenn man das option-div nur 90% groß macht, sieht man dass das mapcanvas bis rüber geht. und das soll ja nicht sein. wie krieg ich das passend bis an den rand des option-divs?

Was stört es denn? Der Inhalt, sprich der Text innerhalb von Content würde doch trotzdem um den option-div herumlaufen, wäre also immer und komplett zu sehen.

Gruß Falk