Wolfgang: height:100%

moin moin,

gewünscht:

  • tabelle (width:800px) soll im browser horizontal zentriert sein
  • tabelle soll "height:100%" haben
  • tabelle hat eine zelle, die sich über die gesamte height des browsers erstreckt
  • zelle hat eine background-color

das funktioniert in frames mit work-arounds, aber "plain" (also eine einzige page im browser) gibt es probleme:

  • die hintergrundfarbe wird nur unter vorhandenem content angezeigt, reicht also nicht bis zum unteren rand des browsers.

  • zentrieren klappt in ie, aber nicht in ff und opera ("text-align:center;" angewandt auf body)

weiss jemand rat? danke!

  1. nabend.

    eine Tabelle ist ja auch kein (fliess)Text. So zentriert man also nicht. Schau doch mal hier: FAQ zum Forum

    1. nabend.

      eine Tabelle ist ja auch kein (fliess)Text. So zentriert man also nicht. Schau doch mal hier: FAQ zum Forum

      da ich den etxt nicht zulang machen wollte, habe ich ein paar infos unterdrückt, sorry.

      ich habe die tabelle in zwei <div> gepackt, also so:
      <div style='width:100%'>
          <div sytle='width:800px'>
               <table sytle='width:800px'>...

      natürlich in externer css-datei.

      übrigens kenne ich in css keine andere methode des zentrierens.

      und was ist mit der background-color in der height?

      1. Hallo Wolfgang,

        ich habe die tabelle in zwei <div> gepackt, also so:
        <div style='width:100%'>
            <div sytle='width:800px'>
                 <table sytle='width:800px'>...

        style falschgeschrieben

        übrigens kenne ich in css keine andere methode des zentrierens.

        margin: 0 auto;
        Sollte aber auch in der FAQ stehen.

        und was ist mit der background-color in der height?

        Sofern dus richtig machst, solltes klappen.

        Beispiel:

          
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
        <html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;">  
          <head>  
            <title>Test</title>  
          </head>  
          <body style="height:100%;margin:0;padding:0;">  
            <table style="margin:0 auto;width:800px;background:red;height:100%;">  
              <tr>  
                <td style="vertical-align:top;">  
                  Text  
                </td>  
              </tr>  
            </table>  
          </body>  
        </html>  
        
        

        Dir ist aber schon klar, dass die Tabelle ziemlich überflüssig ist und besser weggelassen werden sollte?

        Das ganze geht genauso und viel kürzer und sauberer:

          
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
        <html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;">  
          <head>  
            <title>Test</title>  
          </head>  
          <body style="height:100%;margin:0;padding:0;">  
            <div style="margin:0 auto;width:800px;background:red;height:100%;">  
              Text  
            </div>  
          </body>  
        </html>  
        
        

        Jonathan

        1. Hallo Wolfgang,

          ich habe die tabelle in zwei <div> gepackt, also so:
          <div style='width:100%'>
              <div sytle='width:800px'>
                   <table sytle='width:800px'>...

          style falschgeschrieben

          übrigens kenne ich in css keine andere methode des zentrierens.

          margin: 0 auto;
          Sollte aber auch in der FAQ stehen.

          und was ist mit der background-color in der height?
          Sofern dus richtig machst, solltes klappen.

          Beispiel:

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;">
            <head>
              <title>Test</title>
            </head>
            <body style="height:100%;margin:0;padding:0;">
              <table style="margin:0 auto;width:800px;background:red;height:100%;">
                <tr>
                  <td style="vertical-align:top;">
                    Text
                  </td>
                </tr>
              </table>
            </body>
          </html>

          
          >   
          > Dir ist aber schon klar, dass die Tabelle ziemlich überflüssig ist und besser weggelassen werden sollte?  
          >   
          > Das ganze geht genauso und viel kürzer und sauberer:  
          >   
          > ~~~html
            
          
          > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
          >     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
          > <html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;">  
          >   <head>  
          >     <title>Test</title>  
          >   </head>  
          >   <body style="height:100%;margin:0;padding:0;">  
          >     <div style="margin:0 auto;width:800px;background:red;height:100%;">  
          >       Text  
          >     </div>  
          >   </body>  
          > </html>  
          > 
          
          

          Jonathan

          moin Jonathan,

          danke für deine hilfe, ich denke, ich werde diesem ansatz heute (nach schlafen) nachgehen.

          • "style=falsch geschrieben", war ein tip-fehler, ist nicht das original.

          • "margin: 0 auto;" wenn man wüsste, wie die frage heissen muss, wäre es natürlich einfach.

          • "Dir ist aber schon klar, dass die Tabelle ziemlich überflüssig ist und besser weggelassen werden sollte?"
            ja, das und vieles ist mir schon klar.
            aber nachdem ich YAML und viele amerikanische seiten zu diesem thema angesehen habe, komme ich immer mehr zu der überzeugung, dass die "reine lehre" nicht der richtige weg ist.

          link dazu: http://webhost.bridgew.edu/etribou/layouts/ie_sucks/ie_sucks_01.html

          ich werde berichten, ob ich zu einem ergebnis gekommen bin.

          danke, ww

          1. moin moin,

            • ff zeigt jetzt genau so an, wie ich es mir vorstelle.
            • ie6 zeigt leider leeren space unter dem text.
            • opera lässt den text nach unten über die footer-zelle fliessen und bietet auch keine scrollbar an.

            vielleicht kann sich das jemand ansehen: http://www.kinfa.com/test//index_low_left.html

            vielen dank!