Rahmenbedingungen
zusätzliche Techniken:
Einschränkungen:
Browser & Betriebssystem: Firefox 59.0.3, Windows 7
Editor:
Problembeschreibung
Fehlermeldung/-beschreibung:
bisherige Lösungsversuche:
Code:
Hallo zusammen,
ich versuche gerade, eine eigene Webseite zu schreiben, aber ich komme mit meinem css-Code nicht mehr weiter.
Hier ist das CSS:
- <?xml version="1.0" encoding="UTF-8"?>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
- /* Container, in dem sich die einzelnen Boxen befinden*/
- #container{
- background-color: black;
- width: 900px;
- height: 500px;
- }
- /* Seitenüberschrift*/
- #header{
- background-color: white;
- width: 93%;
- height: auto;
- padding: 2%;
- border: 0;
- margin: 1%;
- font-size: 30px;
- text-align: center;
- font-weight: bold;
- }
- #bild {
- float: left;
- background-color: white;
- width: 17%;
- height: 130px;
- padding: 2%;
- border: 5px solid black;
- margin: 1%;
- border-radius: 20px;
- }
- #zitat {
- float: left;
- background-color: #ffe800;
- width: 69%;
- height: 130px;
- padding: 2%;
- border: 5px solid black;
- margin: 1%;
- border-radius: 20px;
- font-size: 17px;
- font-family: Arial, sans-serif;
- }
- #navigation {
- float: left;
- background-color: #0101CB;
- width: 17%;
- height: 1200px;
- padding: 2%;
- border: 5px solid black;
- margin: 1%;
- border-radius: 20px;
- }
- ul#navigation {
- width: 100%;
- margin: 0px;
- border: 0px;
- padding: 0px;
- list-style-type: none;
- }
- ul#navigation li {
- border: 3px solid black;
- margin: 5px;
- width: 90%;
- border-radius: 10px;
- }
- /* Gestaltung Button ohne Aktion */
- ul#navigation li a:link, li a:visited {
- padding: 10px;
- display: block;
- background-color: #b76900;
- color: #000080;
- text-decoration: none;
- font-weight: bold;
- font-family: Arial, Helvetica, sans-serif;
- border-radius: 10px;
- }
- /* Gestaltung, wenn Button mit Maus oder Tastatur ausgewählt ist */
- ul#navigation li a:hover {
- display: block;
- border: 1px solid black;
- background-color: #ff9200;
- color: #fff;
- }
- #haupttext {
- float: left;
- background-color: white;
- width: 69%;
- height: 1200px;
- padding: 2%;
- border: 5px solid black;
- margin: 1%;
- border-radius: 20px;
- }
- #footer {
- background-color: #e4cf00;
- width: 93%;
- height: auto;
- padding: 2%;
- border: 5px solid black;
- margin: 1%;
- clear: both;
- border-radius: 20px;
- }
- /* Formatierung Schrift*/
- /* Überschriften*/
- h1 {
- font-size: 50px;
- font-family: Arial, sans-serif;
- color: #000080;
- }
- h2 {
- font-size: 30px;
- font-family: Arial, sans-serif;
- }
- /* Normaler Absatz*/
- p {
- font-size: 20px;
- font-family: Arial, sans-serif;
- }
- /* Listenpunkte*/
- li {
- font-size: 20px;
- font-family: Arial, sans-serif;
- }
- /* Zitat*/
- quote{
- font-size: 17px;
- font-family: Arial, sans-serif;
- }
- /* Formatierung Schrift Ende*/
- li {
- font-size: 20px;
- font-family: Arial, sans-serif;
- }
- img {
- display: block;
- margin-left: auto;
- margin-right: auto
- }
Hier ist der HTML-Code:
- <?xml version="1.0" encoding="UTF-8"?>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
- <head>
- <title>
- blablabla
- </title>
- <meta http-equiv="content-type" content="text/html; charset=utf-8">
- <link href="style.css" rel="stylesheet" type="text/css">
- </head>
- <body style="background-color:lightgrey;">
- <div id="container">
- <div id="header">
- blablabla
- </div>
- <div id="bild">
- <img src="logo.jpg">
- </div>
- <div id="zitat">
- blablabla
- </div>
- <!-- einzelne Buttons -->
- <div id="navigation">
- <ul id="navigation">
- <li><a href="index.html">Startseite</a></li>
- <li><a href="Dienstleistungen.html">Dienstleistungen</a></li>
- <li><a href="Über mich.html">Über mich</a></li>
- <li><a href="Kontakt.html"> Kontakt </a></li>
- </ul>
- </div>
- <div id="haupttext">
- blablabla
- </div>
- <div id="footer">
- blablabla
- </div>
- </div>
- </body>
- </html>
Mein Ziel war es, die einzelnen Container der Webseite in einen Art "Über-Container" (#container) zu platzieren, damit sie geordnet sind und beim Zoomen im Browser einheitlich bleiben.
Das hat auch funktioniert, nur scheine ich vor kurzem den Code "zerstört" zu haben, Änderungen an "#container" werden beim Aufbau der Seite nicht mehr übernommen, und beim Herein- und Herauszoomen zerfallen die einzelnen Container.
Kann mir irgendjemand sagen, was da passiert ist?
Danke!