Not Clear Why <h1> Line in HTML File Doesn't Render

Sorry if my title is unclear, but I honestly tried to make it so. My problem is I can’t understand why every time I make a change to one of the parameters on the main.css file, the h1 line in my HTML file requires that I either add, or subtract 1 space on either end of that line, then resave that file. It just doesn’t make sense.

I’m watching the Quentin Watt HTML/CSS tutorials, and I really like them, but I don’t see him having to make the same changes that I’m making. Why is that?

Thanks folks.

Without seeing a working copy of your code, there is nothing we can tell you.

Please read the posting guidelines, if you have not already. We’ll be glad to help.

Sorry Ronpat,

I did look for an attachment icon, but I wasn’t aware you guys didn’t allow that. (That’s another question I have.) So, I did do a simply Copy/Paste. I tried to follow instructions this time. Your patience is mucho appreciado.

Ronpat, I really apologize, but I’m just not understanding how to post the HTML file without it rendering the code. Can you explain what I’m doing wrong? I’m going to go back and read the forum FAQ’s in the meantime. I didn’t realize how complicated it was.


h1{
background-color:yellow;
padding:20px 35px;
border:8px ridge green;
margin:0px;
}

body{
margin:0px;
padding:0px;
}
/*You can also make padding settings on 1 line as follows: “padding: top bottom left right” no commas betwn
You can also make padding settings on 1 line as follows IF TOP & BOTM ARE EQUAL, AND LFT & RT ARE EQUAL:
“padding: 10px 60px;” no commas betwn

You can also make border settings on 1 line as follows: “border:# of px wide, style, border color” no commas betwn.

Margin works a lot like Padding. If you want the same margin all the way around just specify 1 number. Also, if you want to have a full-bleed where there’s no white margin, then simply add a body property as above and set margin, and padding to 0px*/

http://codepen.io/UnkleBuck/pen/WQrbxZ.html

http://codepen.io/UnkleBuck/pen/wKMBze.css

Hope this suffices.

UnkleBuck,

Many new environments look complicated at first. Isn’t that the nature of unfamiliarity?

Discourse requires a small token of familiarity with it before granting new users the abilities to post messages, images, code, etc. The requirements are quite minimal. Spend 20 minutes or so reading a few posts… easily done while reading the posting guidelines and FAQ files… click the search button at the top of the window and search for a topic that is similar to yours where the answer may already have been found… more time spent, more familiarity gained… you will soon have the ability to conduct full discussions, as well as post code and images in messages.

Back on the original issue, I would like to see a “working page” with the code that is causing the grief and of course your description of what you are trying to do. A “working page” as described in the posting guidelines starts with <doctype> and ends with </html> and contains the HTML and CSS together in their appropriate places.

(The following “working page” was made from your codepens.)

Something like this:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Tutorial 17 - Box model, Margin</title>
<!--
http://www.sitepoint.com/community/t/not-clear-why-h1-line-in-html-file-doesnt-render/201628/4
UnkleBuck
Sep 13,2015 2:21 PM
-->
    <style type="text/css">

body {
    padding:0px;
    margin:0px;
}
h1 {
    background-color:yellow;
    border:8px ridge green;
    padding:20px 35px;
    margin:0px;
}

    </style>
</head>
<body>

<h1>I'm a box. I'm a box. I'm a box. I'm a box.</h1>
<h1>I'm a box. I'm a box. I'm a box. I'm a box.</h1>

</body>
</html>

Please copy the above “working page” into a file and open it in your browser. Please then tell me what you do not uderstand or would like to do next.

You can either highlight the code and use the </> button on the edit box to format it, or type three backticks

```

on a line above your code, and three on a line below it. I find this method easier. (The backtick is left of the 1 on my UK keyboard; unfortunately, some European keyboards don’t have that key at all.)

Out of interest, which code editor are you using for your HTML pages?

What software are you using to edit your file?

Why do you need to save your HTML file after making changes to your CSS file? It sounds to me as though your software is not allowing you to save your HTML file again because you haven’t made any changes since you last saved it – I know of several applications that disabled the ‘Save’ button in that situation. Is the problem that the software has a built-in preview mode that won’t refresh until you resave the HTML file?

1 Like

Could it be a caching issue?

Stevie,

I’m using Notepad++, cuz that’s what the tutorials are using. It seems to work quite well for the most part. I’m not at my PC where my code files are saved, however, if you look at my 4th post you can see my links from CodePen.

Thanks,
UB

I’m not sure that the code itself is relevant.

You’ve said that you aren’t able to save your HTML file when you haven’t made any changes to it. Why do you need to save the file when you haven’t made any changes to it?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.