nicht angemeldet
100% und Header
StruppiHallo.
Ich versuche in einen Container, der sich über 100% der Seitenhöhe erstreckt einen header zu plazieren. Leider wird dann die Seite länger als 100% (Scrollbalken, um so viel, wie der header hoch ist).
In anderen Threads habe ich die Lösung gelesen, den header absolut zu positionieren und dann die Abstände zu vergrössern. Das habe ich mit padding und margin probiert, trotzdem wurde die Seite immer länger...
Unten mein Code (ohne absolut-positionier-Versuche).
Ich wäre sehr froh um Hinweise, wie ich das Problem lösen könnte.
(content und navigation müssen ebenfalls 100% sein)
Danke und Gruss
Adriana
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<style type="text/css">
html{height:100%; background-color:#0000ff;}
body{background-color:rgb(0, 63, 104);
margin:0px;
padding:0px;
height:100%}
#container{
background-color:#ddeeff;
height:100%;
}
#header{
height:100px;
background-color:#ff0000;
}
#navigation{
height:100%;
width:150px;
float:left;
background-color:#ffff00;
}
#content{
margin-left:150px;
background-color:#ffffff;
height:100%;
}
</style>
</head>
<body >
<div id="container">
<div id="header"></div>
<div id="navigation">
<ul>
<li>menu1</li>
<li>menu2></li>
</ul>
</div>
<div id="content">
hier ist der Inhalt
</div>
</div>
</body>
</html>
-
hi,
Ich versuche in einen Container, der sich über 100% der Seitenhöhe erstreckt einen header zu plazieren. Leider wird dann die Seite länger als 100% (Scrollbalken, um so viel, wie der header hoch ist).
In anderen Threads habe ich die Lösung gelesen, den header absolut zu positionieren und dann die Abstände zu vergrössern.Wozu'n das?
Elternelement 100% hoch, Header als erste Element rein, nachfolgende Elemente im Fluss - fertig ...?
Das habe ich mit padding und margin probiert, trotzdem wurde die Seite immer länger...
Natürlich werden 100% plus margin/padding mehr als 100%.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Elternelement 100% hoch, Header als erste Element rein, nachfolgende Elemente im Fluss - fertig ...?
Danke, aber die nachfolgenden Elemente sind zwei nebeneinanderliegende (mit float) divs die sich ebenfalls über die ganze Höhe erstrecken sollen...(weil sie unterschiedliche Farben haben)
Gruss
Adriana
-
hi,
die nachfolgenden Elemente sind zwei nebeneinanderliegende (mit float) divs die sich ebenfalls über die ganze Höhe erstrecken sollen...(weil sie unterschiedliche Farben haben)
Faux Columns ein Begriff?
Das mit den zwei nebeneinanderligenden und 100% hohen Elementen wird ja vermutlich dann nicht mehr funktionieren, wenn der Inhalt in einem von beiden mehr Höhe erfordert ...
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Faux Columns habe ich auch schon angetroffen, aber wenn möglich hätte ich gern ohne "Tricks" ausgekommen...
Danke trotzdem
Gruss
Adriana-
Faux Columns habe ich auch schon angetroffen, aber wenn möglich hätte ich gern ohne "Tricks" ausgekommen...
Naja, eine Tabellenlayout läßt sich halt nicht ohne Tricks mit CSS umsetzen. In so einem Fall ist ein Tabele u.U. die bessere Wahl.
Struppi.
--
Javascript ist toll (Perl auch!)-
Naja, eine Tabellenlayout läßt sich halt nicht ohne Tricks mit CSS umsetzen. In so einem Fall ist ein Tabele u.U. die bessere Wahl.»»
...Tabellenlayout? Mir geht es nicht um die Umsetzung eines Tabellenlayouts, sondern um eine bestimmte visuelle Lösung. Einen visuell klares Seitenlayout mit drei farblich unterschiedenen Bereichen. In einem (im linken) davon soll die Navigation plaziert werden...Dass sich Tabellen zur Umsetzung von visueller Gestaltung eignen liegt daran, dass die meisten Gestalter mit einem Raster bzw. mit einer durchgehenden Raumaufteilung arbeiten.
Weil mir klar ist, dass HTML eigentlich für einen semantischen Einsatz konzipiert ist (und diese Art von Verwendung aus diversen Gründen Sinn macht, im Gegensatz zu einem einer unnötigen Vermischung, bzw. Gebastel, welches dem eigentlichen Gedanken entgegenläuft)suche ich nach einer Lösung, in welcher die jeweiligen Mittel adäquat eingesetzt werden.
Aber entweder habe ich irgendetwas noch nicht begriffen oder das System HTML CSS ist mit visueller Gestaltung doch nur eingeschränkt kompatibel. Auf jeden Fall verwickle ich mich jedesmal, auch ohne Browserkompatilibitätsfragen, in irgendwelche nur unbefriedigend lösbaren Probleme, wenn ich eine visuelle Lösung an den Anfang setze.
Es ist mir auch klar, dass man mit den vorhandenen Mitteln durchaus gestalterisch optimale Lösungen erstellen kann, d.h. ich werde mir im Zweifelsfall lieber eine andere Gestaltung ausdenken...Gruss
Adriana
-
Naja, eine Tabellenlayout läßt sich halt nicht ohne Tricks mit CSS umsetzen. In so einem Fall ist ein Tabele u.U. die bessere Wahl.»»
...Tabellenlayout? Mir geht es nicht um die Umsetzung eines Tabellenlayouts, sondern um eine bestimmte visuelle Lösung. Einen visuell klares Seitenlayout mit drei farblich unterschiedenen Bereichen. In einem (im linken) davon soll die Navigation plaziert werden...Dass sich Tabellen zur Umsetzung von visueller Gestaltung eignen liegt daran, dass die meisten Gestalter mit einem Raster bzw. mit einer durchgehenden Raumaufteilung arbeiten.
Genau, das ist ein Tabellen- oder Rasterlayout.
Aber entweder habe ich irgendetwas noch nicht begriffen oder das System HTML CSS ist mit visueller Gestaltung doch nur eingeschränkt kompatibel. ...
Das Problem ist, HTML/CSS ist so konzipiert, dass sich der Inhalt an unterschiedliche Darstellungsmöglichkeiten anpaßt. Du hast Bereiche, die sich individuell je nach Größe des Inhaltes ausdehnen können. Das ist die Stärke von HTML/CSS und das Einsatzgebiet. Aber du hast kein Raster wo sich die verschiedenen Bereiche gegenseitig beeinflussen (evtl. kommt sowas in Zukunft).
Das heißt, du hast drei Möglichkeiten.
1. Du baust das Raster nach, mit Tabellen
2. Du versuchst es mit irgendwelchen Tricks nachzubauen
3. Du versuchst ein Layout zu entwickeln, dass die Fähigkeiten von CSS nutzt.Struppi.
--
Javascript ist toll (Perl auch!)-
Das heißt, du hast drei Möglichkeiten.
- Du baust das Raster nach, mit Tabellen
- Du versuchst es mit irgendwelchen Tricks nachzubauen
- Du versuchst ein Layout zu entwickeln, dass die Fähigkeiten von CSS nutzt.
Vielen Dank für Deine klärende Antwort. Jetzt muss ich indemfall wirklich nur noch 'rausfinden, welche Variante ich mit meinem Gewissen vereinbaren kann...Falls es nebst dem geringen Erstellungs- und Wartungsaufwand noch andere Begründungen für 1) gäbe, wäre ich froh um Hinweise...bis jetzt hatte ich aus vorher genannten Gründen Layouttabellen ausgeschlossen (Gegenargumente sind mir klar)...und wenn es nicht der einfachte Weg wäre, würde ich auch keinen Moment daran zweifeln...
Gruss
Adriana-
Das heißt, du hast drei Möglichkeiten.
- Du baust das Raster nach, mit Tabellen
- Du versuchst es mit irgendwelchen Tricks nachzubauen
- Du versuchst ein Layout zu entwickeln, dass die Fähigkeiten von CSS nutzt.
Vielen Dank für Deine klärende Antwort. Jetzt muss ich indemfall wirklich nur noch 'rausfinden, welche Variante ich mit meinem Gewissen vereinbaren kann...Falls es nebst dem geringen Erstellungs- und Wartungsaufwand noch andere Begründungen für 1) gäbe, wäre ich froh um Hinweise...bis jetzt hatte ich aus vorher genannten Gründen Layouttabellen ausgeschlossen (Gegenargumente sind mir klar)...und wenn es nicht der einfachte Weg wäre, würde ich auch keinen Moment daran zweifeln...
Das hängt alles von der Situation ab.
Bist du frei in der Entscheidung des Layouts, wie wichtig sind die problematischen Punkte, wie hoch ist der Aufwand, wer bezahlt's, wie flexibel soll das Layout bleiben für künftige Änderungen ... usw.
Da kann es dann u.U. erforderlich sind den pragmatischen Ansatz zu wählen und auf Sematik weniger Rücksicht zu nehmen (es ist ja nicht so das Tabellenlayout per se schlechter sind, du nimmst dir halt nur ein paar Möglichkeiten die CSS bieten würde, z.b. eine fast beliebige Anordunung der Elemente je nach CSS Datei und in Suchmaschinen stehen die auch nicht unbedingt schlechter da)
Mir persönlich (wobei es hier bestimmt auch abweichende Meinungen gibt) täte es mehr weh, mit CSS rumzutricksen um ein Tabellenähnliches Layout hinzukriegen, als einfach eine Tabelle zu verwenden.
Struppi.
--
Javascript ist toll (Perl auch!)-
...und wenn Du die Wahl hättest zwischen
a) Deine gestalterischen Vorstellungen zugunsten eines sauberen HTML/CSS-Codes aufzugeben, d.h. das Layout zu ändern
b)und gestalterische Vorstellungen beibehalten und Tabellenlayout?
Gruss
Adriana-
...und wenn Du die Wahl hättest zwischen
a) Deine gestalterischen Vorstellungen zugunsten eines sauberen HTML/CSS-Codes aufzugeben, d.h. das Layout zu ändern
b)und gestalterische Vorstellungen beibehalten und Tabellenlayout?Dazu muss ich sagen, dass meine gestalterischen Fähikeiten sehr begrenzt sind unf von daher immer Variante a.) wählen würde. Aber das mag daran liegen dass meine Entwürfe nie so komplex würden, dass sie nicht anders umsetzbar sind.
Struppi.
--
Javascript ist toll (Perl auch!)
-
-
-
-
-
-
-
-