Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 15 von 22
  1. #1
    Avatar von Toxictype
    Toxictype ist offline Kaiser
    registriert
    30-12-2000
    Beiträge
    1.041

    Website mit CSS

    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äää....

  2. #2
    Avatar von bine
    bine ist offline Lounge-Member
    registriert
    06-07-2002
    Ort
    Schleswig-Holstein
    Beiträge
    5.902

    AW: Website mit CSS

    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
    Geändert von bine (10-01-2007 um 16:12 Uhr)
    bine

  3. #3
    Avatar von Toxictype
    Toxictype ist offline Kaiser
    registriert
    30-12-2000
    Beiträge
    1.041

    AW: Website mit CSS

    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

  4. #4
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: Website mit CSS

    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ß!

  5. #5
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: Website mit CSS

    Und wie so oft, empfiehlt sich ein Blick hier hinein: SELFHTML: Stylesheets / CSS-basierte Layouts

  6. #6
    Avatar von Toxictype
    Toxictype ist offline Kaiser
    registriert
    30-12-2000
    Beiträge
    1.041

    AW: Website mit CSS

    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

  7. #7
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: Website mit CSS

    ich sag gar nichts mehr. Das ist eine DIV Suppe mit Tabellen und hat mit CSS nichts mehr zu tun.

  8. #8
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

  9. #9
    Avatar von planet4
    planet4 ist offline Kaiser
    registriert
    06-06-2002
    Ort
    Regensburg
    Beiträge
    1.417

    AW: Website mit CSS

    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.

  10. #10
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: Website mit CSS

    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.

  11. #11
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: Website mit CSS

    Zitat Zitat von planet4 Beitrag anzeigen
    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.
    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.

  12. #12
    Avatar von Toxictype
    Toxictype ist offline Kaiser
    registriert
    30-12-2000
    Beiträge
    1.041

    AW: Website mit CSS

    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...

  13. #13
    Avatar von planet4
    planet4 ist offline Kaiser
    registriert
    06-06-2002
    Ort
    Regensburg
    Beiträge
    1.417

    AW: Website mit CSS

    Zitat Zitat von Toxictype Beitrag anzeigen
    ...und bin zu dem Schluß gekommen, dass ich weiterhin Tabellen anstatt DIVs benutzen werde.
    *heul* was für ein schrecklicher Tag!

    [@bine, ein_schlauer,dkdenz: wir müssen doch noch bessere Überzeugungsarbeit leisten! ]

    planet4.

  14. #14
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: Website mit CSS

    Ein paar Blicke in diese Site zeigt, was man für tolle tabellenlose Seiten bauen kann.
    (Meine ist da übrigends auch dabei )
    css collection web sites without tables

  15. #15
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: Website mit CSS

    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.

Seite 1 von 2 12 LetzteLetzte

Ähnliche Themen

  1. Frames durch CSS ersetzen, aber wie?
    Von roedu im Forum CSS und (X)HTML
    Antworten: 20
    Letzter Beitrag: 17-05-2016, 08:55
  2. Bitte helfen: Liste nützlicher Tools für Web-Designer
    Von vf-design im Forum Allgemeines
    Antworten: 31
    Letzter Beitrag: 08-12-2013, 13:34
  3. css style einer bestimmten css datei ändern
    Von Wu-mc im Forum JavaScript
    Antworten: 11
    Letzter Beitrag: 15-09-2006, 12:22
  4. Antworten: 37
    Letzter Beitrag: 02-08-2004, 21:53
  5. Serverseitiges css
    Von H34d im Forum Allgemeines
    Antworten: 4
    Letzter Beitrag: 19-10-2003, 14:42

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •