[jackprince]

Hallo,
Ich muss oft feststellen das teilweise immer und immer wieder die
gleichen Probleme angegangen werden und dabei auch immer wieder
von den Helfern die gleichen bitten geäußert werden müssen.

Hier möchten wir euch einen Überblick für den (X)HTML & CSS
Bereich zu typischen Problemen und Fragen geben.
Lest bitte Aufmerksam, Ihr erhaltet Hinweise wie ihr effizienter
Fragt und wo ihr oft erbetene Informationen finden könnt.

1. Versucht vorab selbst Informationen zum Problem zu finden
   1. Typische Schlagwörter bei der Hilfe sind ...
      • howto
      • tutorial
      • div layout
        
   2. weitere Schlagwörter könnt ihr der Liste am Ende des Textes entnehmen, sie gehen immer auch direkt auf Probleme ein und zeigen typische Lösungen.
2. Welche Informationen sollte ich in in meiner Frage mitliefern?
   1. Verweis (link) zum Projekt
   2. (und/oder) Screenshot
   3. html & CSS Quelltext
   4. wie gut ist euer Kentnisstand
   5. Beschreibung der Struktur der Dateien (z.B. wie viel CSS Dateien)
   6. Welche/s Programm/e benutzt Ihr

Dabei ist die Variante mit Verweis zum Projekt zu bevorzugen.
Das erleichtert die Hilfe ungemein (da Quelltext erreichbar etc.).

Aber auch zusätzlich Screenshots sind nicht falsch.
Da die meisten die euch Helfen werden (können) so
oder so mehrere Browser haben könnt ihr euch
Screenshots der verschiedenen Browser sparen.

Wenn Screenshots dann, nutzt bitte Firefox (siehe auch Empfehlung weiter unten)

• nutzt die "WebDeveloper Toolbar"
  • "Outline"-> "Outline Block Level Elements" (oder vergleichbar)
• nutzt auch "Firebug"
  • "firebug aktivieren" (unten rechts im fenster)
  • links auf "untersuchen" (symbol)
    • geht über elemente um mehr über sie zu erfahren
    • dadurch könnt ihr oft schon selbst ersehen wo es probleme gibt.

Damit und mit anderen Optionen der Toolbar macht ihr es uns leichter
zu sehen um welchen Bereich es euch geht. Auch sind manchmal Fehler
schon allein dadurch ersichtlich das man sieht wo ein Element wirklich aufhört.

Beschreibt euer Problem eingehend und Sauber. "Coole" Formulierungen
und eine Smiley und LoL Parade helfen uns nicht und euch auch nicht.

Nehmt euch die zeit eure Frage wohl formuliert zu verfassen
... wir nehmen uns auch die Zeit sie zu beantworten.

Um einen gemeinsamen Ausgangspunkt zu haben folgende Empfehlungen.

• Nutzt Firefox, Opera, oder Safari (Konqueror) um eure Seite zu entwickeln
  • passt danach auf den IE an, so wird euch sicher schneller geholfen als andersherum
• Wenn ihr den FF benutzt installiert euch
  • Webdeveloper Toolbar und/oder
  • FireBug
• Versucht auch selbst eine Lösung zu finden, zeigt also Eigeninitiative
  • SELFHTML 8.1.2 (HTML-Dateien selbst erstellen)
  • http://www.psd-tutorials.de/modules/...-mysql-co.html
• Versucht eure Seite in so vielen Browsern wie möglich zu testen
  • ES GIBT KEINEN BROWSER DER EGAL IST
  • Besorgt euch soviel Browser (mit unterschiedlicher Renderung) wie möglich
    • Install multiple versions of IE on your PC | TredoSoft
      • IE7 Standalone ist sehr buggy
      • IE8 kann aber im "kompatibilitätsmodus" laufen
      • IE9 (ab Vista) - Feature Set findet ihr hier
    • Apple - Safari (wie Konqueror und meines Wissens 'Google Chrome'; alle 3 nutzen Webkit zum Rendern)
    • Amaya Home Page
    • Opera browser: Homepage
    • Wenn eure Seite auch auf mobilen Endgeräten gut aussehen soll könnt ihr das mit den verschiedensten Emulatoren testen

    • Android emulator
    • Blackberry emulator
    • Dot Mobi emulator
    • Firefox Mobile emulator
    • iPhone / iPad / iPod Touch emulator
    • Klondike WML emulator
    • LG emulator
    • Microsoft Devices emulator
    • Motorola emulator
    • Mozilla Fennec emulator
    • NetFront emulator
    • Nokia emulator
    • OpenWave emulator
    • Opera Mini emulator
    • Opera Mobile emulator
    • Palm emulator
    • Palm Pre / iPhone emulator
    • Samsung Java emulator
    • Samsung Platform emulator
    • Windows Mobile emulator

Im Ernst, wenn Ich Lese das jemand im IE entwickelt und sich
beschwert das es im FF dann schlecht aussieht hab ich gleich den
Eindruck das kann viel Arbeit werden und meine Motivation zu helfen
wird geschmälert.


Nun gibt es auch oft Fragen die wir so oder so ähnlich schon des öfteren beantwortet haben.

• Meine Seite sieht im Browser X/Y/Z nicht gut aus
• Element X ist verschoben
• Bild ist verschoben/nicht zu sehen etc.

Aus Erfahrung kann man einen hohen Prozentsatz der Probleme auf
wenige Ursachen zurückführen. Dazu hier eine Liste mit Verweisen zu
typischen Problemen bzw. Lösungen

• Browser Inkompatibilitäten / Layout passt nicht / Browserweiche für IE
  
  • Das Box Modell
    • SELFHTML: Stylesheets / CSS-Formate definieren / Das CSS Box-Modell
    • Internet Explorer box model bug - Wikipedia, the free encyclopedia
    • Stu Nicholls | CSSplay | The Box Model
  • IE BrowserWeiche
    • Webkrauts Conditional Comments für den Internet Explorer
• Ich möchte dynamisch Inhalt austauschen / es soll nur ein Teil neu laden
  • PHP
    • Dynamische Webseiten
    • CMS
      • Joomla - Home
      • typo3.org: TYPO3 Content Management System - Developer Resource
  • AJAX / JS (erlaubt extrem dynamische content Änderungen, Das ist Ajax -> Ajax (Programmierung) ? Wikipedia)
    • jQuery: The Write Less, Do More, JavaScript Library
    • MooTools - a compact javascript framework
    • Prototype JavaScript framework: Easy Ajax and DOM manipulation for dynamic web applications
• Layout macht generell Probleme (dynamic css layouts)
• • Wie funktioniet das mit dem Float?
    • vielleicht hilft euch damein Beitrag zu Dokumentfluss-float-clear weiter (http://www.psd-tutorials.de/modules/...ml#post1584559)
  • !! Absolut Positionieren nur in Ausnahmefällen !!
    • Cascading Style Sheets { Vollreferenz zu CSS 1 und CSS 2.1 : FLOAT }
    • Stu Nicholls | CSSplay | CSS Layouts Listing
  • !! Finger weg von Tabellen und Frames !!
    • Subotnik: Warum Frames out sind (und es schon immer waren...)
    • Dynamische Webseiten
  • Versucht eventl. ein CSS Grid
    • 960 Grid System
    • blueprintcss - Google Code
    • Deven Goratela: CSS Grid Framework
• Navigation ist nicht so wie gewünscht. (css menues)
  • Stu Nicholls | CSSplay | CSS only menus
• Footer / Fußmenü (sticky Footer)
  • CSS sticky Footer - jack prince / jackprince ~ Blog
• Gallerie (Lightbox, Slimbox, etc.)
  • Lightbox JS
  • Slimbox, the ultimate lightweight Lightbox ***** · digitalia.be
  • minishowcase v09b136

Und zum Abschluss ... bitte seid so nett und gebt bescheid
wenn euer Problem gelöst ist und/oder bedankt euch.

Das zeigt anderen das das Problem gelöst ist, also keine Lösungen mehr
erdacht werden müssen. Und es zeigt uns das ihr unsere Hilfe zu schätzen wisst.

Wenn ihr besonders freundlich seid schreibt ihr in diesen beitrag dann auch ein
paar Stichwörter wonach ihr gesucht habt (um dann eine Lösung zu finden) bzw.
kurz umrissen was das Problem war und das eine Lösung dafür in diesem Thema
zu finden ist. Dies hilft wiederum andere die die Suche benutzen eventl. schneller
eine Lösung zu finden.

MfG

jAcK
-----

Letzte Aktualisierung am 10.05.2011: Link zur den Features vom IE 9