Porbleme mit css-Code: div-Container wird nicht angezeigt

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

Sailor · 7. Mai 2018

Fang doch mal damit an, dass du in deinem CSS als erstes ...

Code

* {
box-sizing: border-box;
}

einfügst! Damit sollten schon 50% deiner Probleme gelöst sein.

Und dann schau mal, wie du das mit den Formaten 'height' geregelt hast? In einen 500px hohen 'Übercontainer' passen nun mal auch Elemente mit einer Gesamthöhe von 500px rein!

m.scatello · 7. Mai 2018

Und noch ein Hinweis: HTML 5 ist aktuell

Siehe https://www.w3schools.com/html/html5_intro.asp