Zur Boardunity Forenstartseite
  #1  
Alt 28.07.2006, 18:30
Benutzerbild von MrNase
Mitglied
 
Registriert seit: 06.2003
Ort: /
Beiträge: 2.628

gewisse Standards in HTML und CSS


Mich quält seit ein paar Tagen die Frage ob es gewisse einheitliche Standards gibt an die ihr euch haltet wenn ihr etwas in HTML und CSS umsetzt oder ob ihr da eher individuelle Lösungen anstrebt.

Ich ertappe mich dabei viele Seiten nach dem gleichen Muster aufzubauen. Da wäre ein Layer der alles umfasst (oftmals #seite) und dann die weiteren Layer für die Navigation, den Inhalt, den Fussbereich.

Die Überschrift der Seite (h1) befindet sich dann oftmals innerhalb von #seite aber über den anderen Layern usw.


Was CSS angeht habe ich mir auch ein paar Dinge angewöhnt. Bis vor einiger Zeit konnte man oftmals folgendes finden:
Code:
body {
font-size: small;
}
h1 {
font-size: 110%;
}
Das hatte den grossen Vorteil, dass man die Schriftgrössen mit nur einer Änderung global anpassen kann. Leider interpretiert der IE dieses 'small' anders als andere Browser.

Für ein aktuelles Projekt habe ich nun diese Weise geändert:
Code:
body {
font-size: 62.5%;
}
h1 {
font-size: 1.1em;
}
1.1em entspricht dabei ziemlich genau 11 Pixeln (0.1em = 1px). Diese Methode hat den grossen Vorteil, dass man die Grösse stufenlos über den Browser anpassen kann.. Nur der IE (zumindest Version 7) hat damit Probleme.. Da sind die Abstände und Grössen doppelt bis 4x so gross.


Ein paar weitere Dinge gehen mit einer behindertengerechten Optimierung ein, so wird relativ weit oben ein, mit CSS versteckter. Link zum überspringen der Navigation eingeblendet und all solche Kleinigkeiten.


Also, schiesst los! Welche Dinge macht ihr genauso, welche Dinge verwendet ihr immer wieder in euren Projekten.
  #2  
Alt 28.07.2006, 20:10
Benutzerbild von Scotty
Supergockel
 
Registriert seit: 12.2001
Ort: 16816 Neuruppin
Beiträge: 707
Hmm, ich weiß nicht, hab mir noch keine großen Gedanken darüber gemacht, erst recht nicht ob da irgendetwas Behinderten gerecht ist, letzteres ist ja eh nicht meine Zielgruppe *hust und duck*.

Die Schriftartengröße definiere ich meist in "px" oder eben "pt".

__________________
Enrico Hahn
Scotty's .NET Projekte: StarTrek Infos X10b, e-hahn Updater 3.20, Easy Desktop Note 1.10
  #3  
Alt 29.07.2006, 16:39
Mitglied
 
Registriert seit: 06.2003
Beiträge: 510
eigentlich definiere ich alles in px ob das jetzt so gut ist sei dahingestellt irgendwie hat alles nach und vorteile...
zb bei pt der hat 1/72 inch / zoll ist also genau soviel wie ein pixel aufn mac entspricht ... im gegensatz dazu ist px aufm pc 1/96 zoll und aufn mac 1/72 zoll

am ende schaut das auch nicht immer gut aus ..

naja ansonsten hat natürlich jeder seinen eigenen stil bei html oder css der sich durch seine seiten zieht

seit neuerstens hab ich mir eine neue schreibweise für die namen angewohnt nämlich das erste wort klein und die nachfolgenden groß zu schreiben liegt wohl an actionscript..

  #4  
Alt 29.07.2006, 19:02
Benutzerbild von LonelyPixel
UNB-Entwickler
 
Registriert seit: 01.2004
Ort: Erlangen
Beiträge: 970
Von Schriftgrößen in pt bin ich mittlerweile ganz abgekommen, nachdem unsere Linux-Kisten in der Uni damit durchweg Probleme haben (sonst hab ich noch nirgendwo einen anderen Rechner gefunden, der das nicht kann, kein PC und kein Mac). Ansonsten hab ich in neueren Designs hauptsächlich mit em gearbeitet, als oberste Ebene allerdings eine px-Schriftgröße festgelegt, da jeder Browser eine andere Schriftgröße mitbringt. (Die 16px, mit denen der Firefox ausgeliefert wird, sind bei style-losen Seiten bestenfalls für meine Oma geeignet, ich bevorzuge eher 12-13px, wonach viele nur-em-Webseiten leider unlesbar klein werden, weil die generell mal mit 0.7em anfangen… Da hält man den Fix-Programmierern vor, die freie Konfiguration des Browsers zu ignorieren, und wenn man seinen Browser dann mal frei anpasst, so wie es vorgesehen ist, sehen die Webseiten wieder dumm aus! Schlimm sowas.)

Ansonsten orientiere ich mich bei neuen Webseiten oft an den vorangegangenen, was PHP-Funktionssammlungen und CSS-Layouts angeht. Also das übliche mit BeginPage(), EndPage(), Browser- und XHTML-Erkennung usw.

__________________
Yves Goergen
Softwareentwicklung, Fotografie, Webhosting, UNB Components (in Arbeit)
  #5  
Alt 29.07.2006, 23:21
Benutzerbild von MrNase
Mitglied
 
Registriert seit: 06.2003
Ort: /
Beiträge: 2.628
Die Schriftgrössen regen mich auch gerade massivst auf.. Ich habe nun alles auf em umgestellt und musste feststellen, dass der IE7 diese vollkommen anders interpretiert und die Abstände und Schriftgrössen alle durch die Bank +150% sind.

Ich habe nun mal versucht statt 62.5% einen Pixelwert zu nehmen und werde es weiter testen. In meinem Fall entspricht 62.5% ziemlich genau 9px aber auch wenn es damit geht ist es nur eine Flickschusterei.

Ich bin ja schon Stolz auf mich, dass ich mit der alten Tradition gebrochen habe und mal etwas neues ausprobiert habe aber jegliche Kreativität wird von fehlerhaft interpretierenden Browsern eingedämmt. Wenn ich es morgen wieder unter verschiedenen Systemen teste bekomme ich sicherlich wieder das kalte Grausen.

Oder aber ich stelle alles wieder auf px um.. Firefox verkleinert die Abstände dann trotzdem wie bisher und ein Pixel ist ein Pixel.

  #6  
Alt 30.07.2006, 07:42
Benutzerbild von LonelyPixel
UNB-Entwickler
 
Registriert seit: 01.2004
Ort: Erlangen
Beiträge: 970
Dass bei dir im IE alles anders aussieht, könnte tatsächlich an einer anderen Browserkonfiguration liegen. Wenn du dich von der abhängig machst, sieht es allerdings auf jedem Browser anders aus, auch auf anderen Firefoxen und was es sonst noch gibt. Genau deshalb sind bei mir body, p, td, li, input und select generell 13px groß, alle weiteren Schriftgrößen sind dann in em davon abgeleitet. 0.85em passt z.B. recht gut für <small>-Text. Um alle Texte gleichmäßig zu vergrößern, brauche ich nur an dieser einen Zeile ganz oben zu drehen. Naja, und em ist ja nichts anderes als %: 1em = 100%, lineare Skala.

Was an den em-Angaben auch praktisch ist: Sie richten sich nach dem Text-Zoom in Firefox. Wenn ich meinen Text um 2 Stufen vergrößere, um ihn z.B. im Vollbild aus größerer Entfernung zu lesen, passen sich ebenfalls alle Abstände und Linienbreiten mit an, sofern die in em definiert sind. Nur mit Bildern funktioniert das nicht, erste Versuche mit SVG sind mir noch nicht geglückt, hatten zwischendurch aber mal gute Ergebnisse produziert. Solange man SVG-Bilder noch nicht als <img> einfügen kann, wird die auch niemand verwenden.

Wer sich's mal anschauen mag: unclassified beta (Achtung, CSS wird browserspezifisch ausgeliefert, sollte zum Experimentieren im Browser dennoch gut geeignet sein)

PS: Hey, wieso zeigt der den Titel der Webseite an, wenn ich nur die URL ohne Link-Tags angebe?

__________________
Yves Goergen
Softwareentwicklung, Fotografie, Webhosting, UNB Components (in Arbeit)
  #7  
Alt 01.08.2006, 00:50
Benutzerbild von TRS
TRS TRS ist offline
Mitglied
 
Registriert seit: 02.2003
Ort: Berlin
Beiträge: 993
Probiere einmal sämtliche Elemente zu vereinheitlichen durch:

* {
font-size: 1em;
margin: 0;
padding: 0;
}

Danach muss du zwar für jedes Element die entsprechende Werte neu bestimmten, aber das könnte helfen. Ansonsten solltest du noch nicht zu viel Zeit für IE 7 verwenden - das dauert doch besitmmt noch etwas

  #8  
Alt 01.08.2006, 01:03
Benutzerbild von codethief
Visionär
 
Registriert seit: 09.2003
Beiträge: 803
@Reimer: Schöne Idee, danke.

Ich hab mir inzwischen angewöhnt Elemente, die in eineinander verschachtelt sind, auch in der CSS Struktur verschachtelt abzubilden:

Code:
<div id="wrapper">
    <div id="header">...</div>
    <div id="navigation">...</div>
    <div id="contentwrapper">
        <div id="introduction"></div>
        <div id="content"></div>
    </div>
</div>
Code:
#wrapper { }
    #header { }
    #navigation { }
    #contentwrapper { }
        #introduction { }
        #content { }

  #9  
Alt 01.08.2006, 09:31
Benutzerbild von LonelyPixel
UNB-Entwickler
 
Registriert seit: 01.2004
Ort: Erlangen
Beiträge: 970
Zitat:
Zitat von TRS
* {
font-size: 1em;
margin: 0;
padding: 0;
}
Was soll das bewirken? Hab's nicht ausprobiert, aber kann mir nicht vorstellen, dass das plötzlich unabhängig von der im Browser gewählten Schriftgröße sein soll, und genau das ist ja das Problem, weil da jeder was anderes drin stehen hat, oft ohne das eigentlich zu wollen.

__________________
Yves Goergen
Softwareentwicklung, Fotografie, Webhosting, UNB Components (in Arbeit)
  #10  
Alt 01.08.2006, 19:27
Benutzerbild von TRS
TRS TRS ist offline
Mitglied
 
Registriert seit: 02.2003
Ort: Berlin
Beiträge: 993
Zitat:
Zitat von LonelyPixel
Was soll das bewirken? Hab's nicht ausprobiert, aber kann mir nicht vorstellen, dass das plötzlich unabhängig von der im Browser gewählten Schriftgröße sein soll, und genau das ist ja das Problem, weil da jeder was anderes drin stehen hat, oft ohne das eigentlich zu wollen.
Im Moment ist nach wie vor das Problem, dass der Internet Explorer im Gegensatz zu fast allen Browsern Schriftgrößen anders interpretiert, wenn diese über small etc. definiert sind. Um dieses Problem zu umgehen, müssen die Schriftgrößen in Pixel definiert sein. Dies führt jedoch dazu, dass die Schriftgröße nicht durch den Nutzer bestimmt werden kann und genau dies will man den Nutzern heute ermöglichen.

Die genannte Lösung sorgt legentlich dazu, dass sämtliche Element unabhängig von der Verschachtelung in relativer Größe zum Mutterelement (und dies führt uns dann zum Body) dargestellt wird. Wenn sämtliche Abstände, Lägen und Schriftgrößen relativ angegeben sind, so kann der Nutzer in das Layout hinein- und hinauszoomen.

  #11  
Alt 02.08.2006, 15:25
Benutzerbild von LonelyPixel
UNB-Entwickler
 
Registriert seit: 01.2004
Ort: Erlangen
Beiträge: 970
Naja, es wäre schon sinnvoll, dem Benutzer über seine Browserkonfiguration die grobe Anpassung der Schriftgröße aller Webseiten zu ermöglichen, aber solange die Browser mit viel zu großen Schriftgrößen ausgeliefert werden, ist das wenig sinnvoll, da sich einige Benutzer diese Größe an ein sinnvolles Maß anpassen, um akzeptable Ergebnisse zu erzielen. Alle anderen, die sich um diese Konfiguration nicht kümmern wollen oder können, regen sich dann halt nur noch drüber auf, dass alles viel zu groß ist. Nette Idee, schlechte Umsetzung, wie immer.

Ich hatte übrigens keine Probleme mit einem „small {font-size: 0.85em;}“ in meinem CSS, das sah überall ausreichend ähnlich aus.

__________________
Yves Goergen
Softwareentwicklung, Fotografie, Webhosting, UNB Components (in Arbeit)
  #12  
Alt 03.08.2006, 09:26
Benutzerbild von TRS
TRS TRS ist offline
Mitglied
 
Registriert seit: 02.2003
Ort: Berlin
Beiträge: 993
Opera und Firefox zoomen zusätzlich in die Website anstatt nur die Schrift entsprechen zu vergrößern oder verkleinern. Dies ist ein weiterer Wendepunkt bei dieser Geschichte, welcher berücksichtigt werden sollte.

  #13  
Alt 03.08.2006, 09:37
Benutzerbild von LonelyPixel
UNB-Entwickler
 
Registriert seit: 01.2004
Ort: Erlangen
Beiträge: 970
Opera und IE7 haben einen echten Zoom (iirc), aber Firefox? Nicht bei mir. Da ändert sich nur die Schriftgröße und alles, was in em definiert ist. Bilder und andere px-Angaben bleiben davon unberührt. (Jedenfalls in Firefox 1.5.)

__________________
Yves Goergen
Softwareentwicklung, Fotografie, Webhosting, UNB Components (in Arbeit)
  #14  
Alt 07.08.2006, 16:46
Benutzerbild von Scotty
Supergockel
 
Registriert seit: 12.2001
Ort: 16816 Neuruppin
Beiträge: 707
Hab mich die tage arg viel mit CSS beschäftigt und bin gerade dabei meinen Standard hier zu finden . Hab am Wochenende meine HP nach langer zeit mal neu gestaltet und habe mich da von altertümlichen Tabellenlayout verabschiedet .

War gar nicht so einfach, der Strohalm hat hier sehr geholfen, da haben wir ja recht ausführlich über das für und wieder diskutiert .

__________________
Enrico Hahn
Scotty's .NET Projekte: StarTrek Infos X10b, e-hahn Updater 3.20, Easy Desktop Note 1.10
Antwort


Stichworte
-

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.
Gehe zu

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
[html]-Tag aktivieren? StGaensler Informationen, Anregungen und Kritik 4 18.03.2006 22:35
html in php wandeln eBoy Programmierung und Datenbanken 16 30.03.2005 15:52
[html] MrNase Informationen, Anregungen und Kritik 10 27.03.2004 10:27
(x) html valid Björn Forensoftware 19 15.12.2003 22:03






1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24