Waagerecht + senkrecht mittig

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

  • Waagerecht + senkrecht mittig

    Hallo alle!

    Wie sollte man es am besten machen, wenn man eine HTML-Seite senkrecht und waagerecht mittig halten will, egal wie das Fenster vergrößert oder verkleinert wird, wie z.B. hier: http://www.arabisch.tv

    Ich kenne drei Möglichkeiten:
    1. Javascript
    2. CSS (für diese Aufgabe zu schwer, oder?)
    3. Tabelle

    Punkt drei ist der Einfachste, heißt es aber nicht immer, man solle Tabellen nicht für Designzwecke missbrauchen? Kennt jemand noch andere Möglichkeiten?

    Grüezi,

    loxx.

  • #2
    Per CSS geht doch recht gut. Ein Beispiel hast du doch gefunden
    JS ist recht kritisch, wenn du JS nicht voraussetzen willst und fängt während des Skalierens schnell an zu hüpfen.
    Tabellen sind - wie du schon sagtest - für solche Zwecke TABU!

    Kommentar


    • #3
      CSS hat nur den Nachteil das, wenn der Content kleiner ist als der Viewport, der Content aus dem sichtbaren bereich "fällt".

      Wenn einer dafür ne CSS - Lösung kennt - her damit, suche ich schon ewig & 3 tage
      "I don't want to belong to any club that would accept me as a member."

      Groucho Marx

      Kommentar


      • #4
        CSS hat nur den Nachteil das, wenn der Content kleiner ist als der Viewport, der Content aus dem sichtbaren bereich "fällt".
        du meinst größer, oder? -> overflow?

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

        Kommentar


        • #5
          ja sorry - meinte natürlich wenn der viewport kleiner wird als der content ist....
          "I don't want to belong to any club that would accept me as a member."

          Groucho Marx

          Kommentar


          • #6
            Wenn einer dafür ne CSS - Lösung kennt - her damit, suche ich schon ewig & 3 tage
            So geht das:

            Code:
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Layout 1</title>
            <style type="text/css">
            <!--
            * {
            	margin: 0;
            	padding: 0;
            }
            html, body {
            	height: 100%;
            }
            body {
            	text-align: center;
            }
            #distance { 
            	float: left;
            	width: 1px; /* IE fix */
            	height: 50%;
            	margin-bottom: -250px;
            }
            #frame {
            	clear: left;
            	position: relative;
            	width: 980px;
            	height: 500px;
            	margin: 0 auto;
            	text-align: left;
            	background: #ccc;
            }
            -->
            </style>
            </head>
            
            <body>
            <div id="distance"></div>
            <div id="frame">Content goes here</div>
            </body>
            </html>

            Kommentar


            • #7
              @Cheadle: Schön!

              Aber trotzdem: Leute, sehts ein - es gibt eben Szenarien, die gehen vernünftig nur mit Tables. Vor allem bei vertikal dynamischen Dingen. Ist einfach so.

              Kommentar


              • #8
                Aber trotzdem: Leute, sehts ein - es gibt eben Szenarien, die gehen vernünftig nur mit Tables. Vor allem bei vertikal dynamischen Dingen. Ist einfach so.
                Quatsch, geht doch mit CSS super. Bisher noch nichts gesehen wo ich lieber Tabellen benutzt hätte, abgesehen von den Bereichen wo sie wirklich hingehören (Inhalt). Meistens ist CSS sogar noch flexibler, wenn man zum Beispiel Elemente nebeneinander setzt und die dann automatisch in die nächste Zeilen rutschen wenn das Fenster zu klein ist.
                Die Regeln | rtfm | register_globals | strings | SQL-Injections | [COLOR=silver][[/COLOR][COLOR=royalblue]–[/COLOR][COLOR=silver]][/COLOR]

                Kommentar


                • #9
                  Man kann auch Tabellen nutzen ohne Tabellen zu nutzen.

                  Code:
                  display: table-cell
                  und Co.
                  Damit kann man auch Dinge vertikal positionieren und andere Effekte nutzen, die sonst nur mit Tabellen möglich sind.

                  Ob das sauber ist oder nicht, darüber kann man natürlich streiten.
                  hopka.net!

                  Kommentar


                  • #10
                    Cheadle,
                    wo haste denn das her? Da sucht man sich denn Ast und dann eine einfache, funktionierende Sache....
                    Wenn mal nach Berlin kommst lade ich dich auf ein Bier ein....
                    THX
                    "I don't want to belong to any club that would accept me as a member."

                    Groucho Marx

                    Kommentar


                    • #11
                      das hab ich mal bei webmasterworld aufgeschnappt, wenn ich mich nicht irre...
                      Wenn mal nach Berlin kommst lade ich dich auf ein Bier ein....
                      Ich erinnere dich daran

                      Kommentar


                      • #12
                        Hallo zusammen,

                        ich habe vor einiger Zeit ein Formular mit OOP und CSS geschrieben, das immer mittig steht in beiden Achsen.



                        Dies ist der Code, der das Formular an sich zentrieren lässt. Alle Inhalte
                        lassen sich so zentrieren

                        EDIT:

                        body {
                        background-color: #99ccff;
                        font-family: arial, verdana, tahoma, helvetica, sans-serif;
                        }

                        div.erster {
                        margin: auto;
                        text-align: center;
                        height: 100.00%;
                        }

                        fieldset (oder ein div, fieldset ist für ein Formular) {
                        position: absolute;
                        left: 50%;
                        margin-left: -360px;
                        top: 50%;
                        margin-top: -245px;
                        text-align: left;
                        font-family: arial, verdana, tahoma, helvetica, sans-serif;
                        font-size: 16px;
                        background-color: #33c0f9;
                        padding: 10px;
                        width: 700px;
                        height: 465px;
                        }




                        Wenn jemand das ganze Formular möchte (PHP Klassendatei) und die vollständige CSS-Datei (txt für die Speicherung), kann es gerne gratis bei mir bekommen (info1@my-webshop.ch).
                        Als zusätzlicher "Anreiz" habe ich auch eine DOM-manipulation drin, die bei jedem focus auf ein Feld einen Hilfstext ausgibt, der frei definierbar ist.




                        Gruss
                        Angehängte Dateien
                        Zuletzt geändert von minou; 28.05.2008, 15:36.

                        Kommentar


                        • #13
                          Der obige Code hat mich gerade an ein Problem meinerseits mit dem IE erinnert:
                          Code:
                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                          <html xmlns="http://www.w3.org/1999/xhtml">
                          <head>
                          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                          <title>Layout 1</title>
                          <style type="text/css">
                          <!--
                          * {
                          	margin: 0;
                          	padding: 0;
                          }
                          html, body {
                          	height: 100%;
                          }
                          body {
                          	text-align: center;
                                  [COLOR=red]overflow: auto;[/COLOR] 
                          }
                          #distance { 
                          	float: left;
                          	width: 1px; /* IE fix */
                          	height: 50%;
                          	margin-bottom: -250px;
                          }
                          #frame {
                          	clear: left;
                          	position: relative;
                          	width: 980px;
                          	height: 500px;
                          	margin: 0 auto;
                          	text-align: left;
                          	background: #ccc;
                          }
                          -->
                          </style>
                          </head>
                          
                          <body>
                          <div id="distance"></div>
                          <div id="frame">Content goes here</div>
                          </body>
                          </html>
                          Um den rechten Balken verschwinden zu lassen habe ich overflow auto für den IE benutzt. Dadurch entstehen jedoch beim Verkleinern des Fensters unten zwei Scrollbalken. Woran könnte das liegen?

                          PS: Ich habe den Code jetzt vollkommen von dir übernommen. Warum verwendest du clear: left; und float: left? Das ist doch hier unnötig, nicht?

                          Kommentar

                          Lädt...
                          X