✔ Feste Zelle definieren

Status
Nicht offen für weitere Antworten.
G

gingerswelt

Mitglied
Hallo zusammen,

ich benötige innerhalb einer Tabelle eine Zelle, die ihre Größe nicht verändert.
Im nachfolgenden Code ist eine zweispaltige Tabelle angeführt, die auf der
linken Seite zwei unterschiedlich große Zellen enthält.

Code: 
 <table border>
    <tr>
      <td height="10px">Inhalt der ersten Zelle neben der erstreckten Zelle</td>
      <td rowspan=2 width=200>
      Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
      </td>
    </tr>
    <tr>
     <td height="100px">Inhalt der zweiten Zelle neben der erstreckten Zelle</td>
    </tr>
</table>

Die linke untere Zelle soll sich aber in Abhängigkeit der rechten (großen) Zelle
vergrößern/verkleinern. Dafür habe ich die Angabe in Prozent gewählt.

Code: 
 <table border>
    <tr>
      <td height="10px">Inhalt der ersten Zelle neben der erstreckten Zelle</td>
      <td rowspan=2 width=200>
      Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
       Inhalt Zelle über 2 Zeilen und 2 Spalten
      </td>
    </tr>
    <tr>
     <td height="100%">Inhalt der zweiten Zelle neben der erstreckten Zelle</td>
    </tr>
</table>

Leider werden dann die beiden linken Zellen 50:50 geteilt. Das ist von mir nicht
gewünscht. Ich möchte, dass die linke obere Zelle fest ist. Die Angabe mit * ist
leider auch erfolgelos. Warum?

Kann jemand weiter helfen.

Danke
ginger
 
Eine Lösung habe ich nicht parat, aber den grundsätzlichen Hinweis, daß in Attributen wie height die Einheit px nicht notiert wird

Code: 
<td height="10px">Inhalt der ersten Zelle neben der erstreckten Zelle</td>
und den Tipp, das Konstrukt alternativ mit DIVs + CSS zu realisieren.
 
Da sich die Höhe des linken unteren Bereichs am Rechten orientieren soll, habe ich dem Parent-DIV (= das äusserste DIV) eine Hintergrundgrafik gegeben, die mittels der CSS-Eigenschaft background-repeat:repeat-y und durch den Inhalt der linken u. rechten Spalte nach unten wiederholt wird. Somit sind die beiden Spalten immer gleich hoch.

Das Demo (incl. Hintergrundgrafik) hänge ich als ZIP-Datei an.
 

Anhänge

Fantastisch. Das ist genau das, was ich benötige.

Jetzt übertrage ich das auf meine Anwendung. Wenn es
dann noch Probleme gibt, wende ich mich wieder an dich.

Danke. Danke.

ginger
 
Freut mich, wenn dir mein 'kleines' Demo weitergeholfen hat.

Wenn deine Frage damit beantwortet ist, markiere das Thema bitte auch als erledigt.

Vielen Dank ;)
 
Ich habe deine Demo gut umsetzen können.
Als ich dann in einem Moment der Achtsamkeit vom IE auf den Netscape
umgeschaltet habe, bin ich total erschrocken. Netscape versteht einerseits
den Befehl background und dann doch wieder nicht.

Bitte schau dir mal meinen Code an.
 
Da stricke ich dir ein tabellenloses CSS-Layout und du packst es in eine verschachtelte Tabelle .... :(

Zudem hast du mein CSS-Modell bruchstückhaft und fehlerhaft übernommen, was in den Gecko-Browsers FireFox (1.5), Mozilla (1.6) und Netscape (7.0), sowie dem Opera (8.50) zu den Darstellungsproblemen führt.

Hier der überarbeitete und korrigerte HTML- u. CSS-Code:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>MIW- Mitteldeutsche Innovationswerkstatt Wireless</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body
{
background: #eeeeee;
}

div.main
{
width: 752px;
margin: 10px auto;
}

div.wrapper{
            width: 650px;
            margin: 10px;
            border: 1px solid #eeeeee; /* = Seitenhintergrundfarbe */
            background: url(layout/rahmen_links2.jpg) repeat-y;
}

div.leftCol{
            float: left;
            width: 156px;
}

div.middleCol{
              float: left;
              width: 5px;
}

div.rightCol{
             float: right;
             margin: 0px;
             width: 484px;
             border: 1px solid #009999;
}

div.clear
{
clear: both;
height: 0;
font-size: 0;
margin: 0;
padding: 0;
}

div.button{
             line-height: 30px;
             background: url(layout/button.jpg);
}

div.button_right{
             line-height: 30px;
             background: url(layout/button_rechts.jpg);
}

div.border_left{
             line-height: 30px;
}

div.empty{
             line-height: 30px;
}


div.bottom  {/* CSS-Eigenschaften */}
div.content {height: 400px;}

.mainborder {
        border-top-color: 139A9B;
        border-top-style: solid;
        border-top-width: 1px;
        border-left-width: 1px;
        border-left-style: solid;
        border-left-color: 139A9B;
        border-right-color: 139A9B;
        border-right-style: solid;
        border-right-width: 1px;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: 139A9B;
        }
.nav {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
}
a:link, a:visited {
        text-decoration: none;
        font-family: Tahoma, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #009999;
        letter-spacing: 1px;
}
a:hover{
        color: #EB8B2E;
}
.navbgr {
        background-color: #FD5807;
        font-size: 10;
        font-weight: bold;
        color: White;
}

h1{
        font-family: Tahoma, Arial, Helvetica, sans-serif;
}

.nav_vertikal{
        color: #009999;
        font-size: 10pt;
}

.klein{
        color: #009999;
        font-size: 1pt;
}

.content{
        font-family: Tahoma, Arial, Helvetica, sans-serif;
        font-size: 10pt;
}

.text{
        font-family: Tahoma, Arial, Helvetica, sans-serif;
        font-size: 7pt;
}
-->
</style>

</head>
<body>

      <div class="main">
          <div class="wrapper">
          <div class="header"><img src="layout/pattern_expert_logo.jpg" style="display:block; width:752px; height:82px; border:0;" usemap="#Map"></div>
            <div class="leftCol">
              <div class="button">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 <a href="index.php?page=Menue1">Menue1</a>
              </div>
              <div class="empty">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 <a href="index.php?page=Menue2">Menue2</a>
              </div>
              <div class="empty">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 <a href="index.php?page=Menue3">Menue3</a>
              </div>
              <div class="empty">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 <a href="index.php?page=Menue4">Menue4</a>
              </div>
              <div class="bottom">&nbsp;</div>
           </div>
           <div class="middleCol">
              <div class="button_right">&nbsp;</div>
              <div class="border_left">&nbsp;</div>
              <div class="border_left">&nbsp;</div>
              <div class="border_left">&nbsp;</div>
              <div class="border_left">&nbsp;</div>
           </div>
           <div class="rightCol">
              <div class="content">
                Dies ist der Eingangstext für den Menüpunkt <i>Firma</i>.
              </div>
           </div>

           <div class="clear">&nbsp;</div>
        </div>
     </div>

<map name="Map">
  <area shape="polygon" coords="525,30,645,30,645,0,695,0,695,30,725,30,725,60,695,60,695,70,645,70,645,60,525,60" href="index.php">
</map>

</body>
</html>
Wie du siehst, kommt die Seite ohne Tabellen aus ;)

Auf den nachfolgend genannten Seiten findest du Anregungen und Beispiele zum Thema 'CSS-Layouts' (tabellenlose Seitenlayouts):

  1. andreas kalt.de: Ein CSS-Layout erstellen
  2. CSS 4 You - The Finest in Stylesheets: Workshop: Layouten ohne Tabellen
  3. css.maxdesign.com.au - CSS resources and tutorials for web designers and web developers
  4. glish.com : CSS layout techniques
  5. intensivstation :: CSS Templates :: Templates
  6. selfHTML: CSS-basierte Layouts
  7. Stichpunkt CSS: Layout ohne Tabellen
  8. stu nicholls | CSS PLaY | CSS layouts
 
Ich habe auch eine Lösung ... und das in Verbindung mit meinen Tabellen ;-)

Ich danke dir dennoch vielmals für deine hilfreichen Ratschläge.
Das gibt mir ein völlig neues Programmiergefühl.

Danke.

ginger
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück