[CSS] Hilfe bei Layout mit CSS

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

  • [CSS] Hilfe bei Layout mit CSS

    hi,
    bis jetzt habe ich immer unsichtbare Layouttabellen verwendet, aber bevor ihr jetzt Steine nach mir werft. Ich möchte Besserung geloben.
    Daher probiere ich gerade mit CSS rum um das gewünscht Layout zu erstellen.

    http://www.imagebanana.com/img/2mc0mmoe/layout_css.PNG

    es soll ein header mit logo oder ähnlichem geben
    links sollen zwei (oder drei) boxen sein für menü und infoanzeigen
    der größte teil schließlich der content

    und ganz unten der footer, welcher wieder von ganz links bis ganz rechts geht.

    zudem sollen auch ein paar pixel abstände zwischen den einzelnen boxen sein.
    habe mich auch schon bisschen dran probiert, aber irgendwie verhaspel ich mich da zu sehr.

    könnte mir zufällig jemand helfen indem er mir ganz kurz nen stylesheet und die div-boxen in ne html datei schreibt?

  • #2
    Guckst du hier Ist ja nicht mehr als ein normales zweispaltiges Layout.
    1 div im Textfluss für header
    1 div float left für die beiden Container links
    1 div für den content
    1 div für den footer

    Gruss

    tobi
    Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

    [color=red]"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."[/color]
    Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)

    Kommentar


    • #3
      ich hab schon bisschen rumprobiert und die seite kenn ich und hab ich auch durchstöbert.

      problem ist

      beide div container mit float left funktioniert nicht richtig. diese werden im Firefox nebeneinander dargestellt. wenn ich diese beiden dinge dann nochmal extra in ne divbox reinstopfe, dann gehts aber die abstände klappen nicht ganz.

      Kommentar


      • #4
        vielleicht helfen dir meine tutorials weiter

        gruß
        peter
        Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
        Meine Seite

        Kommentar


        • #5
          beide div container mit float left funktioniert nicht richtig
          Nur ein div mit float left und darin zwei normalo divs.

          Gruss

          tobi
          Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

          [color=red]"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."[/color]
          Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)

          Kommentar


          • #6
            Original geschrieben von jahlives
            Nur ein div mit float left und darin zwei normalo divs.

            Gruss

            tobi
            schön dann sind beide boxen untereinander und die content-liegt dann teilweise hinter den beiden, mit float: right is es garnet sichtbar und im ie hängt es unter den boxen.

            für jemand, der sich bisschen mit css auskennt dürfte das doch keine schwierigkeit sein und eine beispiel html + stylesheet zu machen. solangsam hab ich nämlich alle erdenklichen kombinationen durchgeraten.

            Kommentar


            • #7
              schön dann sind beide boxen untereinander und die content-liegt dann teilweise hinter den beiden,
              Dann machst du was falsch !
              Code:
              <html>
              <head>
              <style type="text/css">
              .header {
               background-color:blue;
              }
              .link_cont {
              float:left;
              width:200px;
              }
              .content {
              text-align:left;
              }
              </style>
              </head>
              <body>
              <div class="header">
              Und ich bin noch viel viel mehr Text im Header
              </div>
              <div class="link_cont">
              <div style="background-color:red;">
              Sämtliche Beispiele unterliegen dem Copyright. Sie dürfen aber zum Gestalten eigener Webseiten ohne 
              
              Quellnachweisangabe kopiert und weiterverwendet werden. Außerdem ist zu beachten, dass die 
              
              verschiedenen, horizontal angeordneten Container nicht gleich groß sind. Das sieht aufgrunde der 
              
              Hintergrundfarbe des Elements in dem die Elemente "gebettet" sind nur so aus.
              </div>
              <div style="background-color:green;">
              Betrachtet man den Quellcode von Webseiten, die mit Tabellen erstellt wurden, so findet man häufig 
              
              komplexe Strukturen verschachtelter Tabellen. Das gleiche Layout, erzeugt mit CSS, kann durchaus 
              
              bis zu 40% weniger Quellcode bedeuten. Jeder Modembesitzer wird dankbar sein, da es spürbare 
              
              Geschwindigkeitsvorteile bringt. Auf Seite der Webseiten-Betreiber bedeuten kleinere Dateien 
              
              geringeres Transfervolumen. Reduziert man die Größe einer Datei von z.B. 5kB auf 3kB und geht man 
              
              von 100.000 Besucher pro Monat aus, ergibt sich ein verringertes Transfer-Volumen von 2,4 GB pro 
              
              Jahr für nur eine Datei. Hochgerechnet auf eine ganze Seite kann sich eine Umstellung durch diese 
              
              Kostenersparnis durchaus rechnen.
              </div>
              </div>
              <div class="content">
              Warum keine Tabelle?
              Obwohl Tabellen nie zum Layouten von Seiten vorgesehen waren, wurden und werden sie meistens 
              
              verwendet. Die Gründe liegen auf der Hand: Unerfahrene Webdesigner können mit einem WYSIWYG-Editor 
              
              sehr schnell ein Design entwickeln. Mit CSS und div-Container ist das ohne Kenntnisse der Materie 
              
              etwas problematischer. Weiterhin unterstützen erst die modernen Browser der letzten 1-2 Jahre CSS 
              
              soweit, dass sich ein Umstieg lohnt. Da viele Seiten im Web noch nicht überarbeitet sind, finden 
              
              sich auch noch viele Seiten, die mit Tabellen layoutet wurden. Dabei ist ein Umstieg mittlerweile 
              
              durchaus lohnenswert. 
              Stichwort "Aufgeblähter Quellcode"
              Betrachtet man den Quellcode von Webseiten, die mit Tabellen erstellt wurden, so findet man häufig 
              
              komplexe Strukturen verschachtelter Tabellen. Das gleiche Layout, erzeugt mit CSS, kann durchaus 
              
              bis zu 40% weniger Quellcode bedeuten. Jeder Modembesitzer wird dankbar sein, da es spürbare 
              
              Geschwindigkeitsvorteile bringt. Auf Seite der Webseiten-Betreiber bedeuten kleinere Dateien 
              
              geringeres Transfervolumen. Reduziert man die Größe einer Datei von z.B. 5kB auf 3kB und geht man 
              
              von 100.000 Besucher pro Monat aus, ergibt sich ein verringertes Transfer-Volumen von 2,4 GB pro 
              
              Jahr für nur eine Datei. Hochgerechnet auf eine ganze Seite kann sich eine Umstellung durch diese 
              
              Kostenersparnis durchaus rechnen. 
              Unterschiedliche Ausgabemedien
              Die Zahl der unterschiedlichen Ausgabemedien steigt. Ob Bildschirm, Drucker, PDA, Handy, Beamer, 
              
              Textbrowser oder Sprachausgabe, eine Webseite kann von allen Medien angezeigt, bzw. ausgedruckt 
              
              werden. Und mit tabellenlosem Layout hast du die Möglichkeit, das Layout an die unterschiedlichen 
              
              Ausgabemedien optimal anzupassen. 
              Private Homepages
              Die oben genannten Argumente treffen sicherlich nicht alle auf private Homepages zu. Auf der 
              
              anderen Seite steht hier der Spaß am Schreiben der Webseite im Vordergrund. Also solltest du doch 
              
              an diesem Thema interessiert sein und etwas tiefer einsteigen, oder? 
              Beispiele
              Die folgenden Beispiele zeigen dir unterschiedliche Layouts mit den entsprechenden 
              
              Erläuterungen.Sie sind alle validiert nach XHTML 1.0 Strict und funktionieren mit den folgenden 
              
              Browsern: 
              Internet Explorer (Win/Mac) ab der Version 5 
              Netscape ab der Version 6 
              Opera ab der Version 5 
              Mozilla ab der Version 1 
              Firefox ab der Version 0.8 
              </div>
              </body>
              </html>
              Gruss

              tobi
              Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

              [color=red]"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."[/color]
              Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)

              Kommentar


              • #8
                danke bringt mich auf jeden fall mal ein ganzes stück weiter.
                nur wie krieg ich zwischen den beiden boxen links und der contentbox nen abstand hin? hab bei content margin-left: 10px angegeben aber bewegt sich kein stück.

                hab noch ne kleine frage

                und zwar wäre es sinnvoll und sauber wenn ich das ganze layout quasi in drei "hauptboxen", welche untereinander sind, aufteile und in diesen boxen quasi erst die spalten für links mitte und ggf rechts mache?

                Kommentar


                • #9
                  margin-left: breite der linken boxen + 10px
                  verpaß deinen content mal ein background-color oder border, dann siehst du es

                  gruß
                  peter
                  Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                  Meine Seite

                  Kommentar


                  • #10
                    Original geschrieben von Kropff
                    [B]margin-left: breite der linken boxen + 10px
                    das wars...
                    danke

                    als designer kann man mich wirklich in die tonne treten

                    Kommentar

                    Lädt...
                    X