[xhtml] Tabelle über die ganze Seitenbreite

**Kropff** · 29.01.2009, 15:00

Bei einem layout über Tabellen

macht man nicht mehr

Gibt es das ganze in XHTML nicht mehr?

doch wenn man den übergeordneten elementen html und body per css auch die höhe von 100% zuweist. sollte zumindest.

peter

**Olli4** · 29.01.2009, 15:02

Hi

Danke für dene Antwort.

Das mit dem height: 100%; klappt. Jedoch wird so das ganze Layout toal verrissen.

Kannst du mir sagen, wie ein divlayout aussehen würde über die ganze Breite und höhe? Dann versuch ichs mal umzuschreiben. Bin grad bei der CSS Referenz, aber finde nichts wegen der ganzen höhe und breite.

gruss

Olli

**Kropff** · 29.01.2009, 15:18

schau dir das mal an

PHP-Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">

<head>

  <title>Test</title>

  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

  <style type="text/css">

  * {

    margin: 0;

    padding: 0;

  }

  html, body {

    height: 100%;

    width: 100%;

  }

  div.rahmen {

    height: 100%;

    width: 100%;

    background-color: #f00;

  }

  </style>

</head>



<body>

  <div class="rahmen">

    <p>

      bla blubb

    </p>

  </div>

</body>

</html>

peter

**Olli4** · 29.01.2009, 15:31

Hi

Super danke dir. Werde das mal durcharbeiten. Hab etwas mühe das mehrspaltige Menu umzuändern. Mit Tabellen ist es doch viel einfacher. Aber irgendwie wird das schon

Gruss

Olli

**Kropff** · 29.01.2009, 16:20

Original geschrieben von Olli4
Hab etwas mühe das mehrspaltige Menu umzuändern.

lesen

peter

**Olli4** · 29.01.2009, 16:21

Hi

Super danke.

Ich habe vorhin mal angefangen das Layout mit div Containern aufzubauen. Ist ja einfacher als ich dachte. Dank deiner Hilfe konnte ich nun auch herausfinden wie man die Seitenbreite und höhe nutzt.

Nun habe ich aber noch eine Frage. Ich habe folgendes:

Code:

<div class="footer">
  .....
</div>

Den footer habe ich mittels position:absolute; bottom:0; unten am fensterrand fixiert.

Jedoch bleibt der dort. Kann ich den Footer irgendwie so modifizieren, das der am unteren Fensterrand bleibt, ABER wenn der text länger ist, dass der Footer ebenfalls fixiert ist jedoch bei textende.

Hoffe, ich konnte es annehmbar erklären.

Gruss

Olli

**wahsaga** · 29.01.2009, 16:29

http://www.alistapart.com/articles/footers

**Olli4** · 29.01.2009, 16:45

Original geschrieben von wahsaga
http://www.alistapart.com/articles/footers

Hi

Danke. Aber die seite kenne ich schon. Vielleicht liegt es an meinem schlechten Englisch das ich nur die hälfte verstehe.

Ich habe nachher für den content dies verwendet:
position: relative;
min-height: 100%;

wenn ich das mache, funktioniert es wie es soll. Aber wenn der Text kleiner ist als das fenster dann ist der footer nicht mehr unten am seitenrand.

Geht beides auch irgendwie?

Danke schonmal für eure Hilfe und Tipps.

Gruss

Olli

**wahsaga** · 29.01.2009, 16:53

min-height kann nur funktionieren, wenn fuer alle Vorfahrenelemente ebenfalls eine Hoehe angegeben ist.

Und min-height auf min-height Bezug nehmen zu lassen, funktioniert in der Praxis auch nicht.
Deshalb haben im Beispiel ja auch html und body height:100%, und direkt danach folgt der Container als Kindelement von body mit min-height:100%.

**Olli4** · 29.01.2009, 17:15

Hi

Ich sehe glaub langsam den Wald vor lauter bäumen nicht mehr. Ich finde einfach nicht die Fehler. Könnt ihr mir vielleicht nochmals auf die sprünge helfen wo die Fehler liegen?

Ich habe nun folgenden Code:
CSS:

Code:

body, html {
	margin: 0px;
	padding: 0px;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 10pt;
  height: 100%;
  width: 100%;  
}
.content1 {
	width: 100%;
}
.navigation {
	float:left;
	width: 110px;
	background-color: #000000;
}
#content2 {
	margin-left: 110px;
}
.content3 {
	position: relative;
  min-height: 100%;	
  background-color: #FF0000;
}
.werbung {
	width: 100%;
	height: 80px;
}
.footer {
	width: 100%;
	background-image: url(bg.gif);
	background-repeat: repeat-x;
	height: 50px;
}

HTML:

Code:

<div class="content1">
 <div class="navigation">navigation</div>
 <div class="content2">
  <div class="werbung">Werbung</div>		
  <div class="content3">Inhalt</div>
 </div>
</div>	
<div class="footer">footer</div>

Ich versuche, eine Seite über die komplette seitenbreite und Seitenhöhe zu legen.
Der aufbau erkläre ich kurz mit einer Tabelle, da dies einfacher sein dürfte als eine erklärung wie es aussehen soll:

Code:

  <tr>
    <td rowspan="2">Navigation</td>
    <td>werbung</td>
  </tr>
  <tr>
    <td>Inhalt</td>
  </tr>

Nun habe ich jedoch einige Probleme wo ich einfach nicht sehe wo es liegt:
1. der Footer soll am untersten seitenrand stehen. dies funktioniert, wenn der Text lange ist. Ist er jedoch kürzer, ist der footer wieder mitten auf der Seite.
2. Sowohl die Navigation wie auch der content sollte bis zu unterst zum footer gehen. Also auch das die Hintergrundfarbe bis zum footer geht.

Ich wäre euch sehr dankbar, wenn ihr mir hier helfen könntet. Ich finde einfach die Fehler nicht egal wie ich auch google bemühe und dort tonnenweise Code finde.

Gruss

Olli

**wahsaga** · 29.01.2009, 17:26

Du hast zwei Containerelemente vor deinem Element mit min-height in der Hierarchie, fuer die ueberhaupt keine Hoehenangabe gemacht wurde. Dass das nicht funktioniert, sagte ich dir bereits.

Der Umstieg von Tabellenlayout auf ein Layout mit strukturell sinnvollem, mit CSS formatiertem HTML ist natuerlich keine Sache, die in fuenf Minuten erledigt ist - das erfordert schon eine etwas laengere und intensivere Beschaeftigung mit dem ganzen.

**Kropff** · 29.01.2009, 17:35

möglicherweise sucht er ja nach faux frames

peter

**Olli4** · 29.01.2009, 17:42

Hi

Danke für eure Antworten. Muss da wirklich mal schauen. Irgendwie muss das ja gehen *g*.

Nein dieses Faux Frame such ich nicht. In Tabellen würde es so aussehen:

Code:

  <tr>
    <td rowspan="2">Navigation</td>
    <td>werbung</td>
  </tr>
  <tr>
    <td>Inhalt</td>
  </tr>
  <tr>
    <td coolspan="2">footer</td>
  </tr>

Also das der Footer immer unten an der Seite ist also bei grossem text zu unterst des text am seitenrand und bei kleine text unten am seitenrand.

Ist recht schwer zu erklären

Gruss

Olli

**SquallCW** · 29.01.2009, 18:56

Original geschrieben von Kropff

PHP-Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">

<head>

  <title>Test</title>

....

</body>

</html>

OffTopic:
Benötigt eine XHTML Seite nicht auch immer die XML-Angabe (sorry, komme gerade nicht auf's Wort. Ich mein): <?xml version="1.0"?> ?

Oder geht es auch ohne?

Danke

[xhtml] Tabelle über die ganze Seitenbreite