Das Sternchen (*) als Größenangabe

[Helmut Weber]

Hallo SelfForum,

ich habe in SelfHTML und im Archiv schon ein wenig gesucht, aber keine passende Aussage gefunden.

In Tabellenzellen begegnet man immer wieder dem Attribut width=*". Wenn ich Elemente per CSS formatieren möchte, finde ich in SelfHTML nur mehrere Einheiten die ich angeben kann (px, em, %, ..), aber kein Sternchen(*).
Ist das Sternchen(*) also überhaupt erlaubt (im speziellen bei CSS)?

Ich möchte eine Seite aufbauen, die aus 3 Ebenen besteht: Kopzeile, Inhalt und Fusszeile:

-----------------
|               |
-----------------
|               |
|               |
-----------------
|               |
-----------------

Kopzeile und Fusszeile sollen immer eine feste Höhe haben. Der Inhalt soll so viel Platz nehmen, wie dieser benötigt. Wenn nun aber sehr wenig Inhalt auf einer Seite ist, sieht die Seite ein wenig "gestaucht" aus. Deshalb hätte ich gerne, das die Seite auf jeden Fall das Browserfenster in der gesamten Höhe ausnutzt.

Kann mir jemand bei meinem Problemchen helfen?

Gruß
Helmut Weber

[Cheatah]

Hi,

In Tabellenzellen begegnet man immer wieder dem Attribut width=*".

in <td>? Da hat's nichts verloren.

Ist das Sternchen(*) also überhaupt erlaubt (im speziellen bei CSS)?

http://www.w3.org/TR/CSS2/visudet.html#propdef-width sagt Dir, welche Angaben bei width erlaubt sind. Folge den Links hinter "length" und "percentage". Was Du vermutlich gesehen hast, entstammt http://www.w3.org/TR/html401/struct/tables.html#edef-COLGROUP (gilt auch für <col>).

Cheatah

[Jan H.]

Hallo,

Kopzeile und Fusszeile sollen immer eine feste Höhe haben. Der Inhalt soll so viel Platz nehmen, wie dieser benötigt. Wenn nun aber sehr wenig Inhalt auf einer Seite ist, sieht die Seite ein wenig "gestaucht" aus. Deshalb hätte ich gerne, das die Seite auf jeden Fall das Browserfenster in der gesamten Höhe ausnutzt.

Wenn der kopfteil und der fussteil eine höhe in px haben soll wirde es kompliziert.
Wenn aber für die beiden bereiche auch prozentuale angaben denkbar sind wirde es einfacher, du müsstest den bereichen höhen vergeben welche in der summe 100% ergeben, dabei auf das korrekte boxmodel achten, margins, borders, etc, für neuere browser übderschreibst du die höhe des mittleren bereiches mit hilfe zb solcher selektoren: body>div{} in height:auto; und gibst da noch zusätzlich min-height:...%; an.
Eine overflow angabe sollte im mittleren bereich nicht nötig sein da der IE ei mehr inhalt diesen sowieso wergrössert.
Wenn der obere und untere bereich vom inhalt her auch zu klein werden könnten bei kleinem fenster sollte da auch nochmal mit min-height:...%; nachgearbeitet werden.

So in der art hatte ich es mal getestet und es funktionierte recht gut in gängigen, aktuellen browsern, ältere sollten etwas weniger css zu sehen bekommen.

Gruss, Jan aus Dresden

[Jan H.]

Hallo nochmal und UPS.
hier geht es scheinbar um tabellen und deren breite.
Die "zeichnung" und die "höhe" haben mich auf den falsche weg gebracht.
Ich sollte besser lesen und verstehen.
Sorry.

Gruss, Jan aus Dresden

[Helmut Weber]

Hallo Jahn,

Hallo nochmal und UPS.
hier geht es scheinbar um tabellen und deren breite.
Die "zeichnung" und die "höhe" haben mich auf den falsche weg gebracht.
Ich sollte besser lesen und verstehen.
Sorry.

Ne, war mein Fehler... ich sollte besser schreiben ;)

Als allgemeines Beispiel habe ich width="" genommen, und als ich auf mein konkretes Problem gekommen bin, habe ich von height="" geredet...

Mein Problem liegt an der Höhenangabe!
Prozentuale Angaben möchte ich wenn es irgendwie geht vermeiden. Ich möchte meine Überschrift und meine Fusszeile eine feste Höhe zuweisen, und nur den Inhalt variabel gestalten. Ich habe auch schon probiert Kopf- und Fusszeile feste Höhenangaben zu vergeben und dem Inhalt 100%... dann ist die Seite immer 100% + Kopfzeile + Fusszeile groß (logisch!).

Gruß
Helmut Weber

[Jan H.]

Hallo,

Mein Problem liegt an der Höhenangabe!

Höhenangaben haben immer irgendwie einen pferdefuss daher versuche ich auch immer diese zu vermeiden.

Prozentuale Angaben möchte ich wenn es irgendwie geht vermeiden. Ich möchte meine Überschrift und meine Fusszeile eine feste Höhe zuweisen

Das problem dabei, auch wenn ein zeilenumbruch nicht möglich ist, ist immer noch die variabilität der schriftgrösse.

und nur den Inhalt variabel gestalten. Ich habe auch schon probiert Kopf- und Fusszeile feste Höhenangaben zu vergeben und dem Inhalt 100%... dann ist die Seite immer 100% + Kopfzeile + Fusszeile groß (logisch!).

Ja, richtig.
Und ich denke, dass du es so mit css nicht alltagstauglich hinbekommen wirst, da stellt sich die frage, wenn es sich um eine präsentation handelt, weisst du ja vieleicht, dass diese eventuell nur auf dem rechner mit dem browser funktionieren muss, allerdings wäre es doof wenn du dann später doch mal jemand andern die sache auf einem anderen rechner/browser zeigen willst.

Das problem in deinem beispiel » http://www.prode.de/praesentation/ « ist, dass du da float nutzt, wenn ich micht recht erinnere werden dann (zum. in mozilla) prozentuale höhenangaben nicht angezeigt wie gewollt, eben wegen der eigenschaft float, feste px höhen sind kein problem.

In solchen fällen versuche ich oft das problem mit hilfe von hintergrundbildern zu lösen, die, wenn geschickt platziert, eine seitenfüllende optik erreichen, die <div>s an sich bleiben transparent oder werden nur wenn nötig nochmal mit farbe/bild hinterlegt.

Du könntest mal die von Mathias gepostete css lösung nehmen und in dem variablen textbereich den float kram reinlegen und den bereich mit einem hintergrundbild versehen, in der art http://css.fractatulum.net/sample/layout11.htm.

Übrigens sind in deinem beispiel viel unnötige <div>s drin, es bringt nicht viel ein <h1> oder <p> nochmal in ein extra container zu stecken.

Gruss, Jan aus Dresden

[molily]

Hallo Helmut,

In Tabellenzellen begegnet man immer wieder dem Attribut width=*". Wenn ich Elemente per CSS formatieren möchte, finde ich in SelfHTML nur mehrere Einheiten die ich angeben kann (px, em, %, ..), aber kein Sternchen(*).
Ist das Sternchen(*) also überhaupt erlaubt (im speziellen bei CSS)?

Sofern du die Gesamthöhe der Tabelle gesetzt ist, nimmt die Zelle ohne Höhenangabe automatisch die verbleibende Höhe an, wenn die Höhen der anderen Zellen gesetzt sind.

Kopzeile und Fusszeile sollen immer eine feste Höhe haben. Der Inhalt soll so viel Platz nehmen, wie dieser benötigt. Wenn nun aber sehr wenig Inhalt auf einer Seite ist, sieht die Seite ein wenig "gestaucht" aus. Deshalb hätte ich gerne, das die Seite auf jeden Fall das Browserfenster in der gesamten Höhe ausnutzt.

Eine Tabellenlösung mit height:100%:

html,body {margin:0; padding:0; height:100%;}
p,div {margin:0;}
table {width:100%; height:100%; border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}
#a {height:100px; background-color:#abc;}
#b {background-color:#def;}
#c {height:100px; background-color:#abc;}

<table summary="Layouttabelle">
<tr><td id="a"> </td></tr>
<tr><td id="b"><p>bla</p><p>bla</p><p>bla</p></td></tr>
<tr><td id="c"> </td></tr>
</table>

Und um Jans CSS-Vorschlag noch einmal zu illustrieren:

html,body {margin:0; padding:0; height:100%;}
p,div {margin:0;}
#a {height:10%; min-height:50px; background-color:#abc;}
#b {height:80%; min-height:80%; background-color:#def;}
body>#b {height:auto;}
#c {height:10%; min-height:50px; background-color:#abc;}
#b p {padding:1em 0;}

<div id="a"></div>
<div id="b"><p>bla</p><p>bla</p><p>bla</p></div>
<div id="c"></div>

Grüße,
Mathias

[Helmut Weber]

Hallo Mathias;

Sofern du die Gesamthöhe der Tabelle gesetzt ist, nimmt die Zelle ohne Höhenangabe automatisch die verbleibende Höhe an, wenn die Höhen der anderen Zellen gesetzt sind.

Mit Tabellen leuchtet mir das ganze auch ein.
Mit dem Ganzen möchte ich eigentlich eine Präsentation machen. Da ich sowieso jeden Tag mit HTML arbeite, weigere ich mich jetzt einfach für Präsentationen PowerPoint oder ähnliches zu verwenden ;)

Eine Präsentation sollte natürlich immer im Vollbildmodus dargestellt werden, deshalb möchte ich auch das die Seite das ganze Browserfenster ausfüllt.

Gleichzeitig möchte ich mit dieser Präsentation ein wenig "experimentieren". Seither benutze ich immer Tabellen als Layout-Mittel, möchte aber bei dieser Präsentation weg von den Tabellen und hin zu den Ebenen. Dabei solpere ich halt über diese Kleinigkeiten, die ich mit Tabellen recht simpel lösen konnte.

Hier auvh mal ein Link, wie die Präsentation aussehen soll:
http://www.prode.de/praesentation/

Das Layout funktioniert soweit auch ganz gut. Nur wenn der Inhalt zu groß wird, dann überdeckt die Fußzeile den Inhalt ;)

Hat jemand schon mal so etwas ähnliches gemacht, oder hat sonstige Tipps für HTML-Präsentationen?

Gehe ich gar mit meinen Gedanken einen ganz falschen Weg?

Gruß
Helmut Weber

[Thomas J.]

Tag auch

Hat jemand schon mal so etwas ähnliches gemacht, oder hat sonstige Tipps für HTML-Präsentationen?

Schau Dir mal den Präsentationsmodus von Opera an: http://www.opera.com/support/tutorials/operashow/.

Thomas J.

[Helmut Weber]

Hallo Thomas,

hört sich ja gut an, da werde ich mir Opera mal genauer anschauen!

Eigentlich habe ich mir gedacht, ich Brenne Phoenix mit auf die Präsentations-CD, da Phoenix nicht installiert werden muss und somit ja auch von CD lauffähig sein sollte.

Da habe ich ja noch einiges zu tüfteln ;)

Gruß
Helmut Weber