Tim: Probleme mit Hoehe von Tabellenzeilen

SELF-Forum

Probleme mit Hoehe von Tabellenzeilen

Tim
– Informationen zu den Bewertungsregeln

Hallo liebe SelfHTML-Gemeinde :-)

Ich bin gerade in der Mitte der Welt, Ecuador, für einen Auslandsaufenthalt von einem halben Jahr, und wollte hier jetzt eine Website über meine Erlebnisse etc. erstellen.
Für den Inhalt-Bereich habe ich mir etwas besonderes ausgedacht: ein Textfeld, umgeben von der Ecuador-Fahne. Leider gibt es keien Funktion, um ein Hintergrundbild zu strecken, also wollte ich einen Trick anwenden: 3 Tabellenzeilen, die jeweils die Höhe der Flaggenfarben haben, welche sind: Oben Gelb, 50%, darunter Blau, 25%, und unten Rot wieder mit 25%.
Das generelle Tabellenlayout, mit Zellen verbinden und allem, hat schon wunderbar geklappt und ist genau so wie ich es wollte, jedoch hört HTML bzw. CSS nicht auf meine Höhenangaben, es ignoriert sie einfach oder wendet sie nicht richtig an. Ich habe die Höhe auch nicht mit dem deprecated TD HEIGHT="50%", sondern schon mit CSS gemacht, aber es wird einfach nicht aktzeptiert.
Eine feste Größe der Zeilen will ich aber auch nicht, da meine Website für alle Bildschirmauflösungen funktionieren soll, und ich deswegen dehnbare Tabellen will.
Vielleicht könnt ihr euch ja mal den Quelltext angucken, und mir sagen, was ich falsch gemacht habe, würde mich echt sehr freuen!

Das nächste Problem, was ich schonmal schreibe, da das Internet hier verdammt langsam (56k Modem) und dazu auch nicht allzu billig ist, ist, dass das Textfeld sich bei viel Text nicht über die Seite ausdehnt, sondern das in dem Textfeld ein Scrollbalken kommt, so dass man nicht die ganze Seite nach unten scrollt, sonden nur das Textfeld. Dies hat aber erstmal geringere Priorität, erstmal sollte das andere funktionieren ;-)
Vielen Dank schonmal im Voraus, ich weiß ihr kriegt das hin!!!

<html><body>

<table border="1" style="width:100%; height:100%;">
  <tr>
    <td rowspan="2" style="height:50%; background-color:yellow;">
    1: 50%
    </td>
    <td style="background-color:yellow; height:10%;">
    2
    </td>
    <td rowspan="2" style="background-color:yellow;">
    3
    </td>
  </tr>
  <tr>
    <td rowspan="3" style="width:*; height:*; background-color:black;">
    <font color="white">Inhalt</font>
    </td>
  </tr>
  <tr>
    <td style="width:10%; height:25%; background-color:blue;">
    5: 25%
    </td>
    <td style="width:10%; background-color:blue;">
    6
    </td>
  </tr>
  <tr>
    <td rowspan="2" style="height:25%; background-color:red;">
    7: 25%
    </td>
    <td rowspan="2" style="background-color:red;">
    8
    </td>
  </tr>
  <tr>
  <td style="background-color:red; height:10%;">
  9
  </td>
  </tr>
</table>

</body></html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Probleme mit Hoehe von Tabellenzeilen

    Der Martin
    – Informationen zu den Bewertungsregeln

    Hallo Tim,

    zunächst muss ich eins vorweg sagen, damit ich hier keine Prügel kriege: Tabellen zum Layouten zu benutzen, ist alles andere als eine empfohlene Methode. Wenn ich irgendeine Idee hätte, wie man deine Layout-Idee - so einfach sie sich im ersten Moment auch anhört - ohne diese Tabelle lösen könnte, würde ich dir nicht beim Bau weiterer Tabellen halfen.

    Aber du hast eine trickreiche Aufgabenstellung: Du willst nämlich das Browserfenster in ein festes Raster mit prozentual vorgegebenen Maßen einteilen. Da man Hintergrundbilder nicht skalieren kann, wird vermutlich auch ein CSS-basierter Ansatz wüst sein.

    Das generelle Tabellenlayout, mit Zellen verbinden und allem, hat schon wunderbar geklappt und ist genau so wie ich es wollte, jedoch hört HTML bzw. CSS nicht auf meine Höhenangaben, es ignoriert sie einfach oder wendet sie nicht richtig an.

    Du widersprichst dir. Wenn du sagst, dass deine Höhenangaben nicht wie gewünscht umgesetzt werden, dann hat es eben *nicht* wunderbar geklappt.
    Aber deine Tabelle ist ja auch ein kompliziertes Monster; ich hab mir erst eine Skizze machen müssen, um zu verstehen, wie die vielen Maßangaben und die rowspans zusammenpassen sollten.

    3 Tabellenzeilen, die jeweils die Höhe der Flaggenfarben haben, welche sind: Oben Gelb, 50%, darunter Blau, 25%, und unten Rot wieder mit 25%.

    Dein Problem ist, dass sich die drei Spalten gegenseitig in ihrer Höhe beeinflussen. Du hast versucht, das Layout zeilenweise zu erstellen - warum nicht spaltenweise? Und wenn schon Tabellenlayout, dann schon "richtig" böse mit verschachtelten Tabellen. Ich skizziere mal ein Layout, wie ich es vielleicht vor fünf Jahren in völliger Unkenntnis von CSS gemacht haben könnte:

    <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
     <tr>
      <td width="10%"> [1] </td>
      <td width="80%"> [2] </td>
      <td width="10%"> [3] </td>
     </tr>
    </table>

    So, damit habe ich schon drei senkrechte Streifen. Unsichtbar, aber schon mit den gewünschten Breiten. Anstatt der [1],[2],[3], die ich oben nur als Platzhalter reingeschrieben habe, setze ich weitere Tabellen in diese drei Zellen. Dabei setze ich für [1] und [3]:

    <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
        <tr height="50%"><td bgcolor="#FFFF00"> </td></tr>
        <tr height="25%"><td bgcolor="#FF0000"> </td></tr>
        <tr height="25%"><td bgcolor="#0000FF"> </td></tr>
       </table>

    Und anstatt der [2] setze ich ein:

    <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
        <tr height="10%"><td bgcolor="#FFFF00"> </td></tr>
        <tr height="80%"><td bgcolor="#FFFFFF"> *** INHALT *** </td></tr>
        <tr height="10%"><td bgcolor="#0000FF"> </td></tr>
       </table>

    Das ist nun, wenn man es alles zusammensetzt, wieder ein Tabellenmonster - aber es hat keine rowspans und colspans mehr, und die Höhen der Zellen beeinflussen nicht mehr die Nachbarspalten, weil sie völlig voneinander getrennt sind.

    [...] sondern das in dem Textfeld ein Scrollbalken kommt, so dass man nicht die ganze Seite nach unten scrollt, sonden nur das Textfeld.

    Da sollte es genügen, ein div mit height:100%; overflow:auto; in die mittlere Zelle zu setzen. ;-)

    Dies hat aber erstmal geringere Priorität, ...

    Ist aber bedeutend leichter zu realisieren.
    So long,

    Martin

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Probleme mit Hoehe von Tabellenzeilen

    Gernot Back Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Tim,

    ich würde das ohne Tabellen machen, und zwar so:

      
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html>  
<head>  
<title>Ecuador-Dekor</title>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
<style type="text/css">  
[code lang=css]  
html {  
  overflow:auto;  
}  
  
html, body {  
  width:100%;  
  height:100%;  
  margin:0;  
  padding:0;  
}  
  
#ecuador {  
  height:100%;  
  background-color:red;  
}  
  
#ecuador div {  
  height:75%;  
  background-color:blue;  
}  
  
#ecuador div div {  
  height:67%;  
  background-color:yellow;  
}  
  
#content{  
  position:absolute;  
  top:10%;  
  left:10%;  
  width:80%;  
  height:80%;  
  overflow:auto;  
  color:black;  
  background-color:black;  
  color:white;  
}  
  
#content p, #content h1{  
  margin:1% 2%;  
}

    </style>
    </head>
    <body>
     <div id="ecuador">
       <div>
         <div></div>
       </div>
     </div>
     <div id="content">
       <h1>Eine Überschrift</h1>
       <p>ganz viel Text</p>
     </div>
    </body>
    </html>
    [/code]
    Gruß Gernot

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Probleme mit Hoehe von Tabellenzeilen

      tim
      – Informationen zu den Bewertungsregeln

      danke schonmal f`r die antworten, ich werd mir die methode ohne tabellen mal angucken, aber kann mir wer sagen, warum beim untenstehenden quelltext das mit overflow nicht klappt? beim opera yeigt er dann gar keinen text mehr an, beim ie macht er gar nichts...
      meld mich spaeter noch mal

      <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
       <tr>

      <td width="10%">

      <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
          <tr height="50%"><td bgcolor="#FFFF00"> </td></tr>
          <tr height="25%"><td bgcolor="#0000FF"> </td></tr>
          <tr height="25%"><td bgcolor="#FF0000"> </td></tr>
         </table>

      </td>

      <td width="80%">

      <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
          <tr height="10%"><td bgcolor="#FFFF00"> </td></tr>
          <tr height="80%">
      <td bgcolor="#FFFFFF" style="border:groove; medium; #000000; padding:8px; font-size:1.1em; text-align:justify;">

      <div style="overflow:auto;">
      Nach viel Packstreß, bedingt durch das Limit von 20 Kg Reise- und 10 Kg Handgepäck, was unserer Waage nach jeweils beinahe erreicht war, hieß es nach 3 Stunden Schlaf dann um 4:30 Morgens aufstehen, um dann mit dem Zug nach Düsseldorf Flughafen zu fahren. Dort merkten wir, das unsere Waage zuhause etwa 4 Kg zuviel gewogen hatte, und der ganze Streß total umsont gewesen war. Von Düsseldorf aus ging es dann um 8 Uhr 2½ Stunden weiter nach Madrid, wo dann die erste Schwierigkeit wartete, das Finden des nächsten Flugzeuges. Ein Mann erklärte mir, wo ich hingehen müsste, was sich als komplett falsch erwies, woraufhin ich dann wieder durch zwei Gepäck- und eine Polizeikontrolle gehen musste. Das Boarding verspätete sich um etwa 40 Minuten, trotzdem war der Flug letztendlich überpünktlich. Im Flugzeug gab es 2 Mahlzeiten und 3 Filme („Guess Who", „Königreich der Himmel" und „L'interprête"), wobei ich nur die ersten beiden gekuckt habe (auf Englisch, gab nur Englisch und Spanisch als Sprachen, und so gut ist mein Spanisch nun noch nicht). Ansonsten habe ich den Flug mit Schlafen in den unbequemen Sitzen verbracht und habe ein wenig Harry Potter Teil 1 auf Spanisch („La Piedra Filosofal") gelesen. Nach etwa 11 Stunden Flug betrat ich dann um 16 Uhr Ortszeit (-7 Stunden Zeitverschiebung) erstmals Ecuadorianischen Boden. Nach einer weiteren Polizeikontrolle, bei der ich mich als erster durchschummeln konnte, traf ich dann auf die Familie Pancho, vorher wollte jedoch ein Mann noch einen Ticketabschnitt von mir haben, den ich nie bekommen habe... Nach einiger Zeit erfolgslosem Suchen ließ er mich dann auch so durch, und ich fuhr mit Rita, Hugo (die Eltern) und Anna (die Tochter, 15) zu ihnen nach Hause (der andere sich noch in Ecuador befindende Sohn, David, ist noch im Urlaub in den U.S.A.), wo ich dann erst einmal den Hund Vaca (Kuh) streicheln wollte, der mich daraufhin beißen wollte (er braucht Zeit um sich an einen zu gewöhnen, wurde mir dann daraufhin gesagt) und anschließend den Kater Moritz, bei dem ich dann schon vorsichtiger war. Danach bezog ich mein Zimmer, welches einen wunderbaren Ausblick auf den Vulkan Pichincha hat. Um schonmal etwas von der Stadt zu sehen und die aufkommende Müdigkeit zu bekämpfen gingen Rita, Anna und ich ein wenig einkaufen, im „El Jardín", einem der vielen großen Einkaufszentren in der Zweimillionenstadt Quito. Nach dem Abendessen ging ich dann auch frühzeitig um 22 Uhr ins Bett, um mich von den Strapazen des Fluges zu erholen.
      Nach 12 Stunden erholsamen Schlaf stand ich um 10 Uhr auf und startete nach dem Frühstück mit Anna und ihren Freunden Evelyn und Andrés eine Fahrradtour durch Quito. Dieses ist Sonntags zu großen Teilen für Autos gesperrt, und alle Leute sind mit dem Fahrrad unterwegs. Auf diese Weise lernte ich schonmal Teile der (Alt-)Stadt kennen. Probleme mit der Höhe hatte ich dabei keine, habe eigentlich keinen Unterschied zu Deutschland gespürt. Wir sind in Richtung Altstadt gefahren und haben noch Martha, eine Tante von Anna, besucht. Danach haben wir noch mit ein paar Freunden von Anna beziehungsweise David ein bisschen Karten gespielt, eigentlich wollten wir noch ausgehen, aber dann war es auf einmal ein bisschen spät, woraufhin wir es dann doch gelassen haben. Abends haben wir dann noch „Good Bye Lenin!" gekuckt, den ich aus Deutschland mitgebracht hatte.
      </div>
       </td></tr>
          <tr height="10%"><td bgcolor="#FF0000"> </td></tr>
         </table>

      </td>

      <td width="10%">

      <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
          <tr height="50%"><td bgcolor="#FFFF00"> </td></tr>
          <tr height="25%"><td bgcolor="#0000FF"> </td></tr>
          <tr height="25%"><td bgcolor="#FF0000"> </td></tr>
         </table>

      </td>

      </tr>
      </table>

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. Probleme mit Hoehe von Tabellenzeilen

      Tim
      – Informationen zu den Bewertungsregeln

      Hallo Tim,

      Aaaalso:
      Die Methode mit den festen Positionen gef´llt mir sehr gut, jedoch habe ich ein Problem: Ich will links noch eine Navigation einer festen Breite haben, so 150, und oben auch noch etwas platz, so 50, ist das moeglich???
      Danke fuer eure Geduld :-)
      Tim

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Probleme mit Hoehe von Tabellenzeilen

        Gernot Back Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hallo Tim,

        Die Methode mit den festen Positionen gef´llt mir sehr gut, jedoch habe ich ein Problem: Ich will links noch eine Navigation einer festen Breite haben, so 150, und oben auch noch etwas platz, so 50, ist das moeglich???

        Na das sollte aber doch jetzt kein Problem mehr sein. Normalerweise könnte man die Elemente ja auch passgenau nebeneinander und untereinander legen; exakt prozentual ausgemessen, so dass es alles in allem mit allen nebeneinander liegenden Elementen inklusive margin, padding und border auf 100% kommt; ebenso n der vertikalen mit allen untereinander liegenden Elementen.

        Da aber manche Browser da doch manchmal einen Pixel ungenau sind dann den Hintergrund in einer Spalte durchscheinen lassen, oder schlimmer noch dann bei mangelndem Platz in die nächste Zeile umbrechen lassen, verschachtele ich die Elemente lieber ineinander. Das kannst du doch jetzt entsprechend auch noch mit deinen Navigationsbereichen machen.

        Prozentuale und Pixelmaße miteinander zu mischen, ist natürlich immer problematisch, da würde ich dann schon auch bei deinen für die Navigation vorgesehenen Bereichen lieber bei Prozentwerten bleiben, sonst ist es ja eher unwahrscheinlich, dass einer deiner Nutzer mal sein Fenster genau so groß aufgezogen hat, dass der Inhalt insgesamt jeweils auf 100% in beiden Dimensionen kommt.

        Gruß Gernot

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Probleme mit Hoehe von Tabellenzeilen

          Tim
          – Informationen zu den Bewertungsregeln

          Und es klappt immer noch nicht alles ;-(
          Ich hab mir jetzt überlegt, dass ich oben und links schon einen Bereich mit fester Breite bzw. Höhe brauche, und da das anscheinend mit absolut positionieren nicht klappt, woltle ich dann doch ein Tabelle machen, aber nur eine kleine, die die drei Bereiche einteilt, so wie unten im Quelltext zu sehen. Jetzt würde ich aber gerne die Elemente im rechten unteren Feld absolut positionieren, und in SelfHTML steht, dass man das nach dem Elternelement, also der Tabelle, ausrichten könnte, was bei mir jedoch leider nicht klappt :-(
          Weiß einer vielleicht, wie ich das hinbekommen kann??? Waere euch sehr verbunden :-)
          Vielen Dank schonmal, Tim.

          <html><head><title>Tims Ecuador-Seite</title>
          <style type="text/css">

          body {
            margin:0;
            padding:0;
          }

          #ecuador {
            position:absolute;
            top:0%;
            left:0%;
            height:100%;
            width:100%;
            background-color:red;
          }

          </style></head>

          <body>

          <table border="1" style="width:100%; height:100%;">
          <tr><td colspan="2" style="height:100px;">Uhr und so</td></tr>
          <tr><td style="width:150px; height="*;">asd</td>

          <td style="width:"*; height:*;">

          <div id="ecuador">
          </div>

          </td>
          </tr>
          </table>

          </body></html>

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Probleme mit Hoehe von Tabellenzeilen

            Gernot Back Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Hallo Tim,

            Ich hab mir jetzt überlegt, dass ich oben und links schon einen Bereich mit fester Breite bzw. Höhe brauche, und da das anscheinend mit absolut positionieren nicht klappt, woltle ich dann doch ein Tabelle machen, aber nur eine kleine, die die drei Bereiche einteilt, so wie unten im Quelltext zu sehen. Jetzt würde ich aber gerne die Elemente im rechten unteren Feld absolut positionieren, und in SelfHTML steht, dass man das nach dem Elternelement, also der Tabelle, ausrichten könnte, was bei mir jedoch leider nicht klappt :-(
            Weiß einer vielleicht, wie ich das hinbekommen kann??? Waere euch sehr verbunden :-)

            Andreas könnte dir hier weiterhelfen, der erklärt das immer so schön:

            Studier mal diesen Thread, dann geht dir vielleicht ein Licht auf!

            http://forum.de.selfhtml.org/archiv/2005/1/t97745/#m595198

            Also der Tipp: Schachtele noch ein relativ positioniertes Element um dein absolut positioniertes in das Tabellenfeld unten rechts. Vergiss auch nicht, die Breite und Höhe mit CSS vom obersten bis zum untersten Element durchzureichen. Wahrscheinlich funktioniert das vorgeschlagene Konstrukt auch nur im Quirksmode und wie Opera sich bei einem Resize des Fensters verhält, da lege ich meine Hand auch nicht für ins Feuer.

            Gruß Gernot

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Probleme mit Hoehe von Tabellenzeilen

              Gernot Back Homepage des Autors
              – Informationen zu den Bewertungsregeln

              Hallo nochmal,

              eigentlich wollte ich dich ja noch ein bisschen zappeln lassen, damit du dich selbst bemühst, aber da der Thread im Archiv zu verschwinden droht, bevor du am nächsten ecuadorianischen Werktagsnachmittag wieder im Forum bist, poste ich dir mal eine Lösung, von der ich nicht weiß, ob ich sie dir wirklich empfehlen soll (angesichts der Klimmzüge, die man für Opera machen muss und angesichts der Macken, die auch der IE teilweise bei einem Resize des Fensters damit hat.

              Was ich selbst ja gerne wüsste: Hat jemand eine bessere Lösung für das Problem, möglicherweise sogar ohne Tabellenmissbrauch?

              Gruß Gernot

              Hier mein Code:

                
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
<head>  
<title>Ecuadekor</title>  
<meta name="author" content="Gernot Back">  
<meta name="generator" content="Ulli Meybohms HTML EDITOR">  
<style type="text/css">  
[code lang=css]  
body {  
  overflow:auto;  
}  
  
html, body, table {  
  width:100%;  
  height:100%;  
  margin:0;  
  padding:0;  
  border-collapse:collapse;  
}  
  
td {  
  padding:0;  
}  
  
#ecuador {  
  background-color:red;  
  height:100%;  
  width:100%;  
  position:relative;  
}  
  
#ecuador div {  
  background-color:blue;  
  height:75%;  
}  
  
#ecuador div div {  
 background-color:yellow;  
 height:67%;  
}  
  
#ecuador #content{  
  position:absolute;  
  top:5%;  
  left:5%;  
  width:90%;  
  height:90%;  
  overflow:auto;  
  background-color:white;  
}  
  
#content p, #content h1{  
  color:black;  
  margin:1% 2%;  
}  
  
#left {  
  height:50px;  
  vertical-align:top;  
}  
  
#top {  
  width:150px;  
  vertical-align:top;  
}  
/*  
im nachfolgenden externen Stylesheet  
steht als Workaround für Opera:  
  
#ecuador #content{  
  overflow:scroll;  
}  
*/

              </style>
              <link rel="stylesheet" type="text/x-opera-css;charset=utf-8" href="opera.css">
              <script type="text/javascript">

                
// Den Resizefix benötigt auch nur Opera:  
window.onresize = function() {  
    if(window.opera)  
      window.location.reload();  
  }

              </script>
              </head>
              <body>
              <table>
                <tr>
                 <td id="left" colspan="2">Platz für die Kopfzeile</td>
                </tr>
                <tr>
                 <td id="top">Platz für die navi links</td>
                 <td>
                   <div id="ecuador">
                     <div id="content">
                       <h1>Eine Überschrift</h1>
                       <p>ganz viel Text</p>
                     </div>
                     <div>
                       <div>&nbsp;</div>
                     </div>
                   </div>
                 </td>
                </tr>
              </table>
              </body>
              </html>[/code]

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln