Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Help with putting the code in a section, not whole page

chrisj

Bronze Coder
I'm trying to test someone's code to put on a web page that already has content on it. So, I'd like it in a section of the page.
But it doesn't appear.

The html is this:

HTML:
    <p>
    <center><div class="container">
  <div class="text"></div>
  </div></center>

The css is this:

CSS:
html, body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 28px;
  text-transform: uppercase;
  font-weight: 100;
  background-color: #222;
  color: #eee;
  width: 100%;
  height: 100%;
  letter-spacing: 5px;
}
html .content, body .content {
  text-align: center;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
html .content span, body .content span {
  width: 30px;
  display: inline-block;
}

I just see a flat line on the page. Is it because the css has "html, body"?
How can I change this code to just show it in a section of the page?
Any help is appreciated...
 
I just see a flat line on the page
Probably because you don't have any content in your HTML, just a bunch of empty <div>'s and <p>'s and centers's.


Btw you never closed your <p> element.



And to put the code on a webpage, I find the easiest way to do that by making a chrome extension:

How to make an Extension to add HTML in a Web Page
  1. First make a folder for your Chrome Extension, and add folder called js inside it.
  2. Like any Chrome Extension, start by making your manifest.json, and putting is in the root folder of your extension. Here's an example:
    JSON:
    {
      "name": "Add HTML to Page",                                    //this is the name of the extention
      "description": "This extention adds my HTML to a webpage",     //this is the description of the extention
      "version": "1.0",                                              //the version of your extention
      "manifest_version": 2,                                         /*the manifest verion. you can use version 2 or 3. I prefer
                                                                     to use 2, but 3 is newer so you may want to use version 3*/
      "content_scripts": [{
        "matches": ["https://www.google.com/*"],                    /*the website you want to add the HTML to. If you want
                                                                     it to work on all websites, remove this*/
        "js": ["js/addHtml.js"],                                     //the JavaScript to run
        "run_at": "document_end"                                     //this tells the JavaScript to run after the page has loaded
      }]                                                             /*remember not to add a "," at the end of the last line*/
    }
  3. Next the JavaScript. Make a file called addHtml.js and put it in your js folder.
    JavaScript:
    var div = document.createElement("div");                  //
    var text = document.createElement("p");                   //  //creates the elements <div>, <p>, and <button>
    var button = document.createElement("button");            //
    
    text.innerHTML = "This is the HTML I added to the page";  //
    button.innerHTML = "Just a random useless button";        //  //what's inside these elements
    
    div.style.backgroundColor = "blue";                       //
    text.style.fontSize = "48px";                             //  //add styling
    
    div.appendChild(text);                                    //
    div.appendChild(button);                                  //  //put them inside the <div> element
    
    document.getElementById("gws-output-pages-elements-homepage_additional_languages__als").appendChild(div);
  4. Now go to Chrome (or any chromium based browser) and go to extensions. Next turn on "developer mode" and click load extension. Go to your extension folder, and open it.
  5. Now go to the website you set in the manifest.json and there it is.

This is the result:
Google_page-0001.jpg
 
Last edited:
Probably because you don't have any content in your HTML, just a bunch of empty <div>'s and <p>'s and centers's.


Btw you never closed your <p> element.



And to put the code on a webpage, I find the easiest way to do that by making a chrome extension:

How to make an Extension to add HTML in a Web Page
  1. First make a folder for your Chrome Extension, and add folder called js inside it.
  2. Like any Chrome Extension, start by making your manifest.json, and putting is in the root folder of your extension. Here's an example:
    JSON:
    {
      "name": "Add HTML to Page",                                    //this is the name of the extention
      "description": "This extention adds my HTML to a webpage",     //this is the description of the extention
      "version": "1.0",                                              //the version of your extention
      "manifest_version": 2,                                         /*the manifest verion. you can use version 2 or 3. I prefer
                                                                     to use 2, but 3 is newer so you may want to use version 3*/
      "content_scripts": [{
        "matches": ["https://www.google.com/*"],                    /*the website you want to add the HTML to. If you want
                                                                     it to work on all websites, remove this*/
        "js": ["js/addHtml.js"],                                     //the JavaScript to run
        "run_at": "document_end"                                     //this tells the JavaScript to run after the page has loaded
      }]                                                             /*remember not to add a "," at the end of the last line*/
    }
  3. Next the JavaScript. Make a file called addHtml.js and put it in your js folder.
    JavaScript:
    var div = document.createElement("div");                  //
    var text = document.createElement("p");                   //  //creates the elements <div>, <p>, and <button>
    var button = document.createElement("button");            //
    
    text.innerHTML = "This is the HTML I added to the page";  //
    button.innerHTML = "Just a random useless button";        //  //what's inside these elements
    
    div.style.backgroundColor = "blue";                       //
    text.style.fontSize = "48px";                             //  //add styling
    
    div.appendChild(text);                                    //
    div.appendChild(button);                                  //  //put them inside the <div> element
    
    document.getElementById("gws-output-pages-elements-homepage_additional_languages__als").appendChild(div);
  4. Now go to Chrome (or any chromium based browser) and go to extensions. Next turn on "developer mode" and click load extension. Go to your extension folder, and open it.
  5. Now go to the website you set in the manifest.json and there it is.

This is the result:
View attachment 1239
Idk what happened, but the button isn't even a button.
 
Wait so the webpage is actually your own?
I re-read your question and it looks like the page is your own. If it is, then you don't have to do it with a chrome extension.
I thought you wanted to put it on another webpage like google.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom