Entwickler-Ecke
Beschreibungssprachen - CSS Layout, BG in div zu 100% strecken
F34r0fTh3D4rk - Mi 25.07.07 21:57
Titel: CSS Layout, BG in div zu 100% strecken
hi, der titel klingt nicht gerade einleuchtend, aber mein problem ist simpel (jedoch nicht in der lösung wie es scheint :lol: )
http://www.exec-dev.de/Design
die Boxen links und rechts haben ein Hintergrundbild, welches sich der Länge des Contents anpassen soll, wie mache ich das in diesem fall ?
Und warum hab ich rechts mit einem <br /> gleich einen doppelten absatz ?
mfg
GTA-Place - Mi 25.07.07 21:58
Mir ist keine Lösung bekannt, weil es IMHO nicht möglich ist, außer mit nem Bg-Image-Trick, der nur bei simplen Designs verwenderbar ist.
Arne K. - Do 26.07.07 00:18
Hallo,
dafür wären in der Praxis die CSS-Attribute display: table-* gut. Da diese jedoch im Moment kaum ein Browser umsetzen kann, bleibt dir nur der Weg, dein Layout mit normalen Tabellen zu definieren. Das ist zwar verpönt und unschön, hier aber die einzige mir denkbare Möglichkeit.
F34r0fTh3D4rk - Do 26.07.07 11:07
so langsam hasse ich css, weil es am ende immer darauf zuzulaufen scheint, dass ich doch tables benutzen muss, na klasse :evil:
mfg
Christian S. - Fr 27.07.07 10:25
Was haben die Leute eigentlich immer gegen Tabellen? :gruebel:
GTA-Place - Fr 27.07.07 10:53
Problem hat sich gelößt, der Image-Hack funktioniert hier.
BenBE - Fr 27.07.07 11:10
Was die Leute gegen Tabellen haben??? Sie laden lahmarschig, da der Browser diese zwar Versucht im Vorhinein abzuschätzen, aber im Endeffekt bei jedem neuen Datenhappen komplett neu zeichnen muss.
Wenn Du Firefox hast, beobachte auf einer langsamen Verbindung einfach mal, was ganz oben links mit dem Delphi-Forum-Logo passiert. Bei mir springt da jedes Mal das Delphi-Teil-Bild für ne ganz kurze Zeit während des Seitenaufbaus um 10px nach unten. Wenn man das per CSS direkt festlegt, dann hat der Browser klarheiten, dass das Bild ganz links oben hin soll und kommt gar nicht erst auf die Idee da rumzuprobieren ;-)
Christian S. - Fr 27.07.07 11:51
 BenBE hat folgendes geschrieben: |
| Was die Leute gegen Tabellen haben??? Sie laden lahmarschig, da der Browser diese zwar Versucht im Vorhinein abzuschätzen, aber im Endeffekt bei jedem neuen Datenhappen komplett neu zeichnen muss. |
Das ist aber doch bei heutigen Rechnern und Bandbreite nicht mehr wirklich relevant. Wirklich gesehen habe ich das schon ewig nicht mehr, weil es zu schnell ging.
Das spricht ja auch nicht prinzipiell gegen Tabellen, denn auch bei denen kann ich direkt alle Maße vorgeben.
| BenBE hat folgendes geschrieben: |
| Wenn man das per CSS direkt festlegt, dann hat der Browser klarheiten, dass das Bild ganz links oben hin soll und kommt gar nicht erst auf die Idee da rumzuprobieren ;-) |
Wie gesagt, das kann ich aber auch bei Tabellen machen, wenn ich richtig verstanden habe, was Du meinst.
Arne K. - Sa 28.07.07 15:03
Es gab einfach diesen Hype, nur noch CSS benutzen zu dürfen. Tabellen waren böse und zeugten und fehlender Fachkundigkeit, wärend <div> und <span> als Panazeen des Layoutens galten. Absoluter Schwachsinn, wenn du mich fragst ...
Es gibt einfach Dinge, die kann man nur mit Tabellen erreichen. Sie mit CSS nachzubilden hat genau das gemacht, wesegen heute von Tabellen als ausschließliche Layoutelemente abgeraten wird: Man baut tausend Frickeleien und Browserweichen ein, schreibt zig Zeilen Extraquellcode, der mit Tabellen überflüssig wäre, und dadurch wird der Quellcode weder besser wartbar noch deutlicher lesbar.
Ergo: Tabellen nutzen, wenn sie unabdingbar sind. Tabellen nutzen, wenn man tabellarische Daten anzeigen will (ja, es gab sogar Leute, die auf die "geniale" Idee gekommen sind, Tabell auf Ihren Webseiten mit <div> und <span> zu basteln). Tabellen nutzen, wenn es die Browserkompatibilität oder die Einfachheit gebietet.
Für alles andere CSS benutzen, oder es zumindest versuchen.
UGrohne - Sa 28.07.07 15:17
Für die Grundstruktur einer Seite braucht man meiner Meinung nach keine Tabellen. Man kann alles mit divs und spans erledigen und bekommt dadurch eine saubere Grundstruktur, die auch leicht wartbar ist.
Ich selbst habe bei einem großen Seitenprojekt mitgewirkt, bei dem keine Tabellen für die Grundstruktur verwendet werden durften, aufgrund von gesetzlichen Vorgaben zur Barrierefreiheit. Im Anhang habe ich einen Screenshot der Seite. Hier wurden keinerlei Tabellen verwendet. Ja, es war teilweise ziemlich aufwändig, vor allem die korrekte Positionierung der Bilder. Aber wir haben es für FF und IE gleichermaßen gut hinbekommen.
Tabellen sollten auch meiner Meinung nach nur noch in Ausnahmefällen in den Inhalten eingesetzt werden, wenn es einfach nicht anders geht. Einen Stundenplan ohne Tabellen darstellen zu wollen, macht zum Beispiel keinen Sinn, aber für die Seite selbst braucht man sie meist nicht.
Christian S. - Sa 28.07.07 15:21
Meine Seite hat z.B. ein dreispaltiges Layout. Wieso soll ich da keine Tabelle verwenden? Ich frickel doch nicht stundenlang rum, damit alle Browser das gleich darstellen, wenn ich eine Tabelle auch als das schreiben kann, was sie ist: eine table.
BenBE - Sa 28.07.07 16:05
Ich hab nichts grundsätzlich gegen Tabellen. Nur gegen deren Schachtelung. Im Grunde sehe ich es aber auch wie Uwe: Das Basis-Layout sollte man versuchen, ohne Tabellen umzusetzen und Tabellen auf den Content-Bereich beschränken. Das hat jetzt nichts damit zu tun, dass man sein gesamtes Layout in der Art
des CSS Zen Garden [
http://www.csszengarden.com/tr/deutsch/] umsetzen soll, sondern einfach damit, dass man mit der Nutzung von Tabellen ein gewisses Stück an Layout-Freiheit und Änderbarkeit verschenkt.
UGrohne - Sa 28.07.07 16:34
| Christian S. hat folgendes geschrieben: |
| Meine Seite hat z.B. ein dreispaltiges Layout. Wieso soll ich da keine Tabelle verwenden? Ich frickel doch nicht stundenlang rum, damit alle Browser das gleich darstellen, wenn ich eine Tabelle auch als das schreiben kann, was sie ist: eine table. |
Deine Seite sollte sich mit relativ wenig Aufwand auch mit DIV und CSS dreispaltig darstellen lassen. In meinem Screenshot sind es eigentlich sogar noch mehr, sogar noch mit übereinanderliegenden Elementen (das Bild).
Christian S. - Sa 28.07.07 16:43
| UGrohne hat folgendes geschrieben: |
| Deine Seite sollte sich mit relativ wenig Aufwand auch mit DIV und CSS dreispaltig darstellen lassen. |
Das beantwortet aber nicht die Frage, warum ich das tun sollte. Nicht alles, was man tun kann, ist auch sinnvoll zu tun. ;-)
UGrohne - Sa 28.07.07 16:56
| Christian S. hat folgendes geschrieben: |
| UGrohne hat folgendes geschrieben: | | Deine Seite sollte sich mit relativ wenig Aufwand auch mit DIV und CSS dreispaltig darstellen lassen. |
Das beantwortet aber nicht die Frage, warum ich das tun sollte. Nicht alles, was man tun kann, ist auch sinnvoll zu tun. ;-) |
Über den Sinn haben wir uns ja schon unterhalten: Es gibt übersichtlicheren Code, man kann mehr in CSS auslagern, es stellt die Grundlage dar für Barrierefreiheit und die Flexibilität steigt ganz einfach.
Zu Letzterem Punkt: Ich arbeite sehr viel mit CMS. Ich kann bestimmte Teile in eigene DIVs eingliedern und auf einfachste Weise diese abhängig vom Content oder vom Punkt in der Navigation verschieben, verändern, ausblenden ohne sehr viel über die Konsquenzen für die anderen Teile der Seite nachdenken zu müssen. Versuch das mal mit einer Tabellenstruktur, in den meisten Fällen so gut wie unmöglich.
Außerdem ist die Anpassung an verschiedene Gegebenheiten, wie Bildschirm-Auflösung IMHO sehr viel einfacher.
//EDIT: Ich hab mir Deinen Code mal angeschaut: Wieso verwendest Du eigentlich außen eine Tabelle, aber innen so viele DIVs, z.B. für die Aufzählungen?
Christian S. - Sa 28.07.07 17:07
| UGrohne hat folgendes geschrieben: |
| Es gibt übersichtlicheren Code, |
Das sehe ich eigentlich nicht so. Eine Tabelle ist ein ein sehr klares Konstrukt, welches bei korrekter Einrückung sofort lesbar ist. Ich weiß direkt, wo was auf der Seite stehen wird und muss dazu nicht erst irgendwelche CSS-Files durchschauen.
| UGrohne hat folgendes geschrieben: |
| es stellt die Grundlage dar für Barrierefreiheit |
In wiefern? Habe mich mit dem Thema noch nicht eingehen beschäftigt.
| UGrohne hat folgendes geschrieben: |
| und die Flexibilität steigt ganz einfach. |
Das ist richtig, aber etwas, was man von Fall zu Fall abwägen muss, und damit nicht generell gegen Tabellen spricht.
| UGrohne hat folgendes geschrieben: |
| Zu Letzterem Punkt: Ich arbeite sehr viel mit CMS. |
Du glaubst nicht wirklich, dass meine Seite aus einzelnen HTML-Dateien besteht ;-)
| UGrohne hat folgendes geschrieben: |
| Versuch das mal mit einer Tabellenstruktur, in den meisten Fällen so gut wie unmöglich. |
Richtig, aber jede Seite hat eine Grundstruktur. Diese wird sich nicht ständig ändern, wenn man will, dass die Nutzer sich zurecht finden. Bei meiner Seite wäre das z.B. das dreispaltige Layout.
| UGrohne hat folgendes geschrieben: |
| Außerdem ist die Anpassung an verschiedene Gegebenheiten, wie Bildschirm-Auflösung IMHO sehr viel einfacher. |
In einer Tabelle kann ich auch sehr gut mit relativen Angaben arbeiten, oder was meinst Du?
| UGrohne hat folgendes geschrieben: |
| //EDIT: Ich hab mir Deinen Code mal angeschaut: Wieso verwendest Du eigentlich außen eine Tabelle, aber innen so viele DIVs, z.B. für die Aufzählungen? |
Die Tabelle außen: Es ist die einfachste und übersichtlichste Lösung und das dreispaltige Layout ist konstant. Die Divs innen: Man kann damit sehr schön Einrückungen bauen (bei den Aufzählungen) und in den einzelnen Spalten brauche ich die Flexibilität, die Du angesprochen hast.
UGrohne - Sa 28.07.07 17:26
| Christian S. hat folgendes geschrieben: |
| UGrohne hat folgendes geschrieben: | | Es gibt übersichtlicheren Code, |
Das sehe ich eigentlich nicht so. Eine Tabelle ist ein ein sehr klares Konstrukt, welches bei korrekter Einrückung sofort lesbar ist. Ich weiß direkt, wo was auf der Seite stehen wird und muss dazu nicht erst irgendwelche CSS-Files durchschauen. |
Wenn man den Klassen sprechende Namen gibt, musst Du das gar nicht. Bei einer Tabelle muss ich mich jedoch erstmal zurecht finden: In welcher Zeile und welcher Spalte befinde ich mich hier gerade? Gut, auch dort kann man mit entsprechenden Klassennamen arbeiten, aber wenn ich mal eine Zeile/Spalte hinzufügen will, weil ich ein weiteres Element brauche, geht das Gefrickel los, vor allem, wenn man mit verbundenen Zellen arbeitet. Ich habe mich früher mit so etwas rumschlagen müssen, Gott sei Dank brauche ich es heute für das grundlegende Design nicht mehr.
| Christian S. hat folgendes geschrieben: |
| UGrohne hat folgendes geschrieben: | | es stellt die Grundlage dar für Barrierefreiheit |
In wiefern? Habe mich mit dem Thema noch nicht eingehen beschäftigt. |
Ein Reader für Behinderte arbeitet den Quelltext von oben nach unten ab. Bei Deiner Seite ist das jetzt nicht so schlimm, weil sie einfach gehalten ist. Dort kommt Navigation, dann Content und dann die rechte Spalte. In Ordnung. Wenn Du aber größere Seiten mit vielen Elementen abbilden musst, bist Du bei Tabellen an eine bestimmte Reihenfolge der Elemente gebunden. DIVS kannst Du positionieren, wie Du willst, sodass Du den Header und die Navigation an den Anfang, den Content danach und alles restliche ans Ende der Datei packen kannst, auch wenn es sich um Elemente weit oben handelt. Daher: Keine Tabellen für das Layout, aber zur Informationsdarstellung, wenn notwendig.
| Christian S. hat folgendes geschrieben: |
| UGrohne hat folgendes geschrieben: | | und die Flexibilität steigt ganz einfach. |
Das ist richtig, aber etwas, was man von Fall zu Fall abwägen muss, und damit nicht generell gegen Tabellen spricht. |
Wie eben schon angedeutet: Es spricht nichts generell gegen Tabellen, aber IMHO haben sie bei der Layoutgestaltung nichts zu suchen.
| Christian S. hat folgendes geschrieben: |
| UGrohne hat folgendes geschrieben: | | Zu Letzterem Punkt: Ich arbeite sehr viel mit CMS. |
Du glaubst nicht wirklich, dass meine Seite aus einzelnen HTML-Dateien besteht ;-) |
Nein, ich wusste, dass das bei Dir auch aus einem CMS kommt, aber irgendwo musst Du ja mal ein Template geschrieben haben ;).
| Christian S. hat folgendes geschrieben: |
| UGrohne hat folgendes geschrieben: | | Versuch das mal mit einer Tabellenstruktur, in den meisten Fällen so gut wie unmöglich. |
Richtig, aber jede Seite hat eine Grundstruktur. Diese wird sich nicht ständig ändern, wenn man will, dass die Nutzer sich zurecht finden. Bei meiner Seite wäre das z.B. das dreispaltige Layout. |
Nein, aber es gibt bestimmte Dinge, die sich ab und zu ändern sollten: Bei meiner Beispielseite haben wir aufgrund der Lesbarkeit auf einen sehr schmalen Content-Bereich gesetzt, deswegen der gelbe Verlauf, in den die Bilder dann reinragen. Dies ist für Forenansichten oder große Tabellen aber absolut nicht brauchbar, weswegen wir bei solchen Seiten kleinere Änderungen vornehmen mussten, um die Content-Breite zu erhöhen. Mit unserem Layout waren das winzige Änderungen am Quellcode und an ein paar Zeilen CSS, das wars. Hätten wir das mit Tabellen gemacht, wären diese extrem verschachtelt gewesen und keiner hätte mehr irgendwo durchgeblickt (ich habs mal probiert, das mit Tabellen zu machen, aber bei der 3. Verschachtelung hab ichs dann gelassen).
| Christian S. hat folgendes geschrieben: |
| UGrohne hat folgendes geschrieben: | | Außerdem ist die Anpassung an verschiedene Gegebenheiten, wie Bildschirm-Auflösung IMHO sehr viel einfacher. |
In einer Tabelle kann ich auch sehr gut mit relativen Angaben arbeiten, oder was meinst Du? |
Ja, das meinte ich. Und Du hast auch Recht. War eigentlich auch eher ein Negativ-Punkt, weil man da bei DIVs teilweise etwas auf Schwierigkeiten stößt. Aber durch die Möglichkeiten der Überlagerung und Abgrenzungen, wiegen die Vorteile die Nachteile IMHO wieder auf.
| Christian S. hat folgendes geschrieben: |
| UGrohne hat folgendes geschrieben: | | //EDIT: Ich hab mir Deinen Code mal angeschaut: Wieso verwendest Du eigentlich außen eine Tabelle, aber innen so viele DIVs, z.B. für die Aufzählungen? |
Die Tabelle außen: Es ist die einfachste und übersichtlichste Lösung und das dreispaltige Layout ist konstant. Die Divs innen: Man kann damit sehr schön Einrückungen bauen (bei den Aufzählungen) und in den einzelnen Spalten brauche ich die Flexibilität, die Du angesprochen hast. |
Es gibt noch etwas, was man bei DIVs beachten sollte: Diese Flexibilität der Positionierung hat den Nachteil, dass die meisten sie einfach überall reinpacken und so dann dieselbe Verschachtelung bekommen, wie wenn sie das mit Tabellen machen würden. Ich würde Dir empfehlen, im Content-Bereich zu spans überzugehen, wenn es nicht mit der CSS-Änderung der Auflistung gehen sollte.
In der Navigation könntest Du verschachtelte Listen verwenden, die sich in Zusammenhang mit a-Tags per CSS perfekt anpassen lassen, sodass Du nur noch Deine Liste generieren musst. Allgemein verschachtelst Du die DIVs sehr stark. ;)
Regan - So 29.07.07 15:06
Ich muss hier mal eine nicht ganz so zum Thema passende Frage stellen:
Was ist denn eigentlich der Unterschied zwischen <span> und <div>? Ich dachte immer das wäre dasgleiche!?
BenBE - So 29.07.07 15:17
Div ist Blocklevel, span ist Inline per Default IIRC.
Regan - So 29.07.07 15:23
| BenBE hat folgendes geschrieben: |
| Div ist Blocklevel, span ist Inline per Default IIRC. |
Ah. Wenn du es so sagst, dann .... hab ich eigentlich null verstanden. :oops:
Kann man das vllt. anders erklären?
BenBE - So 29.07.07 15:28
Ein DIV-Element wird (wenn nicht anders mit CSS festgelegt) als ein eigener Block (also z.B. Absatz, ...) aufgefasst, der für sich alleine steht. Wenn man also <p>Text<div>Text></div>Text</p> macht, so wird jeder Teilabschnitt auf einer separaten Zeile angezeigt, da div dies erzwingt. Das gleiche Beispiel mit span würde alle drei Texte auf der gleichen Zeile ausgeben, da SPAN in die Zeile eingebunden wird.
Regan - So 29.07.07 15:29
Aha. Das ist natürlich sehr interessant. Dann weiß ich schon, was ich bei meiner Homepage ändern muss. Danke schön.
F34r0fTh3D4rk - So 29.07.07 15:36
hi, also ich sehe das ähnlich wie christian ;) ich habe mich versucht mit divs und css layouting anzufreunden,
aber es wirklich ein ständiges gefrickel. dann muss hier wieder gemogelt werden, dann muss hier was absolut,
da was relativ, dann margin-right: -100px und solche scherze. irgendwann passt dann alles und man freut sich,
dann kommt jemand und sagt, üärks, wie sieht das denn in browser XY aus. und im prinzip hat man dann die gleiche arbeit nochmal.
Bei tables hatte ich bisher keine Probleme, die verhalten sich einfach so wie man es ihnen sagt, vor allem weil sie einige
nervige eigenschaften, die divs haben nicht haben. und wenn man verhindern will, dass divs ausbrechen muss man oftmals ebenfalls
verschachteln, und dann kann ich auch gleich tables nehmen.
mfg
jaenicke - So 29.07.07 16:16
Also was mich betrifft:
Ich benutze Tabellen recht häufig. Die Frage ist ja, wie man das übersichtlich macht. Bei mir sieht das so aus:
Ganz außen gibt eine Tabelle das grundlegende Layout vor, darin befinden sich dann die drei Layout-Blöcke Navigation 1, Content und Navigation 2. Benutzt man einen Screen Reader, dann bekommt man es so ausgegeben, wie es auch auf der Seite logisch aussieht.
Die drei Blöcke sind dann flexibel zusammengesetzt aus Include-Dateien, die die einzelnen Navigations-Blöcke bzw. Informationsanzeigen (TeamSpeak-Viewer, etc.) enthalten. Dies ist dann jeweils eine Include-Zeile + eine Kommentarzeile, so dass man da einen sehr guten Überblick hat.
Der Inhalt selbst wird dann (falls Skripte und damit Ajax verfügbar ist) dynamisch in ein DIV-Tag geladen, sonst statisch dort in die Seite eingebunden und diese jedesmal komplett geladen.
- Da das genaue Layout fest (absolut oder relativ) per CSS vorgegeben ist, weiß der Browser sofort die endgültige Größe der Elemente und muss nicht erst warten bis er die Größe der Zellen endgültig berechnen kann oder danach neu zeichnen, was man bei nem 56k Modem auch beobachten kann.
- Flexibel ist das auch, denn ich kann an jeder Stelle sehr einfach die Seite ändern, ich setze einfach andere Module an eine bestimmte Stelle. Und das grundsätzliche Layout bleibt ja fest, das muss ich also ja nie ändern. Allerdings wäre auch das kein Problem, denn die Module können ja einfach neu plaziert werden.
- Durch CSS lässt sich das Design leicht ändern oder an bestimmte Browser anpassen, wobei mir da ausgerechnet der Firefox Probleme macht, weil er bestimmte CSS-Angaben (aus den Standards des W3C) einfach ignoriert bzw. falsch umsetzt.
Insgesamt funktioniert diese Variante bei mir am besten und ist auch sehr einfach wartbar und konfigurierbar.
Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2024 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!