• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Website mit CSS

Toxictype

Toxictype

New member
Hi Leutz,

die Erstellung von Sites mit CSS soll so einige Vorteile bringen.
So habe ich also vor ein paar Tagen angefangen und stecke auch schon fest. Das einzige, das wirklich funzt und mir gefällt ist der Hintergrund, der bei jeder Auflösung oder Größe des Browserfensters gleich bleibt.

Versuche, Grafiken, Menus einzufügen, gingen in die Hose. Da die Ebenen gemacht haben was sie wollen, bin ich notgedrungen auf Tabellen in den Ebenen umgestiegen. Brachte aber auch nicht wirklich etwas!
Das Prob:

Ich habe auf der rechten Tabellenspalte im header ein Logo eingepflegt.
In der linken eine andere Grafik
-> Tabelle (s. Anlage) in Ebene header

Im der rechten Tabellenspalte der Ebene content hatte ich wiederum zwei Ebenen (eine für Hintergrundgrafik und eine für Text). Links das Menu (s. Anlage).

Wenn man sich alles in der normalen Auflösung angesehen hat paßte alles.
Wenn man das Browserfenster verändert hat oder eine kleine Auflösung hatte, verschoben sich die Grafiken ineinander, übereinander usw.
Auf einmal sah die Site ganz übel aus!

Das 'Grundgerüst' könnt ihr hier sehen!

Wer kann mir weiterhelfen und mir 'erklären', wie man eine vernünftige CSS-Site erstellt! Bittttäää....
 
Als erstes empfehle ich Dir das Zusammensetzen eines ersten CSS-Layouts nicht mit einem Grafikdesign zu machen sondern die Elemente nur verschieden farbig zu definieren.

Das gibt Übersicht 'was passiert wenn' und hilft beim ausprobieren ungemein.

Ich persönlich arbeite gern mit gefloateten Layouts fester Breite und nicht mit dem Box-Modell.

Also mit gefloatetem Layout ist z.B. sowas gemeint:
Wenn Du den header oder irgendwas zweiteilst was aber nebeneinander dargestellt werden soll: Nur mal im groben:
Code: 
<div>Ein Container der das Ganze umschließt z.B. für center

<div id="header">

<div id="header_left">
Hier hinein wird das linke headerbild, per CSS als background definiert.
#header_left wird mit float:left versehen.
</div>

<div id="header_right">
Hier hinein wird das rechte headerbild, per CSS als background definiert.
#header_right wird auch mit float:left definiert, damit left und right nebeneinander stehen.
</div>

</div><!-- ende header -->


so, und wenn jetzt darunter ein Bereich über die ganze Breite kommen soll oder eine andere Spaltenaufteilung
muß erstmal dazwischen ein clear:both gesetzt werden.

dann kommt oft z.B. die leftnavi, daneben der Content-Container und ggf noch eine rechte Spalte.

Ein AussenContainer und die links mitte rechts Container
auch wieder mit float:left definiert.

dann wieder clear

</div>AussenContainer Ende

Unten drunter footer

und </div>ende center

na ja ist vielleicht bisschen blöd nachzuvollziehen.

Die verschiedenen Modelle kannst Du auch gut an Layoutbeispielen im Netz ansehen, runterladen und auch selbst daran ausprobieren was passiert wenn...

clearing im 21. Jahrhundert:
Einschließen von Floats ohne zusätzliches Markup

Layouts:
intensivstation :: CSS Templates :: Templates

Navigationsbeispiele und Tutorials findest Du hier:
Listamatic: one list, many options - Using CSS and a simple list to create radically different list options

Ein Muß ist das rumtreiben auch auf folgender Website
A List Apart: A List Apart

na ja und als allererstes, Tabellenbauweise ins Hinterhirn schieben ;)
 
Zuletzt bearbeitet:
Hi Bine!

Das ist ja astrein!!!
Auch die Links! Perfekt!
Ich danke Dir. Nun habe ich wieder Mut gefasst und werde mich wieder an die Arbeit machen!

Gruß
Tox
 
Ein Tipp: firefox hat eine Fehlerkonsole, die auch CSS Fehler anzeigt (bei dir stimmen 2 Farbwerte nicht)

Dann ist es natürlich schwierig (bis unmöglich) ein Design, dass du mit einem entsprechenden Programm entwirfst 1:1 in CSS umzusetzen. HTML/CSS unterliegt Einschränkungen, es gibt keine feste Anzeigefläche, der Schriftgrad kann variieren und einiges mehr, dass ist aber auch ihr Vorteil es bietet die Möglichkeit dass ein Layout sich an diese Gegebenheiten anpaßt, nur wenn das Layout nicht darauf ausgelegt ist, brauchst du gar nicht erst anfangen.

Z.b. wenn du dein Layout hat festes Raster hat, dass in Reihen und Spalten aufgebaut ist, wirst du früher oder später immer Schwierigkeiten bekommen, da es sowas in einem CSS Layout nicht gibt. Du hast Boxen, die sich in die Darstellungsfläche einfügen. Mit Hilfe von float und position lassen sich diese anordnen, du solltest aber mit position sparsam umgehen, es ist nicht einfach mit CSS Elemente sauber zu positionieren.

Neben den guten Beispielen von Bine, solltest du auch schrittweise vorgehen.

1. Schritt: sauberes semantisches HTML
2. Schritt: gruppieren der HTML Elemente
3. Schritt: anordnen der Gruppen und Standard Angaben in's CSS
4. Schritt: (Hintergrund-)Grafiken einabauen - hier kann es bei deinem Entwurf schon Schwierigkeiten geben, wenn du zuviele gestalterische Elemente einbauen willst, da jedes Element nur eine Hintergrundgrafik haben kann
5. Schritt: Feinjustierung

und jeden Schritt in möglichst vielen Browsern kontrollieren (auf jeden Fall IE, FF und OP). Dabei werden dir viele Bugs des IEs über den Weg laufen, d.h. wenn etwas im IE "richtig" und in anderen Browsern "falsch" aussieht, geh davon aus, dass in 99% der Fällen der IE falsch liegt. Aber viele Bugs sind im Internet gut komentiert und du findest oft gute workarounds (ich hatte gerade heute mit dem double-margin bug zu kämpfen)

Viel Spaß!
 
Hello again,
es ist zwar eine ganz schöne Fummelei mit CSS (Tabellen finde ich um einiges bequemer), aber ich bin dank euch ein paar Schritte nach vorne gekommen. Von vorne sein kann zwar nicht die Rede sein, aber... ;-)

Ich habe hier den neuen Entwurf und möchte ein paar Dinge ändern, die ich nicht hinbekomme. Ich hoffe, ihr könnt mir noch mal einen Kick geben!

1. Wenn ich das Browserfenster verkleinere, soll das Logo nicht so weit nach links verschoben werden (über die linke Grafik). Dasselbe trifft auch auf die Grafik im footer zu.

2. Ich möchte die Ebene content_right fixieren. Bis jetzt verändert sich beim verkleinern des Browserfensters leider der Abstand zu der Ebene content_left. Wenn man das Fenster stark verkleinert, schiebt sie sich sogar unter die Ebene content_left. Wie mache ich das?

Ich bedanke mich bei euch für die 'Erste-Sahne-Hilfe'!:love:

Gruß
Tox
 
Guten Morgen,

also, was der Validator sagt, hat ja nu mit Toxictypes Problem nicht so wirklich etwas zu tun, :)
der bemängelt ja nur die fehlenden alt-Attribute und fehlenden schließenden Tags für img und br.

dass du hier nicht mehr hilfreiche Antworten bekommst, liegt wahrscheinlich daran, dass niemand
Lust hat, sich in dieses Gewirr aus divs und Tabellen zu vertiefen...
(ich würde noch mal anfangen, mich zuerst informieren, wie man eine Seite/Inhalt zentriert und das
dann der Reihe nach und ohne absolute Positionierung aufbauen)

nur mal so viel zu den verrutschenden content-divs:
sie haben eine bestimmte Größe in Pixel, wenn du das Fenster verkleinerst, ist es logisch,
dass sie irgendwann nicht mehr nebeneinander passen und content_right runterrutscht (da der
sie umschließende Container ja auch eine bestimmte Größe hat)(ich glaub, 80% von irgendwas)
Lösungsvorschlag:
gib content_left 30% und content_right 70%, so füllen sie immer den sie umschließenden
Container ganz aus (da sie im Moment einen Rand haben, musst du vielleicht 29% und 70% wählen,
der Rand beansprucht auch Platz, muss man ausprobieren)

(wenn du Zeit hast, zu lesen, dann lies hier :) )

planet4.
 
da sag ich doch noch mal was.

Weiter oben hat Bine einige sehr nützliche und auch für Einsteiger hilfreiche Seiten/Links präsentiert. Davon ist aber nichts in den Code eingeflossen, d.h. Tox hat anscheinend keine Zeit zum lesen.
 
planet4 schrieb:
also, was der Validator sagt, hat ja nu mit Toxictypes Problem nicht so wirklich etwas zu tun, :)
der bemängelt ja nur die fehlenden alt-Attribute und fehlenden schließenden Tags für img und br.
Zum Vergrößern anklicken....
Das sehe ich etwas anders.
Es zeigt mir, das ungenau gearbeitet wird und einfachste Regeln nicht beachtet oder aber einfach ignoriert werden.
Dadurch lässt sich auch auf die Motivation und Lernintensität schließen.
 
SO, da issa wieder!

Ich bedanke mich noch mal für eure Hilfe.
Ich habe nun eine Menge ausprobiert und bin zu dem Schluß gekommen, dass ich weiterhin Tabellen anstatt DIVs benutzen werde. Tabellen und deren Inhalte kann man auch sehr schön mit CSS versehen. Die Positionierung von mehreren DIVs fand ich eine ziemliche Fummelarbeit. Außerdem muss man viele verschiedene Formatierungen benutzen, um es auch ja jedem Browser recht machen zu können.

Ich finde, es kommt zusätzlich darauf an, welche Art von Sites erstellt werden. Wenn viele Grafiken eingesetzt werden müssen, ist man mit Tabellen besser bedient. Bei geraden Linien, unifarbenen Hintergründen bzw. Bereichen ist CSS nicht zu toppen!

@schlau:
In einem Forum muss man sogar lesen...und schreiben...und nix sagen!

Ich streite nicht ab, dass es sehr viele DIVs geworden sind...
Wenn Du bezüglich der Positionierung von recht vielen Grafiken eine bessere Lösung hast, "sag" es...
 
Das Problem ist nicht die Umsetzung des Layouts, ob ich das viel besser hinkrieg bezweilfe ich. Einen so vertrackten Entwurf kriegst du nicht sauber mit CSS umgesetzt, deshalb muss man Krücken nehmen, Tabellen und viele Grafiken. Du hast mit CSS die Möglichkeit mit recht sparsamen HTML Code, gut leserliche, und mit geschickter Farbgebung trotzdem elegant wirkende, Seiten bauen.

Das Problem ist noch, das viele Leute die es könnten, Schwierigkeiten haben optisch was schönes zu machen und die die was Schönes machen könnten, können mit der Technik nicht umgehen.
 
CSS ist einfach genial für Leute die auf Simplicity (John Maeda) stehen. Mit wenig viel erreichen. So sollte das sein.
Wenn dann mein Rollovermenü irgendwann im ie6 läuft, ich das ganze mit Typo3 verwurschtelt habe, trau ich mich auch, den Link anzugeben :)
Aber bis dahin über fuc.ing ie6 aufregen und Attentate aushecken.

grüße
 
planet4 schrieb:
... ich behaupte mal: doch.
man muss nur die Hintergrundgrafiken richtig in die Container plazieren.
aber das Thema ist ja jetzt beendet, da Toxic alles in Tabellen sortiert.

planet4.
Zum Vergrößern anklicken....
wir reden über diesen Entwurf?
Ich hatte mir den bisher nur im FF angeschaut und jetzt noch mal im IE. Überall Linien, als Grafiken umgesetzt, die nicht gerade sind, sondern verwinkelt sind, allein sowas ist immer Frimelei, wenn man sowas flexibel machen will. Auch das Menü ist nicht besonders CSS freundlich. Aber du hast Recht wenn es um die Anordnung geht, die ist relativ unproblematisch.

Aber wenn ich sowas sehe, ich würde gar nicht erst Anfangen es zu versuchen, aber ich habe sicher einen anderen Standpunkt was Internetdesign angeht diese Auseinandersetzung gibt es, seit sich im Internet Geld verdienen läßt.

Mein Code ist an erster Stelle für die Maschine, - dem Browser - geschrieben, an zweiter Stelle muss er gut funktionieren und für den Benutzer leicht verständlich und leicht benutzbar und dann für das Auge gefällig, ich bin nicht der Meinung, dass eine Internetseite Werbung ist, sondern eher eine Art Gebrauchsgegenstand.
 
@dkdenz:
Respekt! Das sind auf jeden Fall schöne Sites.
Man sieht, dass man direkt beim Entwurf des Designs schon an CSS gedacht hat (Geradlinigkeit, Boxmodell, etc.).

Langsam ärgere ich mich, dass ich so einen Entwurf gemacht habe. Den habe ich in Photoshop erstellt ohne mir Gedanken zu CSS zu machen. Der wurde angenommen und deswegen muss ich ihn nun auch umsetzen. :(

Ich sehe es in diesem Fall so wie ein schlauer. Diese Site is nix für CSS. Alleine schon die genaue Positionierung des Menu und der darüber befindlichen Grafik (Winkel). Und das noch mit dem entsprechenden Hintergrundbild...

@planet4:
Diese Site werde ich mit Hilfe von Tabellen umsetzen. Allerdings versuche ich eine "Maintabelle" mit einem DIV in der Mitte zu halten (zwecks HG).

Meine nächsten Entwürfe werde ich näher an CSS bringen. Mir gefällt die Art und Weise mit CSS zu designen schon gut, obwohl einem noch Steine in den Weg gelegt werden. Z.B. erreichen die verschiedenen Browser keinen einheitlichen Standard!

Also einen dicken Gruß an euch! ;)
Wenn ihr weitere Anregungen oder Vorschläge habt, meldet euch!

Tox
 
Maeda's SIMPLICITY

lohnt sich wirklich, sich die 16 (-3) regeln von maeda durchzulesen. sind direkt rechts auf der seite verlinkt. hab schon mit mehreren leute zusammen gearbeitet, die dachten, sie wissen was simplicity ist. nach lesen der regeln kam dann immer ein: "ach, das ist simplicity!"
und simplicity + barrierefreiheit sind im web meiner meinung nach die angesagtesten kriterien. gibt ja auch einige nette validator-seiten.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben