Website

[burbot]

Ich war mir nicht ganz sicher, ob ich dieses Thema nicht lieber unter Websitecheck erstellen hätte sollen, habe es aber hier gepostet, weil die Website nur ein nebenbei erstelltes Projekt ist.

Der Link lautet wie folgt:
Template--burbot

 

[Efchen]

Und? Wir sollen es testen?

- Doctype, der den IE in den Quirks Mode setzt.
- charset fehlt
- Falsche Auszeichnung (Semantik) für div.header
- Fehlendes alt-Attribut in <img>
- Keine Trennung von Inhalt und Layout
- Nutzung veralteter Attribute für die physische Inhaltsauszeichnung
- Falsche Auszeichnung (Semantik) des Menüs
- Überflüssige <div>, die nur ein Element enthalten
- Nutzung von <br> zur physischen Inhaltsauszeichnung
- XHTML-Schreibweise trotz HTML 4.01 Doctype
- Falsche Reihenfolge der Überschriften

 

[Gilles]

- Falsche Reihenfolge der Überschriften

Macht der Fefox das automatisch mit den Überschriften? Denn ich seh da h1. Und das wäre meines erachtens nach richtig,

 

[Efchen]

Das schon. Aber er hat ja ein Banner, von dem ich ausgehe, dass da noch Inhalt reinkommt, und das wird dann <h1> :-)

 

[burbot]

Und? Wir sollen es testen?

Ja, dass hatte ich vergessen :)
Also, nun mal der Reihe nach..

- Doctype, der den IE in den Quirks Mode setzt.

Das heißt was??

- Falsche Auszeichnung (Semantik) für div.header

Warum ist die Auszeichnung falsch?

- Keine Trennung von Inhalt und Layout

Wie ist das gemeint? Der Inhalt ist sehr wohl vom Layout getrennt.

- Nutzung veralteter Attribute für die physische Inhaltsauszeichnung
- Nutzung von <br> zur physischen Inhaltsauszeichnung
- Falsche Auszeichnung (Semantik) des Menüs

Physische Inhaltsauszeichnung? (körperliche Inhaltsauszeichnung?)

- XHTML-Schreibweise trotz HTML 4.01 Doctype

Was ist nun der Unterschied zwischen XHTML und HTML?
Okay, ich google es und schau mir HTML gleich noch mal genau an!

 

[Efchen]

1. Doctype:
Google ist Dein Freund. Warum muss ich immer alles nochmal tippen, was Google Dir auch sagen kann? "doctype quirks mode"
Im Quirks Mode hält sich der IE nicht an die Standards des W3C, sondern an das, was Micro$oft zum Standard machen möchte. Damit hast D Darstellungsunterschiede eingekauft. Nur, wenn alle Browser die Seite im Standard Mode anzeigen, kannst Du Darstellungsproblemen aus dem Weg gehen.
DTD – Document Type Declaration – Das richtige Doctype « LANtastic's Artikel
Auf Seite 3 gibts eine Übersicht aller Doctypes und welche Browser in welchen Modus geschickt werden.

2. div.header
a) <div> ist zum Gruppieren mehrerer Elemente. Du hast aber nur eines. Also ist <div> deswegen schonmal falsch.
b) Das soll sicher eine Überschrift werden? Deswegen hast Du ja auch <img> verwendet. Das heißt, Dein Image enthält Content. Wenn es nur Zierde ist, muss es als background-image eingebunden werden. Dann macht ein leeres <div> evtl. Sinn. Aber wenn die Grafik Content enthält, als <img> einbinden und als Überschrift (denn das ist ja die Bedeutung von "header") auszeichnen, also <h1>.

3. Trennung von Inhalt und Layout
Dazu gehört die strikte Trennung von Semantik und Aussehen. In Deinem Code gibts aber <br> zur physichen Inhaltsauszeichnung und sowas wie "align=center". Das hat in HTML nichts verloren und gehört alles in ein externes Stylesheet. Trennung von Inhalt und Layout eben.

4. Physische Inhaltsauszeichnung
Steht u.a. bei SelfHTML erklärt. Es gibt die logische und die physische Inhaltsauszeichnung. HTML ist eigentlich nur für die logische Inhaltsauszeichnung (= Semantik) gedacht. HTML hat nichts mit dem Aussehen bzw. der Darstellung im Browser zu tun. Physische Inhaltsauszeichnung ist aber Darstellung: <b>, <i>, <br> zur Erzeugung von Abständen und entsprechende Attribute wie "align". Diese wurden in HTML eingefügt, weil es kein CSS gab und man irgendwie das Aussehen beeinflussen wollte. Nun gibt es aber CSS seit 10 Jahren und physische Inhaltsauszeichnung wird nicht mehr mit HTML gemacht (war ja auch nie so gedacht).

 

[Silar]

Zum Design allgemein:
Mit dem Laptop, den ich gerade benutze, wird nicht alles angezeigt, auch nicht der Button rechts. Das heisst ich müsste die horizontale Scrollleiste benutzen, um den zu sehen. Am besten so viel wie möglich relativ lassen, sodass auch niedrigere Auflösungen keine Probleme haben, deine Site darzustellen.

 

[Efchen]

Am besten so viel wie möglich relativ lassen, sodass auch niedrigere Auflösungen keine Probleme haben, deine Site darzustellen.

Was hat das mit der Auflösung zu tun?

Wie kann ich in CSS auf die Auflösung reflektieren?

 

[Silar]

Was hat das mit der Auflösung zu tun?

Wie kann ich in CSS auf die Auflösung reflektieren?

Nun, wenn ich alle Elemente absolut positioniere, muss ich damit rechnen, dass ein Nutzer mit niedriger Auflösung die Site manuell verkleinern muss, um alles sehen zu können, und ohne den Scrollbalken die ganze Zeit betätigen zu müssen.

 

[Efchen]

Quatsch.

Vielleicht solltest Du Dich mal mit der grafischen Oberfläche Deines Betriebssystems auseinander setzen. Dann würdest Du lernen, dass man Fenster nicht maximiert haben muss! :-)

Außerdem hast Du selbst bei maximiertem Browserfenster niemals die volle Größe Platz für Deine Website. Denn das Fenster hat Rahmen, Menüs, Toolbars und Sidebars.

Es ist problemlos möglich, dass jemand mit einer Auflösung von 1900x1200 weniger Platz für die Anzeige einer Website hat, als jemand mit einer Auflösung von 800x600!

Es ist für das Schreiben von Websites einfach wichtig, zu kapieren, dass die Auflösung völlig irrelevant ist! Deswegen kennt CSS diese ja auch gar nicht! Solange man glaubt, die Auflösung habe irgendeine Relevanz, kann man keine anständigen Layouts entwerfen.

Kapiert? :-)
Das ist keine Haarspalterei, das ist enorm wichtig, das zu verstehen!
Und dass es Leute gibt, die das wirklich nicht verstanden haben und nicht nur zu der Gruppe gehören, die sagen "Ja, das meinte ich ja", sieht man daran, dass es tatsächlich sowas sinnloses wie Auflösungsweichen gibt! Da wird dann jemand mit 1900x1200er Auflösung und einem Fenster der Größe 800x600 tatsächlich auf eine viel zu große Website weitergeleitet, anstatt auf die 800x600er Version, wie es sein müsste.

KLARO?

 

[Silar]

Ich glaube wir reden aneinander vorbei.

Angenommen ein div ist 900*900px gross, und absolut positioniert, wird das div bei einem Laptop mit kleinerer Auflösung nicht skaliert, als wenn das div nicht absolut positioniert wurde, und sich dann der Bildschirmgröße anpasst.

z.B

div#abc {
height: 900px;
width: 900px;
}

Anstatt:

div#abc {
top: 10px;
left: 20px;
position: absolute;
height: 900px;
width: 900px;
}

 

[Efchen]

Ich glaube wir reden aneinander vorbei.

Nein, wenn Du mich in meinem letzten Posting nicht verstanden hast, dann glaube ich, dass Dus wirklich nicht verstanden hast.

Angenommen ein div ist 900*900px gross, und absolut positioniert, wird das div bei einem Laptop mit kleinerer Auflösung nicht skaliert, als wenn das div nicht absolut positioniert wurde, und sich dann der Bildschirmgröße anpasst.

In Deinem Beispielcode wird gar nichts skaliert, beide Elemente sind gleich groß, nämlich 900x900. Das eine beginnt im Viewport oben links bei (0,0), das andere bei (20,10).
Wenn Dein Viewport 900x900px groß ist, bekommst Du beim ersten keine Scrollbalken, beim zweiten schon.

Aber mit der Auflösung hat das nichts zu tun.

Beispiel 1 ohne Positionierung bekommt bei Auflösung 800x600 auf jeden Fall Scrollbalken. Aber auch bei 1900x1200px Auflösung gibt es Scrollbalken, wenn der Viewport kleiner als 900x900 ist.
Beispiel 2 mit Positionierung bekommt bei Auflösung 800x600 auch auf jeden Fall Scrollbalken. Aber auch bei 1900x1200px Auflösung gibt es Scrollbalken, wenn der Viewport kleiner als 920x910 ist.

Was hat das jetzt mit der Auflösung zu tun?
Und wie kann ich mit CSS die Auflösung bestimmen oder darauf reflektieren?

P.S.: Ein Block-Element passt sich nie der Bildschirmgröße an!

 

[Silar]

Mit ging es darum, dass das div sich anders verhält, wenn es absolut ist oder nicht, nicht die Bildschirmauflösung, die da irrelevant ist. Hätte er den Header-bereich relati positioniert, so wäre der Button auch noch auf die Seite gekommen, ohne horizontal scrollen zu müssen.

 

[Efchen]

Du hast geschrieben:

Am besten so viel wie möglich relativ lassen, sodass auch niedrigere Auflösungen keine Probleme haben, deine Site darzustellen.

Und ich habe darauf geangtwortet, dass die Auflösung für das Erstellen von Websites irrelevant ist und man das auch daran gut erkennen kann, dass CSS die Auflösung nicht berücksichtigt, sich keine Elemente an der Auflösung oder Bildschirmgröße orientieren.

Du schriebst außerdem:

...wird das div bei einem Laptop mit kleinerer Auflösung nicht skaliert, als wenn das div nicht absolut positioniert wurde, und sich dann der Bildschirmgröße anpasst.

Die Auflösung ist immer noch irrelevant und ein <div> passt sich niemals der Bildschirmgröße an.

Hätte er den Header-bereich relati positioniert, so wäre der Button auch noch auf die Seite gekommen, ohne horizontal scrollen zu müssen.

Vielleicht reden wir wirklich aneinander vorbei. Ob div.header absolut oder relativ positioniert ist, ist in seinem Falle völlig egal, und wenn Du den Button p.navigation ("Startseite") meinst, der ist völlig unabhängig davon, wie div.header positioniert ist, und der passt bei großen Auflösungen auch nicht unbedingt in den Viewport, weil eben nur die Größe des Viewports zählt und nicht die Auflösung.

Angenommen ein div ist 900*900px gross, und absolut positioniert, wird das div bei einem Laptop mit kleinerer Auflösung nicht skaliert

Und das hab ich wohl auch nicht verstanden. Wieso wird denn irgendwas skaliert? Unter "skalieren" verstehe ich, dass etwas nicht die originale Größe bekommt, sondern eine veränderte. Aber eal ob große oder kleine Auflösung, das div ist immer 900x900px groß.

 

[Silar]

Nein, die Elemente positionieren sich nicht mit der Bildschirmgröße, dass ist ja schon klar, aber es ist so, dass jemand der einen größeren Bildschirm hat, nicht scrollen braucht(Bei dieser Seite), als jemand der einen kleinen Bildschirm hat. und darum ging es mir: würde das CSS relative Größenangaben nehmen, anstatt eine absolute, so würde die Site bei fast jeder Bildschirmgröße gleich angezeigt werden. (z.B: width: 70%; anstatt width: 500px;).

Mein vorheriges Beispiel fällt somit weg, weil es zu ungenau war.

 

[Efchen]

Nein, die Elemente positionieren sich nicht mit der Bildschirmgröße, dass ist ja schon klar

Ja, aber sowas sollte man nie behaupten, sonst sterben die Leute nie aus, die glauben, die Auflösung/Bildschirmgröße/Marke des Herstellers habe etwas mit der Darstellung zu tun! :-)

aber es ist so, dass jemand der einen größeren Bildschirm hat, nicht scrollen braucht(Bei dieser Seite), als jemand der einen kleinen Bildschirm hat.

Nein, wie kommst Du darauf? Das ist doch Quatsch.

und darum ging es mir: würde das CSS relative Größenangaben nehmen, anstatt eine absolute

Ach so, Du meintest die Größenangaben...ich hatte irgendwie verstanden, dass Du das position:absolute meinst. Das ist nämlich in dem Fall egal, ob da absolute oder relative steht. Denn diese Angabe (position) hat ja nichts mit relativen Größenangaben zu tun.

Aber trotzdem...jemand mit größerem Bildschirm/Auflösung kann durchaus Scrollbalken haben, wo jemand mit kleinerem Bildschirm/Auflösung keine hat.
Das ist ja genau das, was ich Dir versucht habe, zu erklären! Denn auf die Bildschirmgröße kommt es nicht an, sondern auf die Größe des Viewports!

Jemand mit Auflösung 800x600 hat vielleicht sogar einen Viewport von 798x582. Wenn jemand mit einer Auflösung von 1900x1200px sein Fenster aber auf 772x530px verkleinert, ist der Viewport vielleicht 770x478 oder nur 653x478 mit einer breiten Sidebar. Beides ist kleiner als bei demjenigen mit dem kleineren Bildschirm.

=> Fazit: Die Auflösung oder Bildschirmgröße hat rein gar nichts mit dem Erstellen von Webseiten zu tun!

 

[Silar]

Ja, aber sowas sollte man nie behaupten, sonst sterben die Leute nie aus, die glauben, die Auflösung/Bildschirmgröße/Marke des Herstellers habe etwas mit der Darstellung zu tun!

Ja, das war mein Fehler, ich habe es gleichgesetzt. :)

=> Fazit: Die Auflösung oder Bildschirmgröße hat rein gar nichts mit dem Erstellen von Webseiten zu tun!

Nein, die Auflösung nicht, sehr wohl aber die Bildschirmgröße. Das merke ich selbst, wenn ich meine Übungsseite mit dem normalen PC anschaue, und nochmal mit dem Laptop. Es sieht bei beiden anders aus. je nach dem ob man z.B auch relative oder nur absolute Größenangaben hat.

aber es ist so, dass jemand der einen größeren Bildschirm hat, nicht scrollen braucht(Bei dieser Seite), als jemand der einen kleinen Bildschirm hat.

Nein, wie kommst Du darauf? Das ist doch Quatsch.

Weil z.B das Header absolut positioniert wurde, ist die Darstellung im Laptop scheinbar größer, als wenn alles relativ wäre, denn dann wäre die Darstellung in beiden Bildschirmgrößen fast gleich.

 

[Efchen]

Nein, die Auflösung nicht, sehr wohl aber die Bildschirmgröße.

Das wird normalerweise gleichgesetzt.

Natürlich erscheinen bei gleicher Auflösung die Inhalte in großer Auflösung kleiner als bei kleiner Auflösung. Aber für das Layout ist das dennoch irrelevant. Und natürlich berenzt die Auflösung auch die maximale Größe des Viewports nach oben hin, auch das ist klar. Aber da Ausnahmen immer die Regel bestätigen, haben Auflösung und Bildschirmgröße nichts mit dem Ersellen von Webseiten zu tun.

Weil z.B das Header absolut positioniert wurde, ist die Darstellung im Laptop scheinbar größer, als wenn alles relativ wäre, denn dann wäre die Darstellung in beiden Bildschirmgrößen fast gleich.

Verstehe ich nicht.
Deine Aussage, dass jemand mit einem größeren Bildschirm nicht scrollen braucht, jemand mit kleinem Bildschirm aber schon, ist auf jeden Fall falsch. Wenn Du das bestreitest, kommt mir wirklich wieder der Verdacht, dass Du nicht weißt, dass man Fenster kleiner machen kann, dass diese nicht maximiert werden müssen.
Aber diesen Satz verstehe ich nicht.

 

[Silar]

[...]haben Auflösung und Bildschirmgröße nichts mit dem Ersellen von Webseiten zu tun.

Mit dem Erstellen nicht, aber mit dem Anzeigen.

Deine Aussage, dass jemand mit einem größeren Bildschirm nicht scrollen braucht, jemand mit kleinem Bildschirm aber schon, ist auf jeden Fall falsch. Wenn Du das bestreitest, kommt mir wirklich wieder der Verdacht, dass Du nicht weißt, dass man Fenster kleiner machen kann, dass diese nicht maximiert werden müssen.

Ich habe nie bestritten, dass jemand mit einem größerem Bildschirm nicht scrollen braucht. Wir reden wohl wirklich aneinander vorbei. :)

 

[Efchen]

Ich habe nie bestritten, dass jemand mit einem größerem Bildschirm nicht scrollen braucht.

es ist so, dass jemand der einen größeren Bildschirm hat, nicht scrollen braucht(Bei dieser Seite)

Naja, dann brechen wir die Diskussion wohl besser ab :-)