Wrong Coding

Niamh225 · Apr 18, 2023

Hello. I got my coding wrong. The font for the second sentence is supposed to be smaller and in the color green. The last two sentences are supposed to be the aligned to the left and in 12pt font. What did I do wrong?

<!DOCTYPE html>
<html>
<head>
<title>The Monk Diamond</title>
<style>
.header {
background-color: lightblue;
padding: 25px;
text-align: center;
font-size: 18pt;
width: 100%;
height: 25%;
}
.title {
font-size: 14 pt;
text-align: center;
color: gray;
}
.body {
margin: 20px;
}
</style>
</head>
<body>
<div class="header">
The Monk Diamond<br/>
An incredible discovery
<div/>
<br/>
<div class="title">
Stolen diamond found on expedition in Siberia!
<div class="body">
Professor Bairstone and Dr. Day were looking for fossils in Siberia.<br/>
They found the stolen diamond hidden inside a remote cave.
</div>
</body>
</html>

FResher · Apr 19, 2023

Hello,

you ask for 'html/css' in the 'c/c++' main thread : ask admin to move your question.

you have one missing closing tag 'div' , it's Html error. with a missing tag you have structure defaults, then display css defaults too.

you use native keywords ( header / body /title ) as classes Names, choose others name or you'll be lost quickly.

Niamh225 · Apr 19, 2023

Thanks. I corrected one error. However, the third sentence is still not in 12pt font, the second sentence is still not in 14pt font and only the first sentence should be highlighted in blue. I checked the code dozens of times.

Phro0244 · Apr 19, 2023

Here is the fix the code

PHP:

<!DOCTYPE html>
<html>
<head>
<title>The Monk Diamond</title>
<style>
.header {
background-color: lightblue;
padding: 25px;
text-align: center;
font-size: 18pt;
width: 100%;
height: 25%;
}
.title {
font-size: 14 pt;
text-align: center;
color: gray;
}
.body {
margin: 20px;
}
</style>
</head>
<body>
<div class="header">
The Monk Diamond<br/>
An incredible discovery
</div>
<br/>
<div class="title">
Stolen diamond found on expedition in Siberia!
</div>
<div class="body">
Professor Bairstone and Dr. Day were looking for fossils in Siberia.<br/>
They found the stolen diamond hidden inside a remote cave.
</div>
</body>
</html>

ayush328 · Oct 23, 2024

hi this is not correct

Saul H. · Oct 24, 2024

Here is your corrected code!

By the way, if you are using Young Rewired State's "Get Coding!" book, the finished product is on the back of every chapter. As FResher already said, using native (and also erroneous: .body is not the entirety of the body) keywords can complicate things! I did not fix this!

Code:

<!DOCTYPE html>
<html>
<head>
<title>The Monk Diamond</title>
<style>
.header {
background-color: lightblue;
padding: 25px;
text-align: center;
font-size: 18pt;
width: 100%;
height: 25%;
}
.title {
font-size: 14 pt;
text-align: center;
color: green;
}
.body {
margin: 20px;
float: left;
font-size: 12 pt;
}
</style>
</head>
<body>
<div class="header">
The Monk Diamond<br>
An incredible discovery
</div>
<br>
<div class="title">
Stolen diamond found on expedition in Siberia!
</div>
<div class="body">
Professor Bairstone and Dr. Day were looking for fossils in Siberia.<br/>
They found the stolen diamond hidden inside a remote cave.
</div>
</body>
</html>

VBService · Nov 15, 2024

Try to avoid <br> tags between <div> tags in your code, use margin in css for that.
The <br> tag should only be used to "break" text.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Monk Diamond</title>

    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100dvw;
      }
      .header {
        background-color: lightblue;
        padding: 25px;
        text-align: center;
        font-size: 18pt;     
        margin-bottom: 18pt;  /* Instead of <br> */
      }
      .title {
        font-size: 14pt;
        text-align: center;
        color: green;
      }
      .body {
        margin: 20px;
        text-align: left;
        font-size: 12pt;
      }
    </style>
  </head>
  <body>
    <div class="header">
      The Monk Diamond<br/>
      An incredible discovery
    </div>

    <div class="title">
      Stolen diamond found on expedition in Siberia!
    </div>

    <div class="body">
      Professor Bairstone and Dr. Day were looking for fossils in Siberia.<br/>
      They found the stolen diamond hidden inside a remote cave.
    </div>
  </body>
</html>

Aligned to the left	3	Apr 19, 2023
Neopets coding help	4	Sep 22, 2021
Image on header	2	May 1, 2024
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
Help with my responsive home page	2	Dec 14, 2022
Buttons lining up	1	Feb 6, 2022
Positioning CSS components	1	Nov 16, 2023
Help with code	0	Jun 11, 2022

Wrong Coding

Niamh225

FResher

Niamh225

Phro0244

ayush328

Saul H.

VBService

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads