Willkommen im TP-Hilfe-Forum! Dies ist ein Forum zu den Themen Photoshop, Dreamweaver, Flash, Selbständigkeit und mehr, in dem Du Hilfe, Anleitung oder eine Lösung zu Deinen Problemen erhältst.
Aktuell bist Du in unseren Foren als Gast mit reinen Leserechten unterwegs. Wenn Du Dich registrierst, kannst Du eigene Themen verfassen, deine Frage stellen und privat mit anderen TPlern kommunizieren. Weitere Foren werden zugänglich, und Du wirst – falls gewünscht – per Mail über neue Beiträge informiert. Die Registrierung ist schnell und kostenlos. Sollten bei der Registrierung Fragen auftauchen, reicht ein Klick in unsere Hilfe - Häufig gestellte Fragen oder eine kurze Mitteilung an das Support-Team.
HTML-Puristen ? Komplett tabellenlos ? Nur CSS / DIV & Co. ?
Hallo ihr Lieben,
bin neu hier, aber dennoch genug mit dem Internet-Knigge "ausgestattet", um zu wissen, daß man erst die Suche benutzen soll, bevor man Fragen stellt :-))
Ich habe in den letzten 2 Wochen unglaublich viel im Internet (deutsch- und englischsprachig) herumgesucht (ich war, ohne zu übertreiben, bestimmt auf mindestens 2.000 über die Suchergebnisse verlinkter Seiten), und bin reichlich verwirrt, da die Informationen manchmal derart auseinanderreichen (Stichwort: "Glaubensfragen"), daß ich armes autodidaktisch lernen müssendes Schneckchen jetzt überhaupt nicht mehr weiß, was Sache ist - und ich hoffe, daß ihr mir da in meiner Verwirrung helfen könnt.
Ich versuch's in Kürze auszudrücken:
Bisher habe ich bei Webseiten, die kein CMS sind, also reine HTML, immer zu Tabellenkonstruktionen gegriffen, weil man da so wunderbar pixelgenau arbeiten kann, und es in so gut wie allen Browsern immer recht gleich (oder sehr ähnlich) ausschaut; und - wohl aus reiner Gewohnheit ? - habe ich das Gefühl, daß ich so ein "Tabellenkonstrukt" Milliarden Mal schneller hinkriege, als wenn ich alles in einem CSS definieren muß.
In meine Steinzeit-Tabellenkonstruktionen habe ich dann brav meine Grafiken (Images) eingefügt, und, wenn's ein "festes" Design sein und rechts nicht scrollen sollte, habe ich mit iFrames gearbeitet (von den "echten" Framekonstrukten bin ich zum Glück schon seit Längerem weggekommen ); CSS kannte ich bisher nur als Schriftenprogrammierung.
Einer der Vorteile, die bei CSS genannt werden, also das schnellere Laden, kann ich insofern nicht komplett unterstützen, als daß, wenn ich ein Tabellenkonstrukt mit Grafiken habe, diese sich dann ja im Browsercache befinden, und solange die Grundstruktur des Designs immer sehr ähnlich ist, ist die Ladezeit doch auch sehr gering für so ein "Steinzeitmodell" ?
Für Schriftenprogrammierung, klar, DA ist das echt super!
Nun möchte ich gerne programmiermäßig von der "Steinzeit" in die Zukunft (oder Gegenwart), und habe so meine Probleme.
Ich weiß, CSS ist eine Lernsache, aber ich habe da einige grundsätzliche Fragen, die bei meiner Sucher nach deren Beantwortung immer unterschiedlich beantwortet wurden:
1. Sind Tabellen komplett "out", oder darf man sich ihrer bei etwas schwierigeren optischen Konstrukten in einem HTML-Dokument doch noch bedienen, um das Design zu erreichen, das man haben will ?
2. Hat wirklich so gur wie JEDER Surfer CSS in seinem Browser aktiviert, oder wieviele haben es deaktiviert, denn:
3. ist es nicht "gefährlich", ein Design komplett in tabellenlosem Design in CSS zu machen, weil die "CSS-Losen" dann die Seite nicht gescheit sehen, also eigentlich nur irgendwelche unformatierten Schriften und gar keine Grafiken ?
4. Wieso gibt es Leute, die einem anraten, möglichst keine "DIVitys" zu bekommen, also möglichst nicht so viele Ebenen / Layer / DIVs (ich weiß, ich habe gelesen, daß ihr das als "Ebenen" bezeichnen wollt, ich führe nur die anderen Bezeichnungen an, damit jeder weiß, was ich meine ) in die Seite zu packen, und möglichst keine (oder nicht so vielen) Klassen (class) oder IDs zu verwenden ?
Gibt es, analog zu CSS, eventuell irgendwelche Surfer, die solche Ebenen/DIVs/Layer nicht sehen können, weil sie das irgendwie deaktiviert haben, und daher wird einem von der Verwendung dieser Ebenen/DIV/Layer abgeraten ?
Also wem soll ich jetzt glauben ? Hilfe!
5. Gibt es Bereiche wie z.B. Navigation und das "Tabellen-/Frameaussehen" der Seite an sich, die rein mit CSS gemacht werden können oder sogar sollten, aber andere Bereiche wie der "Ausgabebereich", also die Information, die dann aufgerufen wird, sollte dann mit Ebenen/DIVs/Layern gemacht werden ?
6. Ist denn ein nach Frame und/oder iFrame aussehendes Design nur in CSS, ohne Ebenen/DIVs/Layer realisierbar ? (Dazu im neuen Beitrag von mir mehr, s.u..)
Grundlage für meine Frage ist Folgende:
Ich möchte eine Webseite erstellen, die möglichst "neu programmiert" sein soll, aber kein CMS oder so (das wäre ja zu einfach :-)), und PHP/SQL nur bei solchen "Gimmicks" wie bei einer implementierten Suchmaschine, die die Seite für Suchanfragen zu den Inhalten vorher indexieren soll, und dann auf der Startseite als "Formularfeld" zur Suche zur Verfügung steht.
Näheres zu meiner Frage bzgl. meines Designs (das ich schon grob fertig habe) in einem neuen Beitrag hier im selben Thread, damit beides getrennt beantwortet werden kann.
Herzlichen Dank schon mal für eure Antworten!
Euer (Noch-)Steinzeit-Schneckchen
PS: Wird etwas dauern, bis ich den zweiten Beitrag abschicken werde, da ich erstmal die vereinfachte Grafik des Designs basteln muß :-)
PPS: Für diejenigen unter euch, die mir jetzt einen Knüppel über den Dez hauen mit tausend Links hier aus dem Forum, wo diese Fragen so oder so ähnlich bereits gestellt wurden und mich dann rügen, daß ich dann nochmal dieselben oder ähnliche Fragen stelle: Ich kann euch ja verstehen, aber seid bitte dennoch nicht so grob - Ich stelle ja noch andere Fragen, möchte aber gerne einen kompletten Überblick darüber haben, was die HTML-Cracks so zur aktuellen Situation bzgl. CSS/Ebenen/Tabellen im Bereich "normales HTML, kein PHP o.ä." zu sagen haben.
2. Hat wirklich so gur wie JEDER Surfer CSS in seinem Browser aktiviert, oder wieviele haben es deaktiviert, denn:
3. ist es nicht "gefährlich", ein Design komplett in tabellenlosem Design in CSS zu machen, weil die "CSS-Losen" dann die Seite nicht gescheit sehen, also eigentlich nur irgendwelche unformatierten Schriften und gar keine Grafiken ?
Da verwechselst Du glaub was. Mir ist noch kein Browser begegnet, in dem man css deaktivieren kann. Javascript kann man deaktivieren.
Zum Thema: Tabellen sollte man nur zur Darstellung von tabellarischen Daten verwenden! Dazu wirst Du hier über die Suche sicher auch ne Menge Lesestoff finden.
__________________
Alkohol ist keine Lösung - Alkohol ist ein Destillat.
Da verwechselst Du glaub was. Mir ist noch kein Browser begegnet, in dem man css deaktivieren kann. Javascript kann man deaktivieren.
Hallo Max, ui, das ist gut - ich hatte mal was von wem gelesen, der seine browsereigenen Schriftanzeigen verwendet (also dann alle Scriften riesengroß sieht oder so), und daher das Design optisch komplett "zerstört" sieht - daher frug ich nach. Aber wenn das kein Regelfall ist, umso besser!
Zitat:
Zitat von max.m
Zum Thema: Tabellen sollte man nur zur Darstellung von tabellarischen Daten verwenden! Dazu wirst Du hier über die Suche sicher auch ne Menge Lesestoff finden.
Also Du meinst solche Sachen wie z.B. bei einer Art Wochenplaner, wo man die einzelnen Tage aufgelistet sieht, und dann daneben die jeweiligen Aufgaben/Termine o.ä. ?
- Hmmm, dann müßte ich in Sachen Design ja wirklich komplett umdenken.. wenn ich nämlich früher z.B. eine Grafik hatte, die aus 3 "Stücken" bestand, von der z.B. die ganz links und die ganz rechts animierte Grafiken waren, die in der Mitte aber ein JPG, dann habe ich solche Tabellenkonstrukte genommen..
Jetzt, mit CSS und den Ebenen/DIVs müßte ich erstmal gucken, ob das überhaupt möglich wäre.
Lieben Dank schon mal für Deine Antwort!
- Ich schreibsel gerade an Beitrag Numero 2 bzgl. Design
Also Du meinst solche Sachen wie z.B. bei einer Art Wochenplaner, wo man die einzelnen Tage aufgelistet sieht, und dann daneben die jeweiligen Aufgaben/Termine o.ä. ?
Genau.
Zitat:
Zitat von Schneckchen
Hmmm, dann müßte ich in Sachen Design ja wirklich komplett umdenken.. wenn ich nämlich früher z.B. eine Grafik hatte, die aus 3 "Stücken" bestand, von der z.B. die ganz links und die ganz rechts animierte Grafiken waren, die in der Mitte aber ein JPG, dann habe ich solche Tabellenkonstrukte genommen..
Jetzt, mit CSS und den Ebenen/DIVs müßte ich erstmal gucken, ob das überhaupt möglich wäre.
Grafiken kannst Du natürlich auch in DIVs "reinpacken".
__________________
Alkohol ist keine Lösung - Alkohol ist ein Destillat.
Grafiken kannst Du natürlich auch in DIVs "reinpacken".
Ja, weiß ich zum Glück schon, habe ich z.B. mit einer Hintergrundgrafik im "Ausgabebereich" gemacht, die ich über das CSS da reinladen lasse;
(background: url(../images/bg-main.jpg) no-repeat fixed center 127px; )
Ich weiß nur nicht, ob ich bei einer "3-teiligen" Grafik dann innerhalb des einen DIVs dann nochmal 3 separate "Unter-DIVs" machen muß, die dann lückenlos nebeneinander liegen, damit die Komplett-Grafik eben "richtig" ausschaut.
(Bin fast fertig mit meinem nächsten großen Beitrag, muß nur noch die Grafik fertigbasteln, bis gleich und DANKE nochmal - und ich hoffe, ich löchere und nerve nicht zu sehr mit meinen Newbie-Fragen, ich helfe auch immer gerne, wo ich kann, und hoffe, daß ich das auch mal werde )
Lieben Gruß
Geändert von Schneckchen (26.01.2008 um 13:31 Uhr).
Grund: ;) ergab einen Zwinkersmiley, aber es sollte doch nur Semikolon und dann eine geschlossene Klammer werden :-)))
1. Sind Tabellen komplett "out", oder darf man sich ihrer bei etwas schwierigeren optischen Konstrukten in einem HTML-Dokument doch noch bedienen, um das Design zu erreichen, das man haben will ?
Man kann Tabellen gewiss immer noch verwenden. Jedoch sollte man sie, wenn man es "richtig" machen will, sich also an die Semantik von HTML hält nur dort verwenden, wo man Daten auch tabellarisch darstellt.
Zitat:
Zitat von Schneckchen
2. Hat wirklich so gur wie JEDER Surfer CSS in seinem Browser aktiviert, oder wieviele haben es deaktiviert, denn:
CSS ist eigentlich immer aktiv. Klar gibt es auch reine textbasierte Browser, aber die würden den Inhalt ja immer noch wiedergeben.
Zitat:
Zitat von Schneckchen
3. ist es nicht "gefährlich", ein Design komplett in tabellenlosem Design in CSS zu machen, weil die "CSS-Losen" dann die Seite nicht gescheit sehen, also eigentlich nur irgendwelche unformatierten Schriften und gar keine Grafiken ?
Die, die solche Einstellungen bzw. Browser verwenden sind dann Suchmaschinen oder halt User, die eine Sehschwäche haben, schlimmstenfalls blind sind. Der "normal" User wird kein CSS deaktiviert haben. Daher nicht all zu schlimm, meisten ist ja auch der Text das, was die Informationen enthält.
Zitat:
Zitat von Schneckchen
4. Wieso gibt es Leute, die einem anraten, möglichst keine "DIVitys" zu bekommen, also möglichst nicht so viele Ebenen / Layer / DIVs (ich weiß, ich habe gelesen, daß ihr das als "Ebenen" bezeichnen wollt, ich führe nur die anderen Bezeichnungen an, damit jeder weiß, was ich meine ) in die Seite zu packen, und möglichst keine (oder nicht so vielen) Klassen (class) oder IDs zu verwenden ?
Gibt es, analog zu CSS, eventuell irgendwelche Surfer, die solche Ebenen/DIVs/Layer nicht sehen können, weil sie das irgendwie deaktiviert haben, und daher wird einem von der Verwendung dieser Ebenen/DIV/Layer abgeraten ?
Also wem soll ich jetzt glauben ? Hilfe!
Das hat was mit der Semantik zu tun. Der <h1> Tag zum Beispiel ist ja für eine Headline da. Also wird diese Information von einer Suchmaschine als wichtiger gewertet, als Inhalte, die einfach nur in einem Div stehen.
Genau so kann ein richtig formatierter HTML Code auch von Screenreadern sinniger erkannt werden, was Menschen hilft Deine Website auch zu verstehen.
Bedenke analog mal Deinen Schreibstil. Wichtiges stellst Du ja nun auch fett da, unterstreichst es usw. Für sowas gibt es in HTML dann halt gewisse Tags, die man auch sinnvoll nutzen sollte.
Zitat:
Zitat von Schneckchen
5. Gibt es Bereiche wie z.B. Navigation und das "Tabellen-/Frameaussehen" der Seite an sich, die rein mit CSS gemacht werden können oder sogar sollten, aber andere Bereiche wie der "Ausgabebereich", also die Information, die dann aufgerufen wird, sollte dann mit Ebenen/DIVs/Layern gemacht werden ?
Drücken wir es mal so aus: Frames sollte man aus diversen Gründen nicht mehr benutzen. Sicherlich mag es hier und da eine Verwendung geben, wo sie hilfreich sein können und dann kann man auch MAL ein iframe nutzen.
Aber bitte nicht mehr um Seiten an sich zu "bauen".
Man kann alles mit HTML+CSS machen.
Die DIVs kann man sich als Kontainer / Bereiche vorstellen. Ein Div für die Navi, einen für den Header, einen für den Footer und noch einen für den Contentbereich.
Diese Divs kann man dann mittels CSS so formatieren, dass man sein Layout erreicht.
Für die Struktur der Navi kann man dann Listen <ul> verwenden, diese kann man dann wieder mittels CSS formatieren. Und den Contentbereich kann man dann mit <p> Tags usw füllen und wieder CSS zur Beeinflussung des Aussehens nutzen.
Ich hoffe nun ist es einigermaßen klar, wie man sein Layout mit CSS erreichen kann.
Zitat:
Zitat von Schneckchen
6. Ist denn ein nach Frame und/oder iFrame aussehendes Design nur in CSS, ohne Ebenen/DIVs/Layer realisierbar ?
Ich sage mal nein, auch wenn ich nicht verstehe, was Du nun eigentlich fragen willst.
Zitat:
Zitat von max.m
Da verwechselst Du glaub was. Mir ist noch kein Browser begegnet, in dem man css deaktivieren kann. Javascript kann man deaktivieren.
Ui ui ui, also ich kann das schon machen. (siehe Anhang)
Da verwechselst Du glaub was. Mir ist noch kein Browser begegnet, in dem man css deaktivieren kann. Javascript kann man deaktivieren.
Kennst Du auch andere Browser außer dem Internet Explorer? Sowohl Firefox als auch Opera bieten die Möglichkeit die CSS-Stile einer Seite zu deaktivieren. In der Praxis dürfte dies der normale Anwender aber kaum machen...
Zitat:
Zitat von Schneckchen
1. Sind Tabellen komplett "out", oder darf man sich ihrer bei etwas schwierigeren optischen Konstrukten in einem HTML-Dokument doch noch bedienen, um das Design zu erreichen, das man haben will ?
2. Hat wirklich so gur wie JEDER Surfer CSS in seinem Browser aktiviert, oder wieviele haben es deaktiviert, denn:
3. ist es nicht "gefährlich", ein Design komplett in tabellenlosem Design in CSS zu machen, weil die "CSS-Losen" dann die Seite nicht gescheit sehen, also eigentlich nur irgendwelche unformatierten Schriften und gar keine Grafiken ?
4. Wieso gibt es Leute, die einem anraten, möglichst keine "DIVitys" zu bekommen, also möglichst nicht so viele Ebenen / Layer / DIVs [...] oder IDs zu verwenden ?
Also wem soll ich jetzt glauben ? Hilfe!
5. Gibt es Bereiche wie z.B. Navigation und das "Tabellen-/Frameaussehen" der Seite an sich, die rein mit CSS gemacht werden können oder sogar sollten, aber andere Bereiche wie der "Ausgabebereich", also die Information, die dann aufgerufen wird, sollte dann mit Ebenen/DIVs/Layern gemacht werden ?
6. Ist denn ein nach Frame und/oder iFrame aussehendes Design nur in CSS, ohne Ebenen/DIVs/Layer realisierbar ? (Dazu im neuen Beitrag von mir mehr, s.u..)
Zu 1. Für's Layout würde ich darauf nicht mehr zurückgreifen, weil es einfach nicht nötig ist. Um Informationen aufzubereiten (siehe Link weiter unten) nach einer ähnlichen Diskussion hier schon...
Zu 2./3. siehe oben. Es ist durchaus möglich CSS zu deaktivieren (im IE geht das über eine Toolbar afaik), allerdings ist das bei einer korrekt aufbereiteten Seite nicht wirklich "schlimm", da die Informationen immer noch verständlich sind - was ja ohnehin ein starkes Argument für CSS ist: die Webseite kann auch von Leute, die auf Screenreader angewiesen sind "benutzt" werden. Zudem deaktiviert Du mit CSS nicht automatisch auch Grafiken!
Ich hatte vor einiger Zeit mal eine ähnliche Frage gestellt:
Gehe zum Beispiel mal auf die Seite von Spiegel online. Im Firefox unter Ansicht => Webseiten-Stil => kein Stil auswählen. Die Seite sieht zwar nicht besonders einladend aus, ist aber nach wie vor vollständig nutzbar.
Zu Deinen anderen Fragen (wobei ich mich in diesen Dingen als ambitionierter Amateur bezeichnen würde...):
Zu 4.: Das ist wohl primär aus Gründen der Organisation und Übersichtlichkeit Deines Codes ratsam. Je mehr Divs und IDs usw. desto schwieriger wird es Fehler (z.B. Fehldarstellungen) zu finden oder später was zu ändern bzw. überhaupt nachzuvollziehen, was man da mal gemacht hat.
DIVs getrennt zu deaktivieren geht ohne weiteres erst mal nicht (es gibt bestimmte Erweiterungen für Firefox mit denen das möglich ist, Otto-Normal-User wird sowas kaum benutzen, und wenn, dann weiß er was er tut).
Zu 6.: Auf jeden Fall. Vom Aussehen her. Letztendlich hast Du aber immer nur eine Seite (der gleichbleibende Navigations-Teil ließe sich aber beispielsweise durch ServerSideIncludes einfügen, so daß die Wartung einfacher wird...
Die archaische Kultur von Minos hat dem Minotaurus alljährlich ihre Kinder geopfert, um Sicherheit zu gewinnen. Eine demokratische Kultur, die ihre Prinzipien dem Terrorismus in den Rachen wirft, handelt nicht anders. H. Prantl in NZZ Folio 09/07
3. ist es nicht "gefährlich", ein Design komplett in tabellenlosem Design in CSS zu machen, weil die "CSS-Losen" dann die Seite nicht gescheit sehen, also eigentlich nur irgendwelche unformatierten Schriften und gar keine Grafiken ?
Das würde ich nicht als "Gefahr" bezeichnen. Das Prinzip lautet: Funktion vor Form. Deine Website soll Informationen liefern: das Design ist zwar wichtig, soll aber nicht das A and das O einer Website sein.
Niemand wird mit einem herkömmlichen Browser ohne CSS unterwegs sein -- aber es gibt genug nicht-herkömmliche Browser, um die sich man kümmern muss. Das sind nämlich:
1. Screenreader, die den Text laut vorlesen (etwa Jaws), die von Sehbehinderten verwendet werden;
2. Suchmaschinen, die, wie Screenreader, keine Grafiken "lesen" können.
Sumas sind vielleicht wichtiger als Screenreader, aber für manche Websites (etwa für öffentliche Einrichtungen in vielen Ländern, z.B. Deutschland) ist die sogenannte Barrierefreiheit schon praktisch Pflicht oder sogar gesetzlich vorgeschrieben.
Grundsätzlich gilt also folgendes: semantischen HTML-Code verwenden, CSS für die Gestaltung. Ohne CSS muss der Text nicht schön aussehen, soll aber von oben nach unten in einem Zug lesbar sein, alles in einer logischen Reihenfolge, mit sinnvollen Überschriften, Absätzen, Listen und so weiter. Da freuen sich nicht nur die Sehbehinderten, sondern auch Google und Co.
Mit einigen Tricks kann man mit CSS trotzdem eine Website schön gestalten. Nehmen wir etwa diesen Code an:
Code:
<h1 id="firmenname">Schnapsbrennerei Hicks und Rülpser</h1>
Für Google und Screenreader perfekt, sieht aber langweilig aus, nicht? Wir haben doch ein schönes Firmenlogo...
Kein Problem. Im CSS einfach die Überschrift an der gewünschten Stelle platzieren, Größe bestimmen, Logo als Hintergrundbild einfügen, Text um 2000 Pixel nach links verschieben, fertig. Google bekommt das, was Google braucht, und die Herren Hicks und Rülpser sind auch zufrieden.
Tja, aber die Überschrift erscheint nicht, wenn man die Seite ausdruckt. Kein Problem: mit CSS kann man für den Ausdruck ein anderes Stylesheet definieren. Da kann man den Überschriftentext ausdrucken lassen (mit einem geschickten Zusammenspiel zwischen CSS und HTML kann man sogar eine Schwarzweiß-Version des Logos drucken lassen, die dann nicht so "schwammig" aussieht): man kann auch z.B. die Navigationselemente ausblenden lassen und und und.
Schon mal eine Seite ausgedruckt und sie wird rechts abgeschnitten? Das hat man davon, wenn man Tabellen nimmt und dabei die Breite fixiert. Mit einem CSS-Layout hat man das Problem nicht.
Die Site soll neu gestaltet werden? Anstatt hunderte von HTML-Seiten komplett neu zu bearbeiten, bearbeitet man nur eine Handvoll CSS-Dateien. Hat man sauber gearbeitet, muss am HTML gar nichts geändert werden.
Dass man beim Einstieg in die Welt des CSS etwas Zeit braucht ist klar: Leider wurde diese Technik von den Browser-Herstellern auf katastrophaler Art und Weise umgesetzt, und überhaupt muss man umdenken. Aber nachdem ich seit Jahren mit CSS arbeite, bekomme ich ein Layout mit CSS viel schneller hin, als mit Tabellen.
Die archaische Kultur von Minos hat dem Minotaurus alljährlich ihre Kinder geopfert, um Sicherheit zu gewinnen. Eine demokratische Kultur, die ihre Prinzipien dem Terrorismus in den Rachen wirft, handelt nicht anders. H. Prantl in NZZ Folio 09/07
Hier ist das Design - nur in CSS und DIV umsetzbar ?
(Hallo webcreate, rewboss und Jokai olvaso, ich antworte auch noch auf euch.)
So, nun zu etwas detaillierteren Fragen, da sich das auf mein Design zu einer Webseite bezieht:
Die Optik der Seite habe ich schon (ich mache das immer in einem Graphikprogramm), ich habe auch sämtliche Grafiken für das Grundkonstrukt erstellt, und ich habe auch kein Problem damit, diese per CSS in die entsprechenden Bereich "hineinladen" zu lassen.
Zum Design:
# 100% Breite und 100% Höhe
# Bestehend aus:
- Ganz oben "Leiste", 100% Breite, 63 Pixel Höhe, für Suchanfrage (linksbündig) und Logo (rechtsbündig)
- Darunter "Leiste", 100% Breite, 37 Pixel Höhe, für die Hauptnavigation; diese ist, mit einem Abstand von 177 Pixeln zum rechten Außenrand, rechtsbündig (da die linke und rechte "Tabellenseite" jeweils 177px groß ist, und die Navi davon abgesetzt rechtsbündig beginnen soll)
- Darunter "Leiste", 100% Breite, 26 Pixel Höhe, für eine "History" - ähnlich wie bei manchen CMS, so daß man halt sehen kann, wo man gerade ist (z.B.: Home > Über uns > Geschichte o.ä.), und, wenn man das unbedingt will, da auch auf die entsprechende(n) Unterseite(n) draufklicken kann. "Home" in der "History-line" steht linksbündig, ca. 13px vom linken Rand weg, und 177px vom linken Rand entfernt würden die anderen "Du bist hier"-Links stehen (also z.B. Über uns > Geschichte). Ganz rechts außen steht das Datum, also sowas wie "Sa., 26.01.2008" oder so.
(Die drei "Einzel-leisten" fasse ich übrigens daher nicht zusammen, weil jede ein eigenes Background-Image hat, das über repeat-x dann über die komplette Breite wiederholt wird.
- Bedeutet wohl auch, daß ich, analog wie bei Tabellen, für jede eine eigene "Zelle", bzw. dann "Ebenen" bauen muß, die dann entsprechend soundsoviel px. von oben entfernt sind, richtig ?)
Muß ich dann für diese einzelnen Bereiche wie z.B. das Suchanfragefeld links und das Logo rechts dann nochmal jeweils eigene Ebenen/DIVs bauen ?
Also analog Tabellenzellen.
Oder kann ich eine einzelne Ebene je "Leiste" nehmen, und dann sagen: "Also, Du Suchanfragefeld bist jetzt mal links außen in dieser einen einzigen Ebene, und Du Logo, bist rechts außen ? - Sorry für die schon vorab gestellten Fragen, aber das ist ja wichtig für mein "Zusammenbauen" nachher.)
- Darunter der "Hauptbereich", der sich unterteilt in: ° Linke "Tabellenseite", 100%-127px Höhe, 177px Breite ° Rechte "Tabellenseite", 100%-127px Höhe, 177px Breite ° In der Mitte der beiden der "Ausgabebereich", in dem die Informationen, also die jeweiligen Unterseiten, reingeladen werden; dieser Bereich nimmt sich flexibel die Rest-Breite und -Höhe, die ihm je nach Browser übrigbleibt.
Sollte er mal mehr Inhalt drin haben (was seltener vorkommen wird), und sich daher scrollen müssen, dann tut er das links von der rechten "Tabellenseite". Die Gesamtseite scrollt also NICHT, Scrollbalken rechts außen ist deaktiviert, nur innerhalb, also rechts außen dieses "Ausgabebereiches" entsteht ein Scrollbalken
- Ganz unten ein Footer mit 100% Breite und 20px Höhe.
Uffz. Das war's soweit.
# Feste Pixelgrößen haben wir also nur in dem "Rahmen", der diesen "Ausgabebereich" umgibt, also: Oben: 63px, 37 px, 26px = 126px gesamt für die oberen 3 Leisten, ganz unten der Footer mit 20px Höhe, und in der Mitte links und rechts außen 177px Breite, und die Mitte nimmt sich, was sie will :-)
Ich hänge euch mal hier als GIF eine ganz vereinfachte Darstellung meines gewünschten und obig beschriebenen Designs an; die entsprechenden Pixel- oder Prozentangaben habe ich nochmal reingeschrieben, und auf den leicht grünfarbenen Unterlegungen steht geschrieben, was in diesen Bereichen "erscheinen" soll.
Hoffe, es ist klar genug zu erkennen.
Und ich würde jetzt gerne von euch wissen:
A. Ob das Design wirklich in ausschließlich CSS / Ebenen zu realisieren geht, oder ob ihr mir davon abraten würdet, oder
B. Ob ich das Design ruhig mit Tabellen machen kann, auf welche ich dann die Ebenen "drauflege", oder
C. Ob ich das Design ganz old-fashioned in Tabellen machen kann, und nur den scrollbaren "Ausgabebereich" in der Mitte als Ebene/Layer/Div deklariere, wobei ich, was den Inhalt der Nicht-Ausgabebereich-Tabellenzellen angeht, also Hauptnavigation, Unternavigation, rechte Seite, schon noch aus dem CSS dann "rauslade". Also sowohl die Hintergrundgrafiken als auch die Texte da drauf (also Navigationsbeschriftungen).
Ich habe es bisher sowohl als Tabellen- als auch als reines DIV-Konstrukt geschafft, das Design ganz grob zu realisieren, sogar so, daß sich sowohl unter den Geckos als auch dem IE (zumindest auf der DOSe, Mac weiß ich nicht), der unerwünschte Scrollbalken rechts außen ausgeschaltet ist, und dafür einer in der Mitte, also dem "Ausgabebereich" aktiviert wird (naja, unter IE dann mit eingefärbtem Scrollbalken... ich weiß, ich weiß, farbiger Scrollbalken wird nicht validiert, aber, wie gesagt, die Inhalte sind meistens eher gering und werden daher seltenST scrollen.)
Da ich, obwohl ich wirklich Myriaden von Beiträgen zum "sowohl horizontal als auch vertikal zentrieren innerhalb eines DIVs", gelesen und auch umgesetzt habe, aber KEINE der Methoden half, stehe ich kurz davor, den ganzen Ebenen-/DIV-Kram für den "Ausgabebereich" hinzuschmeißen und wieder auf meine heißgeliebten Tabellen zurückzugreifen - bitte bewahrt mich vor dem Nicht-Puristen-Fegefeuer :-)))
Das Zentrieren in meinem DIV ist daher so schwierig, da ich keine feste Größe und Breite habe, sondern ja nur "das alles außenrum" einen festen Wert hat - also ganz oben 126px, links und rechts 177px und unten 20px. Der "Ausgabebereich" soll sich den Rest des Platzes, je nach Browser, nehmen.
Das heißt, ich kann nicht mit sowas Ähnlichem arbeiten wie in angebotenen Zentrierlösungen à la "width: 600px" und dann mit diesen Minuswerten (-50% oder die 300px, also Hälfte von width in dem Beispiel, etc.); ich hab's sowohl mit den Prozentangaben versucht, als auch dann solche Konstrukte wie:
height: expression((document.body.clientHeight - 148 ) + "px"); right:177px; (20px Footer und 128, nicht 126 px für die obersten 3 Leisten, da ich wegen des Scrollbalkens noch 1 Pixel zurechnen mußte, da der sonst zu weit unten anfängt zu erscheinen, und dann nochmal 1px extra, da um den kompletten "Hauptbereich" ein 1px-Rahmen liegt)
width: expression((document.body.clientWidth - 354) + "px"); (2 x 177px für die "Tabellenzellen" links und rechts.)
- und das dann auch umgemünzt in etwa wie:
height: expression((document.body.clientHeight - 50) + "%"); right:177px; (50%, weil das die Hälfte des 100%-Ausgabebereiches ist, der freilich NICHT insgesamt 100% hoch ist, sondern nur 100%-148px. width: expression((document.body.clientWidth - 50) + "%");
, und das noch in allen Varianten, also auch mal mit: top:128px oder so.
Ich hab's mit dem vertical-align im body versucht, und auch - ich weiß, pfui pfui - in der Tabelle im HTML selbst.
Hat alles nicht geholfen, das blöde DIV will nicht vertikal zentrieren.
Gibt's für mein spezielles Design evtl. keine Zentrier-Lösung dafür, weil ich den "Ausgabebereich" auf 100% Höhe + Breite setzen muß, damit er auch brav in allen Browsern richtig scrollt ?
Ich habe eh ein Problem damit, die Ebenen-/DIV-Inhalte in DreamWeaver gescheit zu bearbeiten, da diese Ebenen sich dort optisch überlagern, und ich dann schwer an deren Inhalt ran kann - oder muß ich da gar nicht ran, und bin so sehr die "Steinzeit" mit Tabellen und brav im HTML-Editor eingetippten Text gewohnt, als daß ich nicht checke, daß ich das alles über so ein CSS extern, also außerhalb der HTML, reindefinieren kann ?
Javascript möchte ich übrigens ungerne verwenden, da ich nicht weiß, wieviele das deaktiviert haben - oder könnt ihr mir da eure "Absolution" erteilen ? Dann könnte ich ja rein hypothetisch sämtliche Texte als .js definieren und dann in den "Ausgabebereich" per Aufruf reinladen ? *verwirrt guck*
Oder gibt's bessere Editoren als DreamWeaver, in welchen ich die Text- und Bildinhalte im Ausgabebereich besser bearbeiten kann ? - Die WYSIWYG-Ansicht im DreamWeaver irritiert mich nämlich total (weil die blöden DIVs halt nicht dort "rumliegen", wo ich sie optisch eigentlich hinprogrammiert habe).
Sorry für den langen und stellenweise sicher auch etwas (? ) wirren Beitrag.
Ich freue mich über jede Antwort, auch wenn's nur zu einem einzigen Punkt ist. Danke!
Euer verwirrtes Schneckchen
PS: Ich kann nichts hochladen, liegt das an meinem Firefox ???
Bekomme laufend: "Das Hochladen der Datei ist fehlgeschlagen." ???
Man kann Tabellen gewiss immer noch verwenden. Jedoch sollte man sie, wenn man es "richtig" machen will, sich also an die Semantik von HTML hält nur dort verwenden, wo man Daten auch tabellarisch darstellt.
Danke, ich werde mir Mühe geben!
Also Tabellen nur dort, wo es sonst optische Suppe gibt, wenn man CSS ausschlaten würde (oder es auf irgendwelchen mehr oder minder seltsamen Endgeräten eh keines gibt oder so).
Zitat:
Zitat von webcreate
Die, die solche Einstellungen bzw. Browser verwenden sind dann Suchmaschinen oder halt User, die eine Sehschwäche haben, schlimmstenfalls blind sind. Der "normal" User wird kein CSS deaktiviert haben. Daher nicht all zu schlimm, meisten ist ja auch der Text das, was die Informationen enthält.
Hach, aber ich bin halt so gerne eine Möchtegern-Künstlerin - also, die Grafiken sollen sich nach Möglichkeit schon schlank laden und so, aber ich mag halt eine schicke Optik (die nicht ganz komplett-nüchtern-"kastig" wie sehr viele CMS daherkommt).
Zitat:
Zitat von webcreate
Das hat was mit der Semantik zu tun. Der <h1> Tag zum Beispiel ist ja für eine Headline da. Also wird diese Information von einer Suchmaschine als wichtiger gewertet, als Inhalte, die einfach nur in einem Div stehen.
Genau so kann ein richtig formatierter HTML Code auch von Screenreadern sinniger erkannt werden, was Menschen hilft Deine Website auch zu verstehen.
Bedenke analog mal Deinen Schreibstil. Wichtiges stellst Du ja nun auch fett da, unterstreichst es usw. Für sowas gibt es in HTML dann halt gewisse Tags, die man auch sinnvoll nutzen sollte.
Mhh, verstehe, danke für den Hinweis, heutzutage ist das Thema Suchmaschinenoptimierung ja ganz wichtig!
Gut zu wissen, das mit den Überschriften/<h1>-Tags.
Zitat:
Zitat von webcreate
Drücken wir es mal so aus: Frames sollte man aus diversen Gründen nicht mehr benutzen. Sicherlich mag es hier und da eine Verwendung geben, wo sie hilfreich sein können und dann kann man auch MAL ein iframe nutzen.
Aber bitte nicht mehr um Seiten an sich zu "bauen".
Nein, keine Sorge, ich habe das anders gemeint
Ich meinte, daß das CSS/DIV-Konstrukt nur so AUSSIEHT, als wäre es ein Frame und/oder iFrame
- und ich hoffe, daß ihr mir da in meiner Verwirrung helfen könnt.
); CSS kannte ich bisher nur als Schriftenprogrammierung.
in die Zukunft (oder Gegenwart), und habe so meine Probleme.
) in die Seite zu packen, und möglichst keine (oder nicht so vielen) Klassen (class) oder IDs zu verwenden ?
Kennst Du auch andere Browser außer dem Internet Explorer? Sowohl Firefox als auch Opera bieten die Möglichkeit die CSS-Stile einer Seite zu deaktivieren. In der Praxis dürfte dies der normale Anwender aber kaum machen...
