• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Fehler in HTML Code

itboy

Neues Mitglied
Hallo zusammen, in folgendem HTML Code sind Fehler, folgendes habe ich gefunden:
- Ganz oben bei content="width=device-width, initial-scale=1.0"> finde ich "device-width" ein bisschen seltsam. Ist doch bestimmt falsch?
- Bei den Schriftgrößen, margin und padding wird pt verwendet. Nimmt man für Bildschirmausgaben nicht px?
- Im div.bDiv Container ist die Position "relativ", kann das sein?

Wäre super, wenn jemand noch Fehler finden würde die er kurz auflisten kann, damit ich weiter machen kann.

HTML:
<!DOCTYPE html>
<html>
    <head>
        <title>Teil2: Vererbung und Kaskadierung</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0";
        <style type="text/css">
            <body> {
                font-size:13pt;
                font-family: verdana;
                width: 700px;
                margin: 10 pt;
                padding: 10pt;
            }
            h1 {
                font-size: 20pt;
            }
            #sidebar {
                color: #eef;
                background-color: #059;
                width: 300px;
                height: 400px;
                float: left;
            }
            .secDiv {
                color:#f00;
                font-weight:bold;
            }
            div {
                color: #222;
                width: 300px;
                height: 200px;
                padding: 10pt;
                background-color: #fc6;
                float: right;
            }
            div.bDiv {
                background-color: #9cf;
                position: relative;
                type: 20px;
                left: 50px;
            }
            ol li {
                color: #f00;
            } </style>
            
            </head>
            
            <body>
                <h2>Teil 2: Versuche mit dem Box-Modell </h2>
                <div id="sidebar">
                    <p>Erster Absatz </p>
                    <ul>
                        <li>Listenelement 1 </li>
                        <li>Listenelement 2 </li>
                    </ul>
                    <ol>
                        <li>Listenelement 1
                            <ul>
                                <li>Element 1</li>
                                <li>Element 2</li>
                            </ul>
                        </li>
                        <li>Listenelement 2 </li>
                    </ol>
                    <p>Zweiter Absatz mit allgemeinen Infos</p>
                    </div>
                    <div class ="aDiv" id="secDiv">
                        <p>Zweiter Div-Container</p>
                    </div>
                    <div class="bDiv">
                        <p>Dritter Div-Container</p>
                    </div>
            </body>
</html>
 
Werbung:
Hallo

"position: relative" ist hier erforderlich um den Container mit "left: 50px" verschieben zu können.

Charset sollte direkt hinter head stehen, damit Umlaute zum Beispiel auch im title-Tag richtig angezeigt werden:

Code:
<head>
   <meta charset="UTF-8">
   <title>Teil2: Vererbung und Kaskadierung</title>

Ist doch bestimmt falsch?

device-width ist ok, das Ende stimmte nicht. Die Anweisung sollte so aussehen:

Code:
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

Richtig, die Einheit pt ist für Drucker gedacht und damit für Webseiten nicht geeignet.

Der style-Block für das interne CSS ist falsch, der muss so aufgebaut sein:

Code:
   <style>

   body {
      font-size: 13pt;
     ...
   }

   </style>

Code:
      margin: 10 pt;

Zwischen Wert und Einheit darf kein Leerzeichen stehen, wobei die Einheit pt unsinnig ist, also

Code:
      margin: 10px;

Code:
      type:20px;

type gibt es in CSS nicht.

Zudem sollte statt float heutzutage besser Flexbox verwendet werden.

Und wenn schon float, dann immer ein clear, auch wenn es für diesen Quelltext noch nicht erforderlich ist.

Gruss

MrMurphy
 
Hallo MrMurphy,

erstmal vielen Dank für deine Antwort.
Habe mir gerade im HTML Code die ganzen Container gesucht:
1. <h2> (Typ Selektor) also h2 (nicht h1) in CSS
2. <div id="sidebar"> (ID) also #sidebar in CSS
3. <div class="aDiv"> (Klasse) id="secDiv"> (Klasse) also .aDiv und #secDiv in CSS
4. <div class="bDiv"> (Klasse) also .bDiv in CSS

Wenn man das mit dem CSS vergleicht, stellt man fest, dass h1 in CSS eigentlich h2 heißen müsste und der Rest total durcheinander ist.
Stimmt das?
 
Werbung:
Werbung:
Zurück
Oben