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

keine Anzeige des Boxenmoddels bei css3 und html5

P

prajuritbs

Mitglied
Hi, ich habe folgendes problem:
Ich lernen gerade HTML5 und CSS3 .

Jetzt sollte mir gezeigt werden, was der Unterschied zwischen den alten und den neuen Boxenmodellen ist. (bei css3)

Diesen Code musste ich dafür schreiben:

HTML: 
<!DOCTYPE HTML>
<html>
<head>

<style type=“text/css“>
/* <! [CDATA[ */
/* Das KLASSISCHE BOXMODELL */
.box-sizing {
  widht: 300px;
  height: 100px;
  border: 1px solid #0080ff;
  margin-bottom: 20px;
  padding: 10px;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
/* Das NEUE BOXENMODELL */
.box-sizing-border-box {
  widht: 300px;
  height: 100px;
  border: 1px solid #0080ff;
  margin-bottom: 20px;
  padding: 10px;
  -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/* ]] */
</style>

</head>

<body>

<div class=“box-sizing“>
box-sizing: content-box (Standard) <br />
Breite: 300 Pixel + 10 Pixel, padding = 1 Pixel, Rahmen an beiden Seiten, Gesamtbreite= 322 Pixel
</div>

<div class=“box-sizing-border-box“>
box-sizing: border-box<br />
Breite:  300 Pixel + 10 Pixel, padding = 1 Pixel, rahmen an beiden Seiten, Gesamtbreite = 300 Pixel
</div>

</body>

Normal sollten bei Texte in den Div-Tags in einer Box angezeigt werden, jedoch wird der Text einfach ohne Box angezeigt was ist da falsch?
Danke für eine schnelle Antwort
 
Ich glaube du verwechselst da was.. das Boxmodell ist schon immer so wie's bei dir als "neu" bezeichnet wird. Das "alte" ist die falsche Interpretierung von älteren Versionen des Internet Explorer.
Du hast fehler im CSS, zB nennt sich das width und nicht widht.

Internet Explorer box model bug - Wikipedia, the free encyclopedia

Wobei dein eigentliches Problem die Anführungszeichen sind.. das sind keine " sondern irgendwas andres..

HTML: 
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
/* <! [CDATA[ */
/* Das KLASSISCHE BOXMODELL */
.box-sizing {
  width: 300px;
  height: 100px;
  border: 1px solid #0080ff;
  margin-bottom: 20px;
  padding: 10px;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
/* Das NEUE BOXENMODELL */
.box-sizing-border-box {
  width: 300px;
  height: 100px;
  border: 1px solid #0080ff;
  margin-bottom: 20px;
  padding: 10px;
  -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/* ]] */
</style>

</head>

<body>

<div class="box-sizing">
box-sizing: content-box (Standard) <br />
Breite: 300 Pixel + 10 Pixel, padding = 1 Pixel, Rahmen an beiden Seiten, Gesamtbreite= 322 Pixel
</div>

<div class="box-sizing-border-box">
box-sizing: border-box<br />
Breite:  300 Pixel + 10 Pixel, padding = 1 Pixel, rahmen an beiden Seiten, Gesamtbreite = 300 Pixel
</div>

</body>
</html>

Und nicht das schließende </html> Tag vergessen.
 
Zuletzt bearbeitet:
oke hab des width ausgebessert aber immer noch keien Veränderung ja das meine ich mit der Falschen interpretation, aber mit geht es ja jetzt darum, was falsch ist , das der Text nicht in Boxen angezeigt wird.
 
prajuritbs schrieb:
Hi, ich habe folgendes problem:
Ich lernen gerade HTML5 und CSS3 .

Jetzt sollte mir gezeigt werden, was der Unterschied zwischen den alten und den neuen Boxenmodellen ist. (bei css3)

Diesen Code musste ich dafür schreiben:
Zum Vergrößern anklicken....
Mit was für einen Programm schreibst du den Code?
Deine Anführungszeichen sind falsch.

Als Tipp: Firefox hat eine Fehlerkonsole, da kannst du auch diese Tippfehler im CSS Code entdecken und die Quellcode anzeige hat Syntax Highlighting da wären dir die Anführungszeichen aufgefallen.
 
ka9de schrieb:
Ich glaube du verwechselst da was.. das Boxmodell ist schon immer so wie's bei dir als "neu" bezeichnet wird. Das "alte" ist die falsche Interpretierung von älteren Versionen des Internet Explorer.
Du hast fehler im CSS, zB nennt sich das width und nicht widht.

Internet Explorer box model bug - Wikipedia, the free encyclopedia

Wobei dein eigentliches Problem die Anführungszeichen sind.. das sind keine " sondern irgendwas andres..

HTML: 
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
/* <! [CDATA[ */
/* Das KLASSISCHE BOXMODELL */
.box-sizing {
  width: 300px;
  height: 100px;
  border: 1px solid #0080ff;
  margin-bottom: 20px;
  padding: 10px;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
/* Das NEUE BOXENMODELL */
.box-sizing-border-box {
  width: 300px;
  height: 100px;
  border: 1px solid #0080ff;
  margin-bottom: 20px;
  padding: 10px;
  -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/* ]] */
</style>

</head>

<body>

<div class="box-sizing">
box-sizing: content-box (Standard) <br />
Breite: 300 Pixel + 10 Pixel, padding = 1 Pixel, Rahmen an beiden Seiten, Gesamtbreite= 322 Pixel
</div>

<div class="box-sizing-border-box">
box-sizing: border-box<br />
Breite:  300 Pixel + 10 Pixel, padding = 1 Pixel, rahmen an beiden Seiten, Gesamtbreite = 300 Pixel
</div>

</body>
</html>

Und nicht das schließende </html> Tag vergessen.
Zum Vergrößern anklicken....

Hä, wo hast du da jetzt die Anführungszeichen weggelassen?
 
Ich habe keine weggelassen. Lies nochmal was ich geschrieben habe, DU verwendest FALSCHE "-Zeichen. Du musst Shift+2 drücken für " ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben