Ankündigung

Einklappen
Keine Ankündigung bisher.

Zwei spaltiges Design mit DIVs lösen

Einklappen

Neue Werbung 2019

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

  • Zwei spaltiges Design mit DIVs lösen

    Guten Abend,

    ich versuche seit kurzem, möglichst alle meiner neuen Pagedesigns mit DIVs-Elementen zu gestalten anstatt die gute alte Tabelle zu nehmen.

    Derzeit bin ich mit einem Projekt beschäftigt, wo das Design neben dem Kopfbereich (für Header etc.) eine linke Navigationsspalte hat und rechts daneben der Inhalt ist.

    Folgendes Problem trat jedoch auf: Ich definierte die Navi-Div einfach mit float:left; was auch funktionierte, und rechts daneben erschien dann wie gewünscht der Text in der Inhalt-Div.

    Ist jedoch der Text in der Inhalt-Div länger bzw. höher als die Navigation ist, dann rutscht der Text links unter die Navigation, also steht direkt drunter und nimmt dann die Breite beider Divs ein.

    Das möchte ich jedoch nicht, sondern die Navi soll bei einem langen Text auch noch eine Navi bleiben und der Text soll nicht unter die Navigation rutschen.

    Problem als "Skizze":
    NAVI Das ist ein ganz schöner
    NAVI Text als Beispiel, der dann
    direkt unter die Navi-Div rutscht,
    weil die Höhe dieser nicht bestimmt
    ist, was jedoch sinnlos wäre.


    Kann mir jemand helfen?

    Danke

  • #2
    Poste mal deinen Code.
    Sonst wird es schwer dir zu helfen.

    Kommentar


    • #3
      Das ist aber nunmal das Prinzip des Floatings (Textumfluss). Ansosnten musst Du eben zwei gefloatete Boxen benuzten oder mit margin oder position positionieren.
      [COLOR="#F5F5FF"]--[/COLOR]
      [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
      „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
      [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
      [COLOR="#F5F5FF"]
      --[/COLOR]

      Kommentar


      • #4
        Jo ist klar aber was meinst du mit zwei gefloatete Boxen?

        Kommentar


        • #5
          Ich meine damit gefloatete Boxen
          [COLOR="#F5F5FF"]--[/COLOR]
          [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
          „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
          [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
          [COLOR="#F5F5FF"]
          --[/COLOR]

          Kommentar


          • #6
            Das beschriebene ist ein absolutes CSS-Einsteiger-Problem.
            Bitte arbeite ein Tutorial zum Thema CSS durch, bzw. schau dich auf entsprechenden Tipp-Seiten um. Hier ist nicht der Ort, um solche absoluten Grundlagen zum x-ten Mal durchzukauen.

            Für den Einstieg empfehle ich, erst mal folgenden Artikel komplett durch zu arbeiten: Grundlagen für Spaltenlayout mit CSS - SELFHTML aktuell Weblog
            [SIZE="1"]RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?[/SIZE]

            Kommentar


            • #7
              Hallo,

              kann ja sein dass es ein einsteiger Problem ist.

              Danke für den Link.

              Nur meine persönliche Erfahrung nach kann man sich alles einfach schlecht merken wenn man ein komplettes Tutorial durchmacht obwohl man vll nur einen Punkt von Hunderten braucht, ist zumindestens bei mir so.

              Bin halt bis jetzt mit google.de immer fündig geworden für meine Probleme und hab mit der Zeit HTML so einigermaßen gelernt usw...


              Aber ich werd dort mal hinschauen.

              Kommentar


              • #8
                Zitat von hehe94 Beitrag anzeigen
                Nur meine persönliche Erfahrung nach kann man sich alles einfach schlecht merken wenn man ein komplettes Tutorial durchmacht obwohl man vll nur einen Punkt von Hunderten braucht, ist zumindestens bei mir so.
                Der genannte Artikel besteht nicht aus „Hunderten von Punkten“, sondern widmet sich einer ganz zentralen Thematik zeitgemäßen Layoutens mit CSS.

                Was dort vermittelt wird, ist Grundlagenwissen, dass du beim Umgang mit CSS und dem Layouten damit immer wieder brauchen wirst.
                Also - Faulheit über Bord werfen, Artikel komplett durcharbeiten, bis komplett verstanden.
                Bei weiteren Fragen erst informieren, dann notfalls nachfragen.
                [SIZE="1"]RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?[/SIZE]

                Kommentar


                • #9
                  Schau dir mal yaml an:
                  YAML Builder | A tool for visual development of YAML based CSS layouts
                  "[URL="http://www.youtube.com/watch?v=yMAa_t9k2VA&feature=youtu.be&t=25s"]Mein Name ist Lohse, ich kaufe hier ein.[/URL]"

                  Kommentar


                  • #10
                    Danke an alle für eure Hilfe.

                    Werde mir das Tutorial mal vornehmen, sollt ich zu keinem schnellen Erfolg kommen verwende ich erstmal den von Chriz geposteten Builder.

                    Danke

                    Kommentar


                    • #11
                      Diese Sachen kriegt man ja mit Grundlagenwissen in CSS hin.
                      Oder habe ich die das Prinzip von YAML nicht verstanden?

                      Kommentar


                      • #12
                        Anschreinend nicht. Ich-will-das-selbst-schaffen-Attitüde - PHP.de Wiki
                        [COLOR="#F5F5FF"]--[/COLOR]
                        [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
                        „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                        [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
                        [COLOR="#F5F5FF"]
                        --[/COLOR]

                        Kommentar


                        • #13
                          Also der Link ist hier m.E. nicht gerechtfertigt.

                          Es geht nicht um eine Selberbastler-Attitüde, sondern dass YAML als Versuch einer Eierlegenden Wollmilchsau des CSS-Layouts für viele Designkonzepte schon viel zu viel ist, Overkill - da werden teilweise einfachste Dinge mit Konstrukten umgesetzt, die weitaus komplizierter als nötig sind.
                          Und wenn halskrause sagt, dass man die meisten handelsüblichen Design-Anforderungen auch ohne ein solch massives Framework hinbekommt, schlank und wartbar, trotzdem wiederverwertbar, dann gebe ich ihm da absolut Recht.
                          [SIZE="1"]RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?[/SIZE]

                          Kommentar


                          • #14
                            Sehe ich anders. Yaml hat den Anspruch in allen Browsern einheitliche Ergebnisse zu liefern. Zudem kann nach eigener Aussage Yaml-Code noch reduziert werden.
                            [COLOR="#F5F5FF"]--[/COLOR]
                            [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
                            „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                            [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
                            [COLOR="#F5F5FF"]
                            --[/COLOR]

                            Kommentar


                            • #15
                              Zitat von nikosch Beitrag anzeigen
                              Sehe ich anders. Yaml hat den Anspruch in allen Browsern einheitliche Ergebnisse zu liefern.
                              Das allein ist ja schon so realitätsfremd, dass man sich den Extraaufwand und Ballast, den dieses Framework dafür mit sich rumschleppen muss, bildlich vorstellen kann.
                              [SIZE="1"]RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?[/SIZE]

                              Kommentar

                              Lädt...
                              X