salzberg: Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet...

Hallo zusammen,

im Browser, auch im 'Responsive-ansichts-Modus funktioniert alles wunderbar... ... doch am echten iPhone (hochkant, 640 Bildpunkte...) kommt nur die Tablet-Ansicht.

Wie kann das sein?

Hier der maßgebliche (einfache) Code mit den paaar Unterschieden...nach dem allgemeinen css:

@media (min-width: 768px){ 

	.style-nav ul li {
		display: inline-block;
	}
	
	.style-nav ul {
	text-align: center;
	}
}
  1. Hallo salzberg,

    @media (min-width: 768px){ 
    }
    

    Setze deine Mediaqueries nicht in Pixel sondern in em entsprechend dem Inhalt. Siehe etwa diesen Beitrag.

    Bis demnächst
    Matthias

    --
    Du kannst das Projekt SELFHTML unterstützen,
    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
  2. @@salzberg

    … kommt nur die Tablet-Ansicht.

    „Responsive Design“ und „Tablet-Ansicht“ schließen sich gegenseitig aus. Beim Responsive Design gibt es keine Geräteklassen „Mobile“, „Tablet“, „Desktop“. Oder andersrum gesagt: Wer mit Begriffen „Mobile“, „Tablet“, „Desktop“ rumhantiert, der macht kein Responsive Design.

    @media (min-width: 768px)

    Wer mit der Zahl 768 rumhantiert, der macht kein Responsive Design.

    Wie kann das sein?

    Ich vermute, das iPhone denkt, die Seite soll 960 Pixel breit sein, weil du nichts anderes angegeben hast.

    LLAP 🖖

    --
    „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
    „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

    —Marc-Uwe Kling
    1. Danke für die Antworten... aber als Greenhorn komm' ich damit aber momentan nicht so richtig weiter. ...dachte, meine Frag wäre, vielleicht einfach zu beantworten... scheint aber wohl nicht so zu sein... zumindest nicht in der Form eines einfachen Lösungsvorschlags...

      Ich arbeite mit einem Tutorial – gut das ist 3 Jahre... denke aber nicht, dass sich innerhalb dieser Zeit so gut wie alles geändert hat... und alles was dort gezeigt wird, über den Haufen geschmissen werden muss - auch wenn ihr Profis, solche Seiten wahrscheinlich ganz anders aufbauen und so manches anders benennen würdet.

      Mein Responsive Design (nach dem Muster aus dem Tutorial) funktioniert in der Responsive-Simulation des Browsers. Die Seite ist grundsätzlich für Smartphone-Bildschirme aufgebaut, sobald der Breiter größer als 768 px ist, gibt es ein paar Änderungen... und nochmals welche ab 1024. Für mich erscheint es am einfachsten, die Bildschirmgröße, die ja mit Bildpunkten angegeben wird, abzufragen... und dementsprechend den jeweiligen css-Anweisungen zu aktivieren... alles andere begreife ich derzeit (noch) nicht.

      Warum das mit dem iPhone so nicht funktioniert... das ist immer noch meine Frage.

      Ach so, hier noch der Link zum erwähnten Tutorial. (3 Lektionen)

      1. Hallo,

        ...dachte, meine Frag wäre, vielleicht einfach zu beantworten... scheint aber wohl nicht so zu sein... zumindest nicht in der Form eines einfachen Lösungsvorschlags...

        Warum nicht? „Arbeite mit 'em' statt 'px'“ ist doch ein einfacher Lösungsvorschlag!

        Gruß
        Kalk

        1. Servus!

          Hallo,

          ...dachte, meine Frage wäre, vielleicht einfach zu beantworten... scheint aber wohl nicht so zu sein... zumindest nicht in der Form eines einfachen Lösungsvorschlags...

          Willkommen im SELF-Forum, in dem manchmal mehr Antworten kommen als erwartet, sodass dann die Übersicht verloren geht!

          Warum nicht? „Arbeite mit 'em' statt 'px'“ ist doch ein einfacher Lösungsvorschlag!

          Das Adobe-Tutorial ist gut!

          SELFHTML hat im Wiki eines, das versucht die Besonderheiten des responsiven Designs herauszustellen:

          Hier werden einfach ein paar Änderungen (die aber meist Vereinfachungen gegenüber früher sind) erklärt:

          Gerade Apple versucht, Seiten immer in der Ganze-Seiten-Ansicht darzustellen. Deshalb muss man die Viewport-Angabe setzen:

          <!doctype html>
          <html lang="de">
            <head>
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              ...
          

          Der Begriff em scheint für Anfänger eine "unlogische" Größe zu sein, hilft aber wirklich, da er nicht die angebliche Auflösung des Telefons in Pixel (Bei Retina-Displays gibt's da doppelt so viele, die wieder umgerechnet werden; die Schriftgröße ändert wieder alles) sondern die tatsächlichen Maße, aber eben in einer relativen Einheit, ausdrückt.

          Jetzt erst kann man die media queries (aber in em) setzen. Alles untereinander (Mobile first!) und, wenn Platz ist, dann nebeneinander! Anstelle von pixelgenauem Layout lieber Flexbox oder Grid verwenden.

          Apropos 768Pixel, Schau dir mal diese Grafik an und versuche passend Viewports zu setzen:

          CSS/Tutorials/Einstieg/Media Queries#Breakpoints: Inhalt über Design

          Herzliche Grüße

          Matthias Scharwies

          --
          25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
          1. Herzlichen Dank schon mal für den sehr ausführlichen Text.

            Ich werde das alles mal nacheinander abarbeiten... kann aber eine Weile dauern, da ich meist nur abends an dem Projekt arbeiten kann... ...melde mich, wenn es Neues gibt.

          2. Hallo nochmals,

            hab' versucht, das ganze zu begreifen... komme aber nicht so recht weiter... Offenbar muss heute doch schon wieder vieles anders laufen, als in den Adobe-Videos gezeigt... schade... war noch so schön einfach (für mich) zu verstehen... genauso wie das Video auf dieser Seite hier... aber wenn z.B. px-Angaben wirklich out sind, bringt das wohl nicht nur mit sich. dass das einzige, was man machen muss, ist, px durch entsprechende em-Werte austauschen...

            …wünschte, es gäbe solche Videos mit em, viewport, flexbox, aside, etc.

            Es ist ja super, dass Menschen sich die Mühe machen, so viele Informationen, wie hier im wiki zusammenzustellen... Doch offenbar benötigt es doch gewisse Grundlagen, um die Dinge zu verstehen, es kommen dann immer schnell weitere Begriffe ins Spiel, die ich alle nicht verstehe.

            Ich verstehe auch diese Grafik in diesem Eintrag nicht. Was soll denn damit ausgesagt werden? ... und mit welchen Einheiten werden denn z.b. Viewport- (also Anzeige-) Breiten gemessen?

            Was sind realistische Werte? Wieviel Breakpoints sollte man setzen? Wie kann man das ganze ausprobieren, wenn das über die Größenänderung des Browserfensters nicht mehr funktioniert?

            Warum gibt es dann diese Desktop-Browser Responsive-Ansichten, wenn sie offenbar in keiner Weise zuverlässig sind? (am Mac in Safari wunderschön angelegt, mit einer große Auswahl an aktuellen (Apple-) Geräten... für was das ganze dann?)

            Jetzt aber noch eine ganz praktische Frage: In den Beiträgen wird immer wieder erwähnt, dass es – offenbar auch bei Mobile-First – irgendwo eine Abfrage (oder Angabe?) für die Anzeige-Breite für dieses Anzeigendesign bräuchte. Aber wo soll das denn dann stehen, bzw, wo, im style-sheet steht dann dass, was für alle Anzeigekombinationen gilt?

            Ich poste hier mal mein css... (immer noch mit Pixel-Angaben, da mir deren erfolgreiche Ersetzung, wie oben erwähnt, einfach noch nicht klar ist) mit der Frage, ob man den Code nun komplett über den Haufen werfen sollte, oder ob er mit stellenweisen Änderungen vielleicht doch noch brauchbar gemacht werden kann.

            Vielen Dank schon mal und einen schönen Tag euch allen.

            Quelltext hier@charset "UTF-8";
            /* CSS Document */
            
            html,
            html *  {
            	padding: 0;
            	margin: 0;
            	box-sizing: border-box;
            	font-family: Verdana, Arial, Helvetica, sans-serif;
            	font-size: small;
            	font-weight: 400;
            	}
            	A:hover { color: #333333;  }
            	
            header {
            	padding-top: 20px;
            	padding-left: 5px;
            	padding-right: 1px;
            	}
            
            img {
            	width: 100%;
            	max-width: 100%;
            	height: auto;
            	vertical-align: middle;
            	padding-left: 5px;
            	padding-right: 5px;
            }
            
            footer {
            	padding-top: 2px;
            }
            
            .style-logo {
            	margin-left: auto;
            	margin-right: auto;
            	text-align: center;
            	font-size: larger;
            	color: #999999;
            	font-weight: 1000
            }
            
            .style-nav ul {
            	list-style-type: none;
            	padding-left: 0;
            }
            			
            .style-nav ul li a {
            	text-decoration: none;
            	color: #999999;
            	text-align: center;
            	font-weight: 500;
            	display: block;
            	padding: 6px;
            }	
            		
            .footer-text {
            	font-size: 13px;
            	color: #666666;
            	text-align: center;
            	margin-bottom: 10px;
            }
            	
            .row:before, .row:after {
            	content: "";
            	display: table;
            }
            	
            .rowa:after {
            	clear:both;
            }
            
            
            /*Tablett-Ansicht*/
            
            @media (min-width: 768px){ 
            
            	.style-nav ul li {
            		display: inline-block;
            	}
            	
            	.style-nav ul {
            	text-align: center;
            	}
            }
            
            /*Computer-Ansicht*/
            
            @media (min-width: 1024px){ 
            
            	.style-logo {
            	float: left;
            	}
            	
            	.style-nav {
            	float: right;
            	}
            }
            
            
            1. Hallo salzberg,

              bringt das wohl nicht nur mit sich. dass das einzige, was man machen muss, ist, px durch entsprechende em-Werte austauschen...

              Setze keine gerätespezifischen Breakpoints sondern setze sie abhängig vom Inhalt, zum Beispiel dann, wenn deine Überschrift nicht mehr einzeilig auf die Seite passt. Bzw. mobile first - wenn der Bildschirm genügend Platz für eine andere Gesatltung bietet.

              Ich verstehe auch diese Grafik in diesem Eintrag nicht. Was soll denn damit ausgesagt werden?

              Dass es sehr sehr viele Abmessungen von Bildschirmen gibt.

              Was sind realistische Werte?

              Überlege dir, wie breit ein Text sein sollte, damit man ihn gut erfassen kann. Als negativ-Beispiel kann die Wikipedia auf breiten Bildschirmen gelten.

              Wieviel Breakpoints sollte man setzen?

              Im Idealfall keinen, weil du eine Gestaltung verwendest, die ohne auskommt. Sonst eher wenige.

              Wie kann man das ganze ausprobieren, wenn das über die Größenänderung des Browserfensters nicht mehr funktioniert?

              Wenn du dich am Inhalt und nicht an Geräteabmessungen orientierst, funktioniert es genau so.

              Warum gibt es dann diese Desktop-Browser Responsive-Ansichten, wenn sie offenbar in keiner Weise zuverlässig sind? (am Mac in Safari wunderschön angelegt, mit einer große Auswahl an aktuellen (Apple-) Geräten... für was das ganze dann?)

              Orientiere dich nicht an den Abmessungen irgendwelcher Geräte.

              Jetzt aber noch eine ganz praktische Frage: In den Beiträgen wird immer wieder erwähnt, dass es – offenbar auch bei Mobile-First – irgendwo eine Abfrage (oder Angabe?) für die Anzeige-Breite für dieses Anzeigendesign bräuchte.

              Nein, mobile-first bedeutet, dass diese dein "default"-Darstellung ist.

              Aber wo soll das denn dann stehen, bzw, wo, im style-sheet steht dann dass, was für alle Anzeigekombinationen gilt?

              Am ANfang, ohne MQ.

              css @media (min-width: 1024px){

              .style-logo { float: left; }

              .style-nav { float: right; } }

              Float ist für das Umfließen von etwa Grafiken durch Text gedacht, nicht für Gestaltung, dafür gibt es flexbox oder grid. Aber das wäre vielleicht der nächste Schritt.

              Bis demnächst
              Matthias

              --
              Du kannst das Projekt SELFHTML unterstützen,
              indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
            2. Hallo salzberg,

              Warum gibt es dann diese Desktop-Browser Responsive-Ansichten, wenn sie offenbar in keiner Weise zuverlässig sind? (am Mac in Safari wunderschön angelegt, mit einer große Auswahl an aktuellen (Apple-) Geräten... für was das ganze dann?)

              Ich poste hier mal mein css...

              Das CSS allein ist ohne das HTML, das es gestalten soll, wenig hilfreich.

              Eine viewport-Angabe verwendest du?

              Vielen Dank schon mal und einen schönen Tag euch allen.

              Ebenso!

              Bis demnächst
              Matthias

              --
              Du kannst das Projekt SELFHTML unterstützen,
              indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
            3. Hallo nochmals,

              Ich poste hier mal mein css... (immer noch mit Pixel-Angaben, da mir deren erfolgreiche Ersetzung, wie oben erwähnt, einfach noch nicht klar ist) mit der Frage, ob man den Code nun komplett über den Haufen werfen sollte, oder ob er mit stellenweisen Änderungen vielleicht doch noch brauchbar gemacht werden kann.

              Quelltext hier@charset "UTF-8";
              /* CSS Document */
              
              html,
              html *  {
              	padding: 0;
              	margin: 0;
              	box-sizing: border-box;
              	font-family: Verdana, Arial, Helvetica, sans-serif;
              	font-size: small;
              	font-weight: 400;
              	}
              	A:hover { color: #333333;  }
              	
              

              Sag mal, könnte es einfach nur ein Rechenfehler sein?

              Du gibst nur html und dessen Kindelementen (html *) ein box-sizing. Gerade in Navigationen und z.B bei Bildern, die nicht direkte Kindelemente von html sind, gibt es aber noch Abstände in Form von margin, padding und auch border.

              Probier mal:

              html {
                box-sizing: border-box;
              }
              *, ::before, ::after {
                box-sizing: inherit;
              }
              

              Und schau mal, wann die Breakpoints umschalten, indem du im Firefox das Browser-Fenster immer weiter zusammenziehst.

              1. @@Matthias Scharwies (nicht angemeldet)

                Sag mal, könnte es einfach nur ein Rechenfehler sein?

                Du gibst nur html und dessen Kindelementen (html *) ein box-sizing.

                Sag mal, könnte es einfach nur ein Denkfehler sein? 😜

                (Leerzeichen) ist der Nachfahren-Kombinator. (Der Kind-Kombinator ist >.)

                Da alle Elemente außer html selbst Nachfahren von html sind, tut html, html * dasselbe wie * (von der Spezifität abgesehen).

                Probier mal:

                html {
                  box-sizing: border-box;
                }
                *, ::before, ::after {
                  box-sizing: inherit;
                }
                

                Nein, so sollte man das nun gerade nicht machen.

                Sondern:

                *, ::before, ::after {
                  box-sizing: border-box;
                }
                

                LLAP 🖖

                --
                „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
                „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

                —Marc-Uwe Kling
                1. Hallo Gunnar Bittersmann,

                  tut html, html * dasselbe wie * (von der Spezifität abgesehen).

                  Da wollte ich doch grade fragen, wieso, aber wenn man sich das Wesentliche auf eine Zeile holt, erübrigt sich das (Ich hatte gelesen, html hätte eine andere Spezifität als html *).

                  Bis demnächst
                  Matthias

                  --
                  Du kannst das Projekt SELFHTML unterstützen,
                  indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
        2. Hi there,

          ...dachte, meine Frag wäre, vielleicht einfach zu beantworten... scheint aber wohl nicht so zu sein... zumindest nicht in der Form eines einfachen Lösungsvorschlags...

          Warum nicht? „Arbeite mit 'em' statt 'px'“ ist doch ein einfacher Lösungsvorschlag!

          Vielleicht, aber nicht für das Problem des Originalposters. Genausogut hätte man erwähnen können, daß er zum designen keine Tabellen verwenden darf - auf seinem Iphon wäre die Darstellung immer noch "falsch"...

        3. Also einfach anstelle z.B. 768px dann ???em (Hab' paar Werte probiert... keiner passte...)

          ..oder ist das so einfach nicht?

          Blicke das noch nicht.... sorry...

          1. Hi there,

            Also einfach anstelle z.B. 768px dann ???em (Hab' paar Werte probiert... keiner passte...)

            natürlich nicht, weil das mit Deinem Problem auch nichts zu tun hat. Kann man sich Deine Seite irgendwo anschauen?

            1. Hallo klawischnigg,

              Also einfach anstelle z.B. 768px dann ???em (Hab' paar Werte probiert... keiner passte...)

              natürlich nicht, weil das mit Deinem Problem auch nichts zu tun hat. Kann man sich Deine Seite irgendwo anschauen?

              Solange man gerätespezifisch denkt, schon.

              Bis demnächst
              Matthias

              --
              Du kannst das Projekt SELFHTML unterstützen,
              indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
              1. Hi there,

                Also einfach anstelle z.B. 768px dann ???em (Hab' paar Werte probiert... keiner passte...)

                natürlich nicht, weil das mit Deinem Problem auch nichts zu tun hat. Kann man sich Deine Seite irgendwo anschauen?

                Solange man gerätespezifisch denkt, schon.

                Sry, das versteh' ich nicht. Man ersetzt in den Media-query-Angaben einen Wert in px, der nicht passt, durch einen Wert in em, der nicht passt. Damit kann man ein Problem, das seine Ursache offensichtlich woanders hat, nicht lösen. Anstatt reflexartig irgendwelche Pixelangaben durch em oder was auch immer ersetzen zu wollen hätte man wahrscheinlich eher in die Meta-Angaben der Seite schauen sollen. Schad' um die Zeit...

                1. Hallo klawischnigg,

                  hätte man wahrscheinlich eher in die Meta-Angaben der Seite schauen sollen.

                  Ja, das ist mir auf dem Weg zur Arbeit auch in den Sinn gekommen.

                  Bis demnächst
                  Matthias

                  --
                  Du kannst das Projekt SELFHTML unterstützen,
                  indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                  1. @@Matthias Apsel

                    hätte man wahrscheinlich eher in die Meta-Angaben der Seite schauen sollen.

                    Ja, das ist mir auf dem Weg zur Arbeit auch in den Sinn gekommen.

                    Das sagte ich doch schon von Anfang an.

                    LLAP 🖖

                    --
                    „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
                    „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

                    —Marc-Uwe Kling
                    1. Hallo Gunnar Bittersmann,

                      hätte man wahrscheinlich eher in die Meta-Angaben der Seite schauen sollen.

                      Ja, das ist mir auf dem Weg zur Arbeit auch in den Sinn gekommen.

                      Das sagte ich doch schon von Anfang an.

                      Aber, da @Matthias Scharwies das verwendete Tutorial gelobt hat, bin ich davon ausgegangen, dass dies berücksichtigt wurde.

                      Bis demnächst
                      Matthias

                      --
                      Du kannst das Projekt SELFHTML unterstützen,
                      indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                      1. ... bin ich davon ausgegangen, dass dies berücksichtigt wurde.

                        Ja die Meta-Angabe im HTML hatte ich geänder... nur vergessen, das zu erwähnen.

                        Ich hänge hier jetzt doch noch den ganzen HTML-Code rein... mit Platzhaltertexten versehen...

                        Aber jetzt nochmals auf den Punkt gebracht: Auch, wenn diese Site so aufzubauen, offenbar nicht der beste, oder nicht mehr zeitgemäße Weg ist und es auch sonst noch mehrere Möglichkeiten gibt, Seiten für vielerlei Geräte zu optimieren... ... ich denke, auf die Art wie meine (bzw. die von Adobe 10/2016) müste ja eingentlich trotzdem funktioniern... aber sie tut es nicht. am iPhone wird die Tablett-Ansicht angezeigt und am iPad die für den Desktop-Bildschirm. Werden vielleicht doch einfach die Maße der langen Bildschirmseite herangezogen, auch wenn sich das Gerät im Hochformat befindet?

                        1. ... ich denke, auf die Art wie meine (bzw. die von Adobe 10/2016) müste ja eingentlich trotzdem funktioniern... aber sie tut es nicht. am iPhone wird die Tablett-Ansicht angezeigt und am iPad die für den Desktop-Bildschirm. Werden vielleicht doch einfach die Maße der langen Bildschirmseite herangezogen, auch wenn sich das Gerät im Hochformat befindet?

                          Probier mal:

                          @media (min-width: 1024px) and (orientation: portrait) { /* Formate für hochformatige Ausgabemedien */ 
                           {
                          
                            .style-logo { 
                              float: left; 
                            }
                          
                          
                          }
                          
                          1. Probier mal:

                            Bzw:

                            @media (min-width: 1024px) and (orientation: landscape) { 
                              /* Formate für hochformatige Ausgabemedien */ 
                              ...
                            }
                            
                            1. Hallo

                              Probier mal:

                              Bzw:

                              @media (min-width: 1024px) and (orientation: landscape) { 
                                /* Formate für hochformatige Ausgabemedien */ 
                                ...
                              }
                              

                              Verwechselst du da nicht etwas? Portrait ≙ (entspricht) Hochformat und Landscape ≙ Querformat.

                              Tschö, Auge

                              --
                              Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
                              Hohle Köpfe von Terry Pratchett
                            2. Ja, es liegt an den Angaben an dieser Stelle...
                              ...allerdings braucht es beispielsweise:

                              @media only screen and (min-width: 768px)

                              und wenn das Aussehen für Hoch- und Querformat das selbe sein soll, braucht man wohl:

                              min-device-with anstelle min-width

                              das ganze lässt sich auch noch mit zusätzlich mitand (max-...)kombinieren.

                              Endlich funktioniert es nun. 😊

                              1. Hallo salzberg,

                                und wenn das Aussehen für Hoch- und Querformat das selbe sein soll, braucht man wohl:

                                … darf man wohl an dieser Stelle keinen Breakpunkt setzen.

                                Endlich funktioniert es nun. 😊

                                Prima.

                                Bis demnächst
                                Matthias

                                --
                                Du kannst das Projekt SELFHTML unterstützen,
                                indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                      2. oh, code vergessen...

                        <!DOCTYPE html>
                        <html>
                        	<head>
                        		<meta charset="UTF-8">
                        		<meta name="viewport" content="width=device-width, initial-scale=1.0">
                        		<title>Titel</title>
                        		<link rel="stylesheet" href="styles.css">			
                        	
                        	</head>
                        
                        <body> 
                        
                        	<header>
                            <div class="row">
                            <div class="col">
                            <p class="style-logo">Studio XX</p>
                            <nav class="style-nav">
                            	<ul>
                                	<li><a href="#" target="_blank">galerie</a></li>
                                    <li><a href="kontaktdaten">kontakt</a></li>          
                                </ul>
                                </nav>
                            </div>
                            </div>
                            
                            
                            
                            </header>
                            
                        	<main>
                               	<div class="row">        	
                                	<div class="col"><img src=""bilder\beispielbild.jpg""alt="beispielbild"></div>         
                                </div>
                                
                            
                            </main>
                            
                            <footer>
                            	<div class="row">        	
                                	<div class="col">
                                    	<p class="footer-text" id="kontaktdaten">Name | Stadt| D | Telefon | e.mail
                                        </p>
                                    </div>
                                </div>
                            
                            </footer>
                        
                        
                        </body>
                        </html>
                        
                        1. @@salzberg

                          oh, code vergessen...

                          <!DOCTYPE html>
                          <html>
                          

                          … und im Code die Angabe der Sprache: <html lang="de"> für Deutsch.


                          <body> 
                          
                          	<header>
                              <div class="row">
                              <div class="col">
                          

                          Oh je, Bootstrap?

                          Sollte dann nicht ein Vorfahrenelement von .row die Klasse container haben, also entweder <header class="container"> oder <body class="container">?

                          Im zweiten Fall kannst du dir eine Ebene an div sparen:

                          <body class="container">
                            <header class="row">
                              <div class="col"></div></header>
                            <main class="row"></main>
                            <footer class="row"></footer>
                          </body>
                          

                              <nav class="style-nav">
                              	<ul>
                                  <li><a href="#" target="_blank">galerie</a></li>
                                  <li><a href="kontaktdaten">kontakt</a></li>          
                                </ul>
                              </nav>
                          

                          Substantive solltest du im Markup groß schreiben: Galerie, Kontakt.

                          Wenn du in der visuellen(!) Darstellung Kleinschreibung möchtest, ist das Sache von CSS:

                          .style-nav { text-transform: lowercase }
                          

                          <img src=""bilder\beispielbild.jpg""alt="beispielbild">

                          Das funktioniert wohl auch nur lokal auf deinem Windows-System. Im Web ist \ falsch, / richtig.

                          Wenn’s denn überhaupt funktioniert; da sind ein paar Anführungszeichen zu viel. Und ein Leerzeichen zu wenig.

                          LLAP 🖖

                          --
                          „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
                          „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

                          —Marc-Uwe Kling
                          1. Hallo

                            Sollte dann nicht ein Vorfahrenelement von .row die Klasse container haben, also entwerder <header class="container"> oder <body class="container">?

                            Ich habe in deinem Posting das den Codeabschnitt abschließende Backtick hinter „Klasse container“ gesetzt, damit der Absatz lesbar ist. Die Codeformatierung hat vorher den Rest des Absatzes verhauen (aber nicht verprügelt).

                            Tschö, Auge

                            --
                            Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
                            Hohle Köpfe von Terry Pratchett
                          2. gut aufgepasst...- da hatte ich für das Platzhalter-Bild, unter Windows einfach den Pfad-Abschnitt reinkopiert...

                            Danke...

                            Oh... Antwort einen Post zu tief gerutscht...

                          3. @@Gunnar Bittersmann

                            Wenn’s denn überhaupt funktioniert; […] ein Leerzeichen zu wenig.

                            Wobei es in (einigen/allen?) Browsern auch ohne Leerzeichen zwischen Attributen funktioniert, wenn die Attributwerte in Anführungszeichen stehen.

                            Bei der CSSBattle hatte ich – am Anfang, als SVG noch erlaubt war – so desöfteren ein Zeichen eingespart. Wenn denn die Anführungszeichen um die Attributwerte nötig waren; ansonsten hab ich die zwei Zeichen eingespart.

                            Nichts davon würde ich in Produktivcode tun.

                            LLAP 🖖

                            --
                            „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
                            „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

                            —Marc-Uwe Kling
      2. Hallo,

        zum Thema „Pixel“:

        Willst du, nur weil es irgendein Hersteller geschafft hat, auf einem Display mit 10cm Diagonale 4000*2000 Pixel unterzubringen, das deine Seite auf diesem Display das gleiche Layout hat, wie auf einem Monitor mit 2 Meter Bilddiagonale?

        Gruß
        Jürgen

        1. @@JürgenB

          zum Thema „Pixel“:

          Willst du, nur weil es irgendein Hersteller geschafft hat, auf einem Display mit 10cm Diagonale 4000*2000 Pixel unterzubringen, das deine Seite auf diesem Display das gleiche Layout hat, wie auf einem Monitor mit 2 Meter Bilddiagonale?

          Nein, das will man nicht.

          Aber: das wird auch nicht passieren.

          Zu Thema „Pixel“ sei noch einmal gesagt, dass CSS-Pixel nichts mit Gerätepixeln zu tun haben.

          Dass beides immer wieder durcheinandergebracht wird, ist ein weiterer Grund, im Stylesheet nirgendwo px zu verwenden.

          LLAP 🖖

          --
          „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
          „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

          —Marc-Uwe Kling
          1. Hallo Gunnar,

            das sollte ein „drastisches“ Beispiel sein, um Werbung für em in Mediaqueries zu machen.

            zum Thema „Pixel“:

            Willst du, nur weil es irgendein Hersteller geschafft hat, auf einem Display mit 10cm Diagonale 4000*2000 Pixel unterzubringen, das deine Seite auf diesem Display das gleiche Layout hat, wie auf einem Monitor mit 2 Meter Bilddiagonale?

            Nein, das will man nicht.

            Aber: das wird auch nicht passieren.

            Zu Thema „Pixel“ sei noch einmal gesagt, dass CSS-Pixel nichts mit Gerätepixeln zu tun haben.

            ich bin in einem Alter, in dem die Sehstärke nachlässt. Als ich bei der Arbeit meinen ersten Full-HD-Monitor bekommen habe, hatte ich Mühe, die Schriftgrößen etc. auf Maximum zu stellen, weil ich die Angaben im Setup-Programm kaum lesen konnte. Ich habe mit der Nase fast den Bildschirm berührt.

            Bei Smartphones passt das mit den CSS-Pixeln, bei PC-Bildschirmen bin ich mir da nicht so sicher. Daher em statt px.

            Gruß
            Jürgen

            1. Hallo Jürgen,

              ich bin in einem Alter, in dem die Sehstärke nachlässt.

              ich bin in einem Alter, in dem die Sehstärke (oder Sehschwäche) eigentlich seit vielen Jahren stabil ist (rechts -6.25dpt, links -8dpt). Aber die Flexibilität der Linse lässt so langsam nach, so dass mir mit Brille das Sehen im Nahbereich allmählich schwerfällt. Kürzere Abstände als ca. 50cm kriege ich mit Brille nur noch bei idealen Lichtverhältnissen sauber focussiert. Wenn ich dann mal richtig "ins Detail" gehen muss, nehme ich die Brille ab, dann kann ich bis auf etwa 10cm ans Objekt rangehen, sozusagen im Macrobereich. Auch zum Lesen nehme ich in letzter Zeit oft die Brille ab.

              Als ich vor ein paar Jahren beim Augenarzt gefragt habe, ob eine Gleitsichtbrille nicht eine gute Idee wäre, hat der mir davon abgeraten. Wenn ich mit meiner derzeitigen Methode (zum Sehen in der Nähe Brille abnehmen) im Alltag gut zurechtkäme, sollte ich meinen Augen zuliebe dabei bleiben. Sonst würde man der "Faulheit" der Augen noch Vorschub leisten.

              Als ich bei der Arbeit meinen ersten Full-HD-Monitor bekommen habe, hatte ich Mühe, die Schriftgrößen etc. auf Maximum zu stellen, weil ich die Angaben im Setup-Programm kaum lesen konnte. Ich habe mit der Nase fast den Bildschirm berührt.

              Ich kenn das Problem. Ich habe hier beim Arbeitgeber zwei 24"-Monitore in Full HD. Da habe ich die Basis-Schriftgröße von Windows auf 125% gestellt. Auf dem kleinen 15"-Display am Notebook (ebenfalls Full HD) sogar auf 150%.
              Nachteil: Bei Anwendungen, die auf Windows Forms basieren, ist die Schrift unscharf - vermutlich wird da nicht die Schriftgröße skaliert, sondern die fertig gerenderte und gepixelte Schrift.

              Ciao,
               Martin

              --
              Frage an die Kollegin am Montagmorgen: "Na, wie war dein Wochenende?"
              Depressive Kollegin: "Hell, dunkel, hell, dunkel, Montag."