zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Frage zum Umgang mit dem "html" - Tag

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.08.2007, 21:19
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.02.2007
Beiträge: 95
RollingStones befindet sich auf einem aufstrebenden Ast
Standard Frage zum Umgang mit dem "html" - Tag

Hoi,

hier wird ja sehr oft der Tipp gegeben, erst einmal alle browserabhängigen Abstände exlizit mit CSS auf 0 zu setzen, undzwar so:

Code:
* { margin: 0; padding: 0; }
Damit wäre dann ja auch der body und html-Tag eingeschlossen oder?
Problem dabei nur, dass ja so auch die Abstände von p-Tags entfernt sind zum Beispiel!

Sollte man den body- und html-Tag zusammen definieren, also so:

Code:
html, body {
margin:0;
padding:0;
text-align:left;
width:100%;
height:100%;
color:#000000;
font-size:0.85em;
font-family:Arial, Helvetica, sans-serif;
background-image:url(background.jpg);
}
???

Oft liest man auch davon, dass man diesen beiden Tags jeweils 100% Höhe bzw. Breite geben soll, wie oben geschehen. Stimmt das?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.08.2007, 23:26
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Diesen Reset mit dem Universal-Selektor macht man, weil die margins und paddings von Elementen wie h1, h2 ..., p, ul, li ... bei den einzelnen Browsern nicht gleichgroß voreingestellt sind. Oft wird das vergessen, und Listen sehen dann ganz anders aus, um ein Beispiel zu nennen.

Deswegen erst einmal alles auf Null setzen, danach neu aufbauen.

Richtig, margin und padding von p müssen dann erst wieder von dir auf irgendwelche Werte gesetzt werden, die du für sinnvoll erachtest.

Wenn du jetzt bloß für html, body die margins und paddings setzt, ist das Problem für p, ul usw. noch nicht gelöst.

Das mit den 100% Höhe wird erst dann interessant, wenn ein späteres Element sich auf die Höhe von html beziehen will. Ein Beispiel ist die footerStickAlt-Methode. 100% Höhe ist also methodenspezifisch.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.08.2007, 00:14
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.850
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Ich habe gelesen, dass der IE padding für ul verwendet und FF und Opera margin für ul, ein Grund mehr, wieso man margin und padding auf Null setzten sollte (kann auch sein, dass es andersherum war).
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe
Mit Zitat antworten
  #4 (permalink)  
Alt 18.08.2007, 01:10
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.874
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von RollingStones Beitrag anzeigen
Sollte man den body- und html-Tag zusammen definieren, also so:

Code:
html, body {
margin:0;
padding:0;
text-align:left;
width:100%;
height:100%;
color:#000000;
font-size:0.85em;
font-family:Arial, Helvetica, sans-serif;
background-image:url(background.jpg);
}
Nein, nach Einsatz des Universalselektors braucht html allenfalls noch height: 100%; (siehe Ingo), alles andere ist überflüssig (Hintergrundbilder sollte man html sogar gar nicht zuweisen, u.a. wegen IE 5.x), daher muß html auch meist nur im Fall von height: 100%; überhaupt im CSS auftauchen.

Für body sind width: 100%; und text-align: left; überflüssig (ersteres ist im Falle von padding/margin für body sogar kontraproduktiv).
Mit Zitat antworten
  #5 (permalink)  
Alt 19.08.2007, 00:01
Benutzerbild von pmmueller
Autor von "Little Boxes"
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Ort: Groningen (Niederlande)
Beiträge: 292
pmmueller sorgt für eine eindrucksvolle Atmosphärepmmueller sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von RollingStones Beitrag anzeigen
Code:
* { margin: 0; padding: 0; }
Der Reset ist unbedingt empfehlenswert. Hier ein Vorschlag für eine Restaurierung der wichtigsten Abstände:
Code:
/* ===================
    Abstände restaurieren */

h1, h2, h3, h4, h5, h6, 
p, blockquote, address, pre,
ul, ol, dl, table {
   margin-bottom: 1em;
}

/* Optional */ 
h1, h2, h3, h4, h5, h6 { padding-top: 1em; }

/* Zitate einrücken */
blockquote { margin: 1em 2em; }

/* Auswahl in Auswahllisten (select) durch padding:0 schlecht lesbar */
option { padding-left: 0.2em; padding-right: 0.3em; }

/* Alle Listen etwas einrücken */
ul, ol, dl { margin-left: 1em; }

/* Listenelemente etwas mehr einrücken */
li { margin-left: 1em; }

/* Definitionen in Definitionslisten noch mehr einrücken */
dd { margin-left: 2em; }

/* Verschachtelte Listen ohne Außenabstand oben/unten */
ul ul, ul ol, ul dl,
ol ul, ol ol, ol dl,
dl ul, dl ol, dl dl {
   margin-top: 0;
   margin-bottom: 0;
}
Irgendwas wichtiges vergessen?

Grüße aus Groningen
Peter
__________________
HTML & CSS lernen: »Einstieg in CSS« + »Flexible Boxes« | CMS lernen: »Websites erstellen mit Contao«
Mit Zitat antworten
  #6 (permalink)  
Alt 19.08.2007, 00:33
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Ich würde nicht unbedingt davon ausgehen, das das Universelle Reset noch Konsens ist. Dein Vorschlag des Universellen Reset plus Restaurierung ist für mich nicht einfacher zu verwenden als das Differenzierte Reset von Meyer. Und das bei Meyer bis zum Abwinken durchgesprochene Forms-Problem ist beim Universellen Reset so oder so betroffen (auch wenn nicht jeder glaubt, es gebe überhaupt ein Forms-Problem). Der dritte Weg, alles so zu lassen, wie es ist, um nur dann einzugreifen, wenn es stört, ist ein erprobter Weg. Wenn er auch Beginner oft in die Irre führt: Das heißt nicht, dass er schlecht wäre oder dass Beginner nichts daran lernen würden.

Persönlich tendiere ich dazu, das Differenzierte Reset zu predigen und selbst aber alles so zu lassen. Ich finde diese reset.css zu aufgeblasen. Ein paar von diesen Dingern, und schon kann man sich framework nennen.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #7 (permalink)  
Alt 19.08.2007, 02:34
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.874
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von IChao Beitrag anzeigen
Der dritte Weg, alles so zu lassen, wie es ist, um nur dann einzugreifen, wenn es stört, ist ein erprobter Weg.
Aber nur für sehr erfahrene CSSler geeignet, und selbst die können nicht ausschließen, daß mal bei einem Besucher mit irgendeiner obskuren Browser-Version (mit eigenartigen defaults) ein Teil der betreffenden Seite zerhauen wird (aber genau deswegen rätst Du ja sicher auch zum Differenzierten Reset und nicht zum alles-lassen-wie-es-ist).

Ich finde das Deklarieren individueller Werte für die einzelnen Elemente allerdings nicht übermäßig aufgeblasen, denn ohne Globalen oder Differenzierten Reset sind unterm Strich wahrscheinlich ungefähr genauso oft einzelne Werte auf Null zu setzen, wie man mit Reset zu restaurieren hat.
Mit Zitat antworten
  #8 (permalink)  
Alt 19.08.2007, 10:41
Benutzerbild von pmmueller
Autor von "Little Boxes"
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Ort: Groningen (Niederlande)
Beiträge: 292
pmmueller sorgt für eine eindrucksvolle Atmosphärepmmueller sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von IChao Beitrag anzeigen
Dein Vorschlag des Universellen Reset plus Restaurierung ist für mich nicht einfacher zu verwenden als das Differenzierte Reset von Meyer.
Für dich ist "Universell plus Restaurierung" nicht einfacher als "Differenziert ala Eric Meyer". Das glaube ich dir aufs Wort, aber du bist auch ein "sehr erfahrener CSSler"

Zitat:
Zitat von IChao Beitrag anzeigen
Der dritte Weg, alles so zu lassen, wie es ist, um nur dann einzugreifen, wenn es stört, ist ein erprobter Weg. Wenn er auch Beginner oft in die Irre führt: Das heißt nicht, dass er schlecht wäre oder dass Beginner nichts daran lernen würden.
Da stimme ich Heiko zu, das ist eher was für "erfahrene CSSler". Für Einsteiger finde ich ein reset.css effektiver. Man schreibt es einmal, bindet das immer wieder ein und muss sich um einen Großteil der Abstände keine Sorgen mehr machen.

Zitat:
Zitat von IChao Beitrag anzeigen
Ich finde diese reset.css zu aufgeblasen.
Universell plus Restaurierung wie oben beschrieben benötigt ungefähr gut 30 Zeilen. Differenzierter Reset ala Meyer hat über 40 nur für den Reset, OHNE Restaurierung.

Zitat:
Zitat von IChao Beitrag anzeigen
Ein paar von diesen Dingern, und schon kann man sich framework nennen.
Grins. Ich nenne das immer Fundament, weil man darauf bauen kann. Aber Framework klingt natürlich viel besser

Ciao
Peter
__________________
HTML & CSS lernen: »Einstieg in CSS« + »Flexible Boxes« | CMS lernen: »Websites erstellen mit Contao«
Mit Zitat antworten
  #9 (permalink)  
Alt 19.08.2007, 20:09
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Der Begriff "Differenziertes Reset" wird von mir hier eingeführt und meint Eric Meyers Reset sowie Yahoos Reset. Mit "Restauration" meine ich das hier im Thread vorgestellte Wiederherstellen nach Universellem Reset, und mit Universellem Reset meine ich

Code:
* {margin: 0; padding: 0}
Das Differenzierte Reset hat eine Grundannahme. Diese besagt, dass der Universelle Reset auch in Bereiche hineingreift, für die margin und padding nicht definiert sind: forms. Theoretisch kann dadurch etwas verändert werden, was man besser nicht getan hätte. Daher umgeht das Differenzierte Reset das universelle Nullen und greift per Element ein.

Ein Beispiel für das Problem des Universellen Reset ist die Select-Box mit size=1. Firefox schneidet nach dem Reset den letzten Buchstaben rechts unvorteilhaft der Länge nach durch, und fängt links zu knapp an. Mit padding: 0 0.5em 0 0.25em; sicher kein großes Problem.

Der Radio-Button sinkt im Firefox im Gegensatz zur Checkbox nicht auf die Grundlinie. Naja, auch kein wirkliches Problem.

Im Firefox wird der Submit- und der Reset-Button nur leicht, im Opera sehr stark abgeschnitten. Um das Problem im Opera mit Padding wieder zu beheben, riskiert man im IE7, dass der Button doch unschön breit wird. Und nu? Safari zeigt sich von all dem recht unbeeindruckt. Die Buttons sind schlank, kaum annähernd so breit wie im IE7 nach Padding-Kompensation für den Opera.

Die Restauration steht vor dem Problem, all diese form-Elemente, die vorher hübsch aussahen, wieder so hübsch hinzukriegen -- und zwar in allen OS, in allen Browsern. Das würde nur dann einfach sein, wenn alle Browser entweder das Stylen von form-Elementen erlauben oder untersagen würden. So, mit diesem Teils-Teils, ist das schwierig.

Weil es nicht definiert ist, wie form-Elemente darauf reagieren, kann man auch nicht wissen, was die nächste Serie an Browserversionen dazu sagt. Und das ist das eigentliche Problem. Deshalb, so die Begründung des Differenzierten Reset, sollte man besser nicht in Bereiche hineinresetten, die nicht definiert sind. Genau dies tut der Universelle Reset und damit auch die Restauration.

Inwieweit diese theoretischen und lediglich auf einem schnellen Testcase basierenden Überlegungen auf ein "real-world"-Projekt in der Wildnis zutreffen, kann ich nicht sagen. Sicher gibt es da noch viel zu testen bei den Form-Elementen. Mir ist auch im Moment unklar, was das für eine "best practice"-Aussage bedeutet. Es bleibt schwierig.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

	<title>Reset</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="author" content="Ingo Chao" />
<style type="text/css">
/*<![CDATA[*/

body {background: pink;}

* {margin: 0; padding:0;} /* universelles Reset */

/* eine moegliche Restauration fuer Firefox und Opera */
/*
option {padding: 0 0.5em 0 0.25em;}
input[type="submit"], 
input[type="reset"] {padding: 0 1em;}
*/

/*]]>*/
</style>
</head>

<body>
	<form action="">
		<fieldset>
			<legend>Legend</legend> 
			
			<input id="ip1" name="text" size="20" value="Default text." /> 
			
			<textarea id="ip2" name="textarea" rows="3" cols="20">Default text.</textarea>
			
			<input id="r1" type="radio" name="radio" value="1" />
			<input id="r2" type="radio" name="radio" value="2" checked="checked" /> 

			<input id="c1" type="checkbox" name="checkbox" />
			<input id="c2" type="checkbox" name="checkbox" checked="checked" /> 
			
			<select id="s1" name="sel1" size="1">
				<option>
					eins
				</option>

				<option selected="selected">
					zwei (default)
				</option>

				<option>
					drei
				</option>
			</select> 
			
			<select id="s2" name="sel2" size="3">
				<option>
					eins
				</option>

				<option selected="selected">
					zwei (default)
				</option>

				<option>
					drei
				</option>
			</select> 
			
			<input id="bla" type="submit" name="submit" value="Submit" /> 
			
			<input id="blub" type="reset" name="reset" value="Reset" />
			
		</fieldset>
	</form>
</body>
</html>
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken

Geändert von IChao (19.08.2007 um 20:18 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 19.08.2007, 20:48
Benutzerbild von pmmueller
Autor von "Little Boxes"
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Ort: Groningen (Niederlande)
Beiträge: 292
pmmueller sorgt für eine eindrucksvolle Atmosphärepmmueller sorgt für eine eindrucksvolle Atmosphäre
Standard

Hallo Ingo,

erstmal vielen Dank für deinen ausführlichen Beitrag und auch für den Testcase. Was die Begrifflichkeiten "Universell", "Differenziert" und "Restauration" angeht, hatte ich dich richtig verstanden, und ich stimme völlig mit dir überein.

Der "Universal Reset" greift in die Abstände der Formelemente an, und das ist auch der Schwachpunkt. Bei der Gestaltung von Formularen "predige" ich auch Zurückhaltung im Sinne von "möglichst nicht gestalten, klappt sowieso nicht". Formal weirdness halt.

Zitat:
Zitat von IChao Beitrag anzeigen
Mir ist auch im Moment unklar, was das für eine "best practice"-Aussage bedeutet. Es bleibt schwierig.
Eine allgemeingültige Aussage ist denke ich nicht möglich, aber die Tendenz dürfte sein "Je intensiver Formulare eingesetzt werden, desto potentiell gefährlicher ist der universelle Reset".

Auf einer privaten Homepage mit einem einfachen Kontaktformular dürfte das nicht sonderlich problematisch sein, auf einer Site mit komplexen Bestell- und sonstigen Formularen könnte da schneller was in die Hose gehen.

Thanx again
Peter

P.S.
Vielleicht zur Erläuterung:
Ich bin Dozent/Autor und erst in zweiter Linie "Weber". Meine Entscheidungen gehen deshalb oft von einer Situation aus, in der ich (wie auch bei "Little Boxes") zu Gunsten der Verständlichkeit auf einige Details verzichte(n muss). Das ist natürlich eine Gratwanderung und die Kunst besteht darin, die richtigen Dinge wegzulassen ...

Aber dein Beitrag hat auf jeden Fall bewirkt, dass der universelle Reset nicht mehr ohne einen Hinweis auf potentielle Formularprobleme aus dem Haus geht
__________________
HTML & CSS lernen: »Einstieg in CSS« + »Flexible Boxes« | CMS lernen: »Websites erstellen mit Contao«

Geändert von pmmueller (19.08.2007 um 21:59 Uhr) Grund: Tipfpehler ;-)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

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

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Frage zu position:fixed und dem IE human CSS 4 31.01.2007 22:13
Zeilenüberlappung bei margin-top mit negativem Wert c.weber.os CSS 15 15.10.2005 15:11
Browserneurose SimonWpt CSS 39 15.07.2005 10:51
Wichtige Frage zu DIV-Containern und dem CLEAR Befehl groovyfunky (X)HTML 120 24.04.2005 12:36
Scrollbares Textfeld mit purem CSS Dancer CSS 6 24.01.2005 15:58


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:20 Uhr.