Mikee: Ebenen Layer Problem

Hallo,

ich habe eine Seite kreiert, mit Layouttabellen. Nun hab ich Ebenen eingebaut, die später ein- bzw. ausgeblendet werden.

Die ganze Seite ist zentriert, so das sie immer in der Mitte ist, also kann ich bei den Layer nicht absolute nehmen weil sich dies ja auf die obere linke Browserecke bezieht und die Layer dann immer nicht da sind wo sie sein sollen.

Also hab ich sie auf relative gestellt, aber dann zerscheißen Sie mir das ganze Layout warum ist das so hier mal der Quelltext: <div align="center">  <table width="900" border="0" cellpadding="0" cellspacing="0" class="bg_main">   <tr>     <td width="900" height="344" valign="top">     <table width="900" border="0" cellpadding="0" cellspacing="0">           <tr>             <td height="56" colspan="2" valign="top"><img src="include/images/p_home01.jpg" width="900" height="56"></td>           </tr>           <tr>             <td width="242" height="282" valign="top">           <table width="242" border="0" cellpadding="0" cellspacing="0" class="bg_buttons">            <tr>                <td width="40" height="282" valign="top"><img src="include/images/spacer.gif" name="platzhalter" width="40" height="40" border="0"></td>                <td width="180" valign="top">          <table width="180" border="0" cellpadding="0" cellspacing="0">                 <tr>                  <td width="180" height="20"><img src="include/images/spacer.gif" name="platzhalter" width="180" height="20" border="0"></td>                 </tr>                 <tr>                  <td height="18" align="right" valign="middle"><img src="include/images/spacer.gif" alt="Nordic Walking" width="160" height="18" border="0"></td>                 </tr>                 <tr>                  <td height="14"><img src="include/images/spacer.gif" name="platzhalter" width="180" height="14" border="0"></td>                 </tr>                 <tr>                  <td height="18" align="right" valign="middle"><img src="include/images/spacer.gif" alt="Bewegungsmedizin" width="180" height="18" border="0"></td>                 </tr>                 <tr>                  <td height="14"><img src="include/images/spacer.gif" name="platzhalter" width="180" height="14" border="0"></td>                 </tr>                 <tr>                  <td height="18" align="right" valign="middle"><img src="include/images/spacer.gif" alt="Ausbildung" width="125" height="18" border="0"></td>                 </tr>                 <tr>                  <td height="14"><img src="include/images/spacer.gif" name="platzhalter" width="180" height="14" border="0"></td>                 </tr>                 <tr>                  <td height="18" align="right" valign="middle"><img src="include/images/spacer.gif" alt="Forschung" width="120" height="18" border="0"></td>                 </tr>                 <tr>                  <td height="14"><img src="include/images/spacer.gif" name="platzhalter" width="180" height="14" border="0"></td>                 </tr>                 <tr>                  <td height="18" align="right" valign="middle"><img src="include/images/spacer.gif" alt="Projekte" width="105" height="18" border="0"></td>                 </tr>                 <tr>                  <td height="14"><img src="include/images/spacer.gif" name="platzhalter" width="180" height="14" border="0"></td>                 </tr>                 <tr>                  <td height="18" align="right" valign="middle"><img src="include/images/spacer.gif" alt="Kooperation" width="135" height="18" border="0"></td>                 </tr>                 <tr>                  <td height="14"><img src="include/images/spacer.gif" name="platzhalter" width="180" height="14" border="0"></td>                 </tr>                 <tr>                  <td height="18" align="right" valign="middle"><img src="include/images/spacer.gif" alt="Team" width="75" height="18" border="0"></td>                 </tr>                 <tr>                  <td height="14"><img src="include/images/spacer.gif" name="platzhalter" width="180" height="14" border="0"></td>                 </tr>                 <tr>                  <td height="18" align="right" valign="middle"><img src="include/images/spacer.gif" alt="News & Events" width="160" height="18" border="0"></td>                 </tr>                 <tr>                  <td height="20"><img src="include/images/spacer.gif" name="platzhalter" width="180" height="20" border="0"></td>                 </tr>                </table>         </td>               <td width="22" valign="top">          <table width="22" border="0" cellpadding="0" cellspacing="0">                 <tr>                  <td width="22" height="13" valign="top"><img src="include/images/spacer.gif" width="22" height="13" border="0"></td>                 </tr>                 <tr>                  <td height="30" align="left" valign="top"><div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; background-color: #666666; layer-background-color: #666666; border: 1px none #000000;"></div></td>                 </tr>                 <tr>                  <td height="2" valign="top"><img src="include/images/spacer.gif" width="22" height="2"></td>                 </tr>                 <tr>                  <td height="30" align="left" valign="top"><div id="Layer2" style="position:absolute; width:200px; height:115px; z-index:2"></div></td>                 </tr>                 <tr>                  <td height="2" valign="top"><img src="include/images/spacer.gif" width="22" height="2" border="0"></td>                 </tr>                 <tr>                  <td height="30" align="left" valign="top"><div id="Layer3" style="position:absolute; width:200px; height:115px; z-index:3"></div></td>                 </tr>                 <tr>                  <td height="2" valign="top"><img src="include/images/spacer.gif" width="22" height="2" border="0"></td>                 </tr>                 <tr>                  <td height="30" align="left" valign="top"><div id="Layer4" style="position:absolute; width:200px; height:115px; z-index:4"></div></td>                 </tr>                 <tr>                  <td height="2" valign="top"><img src="include/images/spacer.gif" width="22" height="2" border="0"></td>                 </tr>                 <tr>                  <td height="30" align="left" valign="top"><div id="Layer5" style="position:absolute; width:200px; height:115px; z-index:5"></div></td>                 </tr>                 <tr>                  <td height="2" valign="top"><img src="include/images/spacer.gif" width="22" height="2" border="0"></td>                 </tr>                 <tr>                  <td height="30" align="left" valign="top"><div id="Layer6" style="position:absolute; width:200px; height:115px; z-index:6"></div></td>                 </tr>                 <tr>                  <td height="2" valign="top"><img src="include/images/spacer.gif" width="22" height="2" border="0"></td>                 </tr>                 <tr>                  <td height="30" valign="top"><div id="Layer7" style="position:absolute; width:200px; height:115px; z-index:7"></div></td>                 </tr>                 <tr>                  <td height="2" valign="top"><img src="include/images/spacer.gif" width="22" height="2" border="0"></td>                 </tr>                 <tr>                  <td height="30" valign="top"><div id="Layer8" style="position: absolute; width:200px; height:115px; z-index:8; background-color: #0000FF; layer-background-color: #0000FF; border: 1px none #000000; left: 40;"></div></td>                 </tr>                 <tr>                  <td height="15" valign="top"><img src="include/images/spacer.gif" width="22" height="15" border="0"></td>                 </tr>                </table>         </td>              </tr>             </table>         </td>            <td width="658" valign="top">          <table width="658" border="0" cellpadding="0" cellspacing="0">               <tr>                     <td width="623" height="282" align="left" valign="top"><img src="include/images/p_home02.jpg" width="623" height="282"></td>                     <td width="35" valign="top"><img src="include/images/spacer.gif" name="platzhalter" width="35" height="35" border="0"></td>                 </tr>               </table>          </td>           </tr>             <tr>               <td height="6" colspan="2" valign="top"><img src="include/images/spacer.gif" name="platzhalter" width="6" height="6" border="0"></td>             </tr>         </table>     </td>    </tr>     <tr>     <td height="230" valign="top">    <table width="900" border="0" cellpadding="0" cellspacing="0">         <tr>            <td width="865" height="230" valign="top">        <table width="865" border="0" cellpadding="0" cellspacing="0" class="f_gruen_home">          <!--DWLayoutTable-->                <tr>                  <td width="30" height="230" valign="top"><img src="include/images/spacer.gif" name="platzhalter" width="30" height="30" border="0"></td>                  <td width="105" valign="top">        <table width="105" border="0" cellpadding="0" cellspacing="0" class="fgh_links">                      <tr>                        <td width="10" rowspan="2" valign="top"><img src="include/images/spacer.gif" name="platzhalter" width="10" height="10" border="0"></td>                        <td width="76" height="27" valign="top"><img src="include/images/spacer.gif" name="platzhalter" width="76" height="27" border="0"></td>                        <td width="19" rowspan="2" valign="top"><img src="include/images/spacer.gif" name="platzhalter" width="19" height="19" border="0"></td>                      </tr>                      <tr>                        <td height="203" align="center" valign="top">img</td>                      </tr>                    </table>      </td>                  <td width="351" valign="top">        <table width="351" border="0" cellpadding="0" cellspacing="0" class="text_standard">          <!--DWLayoutTable-->                       <tr>                         <td width="351" height="50" align="left" valign="bottom"><img src="include/images/t_willkommen.gif" width="163" height="23"></td>                       </tr>                       <tr>                         <td height="20" valign="top"><img src="include/images/spacer.gif" name="platzhalter" width="20" height="20" border="0"></td>                       </tr>                       <tr>                         <td height="140" align="left" valign="top">Content</td>                       </tr>                       <tr>                         <td height="20" valign="top"><img src="include/images/spacer.gif" name="platzhalter" width="20" height="20" border="0"></td>                       </tr>                   </table></td>                  <td width="30" valign="top"><img src="include/images/spacer.gif" name="platzhalter" width="30" height="30" border="0"></td>                  <td width="105" valign="top">        <table width="105" border="0" cellpadding="0" cellspacing="0" class="fgh_rechts">          <!--DWLayoutTable-->                       <tr>                         <td width="10" rowspan="2" valign="top"><img src="include/images/spacer.gif" name="platzhalter" width="10" height="10" border="0"></td>                         <td width="76" height="27" valign="top"><img src="include/images/spacer.gif" name="platzhalter" width="76" height="27" border="0"></td>                         <td width="19" rowspan="2" valign="top"><img src="include/images/spacer.gif" name="platzhalter" width="19" height="19" border="0"></td>                       </tr>                       <tr>                         <td height="203" align="center" valign="top">img</td>                       </tr>                   </table></td>                  <td width="224" valign="top">

</div>

Ich bin für jede Idee dankbar !!!!!!

  1. Hallo,

    Dein Quellcode ist grauselig. Du packst mehrere Tabellen ineinander und missbrauchst sie zu Layoutzwecken. Tabellen dienen der logischen (!) Strukturierung von Inhalten. Schau mal in den Abschnitt http://de.selfhtml.org/css/layouts/index.htm von SelfHtml.

    Grüße
    Jan

    PS: Es heißt übrigens Ebenen-Layer-Problem oder Ebenenlayerproblem aber nie Ebenen Layer Problem, da es im Deutschen keine Nomen mit Leerzeichen gibt.

    1. Hallo Jan,

      PS: Es heißt übrigens Ebenen-Layer-Problem oder Ebenenlayerproblem aber nie Ebenen Layer Problem, da es im Deutschen keine Nomen mit Leerzeichen gibt.

      Doch, es gibt da ganz wenige Ausnahmen. Eigentlich sind Universitätsnamen die einzige Ausnahme, die mir einfällt. Da werden anders als bei Straßennamen, wenn sie nach Personen benannt sind, die Vornamen nicht mit Bindestrichen zum Nachnamen verbunden, also

      Johannes Gutenberg-Universität
      aber:
      Johannes-Gutenberg-Straße

      http://www.deppenleerzeichen.de

      Gruß Gernot

      1. Das sind Eigennamen. In Eigennamen ist alles erlaubt. Es gibt aber keine Regel, die dort ein Leerzeichen vorschreibt. Es gibt andere Unis, die sich bei der Benennung an den Rechtschreibregeln orientieren und durchkoppeln.

        Jan

        1. Hallo Jan,

          da es im Deutschen keine Nomen mit Leerzeichen gibt.

          Das sind Eigennamen. In Eigennamen ist alles erlaubt.

          Du gibst aber zu, dass ein "Nomen proprium" auch ein Nomen ist?

          Gruß Gernot

          1. Ja. :-)

            Ich hoffe, es ist trotz meiner Unsauberkeit klargeworden, auf welche Arten von Nomen ich mich bezog.

            Übrigens bin ich der lateinischen Sprache nicht mächtig. Gut, dass ich weiß, was auf Englisch "proprietary" heißt.

            Jan

            1. Hallo Jan,

              Übrigens bin ich der lateinischen Sprache nicht mächtig. Gut, dass ich weiß, was auf Englisch "proprietary" heißt.

              Nein, da heißen die Nouns "proper".

              Gruß Gernot

              1. Das kannte ich aber nicht. Aus dem anderen konnte ich es mir ableiten.

                Jan

                1. Hallo Jan,

                  Das kannte ich aber nicht. Aus dem anderen konnte ich es mir ableiten.

                  Nun, wörtlich übersetzt spricht man im Englischen auch nicht von "Eigennamen", Namen also, die irgendjemandem "gehören", sondern von "Nouns" (Nomen/Namen) im "eigentlichen" Sinne, neben denen es eben auch Nomen in verallgemeinerndem Sinne gibt. Wahrscheinlich ist die englische im Vergleich zur deutschen somit auch die bessere Übersetzung aus dem Lateinischen.

                  Gruß Gernot

              2. Hallo Gernot,

                Gut, dass ich weiß, was auf Englisch "proprietary" heißt.
                Nein, da heißen die Nouns "proper".

                ja, stimmt. Allerdings hat "proper" auch noch die Bedeutung "ordentlich", wie sie auch bei uns in der Umgangssprache gern verwendet wird. Im Englischen ergibt sich der Sinn ausschließlich aus dem Kontext; im Französischen ist es noch etwas heimtückischer: Da ergibt sich der Sinn sogar aus der Wortstellung (Anm.: Im Französischen stehen Adjektive normalerweise hinter dem Substantiv). Mein Französischlehrer hat damals diese zwei Beispielsätze gebracht:

                a) Il porte sa chemise propre.
                    -> Er trägt sein ordentliches Hemd.
                b) Il porte sa propre chemise.
                    -> Er trägt sein eigenes Hemd.

                Ich liebe solche sprachlichen Stolperfallen ... ;-)

                Schönes Wochenende noch,
                 Martin

                --
                F: Was ist schneller: Das Licht oder der Schall?
                A: Offensichtlich der Schall. Wenn man den Fernseher einschaltet, kommt immer erst der Ton, und dann erst das Bild.
                1. Hi Martin,

                  […] Im Englischen ergibt sich der Sinn ausschließlich aus dem Kontext; im Französischen ist es noch etwas heimtückischer: Da ergibt sich der Sinn sogar aus der Wortstellung […]

                  durch Zufall gerade gelesen:

                  "Der seit mehreren Wochen im bayerisch-österreichischen Grenzgebiet herumstreunende "Problembär" (Ministerpräsident Edmund Stoiber) ist inzwischen wieder einmal untergetaucht. Es gebe derzeit keine Hinweise, wo sich das als gefährlich eingestufte Tier genau aufhält, sagte ein Sprecher des Umweltministeriums gestern in München."

                  (Quelle: SPON)

                  Wer ist da untergetaucht? ;-)

                  Viele Grüße

                  Jörg

        2. Hallo.

          Es gibt andere Unis, die sich bei der Benennung an den Rechtschreibregeln orientieren und durchkoppeln.

          Und die übrigen orientieren sich ebenfalls an den Rechtschreibregeln, indem sie nicht "durchkoppeln". Die wie du selbst schreibst:

          In Eigennamen ist alles erlaubt.

          MfG, at

      2. Hallo nochmal,

        Universitätsnamen (...) Da werden anders als bei Straßennamen, wenn sie nach Personen benannt sind, (...)

        Mal ganz abgesehen davon, dass, wie Jan ganz richtig bemerkt hat, die Regel eine andere ist; da habe ich mich doch glatt auf eine "anaphorische Insel" begeben:

        Sloppy Anaphora (PDF, 637KB)

        Ich meinte natürlich "Namen von Universitäten" (mit Leerzeichen) und nicht "Universitätsnamen", denn sonst hätte mein Pronomen "sie" ja einen falschen Bezug zu "Universitätsnamen" und nicht zu "Universitäten". Es sind ja die "Universitäten", die nach Personen benannt sind und nicht deren Namen...
        ;-)

        Ich glaube, wir können uns noch so viele sprachliche Regeln geben, die alle einen schönen Sinn ergeben, aber wenn's drauf ankommt, kommen unsere Hirne in der praktischen Anwendung mit deren Befolgung nie nach.

        Gruß Gernot

      3. Hello out there!

        [Bei Universitätsnamen] werden anders als bei Straßennamen, wenn sie nach Personen benannt sind, die Vornamen nicht mit Bindestrichen zum Nachnamen verbunden

        Wie bitte? Willst du etwa aus Schreibfehlern einiger Unis eine Regel ableiten?

        See ya up the road,
        Gunnar

        --
        “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
        1. Hallo Gunnar,

          [Bei Universitätsnamen] werden anders als bei Straßennamen, wenn sie nach Personen benannt sind, die Vornamen nicht mit Bindestrichen zum Nachnamen verbunden

          Wie bitte? Willst du etwa aus Schreibfehlern einiger Unis eine Regel ableiten?

          Wenn man im Umfeld zweier Unis (Frankfurt und Mainz) aufwächst, die beide diesen "Fehler" begehen, kann man leicht dazu verführt werden.

          Den Vogel abgeschossen hat jedoch Oldenburg mit seiner "Carl von Ossietzky Universität", die vollkommen ohne Bindestrich auskommt:

          http://www.uni-oldenburg.de/uni/11000.html

          So ne Bindestrich-Hochschule ist aber auch was Feines:

          FH Würzburg-Schweinfurt-Aschaffenburg

          So nah wie die Käffer beisammenliegen, schrie das förmlich nach Fusion.

          Gerne hätte ich auch an der Universität Koblenz-Landau im Hauptfach Bildungswissenschaften (Koblenz) und im Nebenfach Erziehungswissenschaften (Landau) studiert. Bei zeitlichen Koordinationsproblemen hätte ich dann einfach schnell mal beim Präsidenten der Hochschule an seinem Amtssitz in Mainz vorgesprochen.

          Gruß Gernot

      4. Hi !

        http://www.deppenleerzeichen.de

        ich glaube, die Anzeige ist so aufgebaut, daß "Keywords" möglichst leicht zu erkennen sind. (Also "Bremsen", "Service", "Auspuff" etc.) Schließlich soll der Kunde nicht unnötig viel Text lesen und dabei noch über den Sinn der Anzeige nachdenken, sonden gleich zum "Volkswagen Partner" hinfahren und dort sein "Geld loswerden". Ach, letzteres schreibt man besser anders, oder, noch besser, gar nicht ;-)

        Gruß

        Hans

      5. Hallo.

        Doch, es gibt da ganz wenige Ausnahmen. Eigentlich sind Universitätsnamen die einzige Ausnahme, die mir einfällt.

        Dabei sind Personennamen doch viel naheliegender.

        anders als bei Straßennamen

        Die Straßennamen sind meines Wissens genormt worden, um die händische Postverteilung zu erleichten. Die geringe Breite der Adressfelder und vergleichsweise lange Personennamen, nach denen Straßen benannt wurden, könnten ansonten zu unpraktischen Umbrüchen und somit zu Anschriften wie dieser führen:
        Friedrich Wilhelm von Hohenzollern
        Straße 1
        Und da ja Straßennamen ohnehin nicht willkürlich oder von jederman vergeben werden können, war eine solche Regel ja auch verhältnismäßig leicht durchzusetzen.
        Eigentlich ist sogar zu loben, dass man keine Verwaltungsvorschrift daraus gemacht hat, sondern die Regel schlicht in den Duden aufgenommen hat, der ja für öffentliche Stellen maßgeblich in diesen Fragen ist.
        MfG, at

    2. Hab das Probelm anderweitig gelöst. Aber vielen Dank für die vielen Antworten !!!

      Mike

    3. Hallo.

      Es heißt übrigens Ebenen-Layer-Problem oder Ebenenlayerproblem

      Da "Layer" kein gängiges deutsches Wort ist, heißt es bestimmt nicht "Ebenenlayerproblem".
      MfG, at

      1. Hi,

        Da "Layer" kein gängiges deutsches Wort ist, heißt es bestimmt nicht "Ebenenlayerproblem".

        Da das englische Wort "layer" übersetzt in die deutsche Sprache "Ebene" heißt, ist das doch ein tautologischer Pleonasmus? ;-)

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        Schreinerei Waechter
        O o ostern ...
        Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
        1. Hallo.

          Da "Layer" kein gängiges deutsches Wort ist, heißt es bestimmt nicht "Ebenenlayerproblem".

          Da das englische Wort "layer" übersetzt in die deutsche Sprache "Ebene" heißt, ist das doch ein tautologischer Pleonasmus? ;-)

          Ja, war denn nicht genau das mit diesem Problem gemeint?
          MfG, at

  2. Hallo Mikee,

    Die ganze Seite ist zentriert, so das sie immer in der Mitte ist, also kann ich bei den Layer nicht absolute nehmen weil sich dies ja auf die obere linke Browserecke bezieht und die Layer dann immer nicht da sind wo sie sein sollen.

    Dieses Stück Code hätte schon gereicht, um deine Frage zu stellen:

    <td height="30" align="left" valign="top"><div id="Layer1" style="[code lang=css]position:absolute; width:200px; height:115px; z-index:1; background-color: #666666; layer-background-color: #666666; border: 1px none #000000;"></div></td>[/code]

    Wenn du deine Layer an Tabellenzellen ausrichten willst, musst du sie zuvor noch einmal in ein relativ-positioniertes Element schachteln. Daran können sich dann auch absolut positionierte Elemente orientieren.

    Erklär mir aber bitte mal, was es mit der Eigenschaft "layer-background-color" auf sich hat. Welcher Browser interpretiert denn so etwas, etwa Netscape4?

    Gruß Gernot

  3. Hallo.

    Die ganze Seite ist zentriert, so das sie immer in der Mitte ist, also kann ich bei den Layer nicht absolute nehmen weil sich dies ja auf die obere linke Browserecke bezieht und die Layer dann immer nicht da sind wo sie sein sollen.

    Du tust gut daran, auf absolute Positionierung zu verzichten. Nicht weil deine Aussage, ein Zentrieren sei dann nicht möglich, richtig wäre, sondern weil diese Aussage zeigt, dass du die absolute Positionierung noch gar nicht verstanden hast.
    MfG, at