Ankündigung

Einklappen
Keine Ankündigung bisher.

height/ width = 100% sind nicht wirklich 100%

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • height/ width = 100% sind nicht wirklich 100%

    Hey, ich wollte meine Seite in drei Spalten teilen, die sich immer ans Display anpassen. Dazu hab ich div-Container erstellt mit jeweils heigth = 100%; und width hat zusammengerechnet ebenfalls den Wert 100%, so dass das gesamte Display gedeckt werden sollte. Leider kam dabei nicht das raus, was ich mir vorgestellt habe.
    Ich müsste eine Menge anpassen... margin-left: -8px; margin-top: -9px; ... damit die Abstände weg sind. Zusätzlich muss ich dann heigth auf etwa 102-103% erweitern und das kann's doch nicht sein :/ Da muss es doch einen besseren Weg geben. Ich nutze im übrigen Safari 8.0 auf Mac OS 10.10.


  • #2
    HTML ( CSS ) kennt keine Display-Größen. Das eine HTML Seite standard-Werte zugeteilt bekommt ( margin, padding, border, display, ... ) ist normal und soll auch so.

    Poste bitte Konkreten HTML Code der das "tun soll" was du glaubst zu wollen.
    [URL="https://gitter.im/php-de/chat?utm_source=share-link&utm_medium=link&utm_campaign=share-link"]PHP.de Gitter.im Chat[/URL] - [URL="https://raindrop.io/user/32178"]Meine öffentlichen Bookmarks[/URL] ← Ich habe dir geholfen ? [B][URL="https://www.amazon.de/gp/wishlist/348FHGUZWTNL0"]Beschenk mich[/URL][/B].

    Kommentar


    • #3
      Code:
      <div id="sidebar">
      	Test
      </div>
      <div id="overview">
      	Test
      </div>
      <div id="village">
      	Test
      </div>
      bitteschööön
      Ich hab bisschen mit der CSS rumexperimentiert und es sieht jetzt so aus, wie ich es mir vorgestellt hab, ist bloß nicht sehr elegant.

      Code:
      #sidebar {
      	height: 102.5%;
      	width: 25px;
      	background-color: red;
      	border-right: 1px solid black;
      	float: left;
      	margin-left: -8px;
      	margin-top: -9px;
      }
      
      #overview {
      	height: 102.5%;
      	width: 230px;
      	border-right: 1px solid black;
      	float: left;
      	background-color: yellow;
      	margin-top: -9px;
      }
      
      #village {
      	height: 102.5%;
      	width: calc(100% - 241px);
      	float: right;
      	background-color: green;
      	margin-top: -9px;
      	margin-right: -8px;
      }

      Kommentar


      • #4
        Siehe auch: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
        Zitat von nikosch
        Macht doch alle was Ihr wollt mit Eurem Billigscheiß. Von mir aus sollen alle Eure Server abrauchen.

        Kommentar


        • #5
          Das scheint nicht (mehr?) zu funktionieren. box-sizing wird von meinem Notepad-Programm auch nicht als CSS-Tag gekennzeichnet.

          Kommentar


          • #6
            Zitat von String Beitrag anzeigen
            Das scheint nicht (mehr?) zu funktionieren.
            Das funktioniert (noch) nicht in allen Browsern. Trotzdem ist es immer gut zu wissen, wie das Standard-boxsizing aussieht.

            Zitat von String Beitrag anzeigen
            box-sizing wird von meinem Notepad-Programm auch nicht als CSS-Tag gekennzeichnet.
            Oh.
            Zitat von nikosch
            Macht doch alle was Ihr wollt mit Eurem Billigscheiß. Von mir aus sollen alle Eure Server abrauchen.

            Kommentar


            • #7
              http://jsfiddle.net/tr0y/7swLutLk/
              [URL="https://gitter.im/php-de/chat?utm_source=share-link&utm_medium=link&utm_campaign=share-link"]PHP.de Gitter.im Chat[/URL] - [URL="https://raindrop.io/user/32178"]Meine öffentlichen Bookmarks[/URL] ← Ich habe dir geholfen ? [B][URL="https://www.amazon.de/gp/wishlist/348FHGUZWTNL0"]Beschenk mich[/URL][/B].

              Kommentar


              • #8
                Super Uuuund.. wie könnte ich machen, dass man nur in der dritten Spalte scrollen kann und die ersten beiden fix bleiben?

                Kommentar


                • #9
                  Für sowas gibts mehrere Ansätze, entweder ein scrollbares div oder 2 Divs die den body tag "einengen". Kommt auch ein wenig darauf an was du Design-technisch vor hast.
                  [URL="https://gitter.im/php-de/chat?utm_source=share-link&utm_medium=link&utm_campaign=share-link"]PHP.de Gitter.im Chat[/URL] - [URL="https://raindrop.io/user/32178"]Meine öffentlichen Bookmarks[/URL] ← Ich habe dir geholfen ? [B][URL="https://www.amazon.de/gp/wishlist/348FHGUZWTNL0"]Beschenk mich[/URL][/B].

                  Kommentar


                  • #10
                    Ein scrollbares div klingt schon mal gut. Ich hab es schon mit overflow-y: auto und scroll und so versucht, aber das klappt nicht. Wie mach ich das?

                    Kommentar


                    • #11
                      ich habs hinbekommen

                      Kommentar


                      • #12
                        Wie könnte ich die 3. Spalte wieder in 3 divs aufteilen, diesmal aber horizontal. Ich möchte nämlich in der 3. Spalte eine obere Leiste und eine untere haben.
                        Danke vielmals!

                        Edit: Habe wieder selbst geschafft

                        Kommentar


                        • #13
                          ab 4 Antworten auf sich selbst zählen wir das offiziell als Selbstgespräch... :P
                          [URL="https://gitter.im/php-de/chat?utm_source=share-link&utm_medium=link&utm_campaign=share-link"]PHP.de Gitter.im Chat[/URL] - [URL="https://raindrop.io/user/32178"]Meine öffentlichen Bookmarks[/URL] ← Ich habe dir geholfen ? [B][URL="https://www.amazon.de/gp/wishlist/348FHGUZWTNL0"]Beschenk mich[/URL][/B].

                          Kommentar

                          Lädt...
                          X