NONNNNN: Fixe Sidebar, Variable Breite

Hallo

ich habe da ein Problem mit meinem HTML Design.

Ich habe einen Content, der ist mindestens 960px breit, maximal 1200px.
Nun will ich gerne eine Sidebar da drin haben, die 240px breit ist. Alles neben der Sidebar soll dann variabel mit dem Browser wachsen (min 960px, max 1200px).

Wie löse ich das? Habs mit floats versucht, aber da kann ich ja keine max-width angeben, da er nur fixe breiten annimmt.

Kann mir da jemand nen Workflow vorschlagen?

Würde mich sehr über eine Antwort freuen.

Gruss
NONNNNN

  1. Wie löse ich das? Habs mit floats versucht, aber da kann ich ja keine max-width angeben, da er nur fixe breiten annimmt.

    Das ist Unsinn. Natürlich kannst du bei floats min-width und max-width verwenden.

    1. Wie löse ich das? Habs mit floats versucht, aber da kann ich ja keine max-width angeben, da er nur fixe breiten annimmt.

      Das ist Unsinn. Natürlich kannst du bei floats min-width und max-width verwenden.

      Ja, das stimmt. Aber wie krieg ich denn das Element tatsächlich so gross wie der umschliessende div?

      Evtl. denk ich ja falsch :S

      1. Ja, das stimmt. Aber wie krieg ich denn das Element tatsächlich so gross wie der umschliessende div?

        Mit Grundrechnungsarten?

        1. Ja, das stimmt. Aber wie krieg ich denn das Element tatsächlich so gross wie der umschliessende div?

          Mit Grundrechnungsarten?

          Wenns so einfach wäre. Der Inhalt muss ja grösser werden wenn ich mein Browserfenster grösser ziehe. Und das tut er nicht wenn ich das gefloatete element mit ner min-width und ned max-width versehe. Der bleibt immer bei min-width stehe. Auch wenn der Browser schon breit genug gezogen wurde, um die 1200px Breite darzustellen.
          Ich weis, ich komm bestimmt nicht gerade helle rüber, aber ich hab noch nie nen variables Layout gemacht, das recht komplex ist.

          1. Auch wenn der Browser schon breit genug gezogen wurde, um die 1200px Breite darzustellen.

            Dafür musst du irgendwas getan haben.

            Ich weis, ich komm bestimmt nicht gerade helle rüber, [...]

            Ja, besonders durch die Tasache, dass du davon ausgehst, dass wir alle Gedanken lesen können :)

  2. Ich habe einen Content, der ist mindestens 960px breit, maximal 1200px.
    Nun will ich gerne eine Sidebar da drin haben, die 240px breit ist.

    Das Wort "da drin" sollte es eigentlich klar und einfach machen.

    Alles neben der Sidebar soll dann variabel mit dem Browser wachsen (min 960px, max 1200px).

    Nein. Die breite ist inklusive Sidebar, denn du hast "da drinn" gesagt.

    Wie löse ich das? Habs mit floats versucht, aber da kann ich ja keine max-width angeben, da er nur fixe breiten annimmt.

    Braucht der sidebar auch nicht, auch wenn float durchaus min-width max-width berücksichtigt.

    Kann mir da jemand nen Workflow vorschlagen?

    Die Frage ist, was machst du, das nicht deiner obigen Beschreibung entspricht?

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
    1. Ich habe einen Content, der ist mindestens 960px breit, maximal 1200px.
      Nun will ich gerne eine Sidebar da drin haben, die 240px breit ist.

      Das Wort "da drin" sollte es eigentlich klar und einfach machen.

      Alles neben der Sidebar soll dann variabel mit dem Browser wachsen (min 960px, max 1200px).

      Nein. Die breite ist inklusive Sidebar, denn du hast "da drinn" gesagt.

      Wie löse ich das? Habs mit floats versucht, aber da kann ich ja keine max-width angeben, da er nur fixe breiten annimmt.

      Braucht der sidebar auch nicht, auch wenn float durchaus min-width max-width berücksichtigt.

      Kann mir da jemand nen Workflow vorschlagen?

      Die Frage ist, was machst du, das nicht deiner obigen Beschreibung entspricht?

      mfg Beat

      Sowas hier möchte ich. ich denke ich habs nur schlecht beschrieben.
      Concept

      1. Sowas hier möchte ich. ich denke ich habs nur schlecht beschrieben.
        Concept

        Grundrechungsarten, sag ich ja

        Der äußere Container
        960 bis 1200

        Der innere
        (960 - 240) bis (1200 - 240)

        solved - oder liege ich da falsch?

      2. Sowas hier möchte ich. ich denke ich habs nur schlecht beschrieben.
        Concept

        nono!
        bleiben wir bei deinem ursprünlichen Problem:

        <body>  
        <div class="sidebar">  
        </div>  
        <div class="content">  
        </div>  
        </body>
        
        body {width:100px;max-width:1200px;min-width:500px; margin:0 auto;}  
        .sidebar {float:left;width:200px;}  
        .content {overflow:hidden;}  
        
        

        Was war daran schwierig?

        mfg Beat

        --
        ><o(((°>           ><o(((°>
           <°)))o><                     ><o(((°>o
        Der Valigator leibt diese Fische
        1. Sowas hier möchte ich. ich denke ich habs nur schlecht beschrieben.
          Concept

          nono!
          bleiben wir bei deinem ursprünlichen Problem:

          <body>

          <div class="sidebar">
          </div>
          <div class="content">
          </div>
          </body>

          
          >   
          > ~~~css
          
          body {width:100px;max-width:1200px;min-width:500px; margin:0 auto;}  
          
          > .sidebar {float:left;width:200px;}  
          > .content {overflow:hidden;}  
          > 
          
          

          Was war daran schwierig?

          mfg Beat

          das ist natürlich nicht schwer ;) Mein Problem bleibt dennoch bestehen. Mein Endergebnis besteht ja nicht nur aus diesem Bereich auf dem Screen, sondern hat durchaus noch Header Bereiche sowie zahlreiche andere Elemente. Sollte nur ein Ausschnitt aus dem Content sein.

          Mein Problem sind nach wie vor die Floats, die ich nicht dynamisch hinbekomme. Wenn ich dem gefloateten Element nen BG gebe, ist der genau so gross wie der Inhalt. Da KANN ich aber keine fixe breite angeben, da es wiegesagt dynamisch sein soll von der Breite.

          Aber ich sehe schon, hier komm ich nicht weiter...
          Ich wollte keine fixe Code-Lösung sondern nur nen Tipp wie ich das am besten lösen könnte.

          Danke trotzdem.

          1. Mein Problem sind nach wie vor die Floats, die ich nicht dynamisch hinbekomme. Wenn ich dem gefloateten Element nen BG gebe, ist der genau so gross wie der Inhalt. Da KANN ich aber keine fixe breite angeben, da es wiegesagt dynamisch sein soll von der Breite.

            Ich verstehe den Zusammenhang nicht. Der Hintergrund ist so groß wie das Hintergrundbild (sofern nicht skaliert) bzw. eine Farbe füllt das komplette Element aus.

            Damit du dieses Standardverhalten entfernst, musst du schon etwas tun.

            Aber ich sehe schon, hier komm ich nicht weiter...

            Selbst schuld - du gehst davon aus, dass wir alle Gegebenheiten kennen, die du vorliegen hast und brüllst immer wieder "geht nicht".

            Ich wollte keine fixe Code-Lösung sondern nur nen Tipp wie ich das am besten lösen könnte.

            Tipps hast du ausreichend bekommen - Beat hat sich sogar die Mühe gemacht und eine mögliche Lösung für deine Mangelhafte Beschreibung erstellt - aber anstatt sich dafür zu bedanken, meckerst du weiter und lieferst immer noch keine anständigen Informationen mit denen man arbeiten könnte.

            1. Tipps hast du ausreichend bekommen - Beat hat sich sogar die Mühe gemacht und eine mögliche Lösung für deine Mangelhafte Beschreibung erstellt - aber anstatt sich dafür zu bedanken, meckerst du weiter und lieferst immer noch keine anständigen Informationen mit denen man arbeiten könnte.

              Was für Infos sind für dich denn anständig? Zudem hab ich nicht gemeckert sondern mich dennoch bedankt.

              Die Grafik sollte doch durchaus zeigen was ich gerade versuche?

              1. Was für Infos sind für dich denn anständig?

                Sämtliche.

                Die Grafik sollte doch durchaus zeigen was ich gerade versuche?

                Was würde ein Screenshot dieses Forums über das darunterliegende HTML und CSS aussagen?

                1. Was würde ein Screenshot dieses Forums über das darunterliegende HTML und CSS aussagen?

                  Hehe hast du auch wieder recht. Hab das Prob aber nun gefixt. Ich Depp hatte beide Elemente gefloatet, nicht nur die Sidebar. Deshalb war auch die Breite natürlich weg, bzw. nur so Breit wie der Content darin, der aber mit % angegeben ist und somit sehr klein ist :P

                  Danke dennoch für die Hilfe. Ich glaube ohne das obere simple Beispiel wäre ich nicht drauf gekommen.

          2. Ich wollte keine fixe Code-Lösung sondern nur nen Tipp wie ich das am besten lösen könnte.

            CSS ist eine Sprache die auf das DOM einer Auszeichnungssprache angewendet wird.
            Ohne rudimentären Code können wir Glaskugeln tauschen.

            mfg Beat

            --
            ><o(((°>           ><o(((°>
               <°)))o><                     ><o(((°>o
            Der Valigator leibt diese Fische