Profil von Onyxx76

Frage

von Onyxx76

06.03.2020, 14:04

Css Datei wird auf dem Handy nicht erkannt?

Moin Leute,

Ich bin dabei eine Website mit responsive Design zu erstellen. Dafür benutze ich externe css Dateien und Bilder. Zum Test habe ich die Seite auf meine Mobile SD Karte geladen und festgestellt, dass mein Handy keine externen Dateien von der HTML Seite erkennt. Mein Ziel ist es sie online zu stellen, sobald sie fertig ist. Da kam mir die Frage auf, ob mobile Geräte die externen Dateien wie css und Bilder erkennen, wenn sie online gestellt wird.

Wäre super wenn mir das jemand sagen kann und vielleicht wie ich es auch lösen kann.

PS: Weiter unten, der Code ^^

...zur Frage

Antwort

von Onyxx76

07.03.2020, 13:17

Der HTML Teil:

<!DOCTYPE html>
<html>
<head>
	<title>Schlüsseldienst Viersen</title>
	<link rel="stylesheet" type="text/css" href="css/Start_2.css">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<div class="main">
	<!-- Body -->
	<header class="header">
		<ul>
			<li><img src="pic/Logo_Zylinder_2011.png" class="imgZylinder"></li>
			<li><p><span class="mbT1">Schlossprofi Pitz</span><br>
				<span class="mbT2"> Ihr Fachgeschäft in Viersen</span></p></li>
			
			<li>
				<!-- Menu Button -->
				<nav class="menu">
					<li><a href="Start_2.html" style="background-color: #df001c;">Start</a></li>
					<li><a href="" >Notdienst</a></li>
					<li><a href="" >Kontakt</a></li>
					<li><a href="" >Impressum</a></li>
					<li><a href="" >Datenschutz</a></li>
				</nav>
			</li>
			
			<li><p><span class="mbT3">Notdienst 0177 / 14 06 045</span></p></li>
			
		</ul>
	</header>
	
	<!-- article -->
	<img src="pic/Laden_breit.jpg" class="imgLaden">
	<img src="pic/Türnotdienst.png" class="imgTürnotdienst">
	
	<article class="article">
		<span class="Überschrift"><p>Herzlich Willkommen auf der Seite von Schlossprofi Pitz in Viersen</p></span>
		<span class="Unterschrift"><p>Ihrem Schlüsseldienst Fachbetrieb in Viersen.</p></span>
		
		<span class="Absatz1"><p>Wir sind Ihr kompetenter Ansprechpartner für Sicherheitstechnik, 
		Tür- und Fensterabsicherungen, Schließanlagen (elektronisch / mechanisch), <br>Tresore,
		Schließzylinder, Schlüssel und vieles andere mehr. Wir beraten Sie ausführlich und 
		fertigen für Sie nach Angebot.</p></span>
		
		<span class="Absatz2"><p>
		Außerdem bieten wir einen Schlüsselnotdienst zu fairen Preisen an. Als seriöser 
		Fachbetrieb achten wir darauf so wenig Kosten wie möglich<br> zu verursachen.
		Die Tür ist zugefallen, Schlüssel steckt ... Ärgerlich, aber zugefallene Türen lassen sich
		in den meisten Fällen öffnen, 
		ohne etwas <br>zu beschädigen.</p></span>
		
		<span class="Absatz3"><p>Unser Schlüsseldienst / Türnotdienst ist für Sie
		in <a href="Kontakt.html" id="TxtColor" title="Unsere Kontaktseite">Viersen, Süchteln, Dülken, Anrath</a> und 
		<a href="Kontakt.html" id="TxtColor" title="Unsere Kontaktseite">Viersenland</a> unterwegs und hilft Ihnen<br>
		Tag und Nacht schnell und zuverlässig.</p></span>
		
		<span class="Absatz4"><p>Schlossprofi Pitz</p></span>
	</article>

	<footer class="footer">
		<p>Schlossprofi Pitz - Markus Pitz - Hauptstraße 110 - 
		41747 Viersen - Telefon: 02162 - 3642 111 - Mobil: 0177 1406 045 - 
		<a href="" >Kontakt</a> - <a href="" >Impressum</a> - 
		<a href="" >Datenschutz</a></p>
	</footer>
	
	<aside class="Aside">
		<div class="WeißBalken"><ul>
		<li><img src="pic/burgwächter_1.png" class="WBimg1"></li>
		<li><img src="pic/ikon_assa_2.png" class="WBimg2"></li>
		<li><img src="pic/silca_3.png" class="WBimg3"></li>
		<li><img src="pic/ankerslot_4.jpg" class="WBimg4"></li>
		<li><img src="pic/Börkey_5.png" class="WBimg5"></li>
		<li><img src="pic/drumm_6.png" class="WBimg6"></li>
		<li><img src="pic/abus_7.png" class="WBimg7"></li>
		<li><img src="pic/evva_8.png" class="WBimg8"></li>
		<li><img src="pic/renz_9.png" class="WBimg9"></li>
		</ul></div>
	</aside>
</div>

</body>
</html>

Der CSS Teil:

*{
	padding: 0px;
	margin: 0px;
}


.main {
	width: 960px;
	height: 1034.9px;
	margin: auto;
}


/* ------- header ------- */ 


.header {
	width: 100%;
	height: 100px;
	background-color: #033983;
}


.header a:hover{
	background-color: #df001c;
	color: white;
	text-decoration: none;
}


.header li {
	list-style: none;
	float: left;
}


.imgZylinder {
	width: 149.1px;
	height: auto;
	padding: 11px 0 0 10px;
}


.mbT1 {
	font-family: Arial Black;
	font-size: 17pt;
	color: white;
	position: relative;
	padding-left: 15px;
	top: 17px;
}


.mbT2 {
	font-family: Freestyle Script;
	font-size: 20pt;
	color: red;
	position: relative;
	padding-left: 80px;
	top: 22.5px;
}


/* ------- menu ------- */


.menu {
	padding: 12px 0 0 136.5px;
}


.menu a {
	font-family: Calibri;
	font-size: 9pt;
	line-height: 70px;
	color: white;
    text-decoration: none;
	display: flex;
	text-align:center;
	flex-direction: column;
	justify-content:center;
	width: 70px;
	height: 25px;
	margin: 10px 4.5px 0 0;
}


.mbT3 {
	font-family: Arial Black;
	font-size: 19pt;
	color: white;
	padding: 5px 0 0 135px;
	position: relative;
	top: 5px;
	
}


/* ------- article ------- */


.imgLaden {
	width: 100%;
	height: auto;
	padding: 4px 0 0 0;
	z-index: 1;
}


.imgTürnotdienst {
	width: 405.05px;
	height: auto;
	position: relative;
	top: -444px;
	left: 555px;
	z-index: 2;
}


.Überschrift {
	font-family: Calibri;
	font-weight: Bold;
	font-size: 14.5pt;
	color: #033983;
	position: relative;
	top: -185px;
	left: 10px;
}


.Unterschrift {
	font-family: Calibri;
	font-size: 11pt;
	color: red;
	position: relative;
	top: -185px;
	left: 10px;
}


.Absatz1 {
	font-family: Calibri;
	font-weight: Bold;
	font-size: 11.5pt;
	color: #033983;
	position: relative;
	top: -165px;
	left: 10px;
}


.Absatz2 {
	font-family: Calibri;
	font-weight: Bold;
	font-size: 11.5pt;
	color: #033983;
	position: relative;
	top: -145px;
	left: 10px;
}


.Absatz3 {
	font-family: Calibri;
	font-weight: Bold;
	font-size: 11.5pt;
	color: #033983;
	position: relative;
	top: -125px;
	left: 10px;
}


.Absatz3 a {
	text-decoration: none;
	color: #033983;	
}


.Absatz4 {
	font-family: Calibri;
	font-weight: Bold;
	font-size: 11.5pt;
	color: #033983;
	position: relative;
	top: -105px;
	left: 10px;
}


/* ------- footer ------- */


.footer {
	font-family: Arial;
	font-size: 9pt;
	color: white;
	background-color: red;
	width: 100%;
	height: 25px;
	display: flex;
	text-align: center;
	flex-direction: column;
	justify-content:center;
	position: relative;
	top: -65px;
}


.footer a {
	text-decoration: none;
	color: white;
}


/* ------- aside ------- */


.Aside {
	width: 100%;
	height: 85px;
	background-color: #033983;
	display: flex;
	flex-direction: column;
	justify-content:center;
	position: relative;
	top: -61.5px;
}


.WeißBalken {
	width: 100%;
	height: 65px;
	display: flex;
	flex-direction: column;
	justify-content:center;
	background-color: white;
}


.WeißBalken li {
	list-style: none;
	float: left;
	display: flex;
	flex-direction: column;
	justify-content:center;
}


.WBimg1 {
	width: auto;
	height: 52px;
	position: relative;
	margin-left: 21.8px;
}


.WBimg2 {
	width: auto;
	height: 30px;
	position: relative;
	margin-top: 10.5px;
	margin-left: 28px;
}


.WBimg3 {
	width: auto;
	height: 40px;
	position: relative;
	margin-top: 6.5px;
	margin-left: 28px;
}


.WBimg4 {
	width: auto;
	height: 45px;
	position: relative;
	margin-top: 7px;
	margin-left: 28px;
}


.WBimg5 {
	width: auto;
	height: 30px;
	position: relative;
	margin-top: 11px;
	margin-left: 28px;
}


.WBimg6 {
	width: auto;
	height: 30px;
	position: relative;
	margin-top: 11px;
	margin-left: 28px;
}


.WBimg7 {
	width: auto;
	height: 40px;
	position: relative;
	margin-top: 8.5px;
	margin-left: 28px;
}


.WBimg8 {
	width: auto;
	height: 37.85px;
	position: relative;
	margin-top: 11px;
	margin-left: 28px;
}


.WBimg9 {
	width: auto;
	height: 35px;
	position: relative;
	margin-top: 8.3px;
	margin-left: 28px;
}


/* ------- Media Queries ------- */ 


@media only screen and (max-width: 768px) {
	.main {
		width: 100%;
		background-color: lightgreen;
		position: absolute;
		overflow-y: hidden;
	}
	
	/* ------- header ------- */ 
	
	.header {
		visibility: hidden;
		position: absolute;
	}
	
	/* ------- menu ------- */




	
	/* ------- article ------- */
	
	.imgLaden {
		visibility: hidden;
		position: absolute;
	}
	
	.imgTürnotdienst {
		visibility: hidden;
		position: absolute;
	}
	
	.article {
		visibility: hidden;
		position: absolute;
	}
	
	/* ------- footer ------- */
	
	.footer {
		visibility: hidden;
		position: absolute;
	}
	
	/* ------- aside ------- */
	
	.Aside {
		visibility: hidden;
		position: absolute;
	}
	
}

Das Resp Design ist bis jetzt noch nicht angefangen, aber soll in derselben HTML Datei sein. Auf dem PC funktioniert die Verlinkung über rel und alles einwandfrei.

...zur Antwort