Tabelle wird in xhtml nicht auf 100% aufgezogen

[Mathias]

Hi

Ich hab ein Problem:
Bei mir wird der Table (ich arbeite in xhtml strict 1.0), wenn ich ihn mit height:100% angebe, nicht auf die 100% aufgezogen.

Es ist so: Bei mir ziehen die Browser(IE Firefox Opera usw.)den Table nicht auf die 100% der Höhe auf obwohl das in html 4.01 der Fall ist und ich brauche jetzt irgendwas, damit ich dieses Problem lösen oder umgehen kann.

hier der relevante Quelltext:

<table style="height:100%; width:62em;" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:62em; height:100%;">
</td></tr></table>

Ich hoffe mir kann jemand helfen

gruesse
Mathias

[MudGuard]

Hi,

Bei mir wird der Table (ich arbeite in xhtml strict 1.0), wenn ich ihn mit height:100% angebe, nicht auf die 100% aufgezogen.

Das klingt nach Layout-Tabelle. Tabellen sind für tabellarische Daten, nicht für's Layout.

Es ist so: Bei mir ziehen die Browser(IE Firefox Opera usw.)den Table nicht auf die 100% der Höhe auf obwohl das in html 4.01 der Fall ist und ich brauche jetzt irgendwas, damit ich dieses Problem lösen oder umgehen kann.

Die 100% Höhe beziehen sich auf die Höhe des Elternelements.
Wie hoch ist dieses? Und dessen Elternelement? Und dessen Elterneleme… …

cu,
Andreas

[Mathias]

HI

Nun gut bei mir ist der Table nicht für das Layout zuständig, sondern für etwas anderes was ich jetzt nicht weiter erläutern möchte, da des zu lange dauern würde.

Ich kann aber sagen, dass bei mir in diesen Table meine Divs hineinkommen (mit position:absolute und height:100%).

Doch jetzt das Problem:
Der Schei-- IE denkt die 100% beziehen sich auf den body und nicht auf den Table und somit sind die divs mit height:100% so lang wie der Bildschirm, geht der text-darüber hinaus wird das Layout abgeschnitten.

Der Firefox hingegen bezieht die 100% auf den Table und schreibe ich in die Divs im table was rein oder gib ihnen absolute Maße, dehnt sich der TAble nach unten aus und die Divs (mit height:100%) werden auch größer.

Doch ich hätte es gerne so, dass zuerst einmal sich die 100% auf den body beziehen sprich auf den gesamten Bildschirm und dann, falls der text über die 100% hinausgehen auf den Text.

Es wäre echt wichtig für mich

ich glaube zwar, dass das in xhtml nicht geht (in html hab ichs geschafft) aber wenn mir jemand helfen könnte oder einen Tipp hat wäre ich echt dankbar

thx im voraus

mfg

Mathias

[MudGuard]

Hi,

Nun gut bei mir ist der Table nicht für das Layout zuständig, sondern für etwas anderes was ich jetzt nicht weiter erläutern möchte, da des zu lange dauern würde.

Ich kann aber sagen, dass bei mir in diesen Table meine Divs hineinkommen (mit position:absolute und height:100%).

Wenn Du die divs sowieso absolut positionierst, wofür packst Du sie dann in eine Tabelle?

Der Schei-- IE denkt die 100% beziehen sich auf den body
und nicht auf den Table
und somit sind die divs mit height:100% so lang wie der Bildschirm, geht der text-darüber hinaus wird das Layout abgeschnitten.
Der Firefox hingegen bezieht die 100% auf den Table und schreibe ich in die Divs im table was rein oder gib ihnen absolute Maße, dehnt sich der TAble nach unten aus und die Divs (mit height:100%) werden auch größer.

Ist ohne Kenntnis des relevanten Codes sehr schwer zu beurteilen.

Doch ich hätte es gerne so, dass zuerst einmal sich die 100% auf den body beziehen sprich auf den gesamten Bildschirm

"Der gesamte Bildschirm" ist für CSS ein unerreichbares Maß.
Und ich bezweifle, daß body das Maß "gesamter Bildschirm" hat.

cu,
Andreas

[Mathias]

Ich brauche ihn zum zentrieren.

Hier ein Ausschnitt des Quellcodes, wer die Zeit (und/oder die Lust hat) ihn durchzuarbeiten.

PS: das ist nur eine TESTSEITE:

das css:

body{height:100%;width:100%;font-size:100.1%;font-family:verdana, courier new, arial, geneva;color:black;margin: 0 0 0 0;padding: 0 0 0 0;}
#koerper{position:relative;top:0;left:12em;height:100%;width:39.5em;background:transparent;margin:0 0 0 0;padding:0 0 0 0;}
#koerper2{position:absolute;top:0;left:-12em;height:100%;width:62em;background:transparent;margin:0 0 0 0;padding:0 0 0 0;}
#navil{position:absolute;top:0;left:0;height:100%;width:11.5em;background:#e5e5e5;margin:0 0 0 0;padding:0 0 0 0;}
#navir{position:absolute;top:0;left:52em;height:100%;width:10em;background:#e5e5e5;margin:0 0 0 0;padding:0 0 0 0;}
#navil2{z-index:10;position:absolute;top:0;left:0;height:100%;width:11.5em;background:transparent;margin:0 0 0 0;padding:0 0 0 0;border-style:solid;border-color:navy;border-width:0 0.05em 0 0;}
#navir2{z-index:8;position:absolute;top:0;left:52em;height:100%;width:10em;background:transparent;margin:0 0 0 0;padding:0 0 0 0;border-style:solid;border-color:navy;border-width:0 0 0 0.05em;}
#kopf{z-index:9;position:absolute;top:0;left:0;height:7.2em;width:100%;background:white;margin:0 0 0 0;padding:0 0 0 0;border-style:solid;border-color:navy;border-width:0 0 0.05em 0;}
#logo{z-index:9;position:absolute;top:0;left:0;height:7.1em;width:11.5em;background:transparent;margin:0 0 0 0;padding:0 0 0 0;}
#balkenb{z-index:12;position:absolute;top:50%;left:11.5em;height:50%;width:50.5em;background:navy;margin:0 0 0 0;padding:0 0 0 0;}
#palles{z-index:13;position:absolute;top:1em;left:13em;height:5em;width:10em;background:transparent;margin:0 0 0 0;padding:0 0 0 0;}

und hier das html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="de">
<head>

<title>P&ouml;selt GmbH - Home</title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
<meta name="Keywords" content="Automatendrehteile, Facondrehteile, P&ouml;selt, GmbH, Dietfurt, B&ouml;hmerbrunnenstra&szlig;e 15, Pr&auml;zisionsdrehteile"/>
<meta name="author" content="P&ouml;selt"/>
<meta name="DC.Title" content="Firma P&ouml;selt Startseite"/>
<meta name="DC.Creator" content="Prakti2"/>
<meta name="DC.Subject" content="Automaten- und Facondrehteile"/>
<meta name="DC.Description" content="Home - P&ouml;selt GmbH"/>
<meta name="DC.Publisher" content="Schwarz Computersysteme GmbH"/>
<meta name="DC.Contributor" content="Prakti1"/>
<meta name="DC.Date" content="2005-02-23"/>
<meta name="DC.Type" content="Service"/>
<meta name="DC.Format" content="text/html"/>
<meta name="DC.Identifier" content="http://www.poeselt.de"/>
<meta name="DC.Source" content="Barrierefreies Webdesign"/>
<meta name="DC.Language" content="DE"/>
<meta name="DC.Relation" content="zentriertes Layout f&uuml;r Barrierefreiheit"/>
<meta name="DC.Coverage" content="Neumarkt i. d. OPf. 2005-02-23"/>
<meta name="DC.Rights" content="Schwarz Computersysteme GmbH"/>
<link rel="stylesheet" type="text/css" href="poeselt.css"/>

</head>

<body>
<table style="height:100%; width:62em;" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:62em; height:100%;">
<div id="koerper">
  <img src="bild1.bmp" alt=" " style="height:12em;width:100%;border:0;"/>
  <div id="welcome">
  <h1>Willkommen...</h1>
  </div>
  <img src="phaus.bmp" style="float:left;border:0;margin: 0px 5px 0px 0px;height:11.5em;" alt="Eine wei&szlig;e Fabrikhalle der Firma P&ouml;selt auf der mit blauen Lettern geschrieben steht: P&ouml;selt GmbH" />
  <p>Wir fertigen mit ca. 20 Mitarbeitern Pr&auml;zisionsdrehteile auf mehr als 40 Drehmaschinen.</p>

<p>Zu unseren Kunden z&auml;hlen Firmen aus der Automobil-, Maschinenbau-, Kunststoff-, Elektro-, und Medizinindustrie.</p>

<p>Unsere langj&auml;hrige Erfahrung und Verl&auml;&szlig;lichkeit sind der Grundstein f&uuml;r die Zufriedenheit unserer Kunden.</p>

<br />
  <br />
  <br />
  <p>Suchen Sie einen Lieferanten mit Know How und Flexibilit&auml;t; finden Sie in uns den richtigen Partner</p>
  <br />
  <p>Hinweis:
  <br />
  Wir &uuml;berarbeiten gerade das Leistungsangebot unseres Internetauftritts.
  Wir w&uuml;rden uns freuen Sie als Besucher bald wieder mit neuen Informationen begr&uuml;&szlig;en zu d&uuml;rfen.</p>
  <br />
  <br />

<div id="koerper2">
  <div id="navil"></div>
  <div id="navir"></div>
  <div id="navil2"></div>
  <div id="navir2">

</div>
   <div id="xhtmlw3c">
    <a href="http://validator.w3.org/">
         <img src="c:\xhtmlw3c.png" alt="Valid XHTML 1.0!"  style="border:0; width:88; height:31;" />
    </a>
   </div>
   <div id="cssw3c">
    <a href="http://jigsaw.w3.org/css-validator">
         <img style="border:0;width:88px;height:31px" src="R:\poeseltfertig\cssw3c.gif" alt="Valid CSS!" />
    </a>
   </div>
  </div>
  <div id="kopf">
  <div id="balkenb"></div>
  </div>
  <div id="palles"><img src="palles.jpg" style="height:106%;border:0;" alt="mehrere Bilder mit verschiedenen Werkst&uuml;cken die die Firma P&ouml;selt hertellen" /></div>
  <div id="naviki">
    <div id="navimitte">
      <a href="Kontakt.html" accesskey="e" tabindex="5" title="hier k&ouml;nnen sie Kontakt mit uns aufnehemen - Accesskey b">Kontakt &nbsp;|</a>
      <a href="Impressum.html" accesskey="f" tabindex="6" title="Impressum - Accesskey c">Impressum</a>
    </div>
  </div>
  <div id="logo">
    <a href="http://www.poeselt.de" accesskey="g" tabindex="7"><img src="plogo.gif" style="border:0;margin:1.5em 0 0 0;height:50%;" alt="In blauer Schrift steht auf wei&szlig;em Hintergrund P&ouml;selt GmbH und stellt das Firmenlogo dar" /></a>
  </div>
</div>

</div>
</td>
</tr>
</table>
</body>
</html>

[Danny]

Hi,

versuche es mal damit:

html {
  height:100%
}

[Mathias]

Hi,

versuche es mal damit:

html {
  height:100%
}

Hi danny

thx für die Antwort, aber wie soll ich das verwenden(im style oder) und vor allem was ich net verstehe, was soll das bringe???

gruesse

Mathias

[wahsaga]

hi,

html {
  height:100%

[...] und vor allem was ich net verstehe, was soll das bringe???

das soll endlich das erfüllen, worauf Andreas dich bereits in der ersten antwort auf deine frage hinwies - dass alle elternelemente, bis ganz rauf nach oben, auch eine definierte höhe haben - weil sonst dein vorhaben mit CSS gar nicht klappen _kann_.

gruß,
wahsaga

[Mathias]

Hi

und wie verwendet man html{height:100%}

gruesse

Mathias

[wahsaga]

hi,

und wie verwendet man html{height:100%}

wonach sieht diese syntax denn aus - könnte das vielleicht CSS sein?

gruß,
wahsaga

[Mathias]

ich bins nochmal

Es würde mir auch reichen wenn mir jemand sagen könnte, wie ich es schaffe, dass ein div zuerst einmal mit den 100% aufgezogen werden (auf die Auflösung bezogen z.B 1024 auf 768px) und dann, falls der text nach unten länger wird als die 100%, sich auf den TExt bezieht und das Layout dann mitgeht.

IM KLARTEXT:

Ich will eigentlich nur ein Layout, welches zentriert ist und sich automatisch aufzieht, wie mit TAbellenlayout, nur mit divs

thx

mit freundlichen gruessen

Mathias

[Mathias]

Hi, ich wollte mich noch bei Danny und dem wahsaga bedanken:

habt mir sehr weitergeholfen.

Danke wahasaga,

danke danny,

ciao

viel gruesse

Mathias

[Mathias]

Hi

ich bins schon wieder,

dank dem danny und dem wahsaga hab ich mein problem gelöst, dafür hab ich jetzt eine neues (aber zum Glück ein kleineres) Problem.

Denn die Browser IE, Firefox, Mozilla, Netscape interpretieren meinen Quelltext so, wie ich das gewollt habe, nur der Opera macht mir da einen Strich durch die Rechnung.
schaut euch diesen Quelltext an (das is nur eine Testseit, wie man unschwer erkennen kann):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled</title>
<style>
body{height:100%;width:100%;margin:0;padding:0;text-align:center;font-size:100.1%;}
html{height:100%;}

.tableclass{height:100%;width:62em;margin-left:auto;margin-right:auto;}
#koerper2{margin-right:auto;position:relative;top:0;left:12em;height:100%;width:39.5em;background:yellow;}
</style>
</head>

<body>
<table class="tableclass" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="koerper2">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
hallo
</div>
</td></tr></table>
</body>
</html>

so wenn ich diese Seite jetzt in den obengenannten Browsern öffne, funktioniert bis auf den Opera.

Der zeigt den kompletten Div #koerper2 nicht an kein gelb, keine <br> und kein hallo wo ist das hin??
Das komische ist, mache ich den Div #koerper2 im html wieder weg, zeigt auch der Opera(dann alle Browser gleich), die <br> und das Hallo an.

Wieso?
Ich meine der Table hat doch eine Höhe und der Div liegt im Table und müsste doch dann wenigsten die 100% des Table annehemen.

Wäre toll wenn mir nochmal jemand helfen könnte

gruesse

Mathias

[wahsaga]

hi,

<style>

required attribute "type" missing.

gruß,
wah-auch_mal_Cheatah-saga

[Mathias]

Hi

was meinst du damit???

mfg

Mathias

[wahsaga]

hi,

was meinst du damit???

dass da ein attribut fehlt, das erforderlich ist.

gruß,
wahsaga