Micha: Positionierung zentriert, CSS

Hallo,

ich sitze hier an einer Sache, die ich weder mit Hilfe meiner Bücher, noch mit google oder selfhtml lösen konnte. Wahrscheinlich liegt es an meinen Suchbegriffe.

Vielleicht habt ihr eine Idee!? Auf meiner Seite http://www.london86.de möchte ich, dass der Inhalt in der jetztigen Anordnung nicht rechtbünding im Browser angezeigt werden, sonder in jedem Brwoser in der Mitte. Zusätzlich soll dann der Hintergrund z.B. grau sein.

Hinweis: Ich verwende CSS und somit sind die Elemente auf der Seite alle in unterschiedlichen Ebenen.

Vielen Dank für Eure Hilfe.

Micha

  1. Geht das nicht über

    body {
     align: center;
     background-color: #FF00FF;
    }

    ? also falls es das ist was du suchst ?

    Hintergrundfarbe natürlich noch richtig einstellen :)

    1. Hallo Alex,

      vielen Dank für Deine schnelle Antwort. Das mit der Hintergrundfarbe hat geklappt. Da hast Du Dir ja spontan die schönste Farbe rausgesucht ;-) Beim Rest schaue ich immernoch ins Leere.

      Nehmen wir an ich habe einen grauen Hintergrund. Auf dieses Hintrergrund soll eine weiße Fläche, die zentriert in jedem Browser angezeigt wird. Und eben auf dieser Fläche sollen die Elemente (die einzelnen Ebenen, die jetzt schon auf meiner Homepage sind, d.h. sie würden dann auch zentriert im Browser angezeigt werden.

      Ich stelle mir das so vor, dass ich die Position der einzelnen Ebene auf der weißen Fläche festlegen muss. Dann muss ich nur noch die weiße Fläche zentrieren.

      Ich habe es mal mit einer Tabelle versucht, die eine Zeile und eine Spalte hat. In dieser Zeile und Spalte waren dann alle Elemente. Trotzdem habe ich die Tabelle nicht zentrieren können.

      Any idea?

      1. Hi Micha,

        also ich hab jetzt nochmal in deinen Code geschaut und dort gesehen, dass du deine "Module" fest dort einpflegst.

        http://css4you.de/
        Auf dieser Website gibts viele Infos zu eben solchen Anforderungen die du hast.

        Im Prinzip kannst du auch eine Pseudotabelle erstellen über CSS.

        Steht aber auch alles auf dieser Seite.

        Diese Pseudotabelle machst du dann im prinzip über die CSS file in der du Angibst, wie groß eine PseudoZelle sein soll.

        ich hoffe das hat dir weitergeholfen.

        mfG - Alex

      2. Hallo,

        Any idea?

        Also ich Zentriere meine Inhalte eigentlich meist so:

        CSS

        body {  
         background: #aaa;  
         text-align: center;    // braucht IE im Quirksmode (also auf jeden fall < IE6)  
        }  
        #container {  
         text-align: left;      // das ganze wieder zurücksetzen  
         margin: auto;          // eigentlich braucht man es nur für rechts und links auf auto  
         width: 60em;  
         background: #000;  
        }
        
        <html>  
         <head>  
          <title>Meine Seite</title>  
          <link rel="stylesheet" type="text/css" href="css/screen.css" media="screen" >  
         </head>  
         <body>  
          <div id="container">  
           <!-- hier ganz normal alle deine Inhalte -->  
          </div>  
         </body>  
        </html>
        

        Grüße
        Jeena Paradies

        --
        Open- vs. Closed Source Software - Verdienstmöglichkeiten | Jlog | Gourmetica Mentiri
        1. Hi Jeena,

          also in den Container packen ich sozusagen alle Ebenen (also meinen jetztigen Inhalt). Ich habe Deine Variante versucht, allerdings nehmen die Ebenen nicht ihren Platz im Container ein. Ich nehme an, dass hat irgendetwas mit den usprünglich zugewiesenen Positionen zu tun, oder? Der Container ist weiterhin auch nicht in der Mitte des Browser sondern weiterhin linksbündig.

          Wo kann da mein Fehler liegen.

          Cheers, Micha

          1. Hallo Micha

            Wo kann da mein Fehler liegen.

            Vielleicht in absoluten Positionierungen, die sehr häufig absolut falsch und
            absolut unnötig sind.

            Auf Wiederlesen
            Detlef

            --
            - Wissen ist gut
            - Können ist besser
            - aber das Beste und Interessanteste ist der Weg dahin!
            1. Hallo Detlef,

              das bedeutet dann also, dass ich die Position der Ebenen relativ zum Container angeben muss?!

              Das probiere ich gleich mal aus.

              Thx, Micha

              1. Hi,

                das bedeutet dann also, dass ich die Position der Ebenen relativ zum Container angeben muss?!

                nein. Du solltest die Eigenschaft position nur dann verwenden, wenn dies unbedingt erforderlich ist. In Deinem Fall reicht float und margin.

                freundliche Grüße
                Ingo

              2. Hallo Micha

                das bedeutet dann also, dass ich die Position der Ebenen relativ zum Container angeben muss?!

                Nein, position selbst ist eine Eigenschaft, die nur eingestzt werden sollte,
                wenn man genau weiß, was man tut. Sie sollte ganz speziellen Effekten
                vorbehalten bleiben, die anders nicht zu erreichen sind.
                Für die Anordnung und Ausrichting von Elementen und ihren Außen- und
                Innenabständen und dienen margin, padding, float und clear, in Verbindung mit
                text-align, width und height.

                Meiner Meinung nach stellt CSS-basierte Layouts dazu einen sehr guten
                Einstieg dar.

                Noch ein paar Bemerkungen zu http://www.london86.de/:

                Warum sind dort lauter Tabellen in zusätzliche Divs gepackt?
                Die Seite hat keine Überschriften, keine Absätze, keine Listen.
                Sie ist Layout ohne sinnvolles HTML.
                Wenn du Tabellen fürs Layout verwenden willst, dann kannst du dies auch
                vollständig tun.
                Wenn du die Eigenschaften und Anordnung der Tabellen mit Hilfe von CSS
                bestimmen willst, brauchst du kein Div um jede Tabelle. Außerdem sind
                einspaltige Tabellen nun wirklich unnötig.
                Wenn du aber ein CSS-Layout umsetzen willst, dann sollten Tabellen auch nur
                für tabellarische Daten verwendet werden.

                Das Layout dieser Seite dürfte sich ohne größere Probleme nur mit sinnvollem
                HTML und CSS umsetzen lassen.

                Ich würde dir empfehlen, nocheinmal von vorn anzufangen.
                Vergesse erstmal, _wie_ die Seite aussehen soll, denke nur daran, _was_ auf
                die Seite soll.

                http://forum.de.selfhtml.org/archiv/2005/1/t98401/#m599864
                http://forum.de.selfhtml.org/archiv/2004/12/t95859/#m582401

                Auf Wiederlesen
                Detlef

                --
                - Wissen ist gut
                - Können ist besser
                - aber das Beste und Interessanteste ist der Weg dahin!