|
|||
Layout komplett automatisch skalierend ... abhängig vom viewport.
Hallo Forum,
ich erstelle gerade eine ganz einfache Seite, welche einfach nur als Portal dienen soll und auf andere Seiten verlinkt. Die Seite soll sich ganz einfach "komplett selbst skalieren" und immer die komplette Breite des Browserfensters nutzen. Es klappt auch bis hierhin. Die 3 Textlinks und die 4 Bildchen skalieren sich selbst, wenn ich das Fenster ändere. So weit so gut. Das einzige wichtige Problem, welches ich nicht gelöst bekomme ist die Darstellung der horizontalen Liste in den Android Browsern. Auf vielen anderen funktioniert es, aber der Android stellt sowohl die Liste, als auch die 4 horizontalen Grafiken immer untereinander dar. Das ist von der Funktionalität kein riesiges Problem, aber ich wüsste gern, woran das liegen mag. Hier ist einmal ein Link zur Seite im aktuellen Zustand: OLC Portal ... Oberlausitzcup ... RC Buggy Offroad Racing ... Löbau, Zittau, Bautzen, Görlitz, Niesky Hier der html Quelltext: Code:
<!doctype html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <meta name="keywords" content=""> <link rel="stylesheet" href="style.css"> <link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'> <title>OLC Portal ... Oberlausitzcup ... RC Buggy Offroad Racing ... Löbau, Zittau, Bautzen, Görlitz, Niesky</title> </head> <body> <div id="container"> <div id="nav"> <nav> <ul> <li><a href="http://forum.mbcoberlausitz.de/" class="forum" title="Zum OLC Forum ... Oberlausitzcup Forum">OLC Forum</a></li> <li><a href="http://www.rccar-online.de/?seite=veranstaltungen&sort1=1154&seite=veranstaltungen&sort3=&seite=veranstaltungen&art=" class="nennung" title="Direkt mitmachen! ... Ab zur Nennung!!!">Zur Nennung</a></li> <li><a href="https://www.facebook.com/groups/oberlausitzcup/" class="fb" title="Zur OLC facebook Gruppe ... Oberlausitzcup bei facebook">OLC / facebook</a></li> </ul> </nav> </div> <div id="header"> </div> <div id="vereine"> <div id="mbc"><a href="http://www.mbc-oberlausitz.de/" title="Zur MBC Homepage ... MBC Oberlausitz e.V."><img src="images/mbc.png" alt="" title="Zur Homepage des MBC Oberlausitz e.V ... der RC Offroad Racing Verein in Löbau, Zittau, Niesky, Görlitz, Bautzen, Oberlausitz, Sachsen, Ostsachsen"/></a></div> <div id="orz"><a href="http://off-razer-zittau.de/" class="urlimgorz" title="Zur ORZ Homepage ... Off Razer Zittau"><img src="images/orz.png" alt="" title="Zur Homepage der Off Razer Zittau" /></a></div> <div id="msg"><a href="http://www.msg-niesky.de/" class="urlimgmsg" title="Zur MSG Homepage ... MSG Niesky e.V."><img src="images/msg.png" alt="" title="Zur Homepage der MSG Niesky e.V." /></a></div> <div id="gmbz"><a href="http://www.grossmodelle-bautzen.de/" class="urlimggmbz" title="Zur GMBZ Homepage ... Großmodelle Bautzen e.V."><img src="images/gmbz.png" alt="" title="Zur Homepage der Großmodelle Bautzen e.V." /></a></div> </ul> </div> <div id="footer"> <p>Impressum und Haftungsausschluss: Diese Seite wurde erstellt durch MBC Oberlausitz e.V. - Jörg Rhode. © 2015 MBC Oberlausitz e.V.<br /> Der Ersteller der Seite übernimmt keine Haftung über die Inhalte der verlinkten Seiten. Kontakt: info (at) mbc-oberlausitz.de </p> </div> </div> </body> Code:
body { background-color: #322d26; margin: 0 auto; font-family: 'oswald', sans-serif; color: #fff; display: -webkit-flex; -webkit-flex-direction: column; display: flex; flex-direction: column; } p { text-align: center; margin: 2%; } img { max-width: 100%; height: auto; width: auto/9; /* ie8 */ } nav { text-align: center; margin: 0 auto; padding: 0; } nav ul { display: -webkit-flex; -webkit-flex-direction: row; display: flex; flex-direction: row; font-size: 5vw; max-width: 100%; padding: 0; margin: 0; } nav li { list-style-type: none; margin: 0; padding: 0.5em; } a { color: #fff; text-decoration: none; display: block; } a.forum:hover { color: #ff9000; text-decoration: none; } a.forum:active { color: #ff9000; text-decoration: none; } a.nennung:hover { color: #00ff00; text-decoration: none; } a.nennung:active { color: #00ff00; text-decoration: none; } a.fb:hover { color: #00aeff; text-decoration: none; } a.fb:active { color: #00aeff; text-decoration: none; } #container { height: 1200px; width: 100%; display: box; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; box-align: center; -webkit-box-align: center; } #nav { width: 100%; display: box; box-orient: horizontal; box-align: center; display: -webkit-flex; display: flex; -webkit-box-align: center; } #header { height: 20%; background-color: #AC9B83; background-image: url("images/header.jpg"); background-repeat: no-repeat; background-position: center; background-size: auto 100%; border-top: 5px solid #fff; border-bottom: 5px solid #fff; text-align: center; } #vereine { width: 100%; height: 20em; display: box; box-orient: horizontal; box-align: center; display: -webkit-flex; display: flex; -webkit-box-align: center; text-align: center; } #footer { width: 100%; box-align: center; display: box; text-align: center; } #mbc { margin: 9% 3%; width: 19%; text-align: center; } #orz { margin: 9% 3%; width: 19%; text-align: center; } #msg { margin: 9% 3%; width: 19%; text-align: center; } #gmbz { margin: 9% 3%; width: 19%; text-align: center; } Beste Grüße - Jörg |
Sponsored Links |
|
|||
|
Sponsored Links |
|
|||
Ich habe jetzt noch verschiedene Dinge angepasst ... Die Breite des Layouts ist nun auf max. 1600px begrenzt, bei VP-Breiten kleiner 768px, ändert sich die Schriftgröße der 3 Links oben von 5vw auf 2rem, was zur Folge hat, dass diese 3 Links auf Smartphones größer und untereinander angeordnet werden. Das lässt sich viel besser lesen und klicken.
Ein Problem bleibt allerdings bei der Nutzung mit dem Internet-Explorer.... Wenn die Seitenbreite so weit verringert wird, dass sich die Grafik in der Mitte skaliert, dann ändert sich die Höhe der einschließenden Box nicht mit der Höhe der Grafik. Das hat zur Folge, dass unter der Grafik ein hässlicher Rand bleibt. Das ist von allen getesteten Browsern ausschließlich beim IE so. Sieht dann natürlich auf einem Windoof Phone richtig doof aus. Hier nochmal der Link zur aktuellen Seite: OLC Portal ... Oberlausitzcup ... RC Buggy Offroad Racing ... Löbau, Zittau, Bautzen, Görlitz, Niesky Und die CSS: Code:
html { font-size: 100%; } body { background-color: #fff; margin: 0 auto; font-family: 'oswald', sans-serif; color: #fff; display: -webkit-flex; -webkit-flex-direction: column; display: flex; flex-direction: column; } h1 { font-family: sans-serif; font-size: 1.875rem; margin: 3%; text-align: left; } h2 { font-family: sans-serif; font-size: 1.5rem; margin: 3%; text-align: left; } p { font-family: sans-serif; font-size: 1rem; margin: 3%; } img { max-width: 100%; margin-bottom: -5px; } .nav { text-align: center; margin: 0 auto; padding: 0; width: 100%; } ul { font-size: 5vw; padding: 0; margin: 0; text-align: center; } @media (max-width: 768px) { ul { font-size: 2rem; } } @media (min-width: 1600px) { ul { font-size: 5rem; } } li { display: inline-block; list-style-type: none; margin: 0; padding: 0.5em; } a { color: #fff; text-decoration: none; display: block; } a.forum:hover { color: #f70; text-decoration: none; } a.forum:active { color: #f70; text-decoration: none; } a.nennung:hover { color: #0f0; text-decoration: none; } a.nennung:active { color: #0f0; text-decoration: none; } a.fb:hover { color: #0af; text-decoration: none; } a.fb:active { color: #0af; text-decoration: none; } #container { background-color: #322d26; width: 100%; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-box-align: center; text-align: center; max-width: 1600px; box-shadow: 0px 10px 30px grey; } #header { background-color: #AC9B83; border-top: 5px solid #fff; border-bottom: 5px solid #fff; text-align: center; } .header { width: 100%; text-align: center; } .vereine { max-height: 300px; width: 100%; text-align: center; } .footer1 { background-color: #fff; color: #322d26; width: 100%; text-align: center; border-top: #322d26 dashed 5px; padding-top: 1rem; } .footer { margin: auto 0; max-width: 600px; text-align: justify; display: inline-block; } .mbc { display: inline-block; margin: 3% 2%; width: 19%; text-align: center; } .orz { display: inline-block; margin: 3% 2%; width: 19%; text-align: center; } .msg { display: inline-block; margin: 3% 2%; width: 19%; text-align: center; } .gmbz { display: inline-block; margin: 3% 2%; width: 19%; text-align: center; } |
|
|||
Durch entfernen der ganzen "flex" Anweisungen in den Containern klappt es nun auch auf dem IE.
Habe eh keinen wirklichen Plan, was die bewirken . Das Ergebnis ist jedenfalls immernoch das Gleiche. http://www.olc.mbc-oberlausitz.de/index2.html Warum gibt mir der CSS Validator nun solche Fehlermeldungen aus? http://www.css-validator.org/validat...ng=en#warnings Als ich das Stylesheet gestern geprüft habe, fand er keinen Fehler? EDIT: komisch ... per file Upload gibts keinen Fehler ... mysteriös! Geändert von knork (16.02.2015 um 13:56 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hilfe! Layout komplett verschoben | emkaythree | CSS | 17 | 30.12.2010 19:33 |
DIV Layout - Height abhängig machen? | kgreen | CSS | 10 | 06.10.2009 12:18 |
IE6 / 7 Problem: Layout komplett falsch | DasMaddin | CSS | 3 | 08.05.2009 12:49 |
Dynamisches Layout (inkl. Bsp.), abhängig von der Auflösung | Webstandard | Ressourcen | 0 | 06.12.2005 12:17 |
mozilla zerstört layout komplett | pospiech | CSS | 0 | 14.03.2004 20:29 |