Ankündigung

Einklappen
Keine Ankündigung bisher.

[CSS] Drei Divs nebeneinander

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

  • [CSS] Drei Divs nebeneinander

    Morgen zusammen,

    wie kann ich mir mit CSS drei Divs nebeneinander platzieren? Mit float: left und right bekommt man ja nur zwei nebeneinander, kann aber in einen evtl. in der Mitte freigelassenen Platz nichts schreiben...

  • #2
    AW: [CSS] Drei Divs nebeneinander

    Hi,

    mit "float" bekommst du so viele <div> nebeneinander, wie in deinen "Rahmen" passen. Das kann nur einer sein, aber auch zwanzig. Je nach eingestellter Breite.

    Peter
    Mein kostenloser Image-Hoster, mit freier Galerie (GNU GPL) pere-image
    Mein neuer Versuch .... und
    hiermit verdiene ich mein Geld.

    Kommentar


    • #3
      AW: [CSS] Drei Divs nebeneinander

      Was schereibe ich dann beim mittleren? Links float: left; rechts float: right; und in der mitte?

      Kommentar


      • #4
        AW: [CSS] Drei Divs nebeneinander

        Hier mal ein Beispiel :

        1. Links
        float: left;
        width: 30%;

        2. Rechts
        float: right;
        width: 30%;

        3. Mitte
        width: 30%;
        clear: both;

        Gruß, Mike
        sigpic
        Mike's EEP-Welt CSC Oldenburg
        Link-Sammlung Smily-Sammlung

        Kommentar


        • #5
          AW: [CSS] Drei Divs nebeneinander

          Hi ,

          [OT]
          da fehlen mir doch ein paar %
          [/OT]

          Und bitte erst in dem Element das nach "Mitte" kommt clearen.

          Peter
          Mein kostenloser Image-Hoster, mit freier Galerie (GNU GPL) pere-image
          Mein neuer Versuch .... und
          hiermit verdiene ich mein Geld.

          Kommentar


          • #6
            AW: [CSS] Drei Divs nebeneinander

            Hi,
            Zitat von sheeba1507 Beitrag anzeigen
            3. Mitte
            width: 30%;
            clear: both;
            dann wäre dieses Element unterhalb der floatenden Boxen.
            Abgesehen davon ist es bei einer solchen Konstruktion sinnvoller, hier keine Breite vorzugeben.

            Gruß
            Ingo
            Ingo Webdesign

            Kommentar


            • #7
              AW: [CSS] Drei Divs nebeneinander

              Hallo,

              Warum nicht so:
              Code:
              .left {
              width: 33.333%
              position: absolute;
              left: 0;
              }
              
              .middle {
              width: 33.333%;
              position: absolute;
              left: 33.333%;
              }
              
              .right {
              width: 33.333%;
              position: absolute;
              right: 0;
              }
              MFG
              [ASTERIX]

              Kommentar


              • #8
                AW: [CSS] Drei Divs nebeneinander

                Hallo

                Hier mal eine Anleitung. Hat mir sehr geholfen, auch ohne CSS Erfahrung.


                Michael
                sigpic

                Das Aktuelle Wetter in Müden/Örtze - Lüneburger Heide - Wetter Aufzeichnung seit 2006 mit Archiv und Web Cam Tages Bilder

                Kommentar


                • #9
                  AW: [CSS] Drei Divs nebeneinander

                  Hi,
                  weil bei absoluter Positionierung der Textfluß nicht wieder hergestellt werden kann, um z.B. einen Footer drunter zu setzen.

                  Gruß
                  Ingo
                  Ingo Webdesign

                  Kommentar


                  • #10
                    AW: [CSS] Drei Divs nebeneinander

                    Also kann ichs so machen wie von sheeba beschrieben?

                    Kommentar


                    • #11
                      AW: [CSS] Drei Divs nebeneinander

                      Hi,

                      ja kannst du ... wenn du die Nachfolgenden Bemerkungen über die "clear"-Anweisung beachtest.

                      Peter
                      Mein kostenloser Image-Hoster, mit freier Galerie (GNU GPL) pere-image
                      Mein neuer Versuch .... und
                      hiermit verdiene ich mein Geld.

                      Kommentar


                      • #12
                        AW: [CSS] Drei Divs nebeneinander

                        Ich habs jetzt so geschrieben wie aus diesem Beitrag:

                        Code:
                        div#eins {
                        background-color: green;
                        float: left;
                        width: 33%;
                        }
                        
                        div#zwei {
                        background-color: red;
                        width: 33%;
                        clear: both;
                        }
                        
                        div#drei {
                        background-color: blue;
                        float: right;
                        width: 33%;
                        }
                        (1= links
                        2= mitte
                        3= rechts)

                        Es wird mir aber anders wie gewünscht angezeigt: 1 und 2 sind direkt untereinander und links, 3 ist wieder darunter, aber rechts.

                        Kommentar


                        • #13
                          AW: [CSS] Drei Divs nebeneinander

                          Hi,

                          du hast gleich zwei Fehler gemacht.

                          1. Die Bemerkungen über die clear-Anweisung hast du doch nicht berücksichtigt.
                          2. Die Reihenfolge deiner divs ist nicht richtig.

                          Ich vermute mal, dass du die Float-Anweisung noch nicht richtig kapiert hast. Wenn du einem div eine Float-Anweisung gibst, wird das nachfolgende Element recht/links neben das Floatende div positioniert.

                          Peter
                          Mein kostenloser Image-Hoster, mit freier Galerie (GNU GPL) pere-image
                          Mein neuer Versuch .... und
                          hiermit verdiene ich mein Geld.

                          Kommentar


                          • #14
                            AW: [CSS] Drei Divs nebeneinander

                            Heißt das, ich muss sie in der css-Datei in der Reihenfolge 1-3-2 schreiben?

                            edit:
                            habs so geändert, jetzt ist der erste links, der dritte ganz rechts und auf gleicher Höhe, aber der zweite ist noch nicht zwischen den anderen beiden, sondern direkt unter dem ersten.
                            Zuletzt geändert von Standard; 02.11.2007, 15:09.

                            Kommentar


                            • #15
                              AW: [CSS] Drei Divs nebeneinander

                              Hi,
                              schau Dir mal http://de.selfhtml.org/css/layouts/anzeige/3spaltig.htm an.
                              Gruß
                              Ingo
                              Ingo Webdesign

                              Kommentar

                              homepage-forum.de - Hilfe für Webmaster! Statistiken

                              Einklappen

                              Themen: 57.074   Beiträge: 431.967   Mitglieder: 29.241   Aktive Mitglieder: 50
                              Willkommen an unser neuestes Mitglied, eisbär.

                              Online-Benutzer

                              Einklappen

                              299 Benutzer sind jetzt online. Registrierte Benutzer: 2, Gäste: 297.

                              Mit 3.502 Benutzern waren am 23.01.2020 um 17:20 die meisten Benutzer gleichzeitig online.

                              Die neuesten Themen

                              Einklappen

                              • daniel5959
                                Überdachte Pedelecs
                                Hallo,

                                nachdem ich gut 40 Jahre lang Auto gefahren bin, habe ich seit einigen Jahren kein Auto mehr.

                                Für die kurzen Strecken alle 2 Wochen zum Supermarkt oder auch mal in die nächste Stadt (ca. 3,5 km bis zum Stadtrand mit Bau- und Garten- sowie Supermärkten oder ca. 5 km...
                                15.05.2022, 21:12
                              • eisbär
                                html und css homepage ohne Javascript
                                Hallo,
                                ich möchte nur in html und css ohne Javascript eine Website erstellen , die laut Anhang ungefähr so aussehen soll. Content diverse Themenbereiche als Blog. Ich habe auch schon angefangen, hochgeladen, das würde eigentlich schon reichen. Aber ich bin haltrnicht zufrieden. Als Hilfe hatte...
                                14.05.2022, 09:22
                              • daniel5959
                                Heizölpreis
                                Hallo,

                                viele Häuser werden ja mit Heizöl beheizt und manche jammern etwas von unbezahlbar, aber wie sieht es wirklich aus.





                                Ein Haus mit 150 m² und Baujahr 1970 bis 1980 braucht etwa 3.000 Liter im Jahr - Kosten:

                                2019 >> 2.077,50...
                                11.05.2022, 02:00
                              • bodan
                                Verlängern des eines SSL-Zertifikats vergessen - muss das dann neu beantragt werden!?
                                Tach Community,

                                wenn man das rechtzeitige Verlängern des eines SSL-Zertifikats vergessen hat- muss das dann neu beantragt werden!?

                                VG Bodan...
                                09.05.2022, 19:08
                              • eloms
                                strftime nicht mehr Aktuell? Ersetzen aber wie?
                                Hallo

                                Ich habe gerade festgestellt, das meine Datei, die das Datum aufbereitet strftime enthält und nicht mehr Aktuell ist.
                                Das habe ich so aus dem Internet bekommen, aber ich kann das nicht ändern.

                                Kann mir das Bitte jemand anpassen?
                                PHP-Code:
                                <?php
                                  $monate
                                ...
                                07.05.2022, 09:17

                              Die neuesten Beiträge

                              Einklappen

                              • daniel5959
                                Überdachte Pedelecs
                                Hallo,

                                nachdem ich gut 40 Jahre lang Auto gefahren bin, habe ich seit einigen Jahren kein Auto mehr.

                                Für die kurzen Strecken alle 2 Wochen zum Supermarkt oder auch mal in die nächste Stadt (ca. 3,5 km bis zum Stadtrand mit Bau- und Garten- sowie Supermärkten oder ca. 5 km...
                                15.05.2022, 21:12
                              • admin
                                Antwort auf Überdachte Pedelecs
                                Hallo Daniel,

                                die sind schon interessant, die 4 E-Bikes mit Dach.

                                Insbesondere in Städten mit separaten, breiten Fahrradstraßen kann das prima funktionieren.

                                Bei uns hier in der Gegend wird es vom Verkehr schwierig...
                                Wo müssen die fahren - auf der Straße...
                                Heute, 11:41
                              • daniel5959
                                Antwort auf Überdachte Pedelecs
                                Hallo,

                                die Preise sind hoch im Vergleich zu den L6e-Fahrzeugen (max. 45 km/h, Leergewicht bis 425 kg plus Batteriegewicht) wie Citroen Ami (in Frankreich etwa 7.000 Euro) und Opel Rocks-e (ab ca. 8.000 Euro).

                                Von Materialbedarf (Gewicht ca. 70 bis 120 kg, kleiner Akku) aus...
                                Gestern, 17:20
                              • arnego2
                                Antwort auf Überdachte Pedelecs
                                Nicht schlecht die Preise die da aufgerufen werden.
                                €10 000 für ein E Rad mit Dach?
                                Gestern, 12:58
                              • eisbär
                                html und css homepage ohne Javascript
                                Hallo,
                                ich möchte nur in html und css ohne Javascript eine Website erstellen , die laut Anhang ungefähr so aussehen soll. Content diverse Themenbereiche als Blog. Ich habe auch schon angefangen, hochgeladen, das würde eigentlich schon reichen. Aber ich bin haltrnicht zufrieden. Als Hilfe hatte...
                                14.05.2022, 09:22
                              • Sempervivum
                                Antwort auf html und css homepage ohne Javascript
                                Ja, Selfhtml ist auch zu empfehlen.
                                14.05.2022, 20:04
                              • eisbär
                                Antwort auf html und css homepage ohne Javascript
                                ja vielen Dank. Ein Ansatzpunkt. Das versuche ich mal.
                                Ich bin momentan auf der Seite https://wiki.selfhtml.org/wiki/CSS/T...rid/Grid-Items
                                Vielleicht zum üben net schlecht.....?
                                14.05.2022, 19:25
                              • Sempervivum
                                Antwort auf html und css homepage ohne Javascript
                                Für dein Template brauchst Du nur wenig von Grid:

                                Zwei Spalten anlegen:
                                Code:
                                #grid-container {
                                    grid-template-columns: 2fr 1fr;
                                }
                                Header und Footer müssen beide Spalten überspannen:
                                Code:
                                header {
                                    grid-column: 1 / 3;
                                }
                                14.05.2022, 18:01
                              • eisbär
                                Antwort auf html und css homepage ohne Javascript
                                Dank Dir, sehr guter Vorschlag. Denn nach 2 Stunden rum probieren bekomme ich mein "einfaches Template" mit grid nicht hin. Bin zu blöd dafür.
                                Das Zusammenspiel Html und css miteinander habe ich halbwegs schon kapiert. Für meine Ansprüche sollte es reichen. Aber den Aufbau mit grid,...
                                14.05.2022, 17:54
                              • Localfu
                                Antwort auf html und css homepage ohne Javascript
                                Moin eisbär,
                                ich kann die nur empfehlen ein Buch über HTML und CSS holen. Das kostet heutzutage fast nichts mehr und man bekommt auch digitale Bücher als PDF oder eBook. Ich kann dir empfehlen das Buch zu holen, da es ein guter Einstieg ist in die Erstellung von Webseiten mit HTML und CSS. ht...
                                14.05.2022, 16:21
                              Lädt...
                              X