Beiträge von MaxKraft

MaxKraft · 7. Mai 2018

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:

HTML

<?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
}

Alles anzeigen

Hier ist der HTML-Code:

HTML

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

Alles anzeigen

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!