✔ Div-Tabelle wird gestaucht bei relativem Layout

N

Nord-Süd-Richtung

Erfahrenes Mitglied
Hi

ich habe ein Problem mit meinem relativen Layout (zudem mein erstes). Die Tabellenzeilen sollen weiter auseinander stehen, werden dummerweise aber inaneinder hineingeschoben (die Textfelder zumindest).
HTML: 
<div id="content">
  <form method="post" action="./index.php?p=overview">
    <div class="table" style="height:100%;">
      <div class="row" style="height:50%;">
        <div class="col">Username</div>
        <div class="col"><input type="text" name="username" value="" /></div>
      </div>
      <div class="row" style="height:50%;">
        <div class="col">Password</div>
        <div class="col"><input type="password" name="password" value="" /></div>
      </div>
    </div>
  </form>
</div>
CSS: 
.col{
  float:left;
  height:100%;
}
.row{
  clear:both;
}
#content{
  height:80%;
  width:100%;
}
 
Zuletzt bearbeitet:
Nord-Süd-Richtung hat gesagt.:
Ne, das lässt sich nicht machen, die Tabelle wird nämlich vertikal gestaucht
Zum Vergrößern anklicken....
Sorry, da hab ich beim Lesen deines Beitrags dein Anliegen mißverstanden.

Abgesehen von der Klasse .table seh ich in deinem Quellcode nirgends eine Tabelle, sondern ein Konstrukt, das wie eine DIV-Suppe anmutet.

Ich bin immer wieder auf's Neue erstaunt, wieviele User in unserem Forum dem Irrglauben folgen, dass ein "tabellenloses" CSS-Layout lediglich und zwingend auf dem allgemeinen Block-Element <div> basiert, das semantisch keine nähere bzw. spezifische Bedeutung besitzt. Wie wenn die Auszeichnungssprache nur dieses eine HTML-Element zur Verfügung stellen würde.

Im Anschluß folgt eine HTML-Variante, die mit einem einzigen DIV-Block auskommt, und stattdessen das Innenleben des Formularbereichs mit einer unsortierten Liste <ul>, sowie dem <label>- (siehe Label für Elemente) und <p>-Element strukturiert.

Kommen wir dann mal zu den Ursachen, warum die Browser deine height:100%- und height:50%-Deklaration für die Klassen .table und .row ignorieren:

  1. Die drei Elemente <html>, <body> und <form> benötigen ebenso eine height:100%-Regel, damit die "inneren" relativen Höhenangaben überhaupt greifen. Die beiden erstgenannten, sofern das HTML-Dokument im standardkonformen Modus übergeben wird (siehe hierzu Svens Webmaster FAQ-Post CSS Warum wird mein Layer nicht auf das gesamte Browserfenster gestreckt?).

  2. Im Stylesheest hast du den Klassenselektor .content benannt, im Markup jedoch anstelle des class-Attributs mit dem id-Attribut einen ID-Bezeichner aufgerufen. Dieser Fehler ist dir zwischenzeitlich aber selbst aufgefallen, und hast ihn in deinem Post nachträglich korrigiert.

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" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-04-29" />

<title>tutorials.de | Div-Tabelle wird gestaucht bei relativem Layout</title>

<style type="text/css">
/* <![CDATA[ */
* {
  margin:0;
  padding:0;
}
html,body,form,.table {
  height:100%;
}
.content{
  height:80%;
  width:100%;
}
.table{
  list-style:none;
}
.row{
  height:50%;
  clear:both;
}
.col{
  float:left;
  height:100%;
  }
/* ]]> */
</style>

</head>
<body>

<div class="content">
  <form method="post" action="./index.php?p=overview">
    <ul class="table">
      <li class="row">
        <label for="username" class="col">Username</label>
        <p class="col"><input type="text" name="username" id="username" value="" /></p>
      </li>
      <li class="row">
        <label for="password" class="col">Password</label>
        <p class="col"><input type="password" name="password" id="password" value="" /></p>
      </li>
    </ul>
  </form>
</div>

</body>
</html>


mfg Maik
 
Hi
der Fehler war mir in der Tat selber aufgefallen ;) Ich habe es "Div-Tabelle" getauft, weil die divs mit dem CSS einer Tabelle gleichen... auf jeden Fall wusste ich aber nicht, dass das form tag eine Höhenangabe braucht, was die Lösung meines Problems war, wie immer vielen Dank :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück