nicht angemeldet
Ich finde das Komma nicht
Gunnar BittersmannGuten Abend an Alle,
ich arbete gerade an einer Layoutvorlage für eine Homepage.
Das Layout steht noch ganz am Anfang.
Wenn ich das Layout (Mainpage.html) im IE11, Chorme aufrufe, wird Sie entsprechend der Definition angezeigt. Im Mozilla wird zwar die Divs (master und my-box) erstellt, aber die Hintergrundbilder werden nicht angezeigt.
Ich stehe irgendwie im Wald. Vielleicht sieht einer von Euch meinen Irrtum?
Vielen Dank für Eure Hilfe
ZHermann
MAINPAGE:
<!--
Responvie web layout
Author: Zsolt Hermann, hermann.zsolt@online.de
Copyright: Zsolt Hermann, hermann.zsolt@online
Date: April 2016
-->
<!DOCTYPE html5>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Metaplast Gear Technology</title>
<link rel="stylesheet" href="css/master.css">
<link rel="stylesheet" href="cssMenu/dropDown1/styles.css";>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="cssMenu/dropDown1/script.js" type="text/javascript"></script>
</head>
<body>
<!-- Sichtbarer Dokumentinhalt im body -->
<div class="master">
<div class="my-box">
<!-- ERST MAL AUSKOMMENTIERT, DA DER FEHLER AUCH OHNE MENÜ IM MOZILLA AUFTAUCHT
<div class="topmenu">
</div>
<div id='cssmenu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Rolunk</a></li>
<li class='active has-sub'><a href='#'>Termekek</a>
<ul>
<li class='has-sub'><a href='#'>Mesterkerekek</a></li>
<li class='has-sub'><a href='#'>Prototipus fogaskerekek</a></li>
<li class='has-sub'><a href='#'>Zajvizsgáló kerekek</a></li>
<li class='has-sub'><a href='#'>Sebességváltó alkatrészek</a></li>
<li class='has-sub'><a href='#'>Zajszegény hajtások</a></li>
<li class='has-sub'><a href='#'>Kapcsolótárcsák, kapcsolóagyak</a></li>
<li class='has-sub'><a href='#'>Metszőkerekek</a></li>
<li class='has-sub'><a href='#'>Belső fogazatok</a></li>
<li class='has-sub'><a href='#'>Egyéb termékek</a></li>
</ul>
</li>
<li><a href='#'>Referenciak</a></li>
<li class='active has-sub'><a href='#'>Gepeink</a></li>
<ul>
<li class='has-sub'><a href='#'>Merőgépek</a></li>
<li class='has-sub'><a href='#'>Fogazógépek</a></li>
<li class='has-sub'><a href='#'>Fogköszörügépek</a></li>
<li class='has-sub'><a href='#'>Egyéb gépek</a></li>
</ul>
<li><a href='#'>Iranyitasi rendeszerek</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
-->
</div>
</div>
</body>
</html>
CSS:
/* Master CSS file */
/* Copyright by Zsolt Hermann */
/* April 2016 */
BODY {
overflow-y: scroll;
background: none repeat scroll 0 0 #565656;
margin-top: 10px;
}
.my-box {
position: center;
max-width: 75em;
min-height: 120%;
margin: 0 auto;
background-image: url(../images/BG_1200.png);
background-repeat: no-repeat;
background-position: center 0px;
/* background-attachment: fixed;
background-size: cover;*/
}
.master {
/* position: center; */
min-height: 130%;
margin: 0 auto;
background-image: url(../images/m_1200.png);
background-repeat: repeat-y;
background-position: center 0px;
}
.topmenu {
min-height: 290px;
}
.menu {
position: relative;
/* margin-top: 50px; */
background-color: white;
height: 30px;
width: 80%;
margin: 0 auto;
display: block;
}
@media only screen and (max-width: 1200px) {
.my-box {
background-image: url(../images/BG_1000.png);
}
.master {
background-image: url(../images/m_1000.png);
}
}
@media only screen and (max-width: 1000px) {
.my-box {
background-image: url(../images/BG_800.png);
}
.master {
background-image: url(../images/m_800.png);
}
}
@media only screen and (max-width: 700px) {
.my-box {
background-image: url(../images/BG_600.png);
}
.master {
background-image: url(../images/m_600.png);
}
.topmenu {
min-height: 190px;
}
#cssmenu {
float: none;
min-width: 50%;
}
}
@media only screen and (max-width: 500px) {
.my-box {
background-image: url(../images/BG_400.png);
}
.master {
background-image: url(../images/m_400.png);
}
.topmenu {
min-height: 100px;
}
#cssmenu {
float: none;
min-width: 50%;
}
}
@media only screen and (max-width: 400px) {
.my-box{
background-image: url(../images/BG_320.png);
}
.master {
background-image: url(../images/m_320.png);
}
.topmenu {
min-height: 80px;
}
#cssmenu {
float: none;
min-width: 50%;
}
}
-
Hallo
Mir fällt folgendes auf. Ich habe folgendes gelernt:
-
Vor dem Doctype darf nichts stehen, auch kein Kommentar
-
Einen Doctype HTML5 kenne ich nicht
-
body sollte im CSS klein geschrieben werden
Gruss
MMurphy
-
@@MrMurphy1
Mir fällt folgendes auf. Ich habe folgendes gelernt:
1. Vor dem Doctype darf nichts stehen, auch kein Kommentar
Doch, darf. [HTML5 §8.1]
Was du gelernt hast war, das mache Browser nur dann nicht in den Quirksmodus schalten, wenn vor der DOCTYPE-Angabe nichts steht. Solche Browser sollten heutzutage nur noch in Museen zu finden sein.
3. body sollte im CSS klein geschrieben werden
Aus stilistischen Gründen, ja.
LLAP 🖖
--
“You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
-
-
@@zhermann
Ich stehe irgendwie im Wald. Vielleicht sieht einer von Euch meinen Irrtum?
Ich sehe nicht einmal einen Link zu deiner Seite.
LLAP 🖖
--
“You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|-
Guten Morgen,
ich glaube ich habe den Fehler gefunden.
FALSCH ist in der CSS die Angabe
min-height: 100%;Irgendwie wollte heute Morgen auch Chrome und IE11 das nicht mehr.
Wenn ich es änder in:
min-height: 100vh;funktioniert es.
@Gunnar: Es gibt da noch keine öffentliche Seite. Ich entwickle gerade offline auf XAMPP. Daher auch kein Link.
@All: Ein schönes regenfreihes WO!
-