nicht angemeldet
Design ohne Tabellen - Probleme mit einem Balken
Hallo Leute,
gerade bin ich dabei, ein neues design für eine Seite zu entwerfen. Dabei wollte ich nun komplett auf Tabellen verzichten, allerdings habe ich dabei ein Problem. Und zwar möchte ich oben und unten einen Balken über die gesamte Fensterbreite setzen, leider klappt das mit dem Balken nicht.
In der Mitte steht eine beliebige Textmenge, die auch mal mehrere Bildschirmseiten füllen kann, der untere Balken (t_foot) soll natürlich je nach Textmenge nach unten "wandern". Nun aber will das ganze überhaupt nicht so wie ich das möchte. Noch zur Info:
Der Einfachheit halber habe ich das meiste entfernt, die Seite beinhaltet sowohl rechts wie auch links eine Navigation.
Der footer bleibt jedoch nicht da wo ich möchte. Auch wenn der Content mehrere Bildschirmseiten füllt bleibt der footer immer an der genau gleichen Stelle und "wandert" nicht nach unten. wie also kann ich das ändern.
Ich vermute, daß ich wohl noch mehr Probleme bekommen könnte. Daher würde mich auch ein Tutorial zu dem ganzen interessieren, Selfhtml kenne ich selbstverständlich, aber irgendwie bringt es mich zu diesem Thema nicht wirklich weiter, gibt es irgendwo nicht allzugrosse und überschaubare Beispielseiten? Ich habe mal eine Seite gesehen, die nur aufgrund der Style-Datei komplett anders ausgesehen hatte, nur leider weiß ich die Adresse nicht mehr. Ach ja, nachfolgend noch den gekürzten HTML-Code:
<html>
<head>
<style>
#t_head
{
background:#b0c4de;
position: absolute;
top: 60px;
width:100%;
}
#t_content
{
padding: 8px;
top: 80px;
bottom: 80px;
position: absolute;
}
#t_foot
{
bottom:1px;
background:#b0c4de;
position:absolute;
width:100%;
}
</style>
</head><body>
<div id="t_head">t_head</div>
<div id="t_content">
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile
</div>
<br /><div id="t_foot">t_foot</div>
</body>
</html>
-
position: absolute;
Also mir wurde immer eingetrichtert, dass position:absolute; nur in ganz wenigen Fällen zutreffen würde und auch nur dann die gewünschten Ergebnisse liefert. Probiere mal alle Positionen durch, wobei ich glaube, dass position:fixed; wohl das ist was du suchst. Wenn keine position funkitioniert, dann lasse sie ganz weg.
OOOOder, fällt mir gerade ganz spontan ein ( :-) ), setze das div ohne CSS! Damit würde es immer unter dem Text bleiben. Das ist es doch was du willst, oder?
-
Probiere mal alle Positionen durch
hab ich schon gemacht, nicht das gewünschte Ergebnis
wobei ich glaube, dass position:fixed; wohl das ist was du suchst.
Leider auch nicht (*fastheul*)
Wenn keine position funkitioniert, dann lasse sie ganz weg.
Auch schon getestet, geht auch nicht...
»» OOOOder, fällt mir gerade ganz spontan ein ( :-) ), setze das
div ohne CSS! Damit würde es immer unter dem Text bleiben. Das ist
es doch was du willst, oder?Hey, diese Idee könnte von mir sein, geht aber leider irgendwie auch nicht. Denn rechts und links vom Content gibt es auch noch Navigationsleisten.
-
-
-
Auch einen guten Tag!
Leider ist es das überhaupt nicht. Zuerst einmal muß das ganze ohne Javascript funktionieren, Javascript ist out! Ich habe bislang Tabellen eingesetzt, nun soll das ganze wenn möglich ohne Tabelle funktionieren. Überall liest man doch, wie toll das ist, und siehe da: Doch nicht so toll. Wieder mal nur Insellösungen für jeden Browser, da fällt mir nur unhöfliches ein! Bitte nicht mißverstehen: ist nichts persönliches, es geht um die Sache.
Da es mich dennoch immer noch interessiert, getreu dem Motto ob das nun ohne Tabellen möglich ist, hier nun etwas mehr. Nachfolgend ein Beispiel mit Tabellen, genauso soll das ohne Tabellen auch aussehen. Wobei dies unter unterschiedlichen Mengen an Text geschehen soll, das Beispiel in Tabellen:
<html>
<head>
<title>Testseite</title>
</head>
<body>
<table height="100%" width="99%" style="width:99%;height:100%;" border=1>
<tr>
<td colspan="3">
header
</td>
</tr>
<tr height="100%" style="height:100%;">
<td width="140px" valign="top" style="width:140px;">
Linke Navigation
</td>
<td valign="top">
Content
</td>
<td width="140px" valign="top" style="width:140px;">
Rechte Navigation
</td>
</tr>
<tr>
<td colspan="3">
footer
</td>
</tr>
</table>
</body>
</html>
Border=1 ist nur zur besseren Übersicht, wird also bei "ohne Tabellen" nicht benötigt. css und das html mag vielleicht nicht 100%ig sein, soll aber nur zur Darstellung dienen, Fehler bitte übersehen. Als Text steht aktuell nur "Content" drin, es muss auch mit diesem Text funktionieren:
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Daher meine Frage: Wie ist das nun ohne Tabellen realisierbar? Wie sieht das aus? Vielen Dank für die Mühe!
-
Tachchen!
Leider ist es das überhaupt nicht. Zuerst einmal muß das ganze ohne Javascript funktionieren, Javascript ist out!
Beispiel 3 ist javascriptfrei und funktioniert bereits auf fast allen Browsern.
Und die JavaScript-Unterstützung holt nur weitere Browser ins Boot.Gruß
Die schwarze Piste
-
-
-
Ich kann dir leider auch nicht helfen, allerdings würde mich mal interessieren, warum du keine Tabellen benutzen willst.
Ich dachte die wären die sicherste und einfachste Lösung, oder hab ich was verpasst?-
Hallo Horst-Peter,
Ich dachte die wären die sicherste und einfachste Lösung, oder hab ich was verpasst?
Bislang war ich auch dieser Auffassung. Aber immer mehr liest und hört man, daß ein Design ohne Tabellen besser und Zukunftsorientierter wäre, weil ua. komplett auf CSS basiert usw. Ausserdem soll das Design ohne Tabellen für viele unterschiedliche Browsertypen und ähnlichem besser sein. Z.B. für Sehbehinderte die ein Braille-Gerät nutzen ist ein Tabellen-Design ungünstig.
Allerdings muss ich zugeben, daß mich die Tabellen-Alternative bislang nicht überzeugt haben, zu kompliziert, ausserdem funktioniert das nicht unter allen Browsern gleich. So hat z.B. der NS4 erhebliche Probleme.
Das zu erstellende Projekt ist ein sehr umfangreiches Projekt, welches ich in Einzelarbeit ausführe, Projektdauer wohl unendlich...
Der erste wirklich grössere produktive Einsatz dürfte aber wohl nicht vor 2006 stattfinden, und da ist eine zukünftige Betrachtung wichtig.
-
Hi,
Allerdings muss ich zugeben, daß mich die Tabellen-Alternative bislang nicht überzeugt haben, zu kompliziert,
nur das CSS - das HTML ist wesentlich vereinfacht und wartungsarm.
ausserdem funktioniert das nicht unter allen Browsern gleich. So hat z.B. der NS4 erhebliche Probleme.
[...]
Der erste wirklich grössere produktive Einsatz dürfte aber wohl nicht vor 2006 stattfindenHehe.. bis dahin dürfte der NN4 weitgehend ausgerottet sein.
freundliche Grüße
Ingo
-
-
-
Hallo Peter
#t_head
Besser ohne Unterstrich!
{
background:#b0c4de;
position: absolute;Wozu das?
#t_head steht als erstes im Quelltext und wird auch dort angezeigt, wenn du
es nicht extra positionierst.top: 60px;
Wozu das?
60px vom Fensterrand entfernt bekommst du es mit margin-top: 60px.width:100%;
Wozu das?
Standard für ein Blockelement ist, die gesamte Breite zu verwenden.}
#t_contentsiehe oben
{
padding: 8px;OK
top: 80px;
bottom: 80px;
position: absolute;Wozu das?
#t_content soll sich doch an #t_head anschließen, lasse dies alles weg.#t_foot
s.o.
{
bottom:1px;Wozu das?
background:#b0c4de;
OK
position:absolute;
width:100%;Wozu das?
#t_foot soll sich doch wohl an #t_content anschließen, das tut es ohne extra
Positionierung.Merke:
"position:absolute" ist oft/meist absolut falsch!Du solltest nicht krampfhaft versuchen alle Elemente mittels Position auf
eine bestimmte Fensterposition zu zwingen.
Schreibe die Seite in HTML, schaue wo die Elemente angezeigt werden, setzte
mittels CSS Farben, Schriftarten und -größen.
Gib notwendige Margins und/oder Paddings dazu, wenn nötig float und clear.
Nur wenn es nötig ist (z.B. Aufklebereffekt) kommt position ins Spiel.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Detlef,
vielen Dank für Deine Hinweise, habe das soweit umgesetzt. Allerdings ist das gesamte Problem leider noch nicht gelöst. Der Grund für die Positionierung war, daß ich noch links und rechts eine Navigation benötige. Ich habe nun Deine Tipps umgearbeitet, dazu noch die Navigationen mit eingebaut. Dazu noch die zweite Fußleiste die je nach Bedarf eingeblendet werden kann. Die Farben sind unwichtig, sind lediglich für die bessere Demonstration notwendet. Später werden unterschiedliche Styles mit unterschiedlichen Farben angeboten. Der überarbeitete Quellcode:
<html>
<head>
<style>
#thead
{
background:#b0c4de;
}
#tcontent
{
padding: 8px;
}
#navLeft
{
left:0;
width:140;
background:#4682b4;
}
#navRight
{
right:0;
width:140;
background:#4682b4;
}
#tfoot
{
background:#b0c4de;
}
#tfoot2
{
background:#5f9ea0;
}
</style>
</head>
<body>
<div id="thead">thead</div>
<div id="tcontent">
<div id="navLeft">
navLeft
</div>
<div id="contentMitte">
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile
</div>
<div id="navRight">
navRight
</div>
</div>
<br />
<div id="tfoot">tfoot</div>
<div id="tfoot2">Das ist der 2.tfoot</div>
</body>
</html>Wegen den Unterstrichen bei der Namensgebung: ist ein Bindestrich und ein Punkt erlaubt/empfehlenswert?
-
Hi,
Der Grund für die Positionierung war, daß ich noch links und rechts eine Navigation benötige.
Du solltest Dich einmal mit float befassen.
#navLeft
{
left:0;
width:140;
background:#4682b4;
}und was soll das ohne Angabe zu position überhaupt bewirken?
ist ein Bindestrich und ein Punkt erlaubt/empfehlenswert?
ja/nein, nein/nein.
freundliche Grüße
Ingo -
Hallo Peter
... Der Grund für die Positionierung war, daß ich noch links und rechts eine Navigation benötige.
Wie dir Ingo bereits schrieb und ich in meinem letzten Posting erwähnte,
beschäftige dich mit float. Zum besseren Verständnis spiele mal ein bisschen
mit diesen Varianten. Verändere dort die Fensterbreite, die Schriftgröße,
schaue was wann bei velcher Variante passiert.
(hatte diese Seiten gemacht, um selbst das Verhalten von float zu kapieren)Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-
-
Hallo Leute!
vielen Dank für eure bisherigen Ratschläge, womit ich doch um einiges vorangekommen bin. Aber so ganz 100%ig bin ich immer noch nicht zufrieden.
1. Ich habe festgestellt daß NS und Firefox bei Padding ein anderers Ergebnis liefern als der IE. Wenn man im nachfolgendem HTML-Skript padding bei navLeft und navRight setzt so liefert das ein anderes Ergebnis als beim IE, denn NS "verbreitert" das div was beim IE nicht der Fall ist. Wie kann man da Abhilfe schaffen? Wenn ich Abstand vom Aussenrand des Divs zum Text haben möchte, wie kann man das schaffen? Eventuell ein weiteres Div?
2. Die Linke und Rechte Navigation, diese soll je nach Seite genauso hoch sein wie der Content in der Mitte (also da wo aktuell Zeile Zeile steht).Wegen Float: Cool der Tipp dazu, denke daß ich das meiste begriffen habe, ich hoffe es zumindest...
Und eine Frage fällt mir gerade noch ein:
Der HTML-Validator vom W3C, kann man den auch herunterladen?Auf jeden Fall bin ich deutlich weitergekommen, vielen Dank für all eure Ratschläge!
»» Der erste wirklich grössere produktive Einsatz dürfte aber wohl nicht vor 2006 stattfinden
Hehe.. bis dahin dürfte der NN4 weitgehend ausgerottet sein.
Ähm, naja, sagen wir mal so, fast genau das gleiche habe ich schon vor 2 Jahren gesagt, und der NS4 wird immer noch eingesetzt. Wobei ja dieses Design problematisch ist, denn im NS4 wird da ja im Grunde genommen nichts formatiert angezeigt. Da stellt man sich die Frage, wie man deratige Probleme lösen kann. Aber ich denke, daß es wohl noch mit anderen Browsern auch Probleme geben wird...
Und dann noch der aktuelle HTML-Code:
<html>
<head>
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<style>
#thead
{
background:#b0c4de;
}
#tcontent
{
height:100%
min-width:10em;
background-color:#eee;
clear:both;}
#navLeft
{
width:160pt;
background-color:#0c6;
min-width:9em;
float:left;
}
#navRight
{
width:160pt;
background-color:#fc0;
min-width:9em;
float:right;
}
#tfoot
{
background:#b0c4de;
}
#tfoot2
{
background:#5f9ea0;
}
#contentMitte
{
background-color:#ccc;
margin-left:165pt;
margin-right:165pt;
}
</style>
</head>
<body>
<div id="thead">Home</div>
<div id="tcontent">
<div id="navRight">
navRight
</div>
<div id="navLeft">
Link<br />Link<br />Link<br />Link<br />Link<br />Link<br />Link<br />Link
</div>
<div id="contentMitte">
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />
Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile<br />Zeile
</div>
</div>
<div id="tfoot">tfoot</div>
<div id="tfoot2">Das ist der 2.tfoot</div>
</body>
</html>-
Hallo Peter
- Ich habe festgestellt daß NS und Firefox bei Padding ein anderers Ergebnis liefern als der IE. ...
Boxmodel-Bug des IE (außer IE6 im Standardmodus)
richtig:
margin + border + padding + width + padding + border + margin
falsch:
margin +-------------------width--------------------+ margin
+ border + padding + Rest + padding + border +Wie kann man da Abhilfe schaffen?
z.B.:
- IE 6 in den Standardmodus bringen (Doctype-Angabe)
(ältere IEs bleiben verkehrt) - andere Maße _nur_ für IEs
- genug Luft lassen (ist immer zu empfehlen)
Wenn ich Abstand vom Aussenrand des Divs zum Text haben möchte, wie kann man das schaffen? Eventuell ein weiteres Div?
Willst du ein CSS-Layout oder eine Div-Suppe?
Was kommt dort hinein, einfach Text ohne logische Auszeichnungen?
Oder kommen dort eventuell Elemente hinein, wie z.B. p, ul, h2 ...?
Dann kannst du diesen Elementen margin oder padding geben.- Die Linke und Rechte Navigation, diese soll je nach Seite genauso hoch sein wie der Content in der Mitte (also da wo aktuell Zeile Zeile steht).
Das ist bei variabler Höhe afaik nicht möglich, ein Element weiß nichts von
der Höhe anderer Elemente.
Es ist allerdings möglich dafür zu sorgen, dass es optisch so aussieht.
(wenn es denn unbedingt wie ein Tabellenlayout aussehen soll)Der HTML-Validator vom W3C, kann man den auch herunterladen?
http://validator.w3.org/docs/install.html
... Da stellt man sich die Frage, wie man deratige Probleme lösen kann.
http://www.lipfert-malik.de/webdesign/tutorial/css.html
Ich persönlich finde es allerdings übertrieben, mit viel Aufwand zu
versuchen, allen (alten) Browsern ein möglichst identisches Layout zu
liefern. Die Seiten sollten in allen Browsern gut lesbar und benutzbar sein.Bisher enthält dein Quelltext immer nur <div id="...">.
Der Sinn eines CSS-Layouts (wie ich ihn verstehe) besteht aber nicht darin
die Tabellen durch viele ineinander verschachtelte Divs zu ersetzen, sondern
die Seite logisch aufzubauen, also den Seiteninhalt mittels der dafür
vorgesehenen HTML-Elemente auszuzeichnen. Diese Elemente können dann per CSS
formatiert werden, nicht nur Divs.
Wenn nötig, werden dazu mehrere Elemente mittels Div zu Einheiten gebündelt.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-