nicht angemeldet
Layout umsetzten
Auge
Matthias Apsel
Der MartinEinen schönen guten Tag,
bin etwas am verzweifeln, meine Schwester und ich habe in Photoshop ein kleines Design für eine neue Seite umgesetzt. Ein Teil davon sieht wie folgt aus:
Nun meine Frage an euch, wie kann ich das mit HTML5 & CSS3 umsetzten? Sollte auf allen Browsern gut aussehen.
Meine Gedanke war wie folgt:
Ein großes Div
Darin zwei Divs mit jeweils 50%, eines nach Links und eines nach Rechts floten
In das erste Div das große Bild einbinden
So wie setzte ich die rechte Seite um? Hab absolut keine Idee :( vielleicht kann mir ja jemand helfen dieses kleines Design umzusetzten.
Viele liebe Grüße
Hazel
-
Frühstück nicht früschtück oder?
Also rechte Seite entweder mit divs, float left und breite so gewählt das beide zusammen in eine Zeile passen, also breite der beiden entspricht der breite vom rechten Container.
Dann springt der 3. Container automatisch in die nächste Zeile usw.Dann hast du aber noch das Problem das jedes div eine Höhe hat die unabhängig der anderen ist. Das kannst du lösen indem du jedem eine fixe Höhe gibst, falls dies möglich ist, oder du verwendest eine Tabelle bzw in CSS gibt es auch eine Eigenschaft eine Tabelle nachzubauen. (Display property: http://www.w3schools.com/cssref/pr_class_display.asp)
-
Hallo,
Frühstück nicht früschtück oder?
genau, es sollte Frühstück heißen, hab mich verschrieben.
Also rechte Seite entweder mit divs, float left und breite so gewählt das beide zusammen in eine Zeile passen, also breite der beiden entspricht der breite vom rechten Container.
Dann springt der 3. Container automatisch in die nächste Zeile usw.OK, vielen Dank für die Infos, dann werde ich das gleich mal testen, ob ich das mit CSS so hin bekomme.
Gruß
Hazel-
Hallo
Frühstück nicht früschtück oder?
genau, es sollte Frühstück heißen, hab mich verschrieben.
ich hatte es für ein Wortspiel gehalten…
Gruß
Kalk-
Hallo
Frühstück nicht früschtück oder?
genau, es sollte Frühstück heißen, hab mich verschrieben.
ich hatte es für ein Wortspiel gehalten…
Nein, das ist – sozusagen – Lautschrift
Tschö, Auge
--
Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
Terry Pratchett, "Wachen! Wachen!"
ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
Veranstaltungsdatenbank Vdb 0.3-
Hallo
Frühstück nicht früschtück oder?
genau, es sollte Frühstück heißen, hab mich verschrieben.
ich hatte es für ein Wortspiel gehalten…
Nein, das ist – sozusagen – Lautschrift
Jetzt wo du's schreibst, hör' ich's auch.
Gruß
Kalk
-
-
-
-
-
Hallo,
ich hab gerade etwas gelesen, dass man solche Boxen auch mit "flexbox" umsetzten kann! http://www.html5rocks.com/de/tutorials/flexbox/quick/ hat damit jemand Erfahrung und wie sieht es mit den älteren Brwosern aus?
Gruß
Hazel-
Hallo,
auch viele aktuelle Browser können mit flexbox (noch?) nichts anfangen.
Und mit Photoshop erstellt und bearbeitet man Bilder, mit Webseitendesign hat das nichts zu tun. Das sind vollkommen unterschiedliche Medien. Es ist so ziemlich das grauseligste wenn Webseitenersteller mit Bildern konfrontiert werden, die als Vorlage für ein Webdesign dienen sollen.
Gruss
MrMurphy
-
Hallo,
auch viele aktuelle Browser können mit flexbox (noch?) nichts anfangen.
ok, dann fällt das erst mal für mich weg.
Und mit Photoshop erstellt und bearbeitet man Bilder, mit Webseitendesign hat das nichts zu tun. Das sind vollkommen unterschiedliche Medien. Es ist so ziemlich das grauseligste wenn Webseitenersteller mit Bildern konfrontiert werden, die als Vorlage für ein Webdesign dienen sollen.
mal ganz ruhig bitte bleiben, wenn ich mir eine Vorlage mache dass ich sehe wie etwas aussieht, dann kann ich das mit Photoshop sehr wohl machen, das würde eh keiner sehen, wenn ich es hier nicht a) geschrieben und b) veröffentlicht hätte.
Gruß
Hazel
-
-
-
Hallo,
ich hab es mal so umgesetzt:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Test Seite</title> <link href="screen.css" rel="stylesheet" type="text/css"> </head> <body> <div id="bezahlt"> <div class="titel"> <h1>Neue Unterkünfte</h1> </div> <div class="links"> <img src="media/aufmacher.jpg" width="590" height="333" alt="Aufmacher"> </div> <div class="rechts"> <div class="rects_links"> <img src="media/test_rechts.jpg" width="188" height="106" alt="Test Bild"> </div> <div class="rechts_rechts"> <img src="media/test_rechts.jpg" width="188" height="106" alt="Test Bild"> </div> <div class="rects_links"> <img src="media/test_rechts.jpg" width="188" height="106" alt="Test Bild"> </div> <div class="rechts_rechts"> <img src="media/test_rechts.jpg" width="188" height="106" alt="Test Bild"> </div> <div class="rects_links"> <img src="media/test_rechts.jpg" width="188" height="106" alt="Test Bild"> </div> <div class="rechts_rechts"> <img src="media/test_rechts.jpg" width="188" height="106" alt="Test Bild"> </div> </div> </div> </body> </html>Und mein CSS sieht so aus
#bezahlt { width: 1005px; margin: 0 auto; height: 400px; } #bezahlt .titel { border-bottom: 1px solid #666; margin-bottom: 10px; } #bezahlt .titel h1 { margin: 0; padding: 0px; font-size: 34px; line-height: 39px; color: #333; } #bezahlt .links { float: left; width: 590px; } #bezahlt .rechts { float: right; width:395px; margin-top:0px; } #bezahlt .rechts .rects_links { float: left; margin-top:3px; width: 188px; } #bezahlt .rechts .rects_links:first-child { float: left; margin-top:0px; width: 188px; } #bezahlt .rechts .rechts_rechts:first-child { float: right; margin-top:0px; width: 188px; } #bezahlt .rechts .rechts_rechts { float: right; margin-top:2px; width: 188px; }Die Frage ist nun warum zieht dieses #bezahlt .rechts .rechts_rechts:first-child { nicht? Der Abstand nach oben ist weiterhin 2px (siehe Bild) und wie sieht der Code aus? Kann man diesen so stehen lassen oder gibt es etwas zu verbessern?
Liebe Grüße und einen schönen Abend
Hazel-
Hallo,
wie sieht der Code aus? Kann man diesen so stehen lassen oder gibt es etwas zu verbessern?
Der Code hat Divitis.
Gruß
Kalk-
Hallo,
Der Code hat Divitis.
was meinst du damit? Mir hat man doch gesagt ich soll es mit divs machen!
Gruß
Hazel-
Hallo
Der Code hat Divitis.
was meinst du damit? Mir hat man doch gesagt ich soll es mit divs machen!
Ja, aber wenn du alles in divs steckst, ist das genauso unübersichtlich, schlecht wartbar und strukturell nichtssagend wie z.B. Tabellendesign. Du nutzt laut Doctype HTML5. Dort hast du ein Set neuer Elemente, die die Struktur einer Seite deutlich machen (header, nav, main, article, section, aside, footer). Für den Anfang(!) sollten diese drei Beiträge im Selfhtml-Blog reichen. Zum Ermitteln der Unterstützung (auch für HTML5) ist can I use? zu empfehlen, die Extrabrötchen für ältere IEs backt man mit html5shiv. Weiteres über die Suchmaschine deiner Wahl und bei Bedarf hier im Forum.
Tschö, Auge
--
Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
Terry Pratchett, "Wachen! Wachen!"
ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
Veranstaltungsdatenbank Vdb 0.3-
Hallo,
wenn ich das lese werde ich etwas Aggressiv, es geht hier doch nicht wie mein Code aufgebaut ist oder ob er gut lesbar ist, das ist mir ehrlich gesagt scheiß egal, denn nur ich muss durch den Quelltext steigen und kein anderer. Wie Google und Co. das werten ist mir auch ehrlich gesagt scheiß egal, ich habe allen Suchmaschinen verboten auf meine Seite zu kommen!
Mir geht es nur darum warum das zweite
#bezahlt .rechts .rects_links:first-child {nicht zieht. Mehr wollte ich gar nicht wissen.
Die Seiten die du mir verlinkt hast tragen überhaupt NICHTS zu meinem Problem bei, das ist nur Werbung für Selfhtml mehr nicht. Wenn man Boxen hat sind divs weiterhin in Ordnung. Man sollte nicht jeden verdammten
Gruß
Hazel-
Hallo,
wenn ich das lese werde ich etwas Aggressiv, es geht hier doch nicht wie mein Code aufgebaut ist oder ob er gut lesbar ist, das ist mir ehrlich gesagt scheiß egal, denn nur ich muss durch den Quelltext steigen und kein anderer. Wie Google und Co. das werten ist mir auch ehrlich gesagt scheiß egal, ich habe allen Suchmaschinen verboten auf meine Seite zu kommen!
Mir geht es nur darum warum das zweite
#bezahlt .rechts .rects_links:first-child { nicht zieht. Mehr wollte ich gar nicht wissen.Die Seiten die du mir verlinkt hast tragen überhaupt NICHTS zu meinem Problem bei, das ist nur Werbung für Selfhtml mehr nicht. Wenn man Boxen hat sind divs weiterhin in Ordnung. Man sollte nicht jeden verdammten Scheiß von HTML5 mitmachen, dazumal ist viele noch nicht offiziell.
Gruß
Hazel-
Om nah hoo pez nyeetz, Hazel!
wenn ich das lese werde ich etwas Aggressiv, es geht hier doch nicht wie mein Code aufgebaut ist oder ob er gut lesbar ist, das ist mir ehrlich gesagt scheiß egal, […] Wie Google und Co. das werten ist mir auch ehrlich gesagt scheiß egal, ich habe allen Suchmaschinen verboten auf meine Seite zu kommen!
Die Seiten die du mir verlinkt hast tragen überhaupt NICHTS zu meinem Problem bei, das ist nur Werbung für Selfhtml mehr nicht. Wenn man Boxen hat sind divs weiterhin in Ordnung. Man sollte nicht jeden verdammten Scheiß von HTML5 mitmachen, dazumal ist viele noch nicht offiziell.
Du hättest, "Ich möchte keine Hilfe" auch wesentlich kürzer formulieren können.
Matthias
-
Hallo Matthias,
Du hättest, "Ich möchte keine Hilfe" auch wesentlich kürzer formulieren können.
ja, allerdings. Nachdem ich dieses recht unverschämte Posting gelesen hatte, habe ich fast bedauert, selbst einen Beitrag geleistet zu haben.
Ciao,
Martin--
Eine Nonne kommt in den Himmel. An der Pforte fragt Petrus: "Wer bist du?" - "Ich bin die Braut Jesu." Petrus stutzt einen Moment, ruft dann nach hinten: "He Freunde, habt ihr schon gehört? Der Juniorchef will heiraten!"
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Om nah hoo pez nyeetz, Der Martin!
ja, allerdings. Nachdem ich dieses recht unverschämte Posting gelesen hatte, habe ich fast bedauert, selbst einen Beitrag geleistet zu haben.
Das passt auch zum Inhalt meiner letzten Mail an dich.
Matthias
--
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Liter und Literaturpreis.
-
-
Du hättest, "Ich möchte keine Hilfe" auch wesentlich kürzer formulieren können.
Der einzigste der wirklich geholfen hat war http://forum.de.selfhtml.org/?t=217007&m=1489585!
Die Links die man mir genannte hat, bringen mich kein Schritt weiter!
-
-
-
Hallo
Wir sind hier nicht in der Kneipe. EOT
Tschö, Auge
--
Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
Terry Pratchett, "Wachen! Wachen!"
ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
Veranstaltungsdatenbank Vdb 0.3-
Wir sind hier nicht in der Kneipe. EOT
Dann geh doch, du musst hier nicht schreiben! Bis jetzt kam keine Hilfe von dir nur dummes gerede in meinen Augen!
-
-
-
-
Hi,
Der Code hat Divitis.
was meinst du damit?du packst alles und jeden, jedes Element nochmal in einen div-Container ein. Das ist weder nötig noch sinnvoll.
Mir hat man doch gesagt ich soll es mit divs machen!
Die Aussage ist Quatsch. Ein div-Element ist dazu da, mehrere andere Elemente zu einem Block zusammenzufassen, und dann kann man CSS-Formatierungen auch auf die ganze Gruppe anwenden, anstatt auf jedes Element einzeln. Das heißt aber eben nicht, dass man jedes Element nochmal verpacken muss.
Ich sehe an deinem Bild des gewünschten Zustands
* eine Überschrift (z.B. h1)
* ein großes Bild
* sechs kleinere Bilder, deren Sinn sich mir nicht erschließt, solange es nur
einfarbige Rechtecke sindDas stark vereinfachte Markup könnte also in etwa so aussehen:
<h1>Neue Unterkünfte</h1> <div id="group"> <img ... /> <div> <img ... /> <img ... /> <img ... /> <img ... /> <img ... /> </div> </div>Ich benutze hier ein div-Element, um die 6 kleinen Bilder zu gruppieren, und ein weiteres, um die gesamte Gruppe zusammenzufassen. Jetzt lass uns das noch ein bisschen stylen und anordnen:
h1 { border-bottom: 1px solid #888; text-transform: uppercase; font-weight: bold; } div#group { overflow: hidden; } div#group > img { float: left; padding: 2px; } div#group div { padding-left: $p; /* Plathhalter: Setze hier Breite des Bildes plus padding (plus Reserve?) ein */ padding: 2px; max-width: $w; /* Plathhalter: Setze hier die Gesamtbreite des Containers ein */ }Das Anordnung der kleinen Bilder reguliere ich hier, indem ich die Breite des übergeordneten Containers begrenze; wenn die Werte passen, ergibt sich der Umbruch an der gewünschten Stelle von allein. Ist das Browserfenster schmaler, brechen die kleinen Bilder ggf. nur einspaltig um, bei akutem Platzmangel rutscht die ganze Gruppe der kleinen Bilder unter das große. Ist das nicht gewünscht, gib dem div#group ein passendes min-width - dann erscheint ein horizontaler Scrollbalken, wenn nötig.
Das ist ein ungetestetes Brainstorming - es soll nur zeigen, wie einfach man das Gewünschte "im Prinzip" umsetzen kann, hat aber sicher noch Verbesserungsbedarf im Detail.
Ciao,
Martin--
Die letzten Worte des Helden:
Feigling! Traust dich ja doch nicht!
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hallo,
vielen Dank für deine Erklärung, aber dein Beispiel geht nicht mehr, wenn ich meines um etwas erweitere:
<div class="links">
<div class="beschriftung">
<img src="media/aufmacher.jpg" width="590" height="333" alt="Aufmacher">
<span>Flat near Colonge Fair / Airport</span>
</div>
</div>nun habe ich eine Beschreibung für das Bild!
Ach ja die 6 Bilder sehehen nun so aus:
-
Hallo,
ich würde das ganze semantisch korrekt, flexibel und mit einem möglichst übersichtlichten HTML-Quelltext erstellen. Das könnte dann nach deinen bisherigen Informationen wie im Beispiellink aussehen:
http://foreninfo.bplaced.net/seiten_fremdseiten/2014_04_01_hazel_bilder_anordnen_02.html
Alle CSS-Angaben befinden sich im Quelltext.
Mit meinem Quelltext ist es auch kein Problem das Layout responsive zu gestalten, damit die Bilder auch auf Tablets und Smartphones in sinnvoller Größe angezeigt werden. Oder auch auf den Zeilenumbruch des Textes in der Grafik bei schmaleren Fenstern reagiert werden kann.
Gruss
MrMurphy
-
Hallo MrMurphy,
wow vielen vielen Dank für dein Beispiel. Ich weiß gar nicht was ich sagen soll! Hätte noch eine kleine Frage zu deinem Vorgehen. Du hast alle 6 Bilder so eingebunden
<img src="../bilder/bilder/vw_passat_variant_blau_0400x0318.jpg" alt="VW Passat blau" />wenn ich dieses mache, habe ich keine Möglichkeit mehr diesen Bildern ein Text wie auf dem großen Mitzugeben oder? Wenn das doch ginge, dann könnte ich wirklich auf die ganzen DIVs verzichten die ich noch in meinem Beispiel habe.
DANKE nochmals für deine Hilfe!
Gruß
Hazel-
Hallo,
als sinnvollstes erscheint mir dann die kleinen Bilder auch mit dem figcaption-Element in jeweils ein figure-Element einzufügen und die dann entsprechend mit CSS zu gestalten.
Gruss
MrMurphy
-
-
-
-
-
-
-
-
Hallo,
ich muss mich mal für gestern Mittag bei euch entschuldigen, ich war eh schon auf 180 und als dann noch diese Kommentare, dass alles falsch ist usw. kamen hab ich etwas überreagiert! Tut mir leid!
Aber wie ich das gestern schon geschrieben habe, es ist doch egal wie ein Code im Hintergrund aussieht oder? Schaut euch mal z.B. Bild.de oder Google.de an, die sehen im Quellcode unter aller Sau aus.
auf die Geschwindigkeit oder das Ranking kommt es wohl auch nicht an, wie ein Code aufgebaut ist. Außerdem habe ich eh allen Suchmaschinen gesagt dass sie nicht auf die Seite kommen sollen, das hat private Gründe! Einige von euch meinten ich soll es mit HTML 5 usw. machen, aber muss das wirklich schon sein? Viele Sachen sind noch gar nicht fertig, was ist wenn ein User mit alten Browser kommen, man muss überall an Fallback usw. denken, das sehe ich wirklich noch nicht ein.
In der Zukunft verspreche ich euch, dass ich mich bevor ich hier etwas schreibe abreagiere. Hoffe ihr helft mir in Zukunft auch weiter! Kommt nie wieder vor!
Außerdem muss ich mich bei MrMurphy wirklich für die Hilfe bedanken! Ohne dich hätte ich das nie hinbekommen. Ich muss jetzt mal schauen wie ich die Seite weiter aufbaue. Darf ich dein Code denn verwenden? Die Frage ist ob man wirklich bei einer Wohnungsseite das ganze Responsive machen muss?
Ich sage nein, was denkst du denn?
Mein Vorhaben war wie folgt:
- Ganz oben ein Balken über die komplette Seite, den Content Bereich ist dann ca. 900px.
- Darunter kommt ein großes Header Bild
- Darunter kommen die neuesten Anzeigen
- Darunter kommt dein Beispiel
- Darunter kommen noch die neuesten Einträge sowie Kommentare
- Ganz am Ende kommt ein Footer der wieder über die ganze Seite geht.
Gruß
Hazel-
Hallo,
Darf ich dein Code denn verwenden?
Ja sicher, das ist nur ganz normales schulmäßiges HTML / CSS.
Im übrigen unterscheidet sich meine Vorgehensweise stark von deiner. Bei mir steht der Besucher mit seinen Wünschen im Vordergrund.
Aber wie ich das gestern schon geschrieben habe, es ist doch egal wie ein Code im Hintergrund aussieht oder?
Nein, diese Ansicht ist aus verschiedenen Gründen falsch. Allerdings habe ich die Erfahrung gemacht, das Leute, die unbeweglich an solchen Vorstellungen festhalten, sachlichen Argumenten nicht zugänglich sind.
Schaut euch mal z.B. Bild.de oder Google.de an, die sehen im Quellcode unter aller Sau aus.
Da hilft es auch nicht auf Seiten zu verweisen, die einen veralteten und / oder schrottigen Quellcode aufweisen. Der hat meist historische Gründe.
Zum anderen bist du auf dem falschen Dampfer, wenn du deine Seite mit den Marktführern vergleichst. Die haben eine Marktmacht und "verkaufen" ihre Leistung auch dann, wenn ihre Seiten nicht mehr dem aktuellen Stand der Dinge entsprechen.
Du bist hingegen nur ein kleiner Anbieter der mit vielen ähnlichen Anbietern konkurriert. Deine Internetseite ist dementsprechend häufig der erste und entscheidende Kontakt zu deinen zukünftigen Kunden. Die Kunden entscheiden sich dementsprechend häufig danach, welchen ersten Eindruck die Seite der unterschiedlichen Konkurrenten auf sie machen. Der nächste wartet ja nur einen Klick weiter. Das haben viele Online-Anbieter leider immer noch nicht erkannt. Und da wirken Seiten nach aktuellen Standards in der Regel seriöser.
Obwohl die Besucher mit der Technik von HTML / CSS nicht vertraut sind und daran auch kein Interesse haben, "erkennen" sie mit veraltetem Quellcode erstellte Seiten. Aktuelle Seiten wirken dann immer seriöser.
Das ist ähnlich wie bei Autos. Wenn man zum Beispiel 5 Fahrzeuge aus 5 Jahrzehnten durcheinander stellt, können die Betrachter in der Regel die zeitlichen Abfolge der Autos bestimmen ohne genau sagen zu können, woran sie die festmachen. Wobei sich das Internet natürlich deutlich schneller entwickelt.
Einige von euch meinten ich soll es mit HTML 5 usw. machen, aber muss das wirklich schon sein?
HTML5 ist der aktuelle Standard, auch wenn die Ewiggestrigen gerne lautstark etwas anderes behaupten. Es wird keinen Zeitpunkt geben, zu dem es offiziell eingeführt wird. Was die Browserhersteller in ihre Browser einbauen kann und sollte somit genutzt werden. Die Entwicklung von HTML5 soll fließend geschehen, es sind also auch keine Updates geplant, zu denen bestimmte Funktionen offiziell eingeführt werden. Diese Abkehr von der üblichen Softwareentwicklung wurde ganz bewußt getroffen. Auf offizielle Entwicklungszeitpunkte kannst du damit für den Rest deines Lebens warten - die kommen nicht. Es ist schließlich nicht gottgegeben, das Software immer stufenweise mit Versionsnummern bis nach der vierten Kommastelle weiterentwickelt werden muss.
Neue Seiten sollten deshalb nach dem aktuellen Standards erstellt werden. Und das ist nun mal HTML5.
was ist wenn ein User mit alten Browser kommen, man muss überall an Fallback usw. denken, das sehe ich wirklich noch nicht ein.
Wenn du die Seite für dich erstellst ist das alles kein Problem. Wenn du an die Besucher denkst ist deine Sichtweise veraltet. Inzwischen surfen über 50 Prozent der Internetuser mit Tablets und Smartphones. Warum willst du die gegenüber von vielleicht 5% Usern mit veralteten Browsern benachteiligen? Zumal ein Fallback für veraltete Browser in der Regel nur ein paar Zeilen Quellcode benötigen. Der Aufwand ist auch eher lächerlich. Und Nutzer von veralteten Browsern sind sich dessen durch bewußt und erwarten gar nicht erst, das die Seiten bei ihnen wie bei aktuellen Browsern angezeigt werden. Die erwarten lediglich eine vernünftige Ansicht.
Die Frage ist ob man wirklich bei einer Wohnungsseite das ganze Responsive machen muss?
Willst du die Leute mit Tablets und Smartphones als Kunden gewinnen oder nicht? Auch bei dieser Frage denkst du nur an deinen Aufwand und nicht an die Bedürfnisse deiner Kunden. Wobei ein Responsive Design auch nur ein paar Zeilen Quelltext sind, wenn der HTML-Quellcode schlicht nach den aktuellen Vorgaben erstellt wurde. Das ist somit kein nennenswerter Aufwand, sondern gehört zum aktuellen Grundlagenwissen.
Das ist somit auch ein Grund, warum der HTML-Quellcode vernünftig aufgebaut sein sollte. Wer sich einfach nur an die Grundlagen hält ist somit klar im Vorteil.
- Ganz oben ein Balken über die komplette Seite, den Content Bereich ist dann ca. 900px.
- Darunter kommt ein großes Header Bild
- Darunter kommen die neuesten Anzeigen
- Darunter kommt dein Beispiel
- Darunter kommen noch die neuesten Einträge sowie Kommentare
- Ganz am Ende kommt ein Footer der wieder über die ganze Seite geht.
Das ich von solchem kundenunfreundlichem Vorgehen nichts halte, habe ich ja bereits ähnlich geschrieben. Hier fehlt dir leider die Information und die Vorstellung, was Besucher von Internetseiten erwarten. Das werde ich dir in einigen wenigen Sätzen auch nicht rüberbringen können, zumal aus deinen Fragen und Bemerkungen rüberkommt, das du eigentlich nur in deinen Ansichten bestätigt werden willst.
Es hält dich doch niemand davon ab, deine Internetseiten so zu erstellen, wie es deinen Vorstellungen und Fähigkeiten entspricht. Das ist ganz alleine deine Entscheidung.
Du darfst halt nur nicht erwarten, das sachlich schlechter und / oder veralteter Quellcode oder Layout von Dritten gelobt oder von Kunden honoriert wird. Daran ändern auch alle Ausreden deinerseits nicht.
Wenn zum Beispiel dein Auto immer wieder ungeplant in der Werkstatt muss und dich der Kundendienstberater darauf hinweist, das du doch stundenlang bequem in den 10fach verstellbaren Sitzen ruhen kannst, die Klimaanlage ein super-wohlfühl-klima schafft und das Audiosystem einen bessern Klang als jeder Konzertsaal erzeugt: Würdest du dann sagen: Super Auto? Oder doch eher: Der gute Mensch hat meine Wünsche wohl nicht erkannt, ich will mit einem Auto in erster Linie problemlos von A nach B kommen?
Bei deinem Internetauftritt bist du der Kundendienstberater.
Gruss
MrMurphy
-
Hallo,
vielen Dank für deine sehr ausführliche Antwort. OK dann werde ich wohl doch auf HTML5 und CSS3 setzten! Das heißt für mich etwas lernen auch wenn du sagst eine Seite responsive zu erstellen ist nicht viel mehr Code.
Könntest du mir vielleicht anhand deinem Beispiel zeigen wie du dieses umsetzten würdest? Ich würde es so machen:
@media only screen and (min-width: 900px) { Hier alles rein, was für Laptops & Desktop PC sein soll }@media only screen and (min-width:481px) and(max-device-width:899px) { Hier alles rein was für ein Tablet sein soll }@media only screen and (min-width:320px) and(max-device-width:480px) { Hier alles rein was für ein Handy sein soll }Wenn dieses nicht sinnvoll ist, dann bitte ich dich mir zu sagen welche Größen ich besser nehmen soll. Hab auch gelesen dass man mit Mobile First arbeiten soll, dieses aber erheblich schwerer sein soll, daher verzichte ich erstmal drauf.
Für deine Hilfe wäre ich dir nochmals sehr sehr dankbar.
-
Hallo
vielen Dank für deine sehr ausführliche Antwort. OK dann werde ich wohl doch auf HTML5 und CSS3 setzten! Das heißt für mich etwas lernen auch wenn du sagst eine Seite responsive zu erstellen ist nicht viel mehr Code.
Auf HTML5 kannst du sorglos setzen, da aktuelle Browser alle HTML-Varianten durch den HTML5-Parser jagen. Du hast es also schon, ohne dessen Möglichkeiten zu nutzen. Bei CSS3 ist die Unterstützung etwas ausgefranst, das Meiste und Gängigste geht aber überall. Die passenden Links hatte ich dir ja schon gegeben.
Könntest du mir vielleicht anhand deinem Beispiel zeigen wie du dieses [responsive] umsetzten würdest? Ich würde es so machen:
@media only screen and (min-width: 900px)
{
Hier alles rein, was für Laptops & Desktop PC sein soll
}
/* und weitere */> > Wenn dieses nicht sinnvoll ist, dann bitte ich dich mir zu sagen welche Größen ich besser nehmen soll. Hab auch gelesen dass man mit Mobile First arbeiten soll, dieses aber erheblich schwerer sein soll, daher verzichte ich erstmal drauf. Wenn du die Logik verstanden hast, ist Mobile First keineswegs schwerer. Du musst dir dabei klarmachen, dass du das Stylesheet von schmal zu breit erweiterst. Die Anweisungen für schmale Viewports gelten für alle Breiten, solange sie nicht für größere Breiten überschrieben werden [1]. Dabei ist es möglich, dass es z.B. die Breakpoints für das Aussehen der Navigation an anderen Stellen (resp. bei anderen Breiten) liegen wie die Breakpoints für den eigentlichen Inhalt. Gunnar wird dir zudem noch ans Herz legen, die Breakpoints in der Einheit em zu definieren, da diese auf eine eventuell von der Standardeinstellung abweichende Vorgabe für die Schriftgröße Rücksicht nimmt. Das lässt auf den ersten Augenblick weniger Kontrolle zu. Wenn aber jemand, aus welchen Gründen auch immer, eine größere Mindestschriftgröße vorgibt, dann passt deine Breitenangabe auf Basis von px nicht mehr. [1] Für schmale Viewports könnte z.B. folgendes gelten: Das Bild und die (in deinem Entwurf rechts davon dargestellten) Blöcke werden untereinander ausgegeben. Wird der Viewport breiter (per Definition durch das Gerät oder durch Veränderung der Fenstergeometrie), werden die Blöcke erst unterhalb des Bildes mehrspaltig angezeigt und bei richtig[2] breitem Viewport schlussendlich, wie es dein Entwurf zeigt. [2] @Matthias Apsel: <rummoser /> Warum gibt es in der Sonderzeichenleiste oberhalb des Textfeldes kein „TM“? Tschö, Auge -- Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war. Terry Pratchett, "Wachen! Wachen!" ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:} [Veranstaltungsdatenbank Vdb 0.3](http://termindbase.auge8472.de/)-
Om nah hoo pez nyeetz, Auge!
[2] @Matthias Apsel: <rummoser /> Warum gibt es in der Sonderzeichenleiste oberhalb des Textfeldes kein „TM“?
Weil du es damals nicht vorgeschlagen hast.
Matthias
-
Hallo
[2] @Matthias Apsel: <rummoser /> Warum gibt es in der Sonderzeichenleiste oberhalb des Textfeldes kein „TM“?
Weil du es damals nicht vorgeschlagen hast.
<rumfuchtel style="gesture: big wide with-exclamation-mark !important;" /> Muss ich *immer* *selbst* an alles denken? ;-)
Tschö, Auge
--
Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
Terry Pratchett, "Wachen! Wachen!"
ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
Veranstaltungsdatenbank Vdb 0.3 -
Hallo
Siehe Betreff.
Tschö, Auge
--
Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
Terry Pratchett, "Wachen! Wachen!"
ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
Veranstaltungsdatenbank Vdb 0.3-
Om nah hoo pez nyeetz, Auge!
Gern geschehen.
Matthias
-
-
-
-
Hallo,
wie schon geschrieben habe ich eine komplett andere Vorgehensweise als du. Um eine komplette Homepage zu erstellen liegen wir viel wohl zu weit auseinander und das sprengt auch die Möglichkeiten des Forums und meinen Zeitrahmen. Ich kann nur an Beispielen zeigen, das meine Vorgehensweise funktioniert und flexibel angepasst werden kann.
Ich stelle die Besucher / Kunden absolut in den Vordergrund. Die wollen Informationen, möglichst übersichtlich auf ihrem Ausgabegerät (nicht nur Bildschirme oder Screens) und ohne durch die persönlichen Vorlieben des Seitenerstellers / Auftraggebers gequält oder eingegrenzt zu werden.
Es gibt auch vieles, was Besucher nicht wollen. Das beachte ich natürlich auch.
Und ich mache keinen Schrott nach, nur weil viele überforderte Seitenersteller das auch machen und als gottgegeben hinstellen wollen, weil ihnen wirkliche Argumente fehlen.
Zuerst sammele ich deshalb die Informationen (und nur Informationen) die dem Besucher bereitgestellt werden sollen. Die packe ich dann semantisch korrekt in den HTML-Quellcode auf die gewünschten Seiten. Und zwar möglichst wenige Seiten, da die Besucher keinem Klick-Terror ausgesetzt sein möchten.
Dabei sind Breiten, Farben, Hintergründe, Navigation und ähnliches Beiwerk vollkommen uninteressant. Die Aufteilung der jeweiligen Seiten ergibt sich dann aus dem Inhalt und folgt nicht irgendwelchen obskuren Vorgaben, die irgendwelche Gurus mal (meist zudem in grauer Urzeit) verbreitet haben. Nach dem Inhalt richten sich dann auch die Media Queries bzw. das Responsive Design.
Wie du das Responisve Design dann aufbaust spielt im Endeffekt keine Rolle. Du kannst dich natürlich nach selbsternannten Gurus richten. Ich gehe lieber nach sachlichen Gesichtspunkten vor. Da ich vor einem relativ großem Bildschirm sitze und arbeite, gehe ich von dem aus und beziehe später die kleineren mit ein. Das ist für mich auch sinnvoll, da auf kleineren Bildschirmen oder anderen Ausgabegeräten häufig Informationen weggelassen werden. Wer andere Hardware hat oder auch nur andere Vorlieben kann genau so gut anders vorgehen.
Sich deshalb als erstes ohne Kenntnis des Inhalts zum Beispiel mit Seitenbreiten zu beschäftigen halte ich nicht für zielführend. Die Seitenbreiten sollen sich schließlich nach dem Inhalt richten. Wenn Inhalt in ein starres vorgegebenes Korsett gepresst wird geht in der Regel viel besucherfreundlichkeit verloren.
Zu meinem Vorgehen ist auch Grundlagenwissen von HTML und CSS und Semantik erforderlich. Das kann ich dir im Rahmen eines Forums leider nicht vermitteln, dafür gibt es Bücher und Videolehrgänge.
Gruss
MrMurphy
-
-
Hallo,
Es wird keinen Zeitpunkt geben, zu dem [HTML5] offiziell eingeführt wird. Was die Browserhersteller in ihre Browser einbauen kann und sollte somit genutzt werden. Die Entwicklung von HTML5 soll fließend geschehen, es sind also auch keine Updates geplant, zu denen bestimmte Funktionen offiziell eingeführt werden.
Das W3C entwickelt durchaus HTML 5 als W3C-Recommendation, die irgendwann offiziell fertig ist und dann als abgeschlossen gilt. Die 5 steht dabei durchaus für eine Versionsnummer. Der Nachfolger von HTML 5 ist demnach HTML 5.1, HTML 6 usw.
Die WHATWG hingegen entwickelt HTML ohne Version als »Living Standard«. Das »5« hat die WHATWG schon lange aus dem Namen der Spezifikation entfernt.
Richtig ist, dass man nicht auf die Verabschiedung von HTML 5.0 als W3C-Recommendation warten muss, bis man Features nutzen kann, sondern lediglich auf eine stabile Teilspezifikation und entsprechend konforme Browserimplementierungen. Für die WHATWG-Spezifikation gilt das ohnehin.
»HTML5« ist auch mehr ein Überbegriff, damit ist selten die HTML-Spezifikation im speziellen gemeint.
Mathias