zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Layout komplett automatisch skalierend ... abhängig vom viewport.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.02.2015, 20:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.02.2006
Beiträge: 21
knork befindet sich auf einem aufstrebenden Ast
Standard 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&ouml;bau, Zittau, Bautzen, G&ouml;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&szlig;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&ouml;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>
Und hier das Stylesheet:
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;
}
Ich bin sicher, dass es alles nicht ganz sauber ist. Vielleicht könnt Ihr mir ja kurz einen Schubbs in die richtige Richtung geben...
Beste Grüße - Jörg
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.02.2015, 21:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.02.2006
Beiträge: 21
knork befindet sich auf einem aufstrebenden Ast
Standard

Ich glaube, so geht es:
OLC Portal ... Oberlausitzcup ... RC Buggy Offroad Racing ... Löbau, Zittau, Bautzen, Görlitz, Niesky
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.02.2015, 12:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.02.2006
Beiträge: 21
knork befindet sich auf einem aufstrebenden Ast
Standard

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;
}
Falls Einer eine Idee hat, wie man dieses Box-sizing Problem lösen könnte ... ich wäre sehr dankbar für einen Ansatz.
Mit Zitat antworten
  #4 (permalink)  
Alt 16.02.2015, 13:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.02.2006
Beiträge: 21
knork befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:58 Uhr.