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