[HTML] Div Design

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

  • [HTML] Div Design

    Hi Jungs,

    wie von euch empfohlen habe ich mal versucht mein Design in DIVs zu coden. Und da habe ich ein paar Probleme.

    http://preview.mega-online.eu/digital/index2.html

    wie ihr seht ist oben der Login box nicht alles center wie mache ich das ??

    befehle die ich versucht hatte align="center" und vertical align. Desweitern macht Firefox immer einen Abstand zwischen den Divs wie bekomme ich das weg ?

  • #2
    1. als erstes sollest du den title von meinem tutorial entfernen und einen eigenen einbauen
    2. du sollest nicht permanent mit divs arbeiten. stichwort div_suppe
    3. tipp: binde die schmuckbilder über background-image ein
    4. zerschnippel die bilder nicht so. du arbeitest nicht mehr mit layout-tabellen und dein denken muss sich davon auch lösen


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

    Kommentar


    • #3
      Oki also weniger divs sondern mehr listen alles klar.

      Bilder will ich erstmal so lassen wenn es geht.

      wieso soll ich immer background image nehmen und nicht <img src ???

      und zu meinen Fragen ?

      Kommentar


      • #4
        Beherzige doch erst mal Kropffs hinweise.

        Bilder als hintergrund haben z.B den Vorteil das man drüber schreiben kann und im IE nicht so hässliche Mouseover effekte bieten.

        Momentan würde ich ein Tabellenlayout deinem vorziehen. (DIV Suppe halt)
        gruss Chris

        [color=blue]Derjenige, der sagt: "Es geht nicht", soll den nicht stoeren, der's gerade tut."[/color]

        Kommentar


        • #5
          oki dann änder ich da mal was danke ^^ aber zu meinen Problemen

          Kommentar


          • #6
            ICH für meinen Teil schau mir den Quellcode nicht weiter an.

            padding, margin, float ...

            Damit kannst du einiges erreichen .. Sachen wie ALIGN="CENTER" (ka ob du´s benutzt) vergisst du mal schnell wieder...
            gruss Chris

            [color=blue]Derjenige, der sagt: "Es geht nicht", soll den nicht stoeren, der's gerade tut."[/color]

            Kommentar


            • #7
              also ich habe zuviele Divs alles klar ^^

              Kommentar


              • #8
                wenn du mit zigtausend divs arbeitest, ist das fast genau so, als ob du mit layout-tabellen werkelst. da auf die schnelle fehler zu finden, ist sehr schwer.

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

                Kommentar


                • #9
                  oki aber wie meint ihr das weg vom tabellen layout also auch größere Bilder nehmen statt immer die kleinen ?

                  Kommentar


                  • #10
                    also auch größere Bilder
                    ja nicht zerschnipseln. und wenn diese bilder reine schmuckelemente sind, in den hintergrund packen, wenn möglich.

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

                    Kommentar


                    • #11
                      oki gut soll ich dann immer style="back.... ?????

                      Kommentar


                      • #12
                        wozu style=back wenn´s im Stylesheet selbst auch geht?
                        gruss Chris

                        [color=blue]Derjenige, der sagt: "Es geht nicht", soll den nicht stoeren, der's gerade tut."[/color]

                        Kommentar


                        • #13
                          ja dann muss ich ja für jedes bild ein neue klasse machen

                          Kommentar


                          • #14
                            Wie von Kropff bereits erwähnt...
                            ...zerschnippel die bilder nicht so. du arbeitest nicht mehr mit layout-tabellen und dein denken muss sich davon auch lösen
                            ..und wenn Du alle vorangegangenen Tipps beherzigst und Dir vorm schreiben Deines HTML-Gerüstes einfach mal ne Skizze machst, dann wird alles viel klarer und einfacher.
                            Ich hab Dir mal eine Beispielskizze angehängt. Nur zum Verständniss.
                            Angehängte Dateien

                            Kommentar


                            • #15
                              mhhh cool danke ich versuche jetzt mich daran festzuahlten

                              ich habe es mal so versucht:

                              http://preview.mega-online.eu/digital/index2.html

                              ist es so richtig mit dem li ?????

                              mein problem ist das team nicht in der reihe ist wenn ich bei logo float:left mache auch nicht wieso ?

                              Code:
                              .head {
                              background-image:url(Bilder/index_01.jpg);
                              height: 58px;
                              width: 988px;
                              }
                              
                              .login {
                              background-image:url(Bilder/index_04.jpg);
                              height: 109px;
                              float: left;
                              width: 229px;
                              }
                              
                              .logo {
                              background-image:url(Bilder/index_05.jpg);
                              height: 109px;
                              width: 563px;
                              }
                              
                              .team {
                              background-image:url(Bilder/index_06.jpg);
                              height: 109px;
                              width: 196px;
                              }
                              Zuletzt geändert von meGa; 15.12.2006, 20:07.

                              Kommentar

                              Lädt...
                              X