Hat niemand 'ne Idee?
Beiträge von ZaHaDum
-
-
Hast du den Cache gelöscht?
Ja, das habe ich gemacht.
Ansonsten liegt das Problem wahrscheinlich an dem Teil des HTML/CSS, den du uns vorenthälst.
Dann hier nun der gesammte Sourcecode:
HTML
Alles anzeigen<!DOCTYPE html> <html lang="de" dir="ltr"> <head> <!-- Zeichensatz, Autor und Editor --> <meta charset="UTF-8"> <meta name="author" content="Martin Brehmer"> <!-- automatische Skalierung für mobile-devices --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Seitentitel --> <title>Startseite - Homepage von Martin Brehmer</title> <!-- Informationen fuer Suchmaschinen --> <meta name="robots" content="index"> <meta name="robots" content="follow"> <meta name="robots" content="noarchive"> <meta name="description" lang="de" content="Die Homepage von Martin Brehmer"> <meta name="keywords" lang="de" content="Martin, Brehmer, Homepage, Startseite"> <!-- CSS Stylesheets --> <link rel="stylesheet" type="text/css" href="css/website.css"> <!-- Kompatibilität für alte IE-Versionen --> <!--[if IE]> <script src="js/oldie.js"></script> <![endif]--> </head> <body> <header class="tabellen_zelle"> <p>Homepage von Martin Brehmer</p> </header> <nav class="schlagschatten tabellen_zelle"> <ul> <li><a href="index.htm">Startseite</a></li> <li><a href="impressum.htm">Impressum</a></li> </ul> </nav> <article class="tabellen_zelle maximale_hoehe"> <div> <h1>Herzlich Willkommen auf meiner Internetseite</h1> <p>Momentan wird diese Internetseite von mir mit HTML5 und CSS3, in Responsive-Design und gemäß der Vorgaben der W3C, neu aufgebaut.</p> <p>Weitere Inhalte werden daher zeitnah folgen.</p> </div> </article> <footer class="schlagschatten tabellen_zelle"> © 2017 Martin Brehmer </footer> </body> </html>
CSS
Alles anzeigen/* Kompatibilität für alte Browser-Versionen */ header, nav, article, footer { display: block; } * { margin: 0; padding: 0; } html, body { font-family: arial, sans-serif; height: 100%; } body { display: table; width: 100%; } /* Formatierung des Seitenkopfes */ header { background-image: url(../images/hg-saeulen.png), url(../images/hg-endlos.png); background-repeat: no-repeat, repeat-x; height: 150px; } header p { color: white; font-size: 2em; padding-left: 110px; padding-top: 30px; padding-right: 20px; text-align: right; } /* Formatierung der Seitennavigation */ nav { background-color: #ceb98e; } nav ul { padding: 0; } nav li { list-style-type: none; display: inline-block; line-height: 1.5em; border-right: black 1px solid; } nav li a { color: black; text-decoration: none; line-height: 1.5em; display: inline-block; padding: 0 1em; } nav li a:hover { text-decoration: underline; } nav ul li:last-child { border-right: 0; } article div { margin: 20px 40px; font-size: 14px; } article h1, article h2 { margin-bottom: 0.4em; } article h1 { font-size: 22px; } article h2 { font-size: 18px; } article h3 { font-size: 16px; } article p, article ul { margin-bottom: 1em; line-height: 1.5em; } footer { background-color: #ceb98e; height: 1.5em; padding: 0 1em; line-height: 1.5em; text-align: center; } .schlagschatten { -moz-box-shadow: 0 4px 6px #777777; -webkit-box-shadow: 0 4px 6px #777777; -o-box-shadow: 0 4px 6px #777777; -ms-box-shadow: 0 4px 6px #777777; box-shadow: 0 4px 6px #777777; } .tabellen_zelle { display: table-row; } .maximale_hoehe { height: 100%; }
-
Hallo
Das liegt wahrscheinlich an deiner Viewport-Angabe
Bei solchen Problemen sollte die durch die bewährte Angabe
ersetzt werden.
Gruss
MrMurphy
Das habe ich gerade ausprobiert.
Hat leider nicht geholfen. -
Hallo Website-Entwickler,
basierend auf der Responsive-Version des einspaltigen Layouts von den DVDs baue ich gerade meine Homepage neu auf.
Dabei bin ich auf folgendes Phänomen bei mobile-devices gestoßen:Ändert sich das Bildschirmformat, z.B. durch kippen des Displays, von Hoch- zu Querformat, Behalten Überschriften (h1, h2, h3, ...) optisch ihre Schriftgröße bei. Aber Absätze im article-Tag werden größer, obwohl die Schriftgrößen für alles via CSS3 fest in Pixeln vorgegeben sind.
Das macht natürlich die Optik der gesammten Seite kaputt, wenn normaler Text plötzlich so groß wie Überschriften, oder sogar noch größer ist.Was muss getan werden, um das zu vermeiden?
Folgend die relevanten Auszüge aus den Dateien:
HTML
Alles anzeigen... <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui"> ... <article class="tabellen_zelle maximale_hoehe"> <div> <h1>Herzlich Willkommen auf meiner Internetseite</h1> <p>Momentan wird diese Internetseite von mir mit HTML5 und CSS3, in Responsive-Design und gemäß der Vorgaben der W3C, neu aufgebaut.</p> ... </div> </article>
CSS
Alles anzeigen... * { margin: 0; padding: 0; } html, body { font-family: arial, sans-serif; height: 100%; } body { display: table; width: 100%; } ... article div { margin: 20px 40px; font-size: 14px; } article h1, article h2 { margin-bottom: 0.4em; } article h1 { font-size: 22px; } article h2 { font-size: 18px; } article h3 { font-size: 16px; } article p, article ul { margin-bottom: 1em; line-height: 1.5em; } ... .tabellen_zelle { display: table-row; } .maximale_hoehe { height: 100%; }
An dieser Stelle schonmal Danke für die Hilfe.