Problem beim Webseitenlayout mit DIVs und CSS
1 
Gunnar Bittersmann
0 0 Gunnar Bittersmann
0 0 
molily
0 
Der Martin
0
Problem beim Webseitenlayout mit DIVs und CSS
Hallo,
ich möchte ein Design mit Hilfe von DIV Elementen erstellen, nur leider komme ich bei einem Problem nicht weiter.
Hier mal die HTML:
<div id="root">
<div id="header"></div>
<div id="container">
<div id="leftbar"></div>
<div id="navi"></div>
<div id="middlebar"></div>
<div id="content">Blub</div>
<div id="rightbar"></div>
</div>
<div id="footer"></div>
</div>
Ist ein recht einfaches layout: Das root DIV soll alles umhüllen.
Dann kommen drei Elemente header, container, footer untereinander.
Innerhalb des Containers sollen 5 Div-Elemente nebeneinander stehen.
Hier mal die CSS meiner ersten Versuche.
#root {
width: 1024px;
margin: 0px auto;
}
#header {
width: 1024px;
height: 163px;
background-image: url("/img/red/header.png");
}
#container {
width: 1024px;
}
#leftbar {
height: 100%;
width: 21px;
float: left;
background-image: url("/img/red/leftbar.png");
}
#navi {
width: 163px;
height: 100%;
float: left;
}
#middlebar {
width: 45px;
height: 100%;
float: left;
background-image: url("/img/red/middlebar.png");
}
#content {
width: 780px;
height: 100%;
float: left;
}
#rightbar {
width: 15px;
height: 100%;
float: left;
background-image: url("/img/red/rightbar.png");
}
#footer {
width: 1024px;
height: 11px;
background-image: url("/img/red/foot.png");
}
Wenn ich im Container eine Höhe angebe funktioniert es, doch das ganze soll je nach Inhalt nach unten wachsen, und alle 5 divs sollen den container in der Höhe komplett ausfüllen.
Ich hoffe jemand kann mir dabei helfen. Danke
Gruß,
Toco
-
@@Toco:
Das root DIV soll alles umhüllen.
Das ist es höchstwahrscheinlich völlig überflüssig; es gibt bereits zwei Elemente, die dies tun.
„Dass viele "Designer" der Meinung sind, <html> und <body> sollten möglichst neutralisiert und das Layout dann mittels <div>-Elementen umgesetzt werden, ist bedauerlich bis ärgerlich.“ [at]
width: 1024px;
Aua. Viele Nutzer haben einen Viewport, der schmaler ist als 1024 Pixel. Viele haben den Browser nicht im Vollbildmodus, außerdem ist die Breite von Fensterrahmen, Scrollbars, Sidebars usw. abzuziehen. Und die Nutzer mit kleineren Bildschirmen werden immer mehr.
Dann ist horizontales Scrollen erforderlich, das ist nicht nutzerfreundlich.
Verzichte besser auf in Pixel gemeißelte Breitenangaben.
Wenn ich im Container eine Höhe angebe funktioniert es, doch das ganze soll je nach Inhalt nach unten wachsen, und alle 5 divs sollen den container in der Höhe komplett ausfüllen.
„faux columns“ ist dein Suchbegriff.
Live long and prosper,
Gunnar--
Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.-
„Dass viele "Designer" der Meinung sind, <html> und <body> sollten möglichst neutralisiert und das Layout dann mittels <div>-Elementen umgesetzt werden, ist bedauerlich bis ärgerlich.“ [at]
damit hast du recht - aber es gibt (gab) durchaus probleme mit alten browsern, die sich nicht grade freuen, wenn man diese elemente versucht zu formatieren
der internet exploder 5 zb hat lt w3schools immer noch 0.1% marktanteil
natürlich ist das mittlerweile fast vernachlässigbar - aber in manchen fällen lohnt eine beachtung alter browser dennoch
-
@@suit:
damit hast du recht - aber es gibt (gab) durchaus probleme mit alten browsern, die sich nicht grade freuen, wenn man diese elemente versucht zu formatieren
der internet exploder 5 zb hat lt w3schools immer noch 0.1% marktanteil
Der Anteil der Fernsehzuschauer mit Schwarz/weiß-Fernsehern dürfte in ähnlicher Größenordnung liegen. Wird deshalb bei Fußballspielen immer noch darauf geachtet, dass sich die Trikots beider Mannschaften auch in schwarz/weiß deutlich unterscheiden lassen?
Wohl nicht. Es gilt: Wer mit vorsinnflutlicher Technik unterwegs ist, kann keine ideale Darstellung erwarten. (Wobei es aus Gründen der Barrierefreiheit durchaus wünschenswert wäre, Mannschaften auch in schwarz/weiß unterscheiden zu können; zumal sowohl von Fußball als auch von Farbblindheit hauptsächlich Männer betroffen sind.)
Wer noch IE 5 verwendet, der will keine vernünftige Darstellung. Es beteht kein Grund für dessen Verwendung; nicht einmal ein Administrator, der sein System auf musealem Stand konservieren will, schließlich läuft Firefox portable auch ohne Installation.
natürlich ist das mittlerweile fast vernachlässigbar - aber in manchen fällen lohnt eine beachtung alter browser dennoch
NCSA Mosaic, jaja. ;-)
Live long and prosper,
Gunnar--
Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.-
Wohl nicht. Es gilt: Wer mit vorsinnflutlicher Technik unterwegs ist, kann keine ideale Darstellung erwarten.
erklär das einem kunden der einen 5-stelligen betrag für seine website zahlt ;)
zumal sowohl von Fußball als auch von Farbblindheit hauptsächlich Männer betroffen sind.)
farbfehlsichtigkeiten sind in der tat bei männern häufiger als bei frauen - dychromatopsie (rot-grün-blindheit) ist übrigens die häufigste
totale farbenblindheit ist beim männern und frauen aber gleich wahrscheinlich
NCSA Mosaic, jaja. ;-)
nein, ich meinte damit eher lynx oder dillo - wobei die beiden nicht alt sind sondern sehr einfach getrickt - in diesem fall trifft die problematik aber nicht zu, sind ja "nur" textbrowser :)
-
@@suit:
erklär das einem kunden der einen 5-stelligen betrag für seine website zahlt ;)
Her mit dem Kunden, der einen 5-stelligen Betrag für seine Website zahlt! ;-)
Live long and prosper,
Gunnar--
Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.-
Her mit dem Kunden, der einen 5-stelligen Betrag für seine Website zahlt! ;-)
wende dich an größere automobil- oder lebensmittelkonzerne ;)
-
[latex]Mae govannen![/latex]
Her mit dem Kunden, der einen 5-stelligen Betrag für seine Website zahlt! ;-)
wende dich an größere automobil- oder lebensmittelkonzerne ;)Die nehmen i.d.R. eine Werbeagentur, die ihnen eine IE-optimierte Seite aus WYSIWÜRG-Editor-Qüältext erstellen.
Cü,
Kai
--
Ash nazg durbatulûk, ash nazg gimbatul,ash nazg thrakatulûk, agh burzum-ishi krimpatul
selfcode sh:( fo:| ch:? rl:( br:< n4:# ie:{ mo:| va:) js:) de:> zu:) fl:( ss:| ls:?-
Die nehmen i.d.R. eine Werbeagentur, die ihnen eine IE-optimierte Seite aus WYSIWÜRG-Editor-Qüältext erstellen.
die meisten habem mehrere agenturen und ja, das verhalten trifft durchaus zu ;)
-
-
-
-
-
zumal sowohl von Fußball als auch von Farbblindheit hauptsächlich Männer betroffen sind.
Hehe, schöne Formulierung.
-
Hallo,
zumal sowohl von Fußball als auch von Farbblindheit hauptsächlich Männer betroffen sind.
ich überlege gerade, was von den beiden schlimmer ist. Wahrscheinlich Fußball.
Zum Glück bin ich von beiden verschont.Wer noch IE 5 verwendet, der will keine vernünftige Darstellung.
sagen wir mal: ... dem ist die Darstellung nicht das Wichtigste.
So long,
Martin--
Männer haben nur eine Angst: Die Angst, kein Mann zu sein.
(Liv Tyler, US-Schauspielerin)
-
-
-
-
Hi!
Wurd ja schon einges zu deinem Versuch gesagt.
Wenn ich im Container eine Höhe angebe funktioniert es, doch das ganze soll je nach Inhalt nach unten wachsen,
Wie schon erwaehtn, brauchst Du 'root' eigentlich nicht. Genausowenig 'container'. Lassen wir Dir aber mal 'root': wozu ist bitte 'container' gut? Was macht der denn, was nicht root schon taete? Nix.
Wie Du vielleicht weisst, nimmt ein float das Element aus dem normalen Fluss. Es hat keine Hoehe mehr und somit ist das umschliessende Element ziemlich niedrig. Clear sollte dich interessieren. Entweder Du baust ein weiteres Element in deinen Conatiner das clear enthaelt oder du laesst, wie gesagt, den Krempel ganz weg und verpasst dem Footer clear.
Hier kannste Layouts schauen und vielleicht auch noch was lernen und dich von Inspirationspartikeln treffen lassen: http://www.intensivstation.ch/templates/
--
Trau Dich!