einchris: Zwei Fragen zu CSS...

Hallo alle!

Ich hab ein Problem mit CSS und einer Tabelle. Die Tabelle brauche ich, um um den Content-Bereich herum einen Rahmen mit Schatten zu bauen, den ich mittels Alternativ-Stylesheet an- und ausschalten kann.

Die Tabelle soll im BODY horizontal zentriert sein. Ein <body style="text-align:center"> scheint aber nichts zu bewirken (das Problem tritt nur im Firefox, nicht im MSIE6 auf). Bisher hat nur ein <table align="center"> weitergeholfen. Da ich die gesamte Formatierung aber eigentlich nur über CSS machen möchte, ist es nicht wirklich eine Lösung. Frage Eins lautet also: Wie kann ich die Tabelle mittels CSS im BODY zentrieren?

Das zweite Problem ist die absolute Positionierung eines DIVs innerhalb einer Zelle der oben erwähnten Tabelle. Mit <div style="position:absolute;top:50px;right:20px;"> sollte das DIV ja eigentlich relativ zum Rand des Elternelements (hier der Tabellenzelle) positioniert werden. Das tut es aber nicht. Es wird (sowohl in Firefox alsauch im MSIE6) relativ zum BODY positioniert. Warum denn das? Kann mir jemand verraten, wie ich das DIV relativ zum Rand des TD positionieren kann? Das wäre dann Frage zwei.

Danke schonmal für eure Hilfe! Um das ganze etwas anscheulicher zu machen, hab ich hier mal ein kurzes HTML-Dokument, dass beide Probleme verdeutlicht:

http://3651183163/test.html

Gruß, Chris

  1. Hallo,

    Ich hab ein Problem mit CSS und einer Tabelle. Die Tabelle brauche ich, um um den Content-Bereich herum einen Rahmen mit Schatten zu bauen,

    Brauchst du die wirklich? Ein <div> hat auch einen Rahmen.

    Die Tabelle soll im BODY horizontal zentriert sein. Ein <body style="text-align:center"> scheint aber nichts zu bewirken (das Problem tritt nur im Firefox, nicht im MSIE6 auf).

    benutze margin: auto, da text-align für inline-Elemente gilt und eine Tabelle ein Blockelement ist.

    Mit <div style="position:absolute;top:50px;right:20px;"> sollte das DIV ja eigentlich relativ

    Du sagst doch 'absolute', nix mit 'relative' <wunder?>

    Mahlzeit

    André

    --
    ss:{ zu:) ls:& fo:) de:] va:) ch:{ sh:) n4:# rl:° br:& js:| ie:% fl:| mo:}
    http://forum.de.selfhtml.org/archiv/2003/10/60651/
    1. Hi Zeromancer!

      Ich hab ein Problem mit CSS und einer Tabelle. Die Tabelle brauche ich, um um den Content-Bereich herum einen Rahmen mit Schatten zu bauen,
      Brauchst du die wirklich? Ein <div> hat auch einen Rahmen.

      Ich brauche oben, rechts, unter und links einen Schatten, den ich in die jeweiligen Zellen als background einfüge, um sie so über alternative Stylesheets (Drucker, etc) auch abschalten zu können. Das kann man zwar auch mit einer Reihe verschachtelter DIVs hinbekommen, ist aber wesentlich aufwendiger. Um deine Frage zu beantworten: Ja, brauche ich. :)

      Die Tabelle soll im BODY horizontal zentriert sein. Ein <body style="text-align:center"> scheint aber nichts zu bewirken (das Problem tritt nur im Firefox, nicht im MSIE6 auf).

      benutze margin: auto, da text-align für inline-Elemente gilt und eine Tabelle ein Blockelement ist.

      Öhm, wo soll ich margin:auto benutzen? Ich habs in allen drei Elementen des Beispiel-HTMLs ausprobiert. Es hat keinen Effekt.

      Mit <div style="position:absolute;top:50px;right:20px;"> sollte das DIV ja eigentlich relativ
      Du sagst doch 'absolute', nix mit 'relative' <wunder?>

      Siehe selfHTML: Ein "ablosute" positioniertes Element wir relativ zum Elternelement positioniert. Relativ zum BODY wird es nur positioniert, wenn BODY das Elternelement ist. Das ist aber bei meinem Beispiel nicht der Fall, da das Elternelement die Tabellenzelle ist.

      Gruß, Chris

      1. Hi,

        Siehe selfHTML: Ein "ablosute" positioniertes Element wir relativ zum Elternelement positioniert. Relativ zum BODY wird es nur positioniert, wenn BODY das Elternelement ist. Das ist aber bei meinem Beispiel nicht der Fall, da das Elternelement die Tabellenzelle ist.

        SelfHTML ist nicht fehlerfrei. Sollte das so drinstehen, ist es falsch.
        Vertraue nie blind einer Sekundärquelle.

        cu,
        Andreas

        --
        MudGuard? Siehe http://www.Mud-Guard.de/
        Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
        1. Hi!

          Siehe selfHTML: Ein "ablosute" positioniertes Element wir relativ zum Elternelement positioniert. Relativ zum BODY wird es nur positioniert, wenn BODY das Elternelement ist. Das ist aber bei meinem Beispiel nicht der Fall, da das Elternelement die Tabellenzelle ist.

          SelfHTML ist nicht fehlerfrei. Sollte das so drinstehen, ist es falsch.
          Vertraue nie blind einer Sekundärquelle.

          Dann gibt es also keine Möglichkeit, relativ zum Elternelement zu positionieren? Hmm... In selfHTML steht extra deutlich drin, dass sich "absolute" durchaus relativ verhält.

          Es scheint nur bei einer Tabellenzelle aus irgendeinem Grund zu versagen. Ich gehe zunächt mal davon aus, dass ich irgendwo einen Logikfehler habe. Vielleicht kann mir da ja noch jemand weiterhelfen.

          Gruß, Chris

          1. Hi einchris,

            Dann gibt es also keine Möglichkeit, relativ zum Elternelement zu positionieren? Hmm... In selfHTML steht extra deutlich drin, dass sich "absolute" durchaus relativ verhält.

            Es scheint nur bei einer Tabellenzelle aus irgendeinem Grund zu versagen. Ich gehe zunächt mal davon aus, dass ich irgendwo einen Logikfehler habe. Vielleicht kann mir da ja noch jemand weiterhelfen.

            Natürlich gibt es die Möglichkeit, allerdings werden nur jene Elemente als Elternelemente erkannt[1], welche eine von Position "static" abweichende Positionierung aufweisen, ansonst wird durchgereicht bis auf das Ursprungselement.
            Beispiel: http://faq.united-web.at/_test/positionierung.htm

            Gruß

            Kurt

            --
            Nein, ich beantworte keine Anfragen per e-mail.
            ss:( zu:) ls:[ fo:) de:] va:| ch:| sh:( n4:° rl:( br:? js:| ie:% fl:( mo:?
            "Was man muehelos erreichen kann, ist gewoehnlich nicht der Muehe wert, erreicht zu werden."  (Sprichwort)
            http://elektro-dunzinger.at
            http://shop.elektro-dunzinger.at
            1. Hallo Kurt!

              Natürlich gibt es die Möglichkeit, allerdings werden nur jene Elemente als Elternelemente erkannt[1], welche eine von Position "static" abweichende Positionierung aufweisen, ansonst wird durchgereicht bis auf das Ursprungselement.

              Danke Dir! Klasse, jetzt klappt es tatsächlich. Danke für den Tipp! Man muß also ein relativ positioniertes "Hilfs-Element" dazwischen packen.

              Was wohl der Grund dieser Regelung ist, dass man nicht direkt auf "static" folgend eine absolute Positionierung auf das Elternelement beziehen kann? *grübel*

              Gruß, Chris

              1. Hi einchris,

                Danke Dir! Klasse, jetzt klappt es tatsächlich. Danke für den Tipp! Man muß also ein relativ positioniertes "Hilfs-Element" dazwischen packen.

                Nein, musst du nicht, es genügt, dem Elternelement "position relative" zuzuweisen.
                Es steht nirgendwo geschrieben, daß auch Positionsangaben gemacht werden müssen.

                Was wohl der Grund dieser Regelung ist, dass man nicht direkt auf "static" folgend eine absolute Positionierung auf das Elternelement beziehen kann? *grübel*

                Eventuell deshalb, weil man Verwichklungen vermeiden wollte, wenn man innere Elemente am Ursprungselement ausrichten wollte?

                Gruß

                Kurt

                --
                Nein, ich beantworte keine Anfragen per e-mail.
                ss:( zu:) ls:[ fo:) de:] va:| ch:| sh:( n4:° rl:( br:? js:| ie:% fl:( mo:?
                "Selten merkt eine Epoche, welchen Fortschritt sie nicht gemacht hat."  (Ludwig Marcuse; dt. Publizist u. Schriftsteller; 1894-1971)
                http://elektro-dunzinger.at
                http://shop.elektro-dunzinger.at
  2. Hi,

    Die Tabelle soll im BODY horizontal zentriert sein. Ein <body style="text-align:center"> scheint aber nichts zu bewirken (das Problem tritt nur im Firefox, nicht im MSIE6 auf).

    Hier liegst Du falsch, das Problem tritt im IE auf, da dieser text-align standardwidrig auf blocklevel-Elemente anwendet.
    text-align gilt nur für inline-Inhalt eines Elements.

    blocklevel-Elemente werden über entsprechende margin-Angaben horizontal ausgerichtet (margin-left/-right z.B. auf auto setzen).

    Das zweite Problem ist die absolute Positionierung eines DIVs innerhalb einer Zelle der oben erwähnten Tabelle. Mit <div style="position:absolute;top:50px;right:20px;"> sollte das DIV ja eigentlich relativ zum Rand des Elternelements (hier der Tabellenzelle) positioniert werden.

    Nein.
    Basis für absolute Positionierung ist immer noch das innerste Vorfahrenelement, das eine von static abweichende Positionierung hat, bei dessen Fehlen ist es der Viewport.

    Es wird (sowohl in Firefox alsauch im MSIE6) relativ zum BODY positioniert. Warum denn das?

    Das wage ich zu bezweifeln - es ist relativ zum Viewport positioniert. Weil es kein Vorfahrenelement gibt, das der obengenannten Bedingung entspricht.

    Kann mir jemand verraten, wie ich das DIV relativ zum Rand des TD positionieren kann?

    s.o.

    cu,
    Andreas

    --
    MudGuard? Siehe http://www.Mud-Guard.de/
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Hi!

      Die Tabelle soll im BODY horizontal zentriert sein. Ein <body style="text-align:center"> scheint aber nichts zu bewirken (das Problem tritt nur im Firefox, nicht im MSIE6 auf).

      Hier liegst Du falsch, das Problem tritt im IE auf, da dieser text-align standardwidrig auf blocklevel-Elemente anwendet.
      text-align gilt nur für inline-Inhalt eines Elements.

      Versuchs: http://3651183163/test.html
      Mein MSIE6 zeigt es zentriert an, FF nicht.

      blocklevel-Elemente werden über entsprechende margin-Angaben horizontal ausgerichtet (margin-left/-right z.B. auf auto setzen).

      Ok, danke, jetzt hab ich's glaub ich begriffen ;) Und wenn man beide kombiniert (text-align:center und margin-left/right:auto, dann machens es sowohl MSIE alsauch FF). Siehe
      http://3651183163/test2.html

      Bleibt das zweite Problem...

      Das zweite Problem ist die absolute Positionierung eines DIVs innerhalb einer Zelle der oben erwähnten Tabelle. Mit <div style="position:absolute;top:50px;right:20px;"> sollte das DIV ja eigentlich relativ zum Rand des Elternelements (hier der Tabellenzelle) positioniert werden.

      Nein.
      Basis für absolute Positionierung ist immer noch das innerste Vorfahrenelement, das eine von static abweichende Positionierung hat, bei dessen Fehlen ist es der Viewport.

      "Von static abweichend"? Soll heißen, wenn ich position:relativ;top:0px;left:0px; nehme, müsste es gehen?
      *Ausprobier*
      Nö, geht nicht.

      Es wird (sowohl in Firefox alsauch im MSIE6) relativ zum BODY positioniert. Warum denn das?

      Das wage ich zu bezweifeln - es ist relativ zum Viewport positioniert. Weil es kein Vorfahrenelement gibt, das der obengenannten Bedingung entspricht.

      Was soll "Viewport" heißen? In diesem Fall doch das BODY-Element, oder? Es gibt also keine Möglichkeit, das DIV relativ zu der Tabellenzelle zu positionieren, wenn ich die Tabellenzelle zentriert haben möchte? Hm...

      Gruß, Chris

      1. Hi,

        Mein MSIE6 zeigt es zentriert an

        Eben, genau das ist ja das Problem - das dürfte NICHT zentriert angezeigt werden, wenn nur text-align:center gilt.

        Das zweite Problem ist die absolute Positionierung eines DIVs innerhalb einer Zelle der oben erwähnten Tabelle. Mit <div style="position:absolute;top:50px;right:20px;"> sollte das DIV ja eigentlich relativ zum Rand des Elternelements (hier der Tabellenzelle) positioniert werden.

        Nein.
        Basis für absolute Positionierung ist immer noch das innerste Vorfahrenelement, das eine von static abweichende Positionierung hat, bei dessen Fehlen ist es der Viewport.

        "Von static abweichend"? Soll heißen, wenn ich position:relativ;top:0px;left:0px; nehme, müsste es gehen?

        Nö, weil es "relativ" nicht gibt. Im Gegensatz zu "relative".

        cu,
        Andreas

        --
        MudGuard? Siehe http://www.Mud-Guard.de/
        Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
        1. Hi!

          Eben, genau das ist ja das Problem - das dürfte NICHT zentriert angezeigt werden, wenn nur text-align:center gilt.

          Naja, "Problem" nicht wirklich. Es ist nur nicht W3C-Konform. Aber wenigstens klappt das jetzt, im Gegensatz zur Positionierung.

          "Von static abweichend"? Soll heißen, wenn ich position:relativ;top:0px;left:0px; nehme, müsste es gehen?

          Nö, weil es "relativ" nicht gibt. Im Gegensatz zu "relative".

          Da du jetzt anfängst, auf kleinen Rechtschreibfehlern rumzureiten, gehe ich mal davon aus, dass du mir sagen willst, du weist es nicht, oder?

          Naja, trotzdem Danke für die Hilfe...
          Gruß, Chris

          1. Hi,

            Da du jetzt anfängst, auf kleinen Rechtschreibfehlern rumzureiten, gehe ich mal davon aus, dass du mir sagen willst, du weist es nicht, oder?

            Ich kann nur den Code beurteilen, den Du hier zeigst. Wenn der falsch ist, weise ich auf den Fehler hin.
            Glaubst Du, daß Dir ein Browser einen solchen "Rechtschreibfehler" stillschweigend korrigiert?

            cu,
            Andreas

            --
            MudGuard? Siehe http://www.Mud-Guard.de/
            Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
            1. Hi!

              Ich kann nur den Code beurteilen, den Du hier zeigst. Wenn der falsch ist, weise ich auf den Fehler hin.
              Glaubst Du, daß Dir ein Browser einen solchen "Rechtschreibfehler" stillschweigend korrigiert?

              Trotzdem konntest du keine wirkliche Antwort geben, daher lag die Vermutung nahe, dass es nur ein "Ablenkmanöver" war. Ich hätte so einen Tippfehler vielleicht eher am Rande erwähnt, und ihn nicht zum alleinigen Gegenstand einer Antwort gemacht. Aber nix für ungut, trotzdem danke für deine Hilfe, auch wenn ich bezüglich der Positionierung noch nicht wirklich weiter bin. Vielleicht fällt mir ja noch was ein... :)

              Gruß, Chris

  3. Hi!

    Passt jetzt zwar nicht zum Thema, aber was ist das für eine Domain (
    http://3651183163/test.html)? Eine IP kann es ja nicht sein - es fehlen die Punkte.

    ---------------------------------------------------------

    Grüße,

    Fabian St.

    1. Hi,

      Passt jetzt zwar nicht zum Thema, aber was ist das für eine Domain (
      http://3651183163/test.html)? Eine IP kann es ja nicht sein - es fehlen die Punkte.

      Die IP lautet  217.160.162.59

      ((217*256 + 160)*256 + 162)*256 + 59 = 3651183163

      cu,
      Andreas

      --
      MudGuard? Siehe http://www.Mud-Guard.de/
      Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
      1. Hi!

        Die IP lautet  217.160.162.59

        ((217*256 + 160)*256 + 162)*256 + 59 = 3651183163

        Welchen Vorteil hat diese Schreibweise bzw. warum macht man das?
        ---------------------------------------------------------

        Grüße,

        Fabian St.

        1. Hi!

          Welchen Vorteil hat diese Schreibweise bzw. warum macht man das?

          Damit mich Andere nach der "merkwürdigen Domain" fragen! ;)

          Gruß, Chris

        2. Hi,

          Welchen Vorteil hat diese Schreibweise bzw. warum macht man das?

          Keine Ahnung, warum einchris das macht. ICH sehe keinen Vorteil darin.

          cu,
          Andreas

          --
          MudGuard? Siehe http://www.Mud-Guard.de/
          Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
          1. Hi,

            Welchen Vorteil hat diese Schreibweise bzw. warum macht man das?
            Keine Ahnung, warum einchris das macht. ICH sehe keinen Vorteil darin.

            Antwort 1: Die Schreibweise in 8-Bit-Blöcken ist genau 40% länger.

            Antwort 2: Weil es keinen Nachteil hat.

            Gruß, Chris

          2. Hi!

            Also eigentlich nur 'ne Spielerei...
            ---------------------------------------------------------

            Grüße,

            Fabian St.

        3. Hi,

          Welchen Vorteil hat diese Schreibweise bzw. warum macht man das?

          es gab mal eine IE-Sicherheitslücke, die die Site bei dieser Schreibweise in der lokalen Zone angesiedelt hat.

          Cheatah

          --
          X-Will-Answer-Email: No
          X-Please-Search-Archive-First: Absolutely Yes
          1. Hallo!

            Welchen Vorteil hat diese Schreibweise bzw. warum macht man das?

            es gab mal eine IE-Sicherheitslücke, die die Site bei dieser Schreibweise in der lokalen Zone angesiedelt hat.

            Hab ich gar nicht mitbekommen. Gab es für irgendetwas eigentlich noch keine IE-Sicherheitslücke? Hm...

            Ob ich das aber nun unbedingt als "Vorteil" anführen würde... ;)

            Gruß, Chris

            1. Hi,

              Welchen Vorteil hat diese Schreibweise bzw. warum macht man das?
              es gab mal eine IE-Sicherheitslücke, die die Site bei dieser Schreibweise in der lokalen Zone angesiedelt hat.
              Hab ich gar nicht mitbekommen.

              IE-Sicherheitslücken haben mittlerweile fast das Flair eines Sackes Reis in China: Sie sind da, und ab und zu kippt mal einer um.

              Gab es für irgendetwas eigentlich noch keine IE-Sicherheitslücke? Hm...

              Soweit ich informiert bin, wurde noch nie eine Sicherheitslücke beim Resizing eines IE-Fensters aufgedeckt. Das bedeutet natürlich nicht, das es keine geben würde ...

              Ob ich das aber nun unbedingt als "Vorteil" anführen würde... ;)

              Das vielleicht nicht, aber es erklärt das "warum macht man das" :-)

              Cheatah

              --
              X-Will-Answer-Email: No
              X-Please-Search-Archive-First: Absolutely Yes
      2. Hi!

        Die IP lautet  217.160.162.59

        ((217*256 + 160)*256 + 162)*256 + 59 = 3651183163

        Genau das. IIRC kann man das ganze sogar als Bit-Folge angeben. Nur wird es dann etwas unübersichtlich...

        Gruß, Chris

  4. Hallo Chris,

    Bezüglich deiner Frage zur Positionierung der Tabelle habe ich leider auch noch keine Lösung gefunden, die die Tabelle in jedem Browser zentriert anzeigt... mit Ausnahme vielleicht, um die gesamte Tabelle einen <div align="center"> zu legen... Das funktioniert bei einfachen Seiten. Wenn aber mehrere Tabellen und womöglich auch noch verschachtelte, im Quellcode stehen - ist die eifachste Lösung, das <table align="center"> zu akzeptieren ;-). Die CSS Lösung margin:auto; interpretiert einfach nicht jeder Browser gleich - auch wenn's W3C konform wäre...

    Das Problem des kleinen, absolut positionierten <div> hab ich im Endeffekt meistens so gelöst, dass ich den <div> mittels margin-top:50px; margin-left:20px; positioniert hab. Wenn ich den <div> so innerhalb der Tabellenzelle positioniere, wird er in allen Browsern am "rechten Fleck" positioniert - allerdings auch mitgescrollt.

    Ich hoffe, ich konnte dir helfen - Schönes Wochenende

    Anschinsan

    1. Hallo Anschinsan!

      um die gesamte Tabelle einen <div align="center"> zu legen...

      Ja klar, aber ich hätte das ganze schon gern mit Stylesheets gemacht. Solange MSIE5, Gecko und KHTML das hinbekommen, ist es ok. Wenn ältere Brauser (NN4 etc) das falsch interpretieren, stört es mich nicht so sehr, da sie die Seite wahrscheinlich eh nicht korrekt anzeigen.

      Das Problem des kleinen, absolut positionierten <div> hab ich im Endeffekt meistens so gelöst, dass ich den <div> mittels margin-top:50px; margin-left:20px; positioniert hab. Wenn ich den <div> so innerhalb der Tabellenzelle positioniere, wird er in allen Browsern am "rechten Fleck" positioniert - allerdings auch mitgescrollt.

      *g* Ja, so mach ich das auch oft. Geht nur leider in diesem Fall nicht und eigentlich sollte man es ja schon korrekt machen ;)

      Ich hoffe, ich konnte dir helfen - Schönes Wochenende

      Dir auch!
      Gruß, Chris