Html & css problem beim Seitenaufbau

BerryBlue

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:

HTML

[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>

</body>
<html>

[/code]

Und Hier der Css Code:

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;


}

Alles anzeigen

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

MrMurphy

Hallo,

dein Problem kann ich nicht nachvollziehen.

Allerdings scheinst du uns auch ein Teil des CSS vorzuenthalten. In der HTML-Datei werden zwei CSS-Dateien eingebunden und für das Menü gibt es keine CSS-Angaben, bis auf eine. Und die scheint auch noch falsch zu sein.

Im CSS

Code

#menu_css

und im HTML dann

Code

<div id='cssmenu'>

Zitat

und wollte mir deswegen in den Ferien mal Html und css in den Basics beibringen.

Insgesamt scheinen deine Unterlagen zu HTML / CSS leider sehr veraltet zu sein. Du solltest dir unbedingt aktuelle Unterlagen bzw. aktuelles Lehrmaterial besorgen. Grade in den letzten Jahren hat sich viel geändert und wenn nach veralteten Grundlagen gelernt wird fällt die Umstellung auf aktuelles HTML / CSS sehr schwer oder gelingt gar nicht.

Gruss

MrMurphy

BerryBlue

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 ?

Code

#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;
  }
}

Alles anzeigen

MrMurphy

Hallo

ich habe die Seite mit dem kompletten CSS getestet, konnte dein Problem aber nicht nachvollziehen. Ich kann im CSS auch keine Angaben finden, die die Verschiebung des Layouts verursachen könnten.

Das Problem ist demnach offensichtlich im Softwarebereich deines Rechners zu suchen. Da werden sich wohl einige Programme gegenseitig stören.

Gruss

MrMurphy

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 ?

MrMurphy

Hallo,

so einen Fehler hatte ich schon lange nicht mehr, deshalb war ich da wohl etwas betriebsblind. Das liegt doch nicht an deinem Rechner.

Du hast bei vielen Größenangaben die Einheit weggelassen, bei dir px. Meist wohl bei width.

Das ist nicht zulässig. Die Einheit darf nur bei ganz bestimmten Angaben (z. B. line-height) weggelassen werden.

Lokal ignorieren die Browser solche Fehler. Bei Daten von Webserven offensichtlich nicht. Das musst du also korrigieren.

Gruss

MrMurphy

BerryBlue

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

MrMurphy

Hallo

Zitat

warum aber der Browser es manchmal ingnoriert und manchmal nicht, würde mich mal interessieren.

Die Browser schalten die Ansicht nach unterschiedlichen Vorgaben um. Offensichtlich ist das bei der Doctype-Angabe.

Aber es gibt noch andere Gründe. So halt auch ob die Daten lokal vom Rechner stammen oder von einem Webserver geliefert werden.

Anfänger sehen das dann gerne als Browserfehler oder Bug an, dabei übersehen sie ihre "Pflicht" einen fehlerfreien Quellcode zu liefen.

Zitat

darf ich erfahren was an dem Code nicht Mehr Zeitgemäß ist ?

Zum Beispiel die Verwendung von div anstatt geeignetere Container wie header, main, footer u.s.w. zu verwenden.

Oder den Containern feste Größen aufzwingen zu wollen, anstatt das Browserfenster in seiner ganzen Breite zu nutzen oder die Besucher bei schmaleren Fenstern zu zwingen seitwärts zu scrollen.

Gruss

MrMurphy

Tags