Vielen Dank, jetzt Funktioniert alles wunderbar, warum aber der Browser es manchmal ingnoriert und manchmal nicht, würde mich mal interessieren.
Iw war der fehler ja echt offensichtlich 
Du hast mir geraten Modernere lektüre herzunehmen, darf ich erfahren was an dem Code nicht Mehr Zeitgemäß ist ?
MFG
BerryBlue
Hab es aber auch auf meinem Laptop getestet, da tritt das problem ebenso auf 
Vielleicht tritt es bei dir bei mehrmaligem laden auch auf.
Darf man Fragen welchen Browser du hernimmst ?
Habe das Design mal auf meinen kleinen webserver hochgeladen, da tritt das Problem genau so auf. Kannst du mal testen ob das bei dir auch der Fall ist ?
link ist: pythonic.ddns.net (ohne www davor!)
MFG Berry
PS: habe es mal auf Opera getestes, selbes Problem wie oben beschrieben ...
An welcher systemkonfiguration kann das denn liegen ?
Danke erstmal für die antwort.
Zum Thema was ich lerne, bzw mit was:
Internet, ich habe zwar noch uralt-php bücher rumfahren, lasse die aber getrost in der ecke liegen 
Das #menu_css in der css datei begrenzt macht derzeitig nichts.
und cssmenu ist in der zweiten datei verlinkt. Den code liefere ich sofort nach .
PS: Kannst du mir irgeneine lektüre/Seite empfhelen, die auf dem aktellem stand zum lernen ist ?
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
font-family: Montserrat, sans-serif;
background: #333333;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 17px;
font-size: 16px;
letter-spacing: 1px;
text-decoration: none;
color: #dddddd;
font-weight: 700;
text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
color: #ffffff;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu.align-right li:hover > ul {
left: auto;
right: 0;
}
#cssmenu li:hover > ul > li {
height: 35px;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0;
}
#cssmenu.align-right ul ul ul {
margin-left: 0;
margin-right: 100%;
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
padding: 11px 15px;
width: 170px;
font-size: 16px;
text-decoration: none;
color: #dddddd;
font-weight: 400;
background: #333333;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #ffffff;
}
#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
right: auto;
left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
right: auto;
left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
width: 100%;
}
#cssmenu ul {
width: 100%;
display: none;
}
#cssmenu.align-center > ul {
text-align: left;
}
#cssmenu ul li {
width: 100%;
border-top: 1px solid rgba(120, 120, 120, 0.2);
}
#cssmenu ul ul li,
#cssmenu li:hover > ul > li {
height: auto;
}
#cssmenu ul li a,
#cssmenu ul ul li a {
width: 100%;
border-bottom: 0;
}
#cssmenu > ul > li {
float: none;
}
#cssmenu ul ul li a {
padding-left: 25px;
}
#cssmenu ul ul ul li a {
padding-left: 35px;
}
#cssmenu ul ul li a {
color: #dddddd;
background: none;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
color: #ffffff;
}
#cssmenu ul ul,
#cssmenu ul ul ul,
#cssmenu.align-right ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left;
}
#cssmenu > ul > li.has-sub > a:after,
#cssmenu > ul > li.has-sub > a:before,
#cssmenu ul ul > li.has-sub > a:after,
#cssmenu ul ul > li.has-sub > a:before {
display: none;
}
#cssmenu #menu-button {
display: block;
padding: 17px;
color: #dddddd;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
}
#cssmenu #menu-button:after {
position: absolute;
top: 22px;
right: 17px;
display: block;
height: 4px;
width: 20px;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
content: '';
}
#cssmenu #menu-button:before {
position: absolute;
top: 16px;
right: 17px;
display: block;
height: 2px;
width: 20px;
background: #dddddd;
content: '';
}
#cssmenu #menu-button.menu-opened:after {
top: 23px;
border: 0;
height: 2px;
width: 15px;
background: #ffffff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu #menu-button.menu-opened:before {
top: 23px;
background: #ffffff;
width: 15px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#cssmenu .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 1px solid rgba(120, 120, 120, 0.2);
height: 46px;
width: 46px;
cursor: pointer;
}
#cssmenu .submenu-button.submenu-opened {
background: #262626;
}
#cssmenu ul ul .submenu-button {
height: 34px;
width: 34px;
}
#cssmenu .submenu-button:after {
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu ul ul .submenu-button:after {
top: 15px;
right: 13px;
}
#cssmenu .submenu-button.submenu-opened:after {
background: #ffffff;
}
#cssmenu .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
}
#cssmenu ul ul .submenu-button:before {
top: 12px;
right: 16px;
}
#cssmenu .submenu-button.submenu-opened:before {
display: none;
}
}Hallo erstmal,
ich bin neu in diesem Forum, und wollte euch mein Problem darlegen.
Aber zuerst ein paar details zu mir:
Ich bin 19 Jahre alt, habe keine große Erfahrung mit Css und Html, aber jeder muss ja mal iw damit beginnen;-)
Aktuell Besuche ich eine Staatliche Oberschule in Bayern und wollte mir deswegen in den Ferien mal Html und css in den Basics beibringen.
Dabei bin ich aber auf ein Problem gestoßen: Die Seite an sich Funktioniert, aber sie baut sich immer wieder anders auf, mal wirkt sie etwas größer und mal so wie sie sein soll. Ich hab alles Probiert, hab das Internet durchforstet aber nichts gefunden, um dieses Problem zu lösen.
Als Browser Benutze ich Firefox.
Ich hoffe mir können ein paar erfahrenen User helfen mein Problem zu lösen.
Ich hänge zwei .gif Bilder an, die zeigen sollen wie die website verschieden aussieht. Ausserdem den html und css code.
Anhang 1 ist der wie es oft aussieht und Anhang 2 wie es aussehen soll.
Der Html Code:
[code=php]<!doctype html>
<html lang=''>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/design.css">
<title>Pythonic.ddns.net</title>
</head>
<body>
<div id="website">
<div id='cssmenu'>
<ul>
<li><a href='index.html'>Home</a></li>
<li><a href='#'>News</a></li>
<li class='active'><a href='#'>Tutorials...</a>
<ul>
<li><a href='#'>Arduino</a>
</li>
<li><a href='#'>Raspberry Pi</a>
</li>
</ul>
</li>
<li class='active'><a href='#'>Sonstiges...</a>
<ul>
<li><a href='#'>Kruschkiste</a>
</li>
</ul>
</li>
<li><a href='#'>Downloads...</a>
<ul>
<li><a href='#'>Sourcecode</a>
</li>
<li><a href='#'>Anderes</a>
</li>
</ul>
</li>
<li><a href='#'>Kontakt</a></li>
</ul>
</div>
<div id="header">
</div>
<div id="inhalt>">
<div id="text">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
<html>
[/code]
Und Hier der Css Code:
body {
background-color:gainsboro;
text-align:center;
}
#website {
width:980;
margin:0 auto;
}
#header {
width:980;
height:200px;
background:dimgray;
}
#menu_css {
width:980;
margin-top:10;
}
#inhalt{
margin-top:10;
width:980;
}
#sidebar_l {
float:left;
width:250px;
height:500;
background:dimgray;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
margin-top:10px;
margin-bottom:10px;
}
#text {
text-align: justify;
float:right;
width:980px;
height:500px;
background:silver;
-moz-border-radius:0px;
-webkit-border-radius:0px;
-o-border-radius:0px;
border-radius:0px;
margin-top:10px;
margin-bottom:10px;
}
#footer {
width:980px;
height:40px;
background:dimgray;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
margin-top:10px;
margin-left: auto;
margin-right: auto;
clear:both;
}Es gibt noch eine weitere css Datei, die aber nur das Menü händelt, falls dieser Code gebraucht wird, werde ich ihn umgehend nachliefern.
Ich bedanke mich fürs lesen und eventuellem Antworten.
Mit freundlichen Grüßen
BerryBlue