Website erstellen

[thoerb]

Den Quelltext habe ich mir jetzt nicht angesehen, aber die Seite gefällt mir gut. Oben bei dem Logo könntest du evtl. das "w" von wie und das erste "a" von Zauberhand noch etwas nachbessern, aber ich denke, das sind Kleinigkeiten.

Ansonsten würde ich auf den ersten Blick sagen, gute Arbeit!

[ctwx]

Hallo!

Ich möchte einmal positiv hervorheben, dass du responsive programmierst! Sehr gut! Auch die Pfadangaben der icons zum Beispiel, mittels voranangegangen / sind gut, denn sie ermöglichen sowohl http als auch über https einzubinden, ohne Probleme.

Hier nun die Kritik:

• du nutzt meta http-equiv für die charset Angabe. Sie wird meine ich noch unterstützt, wird aber generell von der kürzeren Variante ersetzt: <meta charset="utf-8">
• Du hast keine Viewport-Angabe. Diese verhindert, dass Mobilgeräte die Webseite unnötig klein darstellen. Dazu hier etwas Literatur. Ein passende viewport-Angabe wäre folgende: <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
• Auf Zeile 38 hast du beim zweiten h2 ein / vergessen.
• In <main> nutzt du viele br um Abstände zu generieren. Mein persönlicher Grundsatz ist, br nicht zu verwenden. Niemals. Vor allem nicht um bestimmte Gestaltung zu erreichen. Wenn du Abstände erzeugen möchtest, dann würde ich dir raten, das per CSS zu machen. Gestaltung gehört einfach nicht in HTML.
• Boxen: Deine Navigationsleiste auf der linken Seite sieht total altmodisch aus. Das habe ich auch meinem Projektleiter gesagt, für den ich (mit anderen Studenten) eine Webseite erstellen sollte. Boxen mit solchen Rahmen gehören in die Vergangenheit. Wenn sie dir gefällt, OK, aber ganz ehrlich: ich würde sie anders machen. Andere Effekte, ein Box-Shadow, irgendwas, nur keinen border! So hier zum Beispiel: https://img.bi/#/V0qrnRA!qFNWnT2CSIcmlc ... csL0lX0NcO (Link ist zu breit für img-tag)
  Außerdem würde ich die a-Tags in der Navigation mit display:block versehen, dann sind sie auf der ganzen Menübreite anklickbar.
• Du solltest mehr mit Schriften spielen. Überall die gleiche Schrift ist langweilig, es sollte aber auch nicht zu bunt werden. Für die Überschrift des Menüs "Menü" würde ich zum Beispiel dazu raten, diese bold zu machen. Ebenso würde ich für Überschriften, eine andere Schriftart nehmen. Versuche hier mal serifenlose Schriften aus.
• Bitte zentriere keine Texte. Bis auf wenige Ausnahmen würde ich davon ganz los lassen. Auf verschiedenen Geräten sieht das einfach seltsam aus.
• auf meinem Screenshot von weiter oben, kann man sehr gut den Platz links und rechts unten kennen. Ich würde das rechte Symbol auf die Linke rüber holen, dann bist du nach rechts nicht so stark beschränkt.
• In der schmalen Fassung der Webseite wird das Menü anders und du hast graue Schrift auf grauen Hintergrund. Ich würde dir hier zu anderen Farben raten. Eine Abhebung vom Text ist gut, aber nicht wenn die Lesbarkeit darunter leitet. Ich weiß, Adobe ist ekelhaft, aber sie haben ein verdammt nützliches Tool hergestellt: https://color.adobe.com/ damit kannst du gute Farbkombinationen finden. (Wer eine freie Alternative kennt, immer her damit!)
• In der „mobilen Fassung“ wird man vom „Haben Sie eine Frage oder eine Anmerkung zu der Seite? Schreiben Sie unserem Webteam. “ wortwörtlich erschlagen. Mach das bitte kleiner! Umso größer der Text, umso wichtiger wirkt es letztlich. Du nimmst quasi den Fokus vom Haupttest, und das wird ja bestimmt nicht dein Ziel sein. Ich würde hier auch zu einer kürzeren, und prägnanteren Variante raten, wie "Fragen oder Vorschläge?" und das verlinken.
• Du gibst keine Schriftgrößen an. (oder ich habe es übersehen) das kann positiv als auch negativ sein. Ich würde hier aber dazu raten, mindestens eine Schriftgröße zu setzen, um Relationen zu anderen Elementen herauszuheben. Alle Browser haben da eigene Einstellungen und es ist schwer vorherzusehen, wie groß das beim Gegenüber aussieht. (Das ist echt dämlich erklärt. Mir fällt kein Weg ein das gerade besser auszudrücken...) So dass Überschriften größer bleiben als der Fließtext, und der Fließtext größer als die Navigation, oder je nach dem, wie du dir das gedacht hast. Grundsätzlich würde ich, sowohl bei Schrift, als auch bei allen anderen, sofern möglich, von px-Angaben abraten. Dazu kann ich das Buch „Responsive Webdesign“ von Ethan Marcotte empfehlen, der eindrucksvoll zeigt, wie man eine vollständig reponsive Webseite erstellt. (das hier: http://www.thalia.de/shop/home/sucharti ... pId=847498 )
• Auf elektroarbeiten.html hast du auf Zeile 22 vergessen das a-Tag zu schließen

Was ich an der Seite sehr gut finde, ist die Startseite. Mit den Icons in der Mitte, ohne gleich mit einem Batzen an Text überhäuft zu werden!

Bitte verzeih mir, wenn ich in meiner Kritik sehr direkt bin. Das ist alles als konstruktive Kritik gemeint und keineswegs böswillig geschrieben oder gar beabsichtigt.

Beste Grüße
Ctwx

[Revod]

Na geht doch... und alles mit "nano" ? keine Wunde Augen davon bekommen wegen den Anfangs Tags und dazugehörende Schliesstags?

Nöö, gibt nichts auszusetzen, auf diese sehr gute Grundbasis kannst Du nun Dein Wissen erweitern für aufwendigere Webs. Die deaktivierte Links der betreffende, aktuelle geladene Seite im Browser finde ich sehr gut.

Das Quelltext sehr schmal gehalten, finde ich sehr gut.

Code: Alles auswählen

" >

Den Leerschlag Abstand dazwischen nicht notwendig auch nicht bei

Code: Alles auswählen

<li> <a

und

Code: Alles auswählen

</a> </li>

nicht notwendig. Bei Zusammengehörigkeiten würde ich nicht Leerschläge zwischen den Tags lassen.

Ansonsten in diesem einfaches Code nichts auszusetzen. Mit der Zeit lernst Du auch wie man das css Code schmaler schreiben kann. Muss allerdings zugeben, wegen der Übersichtlichkeit verwende ich auch lieber die für den Menschen bessere lesbare Variante.

@ctwx

Hast ja Recht, doch für sein erstes Web sei nicht so "streng"

Punkto, " überall die gleiche Schrift ..." da kann man sich streiten, ich habs lieber einheitlich (ausser der "h1 h2" usw. doch nur die Grösse).

[ctwx]

@ctwx

Hast ja Recht, doch für sein erstes Web sei nicht so "streng"

Punkto, " überall die gleiche Schrift ..." da kann man sich streiten, ich habs lieber einheitlich (ausser der "h1 h2" usw. doch nur die Grösse).

Ja, du hast auf jeden Fall Recht! Deshalb habe ich es auch gleich drunter geschrieben, dass ich da doch sehr direkt bin. Ich habe einfach aufgeschrieben, was mir so auffiel. Grundsätzlich finde ich die Seite echt super. Alleine der HTML-Code, extrem sauber und recht gut strukturiert, das ist schon wirklich was wert!

[Revod]

...

• Auf elektroarbeiten.html hast du auf Zeile 22 vergessen das a-Tag zu schließen

...

Und vermutlich bereits korrigiert, habe nach geguckt. Und wegen Altmodisch usw. naja, man muss nicht jedes "Modestandard" folgen, weil wie mit der Kleider Mode plötzlich das "alte" wieder aktuell sein kann...

Mit dem "zentrieren" bin ich völlig Deiner Meinung, Patsche mache aus "center" einen "justify" daraus

Wegen obiges Zitat, darum empfehle ich Dir, Patsche noch einmal wirklich "Bluefish" weil folgendes Beispiel.

Fehlerhafte Syntax mit Nano bei längere Codes gerne übersehen werden, Abhilfe schafft "Bluefisch" z. B.

<a>Inhalt ........</a> = so richtig

<a>Inhalt ........</a oder <a>Inhalt ........ = so falsch, fehlerhafte Syntax

Mit Bluefisch klickst Du direkt in ein Anfangstag → <a> rein um den Curser darin zu setzen, also so → <a|>

Wenn die Syntax fehlerfrei ist markiert Bluefisch den Anfang Tag mit dem gesetzten Curser darin, <a|> mit einer Untergrundfarbe und das Schluss- Abschliessende-Tag, </a> das Untergrund mit gleicher Farbe gleichzeitig. Ist die Syntax wie oben beschrieben fehlerhaft wird nichts markiert, so siehst Du sofort ob was vergessen wurde in der Syntax.

Suche nach Bluefisch und installiere die Bluefisch Pakete. Es hat übrigens noch weitere umfangreiche sehr nützliche HTML Editiererleichterungen.

Übrigens, was mich persönlich immer stört, besonders an "moderne" Seiten ist das hohe Kopfbereich, was oben sehr viel Platz für das Inhalt weg "frisst" und so zum rauf / runter scrollen gezwungen wird.

[Patsche]

Erstmal: Danke für die Anerkennung der Arbeit. Das tat gut und gab mir eine Resonanz, dass ich das richtig angehe. Ich lege möglichst viel Wert auf die Gestaltung von Code hinsichtlich der Lesbarkeit. Von Python bin ich es auch gewohnt alles schön fein säuberlich einzurücken. Die Kritik ist auch hervorragend. Danke dafür. Einige Sachen habe ich schon bearbeitet und geändert. Ich versuche mal auf viele Punkte genauer einzugehen und stelle dazu eventuell eine Frage.

du nutzt meta http-equiv für die charset Angabe. Sie wird meine ich noch unterstützt, wird aber generell von der kürzeren Variante ersetzt: <meta charset="utf-8">

Geändert. Danke für den Hinweis.

Du hast keine Viewport-Angabe. Diese verhindert, dass Mobilgeräte die Webseite unnötig klein darstellen. Dazu hier etwas Literatur. Ein passende viewport-Angabe wäre folgende: <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">

Arbeite ich mich auch mal ein. Ich habe allerdings auch ohne diese Angabe auf dem Handy keine kleine Darstellung der Seite. Ich nutze Firefox Mobile und dort bin ich sogar eher zu nahe dran und muss etwas heraus zoomen. Oder habe ich die falsch verstanden?

Auf Zeile 38 hast du beim zweiten h2 ein / vergessen.

Habe ich geändert. Nach der Änderung hatte ich das Problem, dass dann die ganzen Schaltflächen nach links gerutscht sind. Warum auch immer. Habe diese jetzt einfach mit einem zentrierten <p> umschlossen. Aber der Grund ist mir noch nicht ganz klar.

In <main> nutzt du viele br um Abstände zu generieren. Mein persönlicher Grundsatz ist, br nicht zu verwenden. Niemals. Vor allem nicht um bestimmte Gestaltung zu erreichen. Wenn du Abstände erzeugen möchtest, dann würde ich dir raten, das per CSS zu machen. Gestaltung gehört einfach nicht in HTML.

Das hat mich auch gestört, da man html ja nur zur Semantik nutzt. Wiewürdest du Leerzeilen per CSS einfügen? Mit einem <div> ? Aber wie sähe der CSS-Code aus? Ich wusste mir in diesem Fall erstmal nicht zu helfen.

Boxen: Deine Navigationsleiste auf der linken Seite sieht total altmodisch aus.

Stimmt. "shadow-box" hatte ich noch nicht gekannt. Sieht jetzt schöner aus, wie ich finde. Danke für den Tipp.

Außerdem würde ich die a-Tags in der Navigation mit display:block versehen

Klingt plausibel. Ich habe das mal gemacht, hatte dann aber auch Auswirkungen auf die mobile Version. Dort waren dann die Menüpunkte nicht mehr richtig sortiert. Allgemein verstehe ich nicht, warum viele Änderungen an der Haupt-CSS-Datei auswirkungen auf die Mobile-CSS-Datei hat. Nehmen wir auch mal die Box. Obwohl ich shadow-box nur in der Haupt stehen habe und in der Mobilen noch die borderversion hatte wurde stets shadow-box genommen. Hast da jemand eine Erklärung für mich?

In der schmalen Fassung der Webseite wird das Menü anders und du hast graue Schrift auf grauen Hintergrund. Ich würde dir hier zu anderen Farben raten.

Stimmt, wobei ich die Menüpunkte trotzdem noch lesen konnte. Habe den Hintergrund vorerst herausgenommen.

Bitte zentriere keine Texte. Bis auf wenige Ausnahmen würde ich davon ganz los lassen. Auf verschiedenen Geräten sieht das einfach seltsam aus.

Da war ich auch am überlegen, ob ich es so lasse. Es wirkt irgendwie "wilder" und durcheinander. Habe jetzt "justify" statt "center" und dafür 2 weite <p>-Klassen erstellt. Zum einen für das p im Menü und zum anderen für die Copyrightinfo im footer.

In der „mobilen Fassung“ wird man vom „Haben Sie eine Frage oder eine Anmerkung zu der Seite?......prägnanteren Variante raten, wie "Fragen oder Vorschläge?"

Ja da war die Überlegung noch, ob ich den Haupttext noch größer für Mobiltelefone mache. Hab das verkleinert. Das mit dem Webteam klingt halt irgendwie ääähm wichtiger. So als gäbe es halt ein wirklich ein ganzes Team Mal sehen, was der Kumpel sagt. Werde deinen Einwand mit einbringen. Danke.

Du gibst keine Schriftgrößen an. (oder ich habe es übersehen) das kann positiv als auch negativ sein. Ich würde hier aber dazu raten, mindestens eine Schriftgröße zu setzen

Mit setzten meinst du einmalig den font-size auf einen festen px-Wert setzen? Habe jetzt mal p auf 16px gesetzt. Soweit ich richtig informiert bin orientieren sich die anderen Elemente dann an diesem Tag. Es wird ja später im Endeffekt nur Prozentangaben alles geregelt. Oder halt über "em".

Auf elektroarbeiten.html hast du auf Zeile 22 vergessen das a-Tag zu schließen

Habe ich keinen Fehler gefunden gehabt.

Bitte verzeih mir, wenn ich in meiner Kritik sehr direkt bin. Das ist alles als konstruktive Kritik gemeint und keineswegs böswillig geschrieben oder gar beabsichtigt.

Da gibt es nichts zu verzeihen. Der Ton macht die Musik, auch wenn Text natürlich kein Ton macht, aber deine Kritik liest sich mit einem Gedanken der Hilfestellung und nicht etwa, dass du mir Blödheit unterstellst. Diese Erfahrung mach ich sehr häufig. Wenn du etwas verkehrt machst und nicht sofort verstehst, dann kamen schon gleich blöde Sprüche von Mitarbeitern. Naja, will ich nicht weiter vertiefen, kennen alle Ich habe mich über die Kritik und die Denkanstöße gefreut. Vielen herzlichen Dank.

Oben bei dem Logo könntest du evtl. das "w" von wie und das erste "a"

Ja das ist in Gimp irgendwie komisch gemacht. Ich habe dort mit Hilfe eine Pfades den Weg des Textes vorgegeben und irgendwie bekomme ich es nicht sauber hin, so dass kein Buchstabe komisch aussieht. Irgendeiner stellt sich immer quer. Gibt es da einen anderen Vorschlag, wie ich in Gimp so einen geschlängelten Text erstelle?

Na geht doch... und alles mit "nano" ? keine Wunde Augen davon bekommen wegen den Anfangs Tags und dazugehörende Schliesstags?

Naja es ging. Ich wollte halt möglichst simple coden ohne Hilfestellungen oder Codelightning, da es sich dann besser setzt im Hirn Für die Zukunft werde ich mir bluefish nochmal genau ansehen. Natürlich weiß ich die Hilfe von einem Programm zu schätzen, aber zum lernen, war es für mich, so der bessere Weg.

Übrigens, was mich persönlich immer stört, besonders an "moderne" Seiten ist das hohe Kopfbereich, was oben sehr viel Platz für das Inhalt weg "frisst" und so zum rauf / runter scrollen gezwungen wird.

Das liegt wohl daran, dass die Seitenersteller meist den Seitennamen+Logo groß im <header> verbauen möchte, damit sich jeder Besucher diesen Namen besonders einprägt.

Naja. Vielen Dank für die Hilfe und Anregungen und natürlich für den Lob. Ein paar Frage sind ja noch offen.

[ctwx]

Arbeite ich mich auch mal ein. Ich habe allerdings auch ohne diese Angabe auf dem Handy keine kleine Darstellung der Seite. Ich nutze Firefox Mobile und dort bin ich sogar eher zu nahe dran und muss etwas heraus zoomen. Oder habe ich die falsch verstanden?

Smartphones versuchen der Webseite eine größere Auflösung vorzugaukeln, die sie eigentlich haben. Das führt dann dazu, dass einige Seiten eben nicht den angepassten CSS-Code verwenden für schmale Bildschirme, sondern es „original“ darstellen und man dann sich da durch-zoomen darf. Außerdem verhindert die Viewport Angabe, dass man dann zoomen darf; der mobile Browser wird also nichts strecken. Hier mal ein Screenshot wie das an meinem Sony Xperia Tipo aussieht (sehr kleiner Bildschirm): https://img.bi/#/vDAulKx!kTqmZO4aWzKaxY ... 3w44WvQ9C1

Da kann ich mich dumm und dämlich scrollen!

Habe ich geändert. Nach der Änderung hatte ich das Problem, dass dann die ganzen Schaltflächen nach links gerutscht sind. Warum auch immer. Habe diese jetzt einfach mit einem zentrierten <p> umschlossen. Aber der Grund ist mir noch nicht ganz klar.

Dein Menü hat "float: left". Das ist als ob du in LibreOffice ein Bild einfügst und den „Umlauf“ des Text einschaltest. Das kannst und solltest du verwenden, wenn du Bilder in Fließtexten Einfügen möchtest und der Text das Bild entsprechend umlaufen soll.
Da ich mit float auch immer meine Probleme habe, bin ich mir da nicht ganz sicher, ohne das ausprobiert zu haben, aber wenn du nach dem Menü ein <br style="clear: both"> einfügst, könnte es sein, dass dieses Verhalten nicht mehr stattfindet. (Ich muss hier einfach gestehen, dass float teilweise Verhalten verursacht, die ich ohne sie getestet zu haben, nicht ganz nachvollziehen kann. )

Eine bessere und vermutlich simplere Alternative wäre Flexbox; die kannst du dir mal anschauen, wenn du Zeit und Lust hast. Sie sollen dieses ganze floating von Boxen ersetzen. Siehe: http://webkrauts.de/artikel/2012/css3-f ... at-layouts

Das hat mich auch gestört, da man html ja nur zur Semantik nutzt. Wiewürdest du Leerzeilen per CSS einfügen? Mit einem <div> ? Aber wie sähe der CSS-Code aus? Ich wusste mir in diesem Fall erstmal nicht zu helfen.

div zu verwenden ist schon mal nicht verkehrt. Lieber eins zu viel, als zu wenig. Was ich verwende, kommt immer auf den Kontext an. Wenn es sich um einen zusammenhängenden Text handelt, verwende ich lieber p-Tags, da sie einen Absatz darstellen.

Die einzelnen Texte mit ihren Überschriften, beispielsweise in elektroarbeiten.html würde ich in divs packen, während ich die einzelnen Absätze da drin in p packen würde. Entsprechend mit margin könnte man dann Abstände nach unten oder oben definieren. Und wenn du beim letzten Element keinen Abstand mehr haben möchtest, nimmst du den :last-child-Selector in CSS und schaltest da den Abstand wieder aus. Siehe: http://www.css4you.de/last-child.html

Stimmt. "shadow-box" hatte ich noch nicht gekannt. Sieht jetzt schöner aus, wie ich finde. Danke für den Tipp.

Gerade eben auch noch gefunden, könnte dich vielleicht auch interessieren: http://www.selfhtml5.org/2012-css3/10-p ... n-designs/

Klingt plausibel. Ich habe das mal gemacht, hatte dann aber auch Auswirkungen auf die mobile Version. Dort waren dann die Menüpunkte nicht mehr richtig sortiert. Allgemein verstehe ich nicht, warum viele Änderungen an der Haupt-CSS-Datei auswirkungen auf die Mobile-CSS-Datei hat. Nehmen wir auch mal die Box. Obwohl ich shadow-box nur in der Haupt stehen habe und in der Mobilen noch die borderversion hatte wurde stets shadow-box genommen. Hast da jemand eine Erklärung für mich?

Die mobile CSS kommt nur "on-top". Wenn du bestimmten Verhalten dann nicht mehr haben willst, musst du es explizit deaktivieren.

Deine Haupt-CSS-Datei hast du mittels <link rel="stylesheet" media="screen" href="style.css" type="text/css" /> eingebunden; ohne eine media-screen-Angabe, wie du es bei der anderen Datei gemacht hast. Diese wird also IMMER eingelesen und ausgewertet, und deine andere CSS-Datei, die du mittels <link rel="stylesheet" media="only screen and (max-width: 1000px)" href="style-1000.css" /> wird nur eingebunden, so lange die Breite unter 1000px ist.

Ja da war die Überlegung noch, ob ich den Haupttext noch größer für Mobiltelefone mache. Hab das verkleinert. Das mit dem Webteam klingt halt irgendwie ääähm wichtiger. So als gäbe es halt ein wirklich ein ganzes Team Mal sehen, was der Kumpel sagt. Werde deinen Einwand mit einbringen. Danke.

Wichtigkeit klar, kann man so ausdrücken, aber seien wir mal ehrlich, die meisten Nutzer klicken sofort weiter, wenn da mehr als 2 Sätze stehen. Meiner Meinung nach sind kurze, aber aussagekräftige Sätze die bessere Wahl, da man einfach mehr Leute erreicht. Aber ich kann mich auch irren.

Mit setzten meinst du einmalig den font-size auf einen festen px-Wert setzen? Habe jetzt mal p auf 16px gesetzt. Soweit ich richtig informiert bin orientieren sich die anderen Elemente dann an diesem Tag. Es wird ja später im Endeffekt nur Prozentangaben alles geregelt. Oder halt über "em".

Jup. Wenn der Wert bei einem übergeordneten Element gesetzt wurde, orientiert sich em/Prozentangaben an den Werten.

Habe ich keinen Fehler gefunden gehabt.

Schau mal hier: https://img.bi/#/EvPbcPf!GnWlNhqKu8xNCS ... YZSZpkY0d9 Dadurch habe ich den Fehler erst gefunden.


Beste Grüße
Ctwx

[dccrs]

Du hast keine Viewport-Angabe. Diese verhindert, dass Mobilgeräte die Webseite unnötig klein darstellen. Dazu hier etwas Literatur. Ein passende viewport-Angabe wäre folgende: <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">

Nein. Wieso soll man die Webseite nicht Zoombar machen? "maximum-scale=1" und "user-scalable=no" sind bad practices. Es gibt auf dieser ganzen Welt keinen Grund das zu tun. Es nimmt dem User nur die Freiheit selbst zu entscheiden in welcher Grösse er den Inhalt sehen will.

http://a11yproject.com/posts/never-use-maximum-scale/
http://responsivedesign.is/develop/html ... ta-element
http://ux.stackexchange.com/questions/3 ... -webdesign

und viele weitere Quellen...

[uname]

Sehe ich ähnlich. Wobei was fast genauso schlimm ist, dass mindestens bei Android seit WebView (Android 4.?) die automatischen Umbrüche nicht mehr funktionieren. Dann muss man von links nach rechts quer über mehrere Bildschirme je Zeile scrollen. Abhilfe scheint nur Dolphin zu bieten, welcher mit JetPack eine eigene Rendering Engine einsetzt. Funktioniert aber auch nicht immer.

[ctwx]

Hm.. Nagut, dessen war ich mir nicht bewusst. Ich kopiere in der Regel diese Zeilen immer wieder; das stammt aus einem Cordova-Projekt. (Da macht es schon Sinn, das nicht zu erlauben, wenn die Seite wie eine "App" sich anfühlen soll.)

Danke für die Quellen, ich lese sie mir mal in Ruhe durch.

[Revod]

Hatte ich gestern Nacht auch vergessen, da hat dccrs Recht, allerdings hätte ich die Links nicht gefunden.

@Patsche

Wegen des Lernen das Kennst Du; Warum einfach wenn es kompliziert auch geht?
Nano oder einen anderes Texteditor liefern Dir keinen "Hintergrund" z. B. in den Einstellungen von "Bluefish" | Bearbeiten > Einstellungen > Klick = Einstellung Fenster |

Unter Editoreinstellungen > Auto-Vervollständigen & Refenzen und meine Einstellungen sind darin aktiviert.

Nun, wenn Du was vom Code im Editor innerhalb eines, z. B. Formular Tag einen Attribut anfängst zu schreiben listet Dir Bluefish alle gültige Attribute, die für diesen Tag bestimmt sind auf. Da kommt viel schneller das sogenannte "aha" anstatt sich wund zu suchen und lange suchen warum was nicht Klappt. Auf jeden Fall vor dem Gabrauch Einstellungen einstellen, es sind nur wenige richtig zu stellen und sind selbst klärend.

Für Javascripte und CSS empfehle ich Dir wärmstens Editra oder Medit.

Übrigens sehr wichtig, so offene Mailadressen würde ich im Web nich lassen, da freuen sich alle Spamboots- und Jäger. CGI oder PHP Mail Formulare benutzen, sehr gute im Netz zu finden, mit Antispam usw. Ich nutze php, da ich das CGI Prinzip nie richtig verstanden habe.

Was dem Kopfbereich angeht, sage denen die ihr Name über das ganze Monitor Fenster verteilen haben wollen auf die Art sich wie vor dem Kopf gestossen die Besucher fühlen. Eine Hervorhebung ist ok in der Grösse von Maximal h3 genügt vollkommen und für das Logo der Firma gilt das Selbe, etwas grösser als der Firmenname. Man stelle sich Mal vor, jemand sucht nach einen Produkt den er / sie sich erst mal über Eigenschaften usw. informieren will und dann ständig das riesige Kopfbereich Bild mit Firmenname vor die Augen da rum schwirrt und die Prosukte Beschreibungen, a) schwer zu finden ist und falls gefunden wird die Schriften eine grösse von 8px haben?

Solche Seiten klicke ich persönlich schneller weg als sie geladen wurden.

Auch sehr sehr gut, meine RequestPolicy zeigt nichts von Fremdes an aus den Tag-Header ausser der von Dir erwähnte Werbung, die dadurch geblockt wurde / werden., Da gibt es Seiten, die haben eine lange Liste so hoch wie das Monitor voll von Adsense und Fremde Seiten-Spots, die in iFrame geladen werden.

Weiter so, sehr gut.

Sehe ich ähnlich. Wobei was fast genauso schlimm ist, dass mindestens bei Android seit WebView (Android 4.?) die automatischen Umbrüche nicht mehr funktionieren. Dann muss man von links nach rechts quer über mehrere Bildschirme je Zeile scrollen. Abhilfe scheint nur Dolphin zu bieten, welcher mit JetPack eine eigene Rendering Engine einsetzt. Funktioniert aber auch nicht immer.

Dann ist die Zelle - div - Tabelle - Mail in der Breite nich Dynamisch gestylt, sondern Fix.

[dccrs]

Code: Alles auswählen

(Da macht es schon Sinn, das nicht zu erlauben, wenn die Seite wie eine "App" sich anfühlen soll.)

und was ist, wenn ich sehschwacher Maulwurf früh morgens im Bett-liegend ohne Brille kurz auf deine tolle App anschauen möchte bevor ich den Tag beginne?
App-Feeling ist cool, ja, "initial-scale=1" macht genau den Effekt, aber zoomen sollte man dennoch dürfen.

[ctwx]

Hast du schon mal eine "App" gesehen, in der man scrollen kann? Deine Argumentation ist schlüssig, jedoch glaube ich, dass wenn eine "App" so designt ist, dass man scrollen muss, dann hat man was falsch gemacht, meinst du nicht? (Oder das Display ist einfach zu klein...)

Ich entwickle zurzeit eine "App" mittels Cordova und ich käme mir wirklich doof vor, wenn der Nutzer scrollen müsste, um die App vernünftig zu bedienen.

[dccrs]

Ich red ja vom zoomen und nicht vom scrollen, aber ich seh deinen Punkt ja ein, man "bräuchte" es nicht, aber welchen Nachteil hast du daraus, es zu erlauben? Mir fällt keiner ein.
Wenn die App "gut designed" ist, kommt sowieso keiner auf die Idee zu zoomen...

[ctwx]

Ich red ja vom zoomen und nicht vom scrollen, aber ich seh deinen Punkt ja ein, man "bräuchte" es nicht, aber welchen Nachteil hast du daraus, es zu erlauben? Mir fällt keiner ein.
Wenn die App "gut designed" ist, kommt sowieso keiner auf die Idee zu zoomen...

Nun ja, wenn du zoomst, kannst du auch scrollen. ^^ Ich lasse meine Mutter "Apps" und Programme testen. Du glaubst gar nicht, was für Probleme sie findet... Ich setze den Maßstab bei Leuten die meiner Mutter.

[Patsche]

Deine Haupt-CSS-Datei hast du mittels <link rel="stylesheet" media="screen" href="style.css" type="text/css" /> eingebunden; ohne eine media-screen-Angabe, wie du es bei der anderen Datei gemacht hast. Diese wird also IMMER eingelesen und ausgewertet, und deine andere CSS-Datei, die du mittels <link rel="stylesheet" media="only screen and (max-width: 1000px)" href="style-1000.css" /> wird nur eingebunden, so lange die Breite unter 1000px ist.

Habe das jetzt dahingehend geändert:

Code: Alles auswählen

<link rel="stylesheet" media="only screen and (min-width: 1001px)" href="../style.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-width: 1000px)" href="../style-1000.css" type="text/css"/>

Schau mal hier: https://img.bi/#/EvPbcPf!GnWlNhqKu8xNCS ... YZSZpkY0d9 Dadurch habe ich den Fehler erst gefunden.

Gefixxt. Habe in Zeile 22 geguckt gehabt.

Was dem Kopfbereich angeht, sage denen die ihr Name über das ganze Monitor Fenster verteilen haben wollen auf die Art sich wie vor dem Kopf gestossen die Besucher fühlen.

Habe jetzt den Kopfbereich verkleinert. Ist das so okay?

[Revod]

.....

Was dem Kopfbereich angeht, sage denen die ihr Name über das ganze Monitor Fenster verteilen haben wollen auf die Art sich wie vor dem Kopf gestossen die Besucher fühlen.

Habe jetzt den Kopfbereich verkleinert. Ist das so okay?

Ich finde nun das sieht echt um Längen viel besser aus, weil das Ganze nicht unbedeutend auf das Auge wirkt durch das "riesiege" Kopfbereich.

Doch was denkst Du und dem Auftraggeber über meine Aussage, seht ihr es ähnlich wie ich bezüglich das Kopfbereich (Aus meiner Sicht ruhig ca. 15% in der Höhe noch verringern, dich das wirklich das was ich gerne mag, muss nicht für andere gelten)?

Die Ränder der Unterteilung finde ich es noch etwas zu grob / dick, ca. 2 bis Maximum 3 px Maximum, inkl. Schattierung sollten ausreichend sein. Die Horizontale Linie, dort wo sie sich mit dem oberen Rand der Navigation treffen verdoppelt die die Stärke dadurch zusätzlich. Nun kommt die Style Frage / Bedürfnisse.

Eine <hr /> kann man zwar stylen wird aber nicht von jedes Browser unterstützt, bei Opera z. B. werde Style ganz anders als im FF, W-Explorer und andere (ich selber style nur für den FF- Iceweasel- Palemoon, wer was anderes nutzt ist selber Schuld ).

Den obersten Rand der Navigation würde ich durchsichtig stylen und die Senkrechten angrenzend zur horizontale Linie setzen, das geht wenn man das obere Rand mit 0px definiert. Die Ränder sollten in der Sicht gleich aussehen, Farbe und Form. Stell Dir vor Du kaufst ein Auto der die Umrandung der Fenster bei jedes Fenster ganz anders aussehen würde?

Gesichtsbuch, Twitter und YouTube würde ich den linkes Abstand gleich wie die der Linksliste setzen, oder die Links mehr nach links verschieben und die Umrandung passend dazu schmälern.

Im Quelltext sehe ich zwischen den <p> die <br> hast Du schon gewusst, dass die <p> die Zeilenumbrecher sind, die man auch im css stylen kann?

Code: Alles auswählen

p,text1
{ margin-top: 20px;  margin-botom: 0px; }

Auf die Weise brauchst Du keine <br> zwischen de Syntax, die sind für nur innerhalb eines längeres Text um Abschnitte zu erzeugen gut., 2 <br><br> zwischen Textblock 1 und 2. innerhalb eine <p>, Zelle, <div> usw.

Jaaah sauber, mit "justify" Style fängt es sogar an ganz professionell zu werden.

PS: Habe soeben in der Seite, elektroarbeiten.html auf die grünen Titel in der Liste klicken wollen. Titel würde ich nur fett stylen, h4, 5, bis h6 sollte passen und anbei mit schwarze Farbe belassen.

Du hast es in einer Liste gepackt, weil die Aufzählung in horizontaler Form wegen des Bild rechts die zu viel Platz raubt. Anders modellieren. Mit Ebenen arbeiten im css und das bild passen in das Kopfbereich, oben rechts mit den gleichen Abstände wie jetzt platzieren. Die senkrechte Aufzählung raubt nach unten auch zu viel Platz weg. Stell Dir vor Du hättest 20 Aufgabenbereiche zum auflisten? Eine HTML Liste kann man auch horizontal stylen.

[Patsche]

Wenn ich die Punke nebeneinander stelle mit beispielsweise

Code: Alles auswählen

display: inline-block

Dann sind komischerweise keine Aufzählungszeichen mehr vorhanden.

Code: Alles auswählen

li.artikel {
text-align: left;
list-style-type: square;
display: inline-block
}

Oder mache ich was falsch?

Edit:
Ah, es geht mit

Code: Alles auswählen

float: left;

Aber ich finde das viel unübersichtlicher. Dann muss das Auge erstmal die Aufzählungspunkte erfassen. Untereinander ist es irgendwie klarer.

[Revod]

Zeig Mal... verlinken

Du könntest im Html

Code: Alles auswählen

<li> Inhalt... </li>

das

Code: Alles auswählen

<li> - Inhalt... </li>

oder das

Code: Alles auswählen

<li> | Inhalt... </li>

davor setzen, Leerschläge werden dann mit dem Browser dargestellt und allenfalls müssen es angepasst werden, entweder eins weg, oder mit,

&nbsp;

ergänzt werden.

Ganz klar, eine Liste als einzelnes Objekt sollte auch immer wie eine Liste aussehen, doch wo und wann macht es die Senkrechte Variante Sinn bezogen auf die Darstellung hin?

Man sollte es immer aus dem gesamtes Erscheinungsbild betrachten und entsprechend anpassen / angepasst stylen.

Edit:

Habe die elektroarbeiten.html Datei soeben angesehen.

- Der Titel, Menu innerhalb der Links Zelle- Navigation oben gänzlich weg lassen. Ich denke jeder Surfer kann die Links vom Text unterscheiden, wenn diese eine andere Farb Hervorhebung haben.

- Da Facebook um dre px nach rechts schieben.

- Die Zelle Navigation befindet sich Richtung links versetzt zum Gesamt Bild, siehe / vergleiche dazu rechtes Rand Abstand zum Browser Fenster hin

- Das Text Inhalt der Seite selbst ist zu knapp an der Navigation Zelle ran, angrenzend / berührt dessen Rand, das Main ca. um 10px nach rechts schieben (Minim. weil die Navigation um ca. 5 px nach rechts geschoben wird).

- Das rechte grüne Bild oben würde ich um 35% verkleinern, oder zumindest einheitlich verkleinern, so dass es in der Höhe des Kopfbereiches übereinstimmend wird.

- Habe soben die zweite und die anderen Listen gesehen, nun versteh ich warum die Seite so lang ist. Hier würde ich feine 1px starke <hr /> oberhalb und unterhalb der Liste setzen und die Liste als "float left" stylen. Natürlich die Breite der <hr /> einheitlich nicht vergessen zu stylen. Das wäre doch auch eine Idee für die erste Liste, wobei nur eine <hr /> unterhalb der Liste setzen, weil Du oben bereits eine hast.

Jaja, Übung macht den....

[Patsche]

Das Text Inhalt der Seite selbst ist zu knapp an der Navigation Zelle ran, angrenzend / berührt dessen Rand, das Main ca. um 10px

Habe es etwas weiter reingerückt. Ich arbeite allerdings ohne px, sondern mit Prozentwerten

Das rechte grüne Bild oben würde ich um 35% verkleinern, oder zumindest einheitlich verkleinern, so dass es in der Höhe des Kopfbereiches übereinstimmend wird.

Stimme ich zu. Wirkt jetzt etwas riesig im Vergleich zum schmaleren Header und zusammengerücktem Vavigatinsfeld.

Da Facebook um dre px nach rechts schieben.

Wüsste ich jetzt nicht genau, wie ich das mache, da dort einfach alle 3 Bilder hintereinander verlinkt sind. Das liegt eventuell einfach am Bild. Mal sehen.

Die Zelle Navigation befindet sich Richtung links versetzt zum Gesamt Bild, siehe / vergleiche dazu rechtes Rand Abstand zum Browser Fenster hin

Stimmt. Aber warum?
Das Navigationsfeld:

Code: Alles auswählen

nav {
box-shadow: 0px 0px 5px 3px green;
float: left;
margin: 0px;
}

Das Symbol rechts:

Code: Alles auswählen

aside {
float: right;
margin: 0px;
}

Habe schon keinen Rand gelassen mit margin. Ich glaube das liegt am auslaufenden Schatten von der Navibox. Ich könnte evetuell die Navibox ein Stück in die Mitte holen. Wobei das padding ja durch den float unterbunden wird. Wenn ich die Box versuche mit padding-left ein stück in die Mitte zu rücken, dann wird das Navifeld nur wieder breiter.

[Revod]

Ok Prozente finde auch ich gut, somit der Brwoser, je nach Monitor es entsprechend verringert / vergrössert.
- Dann solltest Du es um 3 bis 4% die Linke leere Spalte von der Browseransicht aus nach rechts hin erhöhen, Minim. Gucke soeben mit meine PrivatPC 33" Widescreen Monitor.

- Rechtes Bild oben ist klar

- Setze vor dem <a vom Facebook Link das &nbs;&nbsp; rein, genau so → &nbs;&nbsp;<a href="..." (ist ein wenig geschummelt, weil Du diese 3 Links einheitlich im "padding" und ohne eine "Tagbekleidung" getrennt hast). Das sind die kleinen Detail, die ich einmal im css Zusammenhang erwähnt hatte.

.....

Die Zelle Navigation befindet sich Richtung links versetzt zum Gesamt Bild, siehe / vergleiche dazu rechtes Rand Abstand zum Browser Fenster hin

Stimmt. Aber warum?
Das Navigationsfeld:

Code: Alles auswählen

nav {
box-shadow: 0px 0px 5px 3px green;
float: left;
margin: 0px;
}

Das Symbol rechts:

Code: Alles auswählen

aside {
float: right;
margin: 0px;
}

Habe schon keinen Rand gelassen mit margin. Ich glaube das liegt am auslaufenden Schatten von der Navibox. Ich könnte evetuell die Navibox ein Stück in die Mitte holen. Wobei das padding ja durch den float unterbunden wird. Wenn ich die Box versuche mit padding-left ein stück in die Mitte zu rücken, dann wird das Navifeld nur wieder breiter.

Nun, das wird manchmal eine schwierige Rechnung, % te und Margins-Px

Das Symbol rechts: < Was meinst Du mit "Das Symbol rechts" und wo, Nav, Main? Wozu float-right?

Code: Alles auswählen

aside {
float: right;
margin: 0px;
}

(Achtung, habe das css Block von oben nach unten versetzt) Anstatt

Code: Alles auswählen

nav {
box-shadow: 0px 0px 5px 3px green;
float: left;
margin: 0px;
}

würde ich

Code: Alles auswählen

nav {
box-shadow: 0px 0px 5px 3px green;
list-style: none;
margin-top: 0px; margin-bottom: 0px; margin-left: 10px; margin-right: 0px;
}

"margin-left: 10px;" einfach um zu sehen um wie viel sich das ganze Menu nach rechts schiebt. Wenn es zu viel wäre kannst Du es auf 6- oder 4px um ändern.

Wegen des Padding Style, vermutlich auf 20px definiert, würde ich die anderen "margin" weg lassen. Man kann auch "padding-top" usw. verwenden, also oben unten links rechts einzeln im Abstand definieren. Glaube das ist auch der Fehler, das der Titel, Menu: nun zu weit nach rechts steht.

Das Symbol rechts:

Code: Alles auswählen

aside {
float: right;
margin: 0px;
}

Sehe den ganzes css nicht, doch habe das Gefühl das "margin: 0" widerspricht die "padding" Abstand Definition, wenn ich Deine Aussage über Padding wofür Du es verwendest richtig verstanden habe. Padding = Abstand innerhalb einer Zelle, Nav usw. zum Inhalt | Margin = Abspand zum nächst naheliegender dritt Objekt, Objekt 1 = <||||> Objekt 2 = <ooo> und die ||| - ooo wäre das Inhalt, als reines Beispiel.

Das grüne Schatten tuts nichts zu Sache.

[Revod]

So langsam wirds doch...

Nun nur noch den Style der Listen im Inhalt überdenken die Links "Kiste" passend nach rechts schieben- darin noch das Titel "Menu:" und das Facebook Symbol gut 4 px nach rechts, dann ist vieles ok.

Was hälst Du davon die Umrandung der Links mit einen sehr starkes Grün und einen 1px. breites Rand ohne Schatten, und dafür das Untergrund der "Nav" mit einen sehr schwaches Grün zu belegen? Kann es hier nur mit der Schrift zeigen, als Hintergrundfarbe: HINTERGRUNDFARBE < hier

beinahe durchsichtig, auf einer Fläche kann es stärker wirken, eventuell, einfach Farbmischer, GColor2 beanspruchen.

[Patsche]

Setze vor dem <a vom Facebook Link das &nbs;&nbsp; rein, genau so → &nbs;&nbsp;<a href="..."

Das bewirkt leider nichts.

würde ich

Code: Alles auswählen

nav {
box-shadow: 0px 0px 5px 3px green;
list-style: none;
margin-top: 0px; margin-bottom: 0px; margin-left: 10px; margin-right: 0px;
}

Das list-style. Gehört das dort hin? Habe das ja schon für li mit der Klasse "navigation" deklariert. Bei mir sieht es jetzt so aus:

Code: Alles auswählen

nav {
box-shadow: 0px 0px 5px 3px green;
float: left;
margin-top: 0px; margin-bottom: 0px; margin-left: 5px; margin-right: 0px
}

Vielen Dank für die Hilfe. Macht echt Spaß, auch wenn es noch viele Fallstricke gibt. Machst du so etwas beruflich, oder haste das privat erlernt?

Edit:
Ich lass das mal in Bodenbelag stehen
-> http://patsche2014.cwsurf.de/html/boden ... eiten.html

[Revod]

Bin am "kleinen" Notebook, 13.3" Monitor und muss sagen hast diese Nacht es doch nigekreigt. Macht einen sehr gutes Eindruck als gesamtes Erscheinungsbild. Auch das Menü "Spalte" konntest Du im Abstand links einheitlich nach rechts schieben.

Nur noch die Details.....

Schwer wiegendes Fehler: Du hast Dir tatsächlich wunde Augen angetan, weil der zwingende Abstandhalter,

& < das ist richtig, so

Geschrieben hast, &nbs;&nbsp < das ist falsch.Der erste = richtig, dem zweiten fehlen am Anfang das & und am Ende das p und das Strichpunkt, dem dritten fehlt am Ende das Strichpunkt, daher erscheint es vor dem Facebook Link.

Ja, ffrüher bis vor ca. 2 Jahren. Heuer bieten viele Hoster das Website Modul gratis an und den meisten empfehle ich diesen Tool, wenn es um eine "Visitenkarte" oder "mien Katze, meine Familie usw" geht. 0815 sind relativ rasch erzeugt und für aufwendigere Web will den Aufwand keiner bezahlen. War früher in mein PC- Support Angebot

Zum stylen habe ich irgend wie dafür einen "glückliches" Auge dafür.

Ein Tipp

Hier das Menu
------------------------> hier das Inhalt Titel
------------- ----------> hier der Listen Titel
------------- ----------> Ab hier die Liste
-------------
------------

Nei:

Hier das Menu
------------------------> hier das Inhalt Titel
------------- ----------> ab hier 1px feines <hr /> und <div class="detailliste">
------------- ----------> hier der Listen Titel
------------- ----------> horizintale Liste
------------- ----------> ab hier </div und 1px feines <hr /> gleich breit wie das obige
------------- ----------> hier ein einze
------------- < 6. Link
------------

Und das bei jede Liste im Inhalt

Für horizontale Aufzählung brachst dafür nur einen <li></li> Tag und das auch nur wegen des bereits definiertes Textstyle

HR Linien lassen sich auch im css stylen, die Breite und Abstand zum linkes Rand praktisch gleich wie der Nav Platz.

Zu viel leeres Platz zwischen Text und nächstes Titel, im Inhalt würde ich mehr als 2 Zeilen in der Höhe leer lassen.

[herbst]

Hallo zusammen! Ich suche auch nach einfachen Möglichkeiten, eine eigene Webseite zu erstellen. Ich habe gehört, dass man fertige Vorlagen benutzen kann. Ist das wirklich leicht?