HILFE Unterschiedliche Ansichten Media Quarry

[ESN-leader]

Guten Tag,
ich habe seid 2 wochen folgendes Problem.
Ich schreibe an einer Webseite, diese sollte (nur wenn möglich) auch für Mobile Endgeäte und Tablets laufen.
Nun ich habe schon sehr sehr sehr viele varianten mit @media screen and (min/max widthx versucht und irgendwie zeigt meine Webseite immer was anderes an oder übernimmt nach dem upload keine veränderungen...

Ich habe meinen text nun gestetet auf der seite:
https://www.w3schools.com/code/tryit...e=FEVL7K017BEK

(css musste dafür in den html code mit rein) Lider dadurch unübersichtlich, aber das ergebniss sieht sio aus wie ich es haben will.

nun habe ich meine webseite schon öfter auf der seite:
http://quirktools.com/screenfly/#u=h...=749&h=600&s=1

hin und her getestet wie sich wo was verschiebt und was noch fehlt.
Diese seite zeigt leide rgenau das an was meine webseite auch anzeigt.

Warum zeigt mir w3school die seite anders an als quirktool und warum ist meine seite so wie quirktool ?
ist der code so falsch?

bitte dringend um hilfe ich verzweifel mit dem kram...

[Goethe]

Ich habe mir deinen Code nur kurz überflogen, vermute aber das w3school nicht alle Daten hat. Sind die Bilder auch in w3school?
quirktool kenne ich nicht, aber wahrscheinlich sind alle Daten dort vorhanden. Damit erklärt sich der Unterschied.

Des weiteren solltest du den Code aufräumen.

[ESN-leader]

Nein die bilder habe ich nicht auf w3school. Aber die Areas in den sich die bilder befinden sind doch trotzdem definiert.
Ja der code ist einfach hintereinander weggeschrieben ich will den auch bald neu anordnen dass die verschiedenen teile beieinander sein, nur wollte ich eigl erst die funktionen endlich alle haben.
Hast im code an sich dinge gefundne die responsiv verhindern oder im qarry falsch sind?

[MrMurphy]

Hallo

Hast im code an sich dinge gefundne die responsiv verhindern oder im qarry falsch sind?

Für ein responsive Layout muss zunächst die Grundlage stimmen. Das ist der HTML-Quelltext im body-Bereich.

Dort mißbrauchst du ausgiebig Tabellen (table-Element) zum Layouten. Damit ist ein responsive Layout nicht möglich. Auf deiner Seite befinden sich überhaupt keine Tabellendaten, deshalb ist die Verwendung des table-Elements falsch.

In aktuellem HTML sind für bestimmte Inhalte bestimmte Container / Elemente vorgesehen. Danach sollte der Quelltext auch erstellt werden.

Weiterhin enthalten dein HTML-Quelltext und dein CSS-Quelltext sachliche Fehler. Die sollten zukünftig vermieden werden, da sie an vollkommen unerwarteten Stellen Auswirkungen haben können. Mit solchen Fehlern brauchen Probleme im Layout gar nicht erst angegangen zu werden.

Gruss

MrMurphy

[ESN-leader]

Das mit den Tabellen habe ich schon im Auge das sich das alles nochamal mit section und artikle? (glaube das sie die neusten bezeichungen) überarbeite.
Was sind denn sachliche fehler bei mir? em, px, pt angaben oder einfach ein code der keine wirkung hat?
Danke für deine anlyse

[MrMurphy]

Hallo

das sich das alles nochamal mit section und artikle?

Nicht nur. Sondern immer die inhaltlich passenden Container oder Elemente. Das sind deutlich mehr als die von dir genannten.

Was sind denn sachliche fehler bei mir?

Ich denke nicht dass dir jemand in unstrukturierten, unübersichtlichen Quelltexten alle Fehler raussucht.

Die Einheit pt ist zum Beispiel nur für die Druckausgabe gedacht.

Im htm-Quelltext im body-Bereich befinden sich einige p-Tags, die entweder nicht geöffnet oder nicht geschlossen wurden.

Oder du verwendest br-Elemente vollkommen unnötig.

Im navi_dropdown.css steht zum Beispiel "color: # 7ff;", also ein Leerzeichen an falscher Stelle.

Auch solltest du Besucherbarrieren wie

maximum-scale=1.0

in

meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"

vermeiden, grade in einem responsive Design.

Gruss

MrMurphy

[MrMurphy]

Hallo

Ich habe mal deinen HTML-Quelltext im body-Bereich umgeschrieben und dabei auf Zugänglichkeit (Barrierefreiheit), Benutzerfreundlichkeit (zum Beispiel die obere Navigation) und die Grundlage für Responsive Design geachtet. Das hat grade mal 20 Minuten gedauert.

Die Rechtschreibfehler in den Texten, die in gewerblichen Webseiten ein absolutes No-Go sind, habe ich bewußt ignoriert, obwohl die beim Lesen weh tun.

Der Rest ist dann nur noch CSS.

<body>
   <header id="pageheader" class="pageheader">
      <figure>
         <img src="" alt="Logo ESN">
      </figure>
      <h1>Energie Service Nord</h1>
   </header>
   <nav id="navigation" class="navigation">
      <a href="">Über uns</a>
      <a href="">Dienstleistungen</a>
      <a href="">Karriere</a>
   </nav>
   <main id="content" class="content">
      <section class="contentinhalt">
         <article>
            <h2>Herzlichen willkommen bei Energie Service Nord</h2>
            <h3>Wir stellen uns vor:</h3>
            <p>Energie Service Nord ist ein anbieterunabhängiges Unternehmen, dass im Strom-, Gas- und Telekommunikationssektor tätig ist. Das Thema wechseln ist in diesen Bereichen mitlerweile alltag für viele Menschen. Für diese ist es wichtig nicht die überteuerten Grundversorgertarife zu zahlen.</p>
            <p>Unsere Außendienstmitarbeiter sind darauf geschult, Kunden wärend des Wechsels zu betreuen und zu beraten um Komplikationen zu vermeiden, Tarife zu vergleichen und Energiespartips zu geben.</p>
            <p>Auch nach dem Wechsel treten oft viele Fragen und Probleme auf, daher sind unsere Außendienstmitarbeiter auch nach dem Wechsel gerne Ihre festen Ansprechpartner. Durch unsere bisherigen Bestandskunden haben wir die Erfahrung gemacht, dass es vielen Wechslern wichtig ist auch nach dem Wechsel weiterhin über Tarifänderungen informiert und gegebenenfalls davor geschützt zu werden. Daher gehört dies zu unserem kostenlosen Kundenservice.</p>
         </article>
         <article class="zuihrersicherheit">
            <h2>Zu Ihrer Sicherheit</h2>
            <dl>
               <div>
                  <dt>Quallitätsbogen</dt>
                  <dd>Mit dieser Checkliste werden die wichtigsten Punkte des Auftrages noch einmal mit Ihnen besprochen und Sie unterschreiben dafür, dass sie alles verstanden haben.</dd>
               </div>
               <div><dt>Qualitätsanruf</dt>
                  <dd>unser hauseigenes Callcenter führt einen Quallitätsanruf durch, dieser wird aufgezeichnet und es werden erneut alle Daten und Punkte des Auftrages widerholt mit anschließender Benotung des Mitarbeiters.</dd>
               </div>
               <div>
                  <dt>unsere Partner kontrollieren</dt>
                  <dd>stichprobenartig können Sie von einem unserer Partner angerufen werden um eine Kontrolle unserer Arbeit Quallität zu haben</dd>
               </div>
               <div>
                  <dt>Sie sind auf der sicheren Seite</dt>
                  <dd>außerdem unterliegt jeder Auftrag/Vertrag dem GBG und daher dem Widerrufsreht für Haustür- und Internetgeschäfte je nach Abschlussart ihres Auftrages/Vertrages</dd>
               </div>
            </dl>
         </article>
      </section>
      <aside class="infos">
         <h2>Infos</h2>
         <article class="infosnavi">
            <h3>Links</h3>
            <a href="">Anfahrt</a>
            <a href="">Aufgaben</a>
            <h3>Partner</h3>
            <a href="">Energie</a>
            <a href="">Leer</a>
         </article>
         <article class="oeffnungszeiten">
            <h3>Büro Öffnungszeiten</h3>
            <dl>
               <div>
                  <dt>Mo - Do:</dt>
                  <dd>9 - 15 Uhr</dd>
               </div>
               <div>
                  <dt>Fr:</dt>
                  <dd>nach Vereinbarung</dd>
               </div>
               <div>
                  <dt>Sa - So:</dt>
                  <dd>geschlossen</dd>
               </div>
            </dl>
         </article>
         <article class="weitereinfos">
            <h3>Weitere Infos</h3>
            <p>weitere wichtige infos, die viel Platz wegnehmen und vieles mehr.</p>
         </article>
         <article class="infoswichtig">
            <h3>Achtung !</h3>
            <p>Preisänderungen ab dem 01.05.2017 sind nicht berücksichtigt!</p>
         </article>
      </aside>
   </main>
   <footer id="pagefooter" class="pagefooter">
      <section class="pagefooternavi">
         <a href="">Kontakt</a>
         <a href="">Impressum</a>
         <a href="">AGB</a>
         <a href="">Datenschutz</a>
         <a href="">Handelsregister</a>
      </section>
   </footer>
</body>

Gruss

MrMurphy

[ESN-leader]

Cool danke soviel wolle ich gar nicht ich wollte nicht dass sich einer alles ansieht und sich da durch wurschteln muss, ich wolte die hinweise die du passend gabst von wegen <p> offen un d nicht geschlossen usw. also halt nur beispiele für code fehler.
Es gibt ein paar dinge die ich an dem neuen text nicht verstehe.
1. Html head body headr und dann nav, warum Nav?
Bzw macht man heute keine listen mehr?

2. was macht das navi dann nochmal in infos?

Ich suche erklärungen damit ich es verstehe und mit dem ich arbeiten kann, nicht einen Fertigen Text (echt nett von dir) den nicht verstehe ^^
ist nicht böse gemeint, aber um mit dem Text später arbeiten zu können muss ich wissen was das ist und ja ich weiß ich habe einige ASyntaxfehler bzw sehr veralteten syntax, gelernt ahbe ich das mal vor ca 10 jahren und nie wider gebraucht ^^

3. Wieso ahst du das NAvi mitten in den text geschrieben und nicht in einer extradatei (wie ich es hatte) ist das negativ für die seite wenn das menu, der infoteil und der footer extra eingebunden werden?


Eien weitere Frage noch ^^

Also dl dt dd hört sich von der beschreibung wofür das ist genau anch dem an was ich brauche, aber diese Tabelle musste ich n icht definieren sie war so wie ich sie haben wollte Begriff links - erläuterung rechts

<table>
<tr>
<td>Quallit&auml;tsbogen</td> <!--Links ohne Einstellungen--><td>Erklärung 1</td><!--rechts ohne Einstellungen-->
</tr>
 <tr>
 <td>Qualit&auml;tsanruf</td><td>Erläuterung 2</td>
 </tr>
</table>

Mit der Lösung dl usw steht der text so wie ich den code hier sortiert habe und sieht ohne weitere einstellungen schrecklich unkooridniert aus... Warum mehr arbeit?

<dl>
<dt>Quallitätsbogen</dt>
<!--Versatz--><dd>Erläuterung 1</dd>
<dt>Qualitätsanruf</dt>
<!--Versatz--><dd>Erläuterung 2</dd>
</dl> 

Ich kann mir vortsllen dass du mich nach den Fragen sicher schlagen willst, aber ich möchte es einfach gerne verstehen was daran besser ist als an eine Tabelle wo ich nicht weiter mit einer class oder einer id einstellen muss außer den tabellen rahmen ?

[ESN-leader]

So habe alles überarbeitet und ja du hattest recht dass ich durch die tabellen, divs und unter id´s viel doppelt und dreifach ausgerichtet hatte ^^
danke nochmal

[MrMurphy]

Hallo

ich wollte nicht dass sich einer alles ansieht und sich da durch wurschteln muss

Ich habe mich da auch gar nicht durchgewurstelt, sondern die Seite komplett neu erstellt. Das ging viel schneller. Deshalb

ich wolte die hinweise die du passend gabst von wegen <p> offen un d nicht geschlossen usw. also halt nur beispiele für code fehler.

musste ich mich damit gar nicht weiter beschäftigen.

Auf Fehlersuche musst du dich schon selbst begeben. Dazu kannst du zum Beispiel Validierungstools verwenden.

Das Problem mit der bisherigen Seite sind zudem nicht nur die sachlichen Fehler, sondern der gesamte Aufbau. Der ist insgesamt veraltet und enthält Elemente, die heutzutage überhaupt nicht mehr (oder nicht in dem Zusammenhang) verwendet werden sollten. Das im einzelnen zu erklären würde ein ganzes Buch füllen. Damit sind wir hier im Forum überfordert.

Html head body headr und dann nav, warum Nav?

Weil das nav-Element für die Hauptnavigation gedacht ist und nach den HTML5-Regel auch dafür angewendet werden soll.

Bzw macht man heute keine listen mehr?

Für Navigationen waren nie Listen gedacht oder gar vorgeschrieben. Vor der Einführung des nav-Elements gab es keine anderen Möglichkeiten als Listen um gleichartige Elemente in ihrer Bedeutung zusammenzufassen. Deshalb hat man dafür seit Einführung von HTML4 und CSS2 Listen verwendet. Das wurde im Laufe der Zeit so üblich, dass viele Webseitenersteller glaubten (und auch heutzutage noch glauben) dass für eine wichtige Navigation Listen erforderlich oder gar vorgeschrieben sind. Das ist aber falsch. Listen konnten und können verwendet werden, mussten und müssen es aber nicht. Wer Anderen Listen vorschreiben will hat HTML / CSS nicht verstanden.

Navigationen in Listen hatten immer schon mehr Nach- als Vorteile. Viele altgediente Webseitenersteller tun sich bis heute damit schwer auf ihre "geliebten" Listen zu verzichten.

was macht das navi dann nochmal in infos?

Die Navigation befindet sich nicht nochmal in den Infos. Sondern die Untermenüs erscheinen nur dort.

Wie schon geschrieben sollten Webseiten benutzerfreundlich erstellt werden. Alle zunächst versteckten Texte (damit auch Navigationen) sind benutzerunfreundlich und stellen Barrieren da. Viele Besucher finden solche versteckten Inhalte häufig auch nicht. Und das kann wohl kaum der Sinn einer Webseite sein.

Zudem sind solche Navigationen häufig auf Touchscreens nicht bedienbar, mit Screenreadern oder anderen Eingabegeräten meist überhaupt nicht. Deshalb sollte die Navigation immer sichtbar sein.

Wenn es um die Dienstleistungen geht können dort die Untermenüs der Dienstleistungen erscheinen. Und so weiter.

Ich suche erklärungen damit ich es verstehe und mit dem ich arbeiten kann

Dann kommst du nicht darum herum zunächst aktuelles HTML und CSS zu lernen. Außerdem wie benutzerfreundliche Seiten und am Besten noch barrierefreie Seiten erstellt werden.

Wieso ahst du das NAvi mitten in den text geschrieben und nicht in einer extradatei (wie ich es hatte) ist das negativ für die seite wenn das menu, der infoteil und der footer extra eingebunden werden?

Weil es einfacher ist zunächst eine HTML-Webseite mit dem gewünschten Verhalten zu erstellen. Die Aufteilung, um die Seite mit PHP zusammenzubauen, folgt im nächsten Schritt. Das sollte dann kein Problem mehr sein.

In der Praxis ist es natürlich sinnvoll, häufig verwendete gleiche Inhalte auszulagern, um sie einfacher pflegen zu können.

aber diese Tabelle musste ich n icht definieren

Elemente dürfen nach den HTML-Regeln nicht nach ihrem Aussehen gewählt werden, sondern nach dem Inhalt , der in ihnen enthalten ist. Du hast keine Tabellendaten, also ist das table-Element sachlich falsch. Mit fälschlich verwendeten Tabellen machst du den Inhalt für Screenreadernutzer so gut wie unzugänglich. Zusätzlich ist damit kaum ein responsive Layout möglich. Für das Aussehen ist nur und ausschließlich CSS zuständig.

so wie ich sie haben wollte Begriff links - erläuterung rechts

Das geht mit dl-Listen auch.

Mit der Lösung dl usw steht der text so wie ich den code hier sortiert habe und sieht ohne weitere einstellungen schrecklich unkooridniert aus... Warum mehr arbeit?

Nein, es ist keine große Mehrarbeit. Das erscheint dir nur wegen deines fehlenden Wissens so. Für das von dir gewünschte (und von gewerblichen Seiten heutzutage erwartete) responsive Layout kommst du um das Lernen nicht herum.

Ich kann mir vortsllen dass du mich nach den Fragen sicher schlagen willst,

Nein. Ich befürchte eher, dass du mit aktuellem HTML und CSS überfordert bist, da deine gesamte Sichtweise sich ändern muss. Du bist offensichtlich noch dem Papierdenken verhaftet und hast vom Layout / Aussehen einer Webseite teilweise veraltete und teilweise laienhafte Vorstellungen, die sich erfahrungsgemäß nur schwer ändern lassen.

aber ich möchte es einfach gerne verstehen was daran besser ist als an eine Tabelle wo ich nicht weiter mit einer class oder einer id einstellen muss außer den tabellen rahmen ?

Dazu reichen ein paar Forenfragen und -antworten leider nicht aus.

Gruss

MrMurphy

[MrMurphy]

Hallo

Ich habe mal eine Testseite erstellt.

Testseite heißt, dass sie noch nicht komplett fertig ist. Kleinigkeiten wie runde Ecken interessieren in diesem Stadium noch nicht. Die Hintergrundfarben sind für die Praxis teilweise noch zu knallig gewählt, sie sollen zur Zeit hauptsächlich gut sichtbar sein. Und so weiter.

Was auf der Testseite so vorhanden ist soll ansonsten auch so sein. Zum Beispiel dass auf der Testseite auf das große Hintergrundbild mit all seinen Nachteilen verzichtet wurde. Und das statt dessen eine kleinere Ausgabe im header erscheint. Aber bei schmalen Fenstern auch nur so lange, wie es überhaupt sinnvoll sichtbar ist. Oder die Anordnung der Texte.

Im Vordergrund stand dabei für mich der Besucher = die Besucherfreundlichkeit. Der soll schließlich einen guten Eindruck gewinnen und die von ihm gesuchten Informationen problemlos finden und lesen können. Und zwar möglichst viele Besucher, auch solche mit Einschränkungen. Und egal, mit welchen Endgeräten sie die Seite aufsuchen.

http://boratb.bplaced.net/index13.html

Gruss

MrMurphy