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 HTML and CSS

Ahmad Saleh

Ahmad Saleh

New Coder
Hello,

I am self-teaching myself how to code HTML and I am super new to this (this is my first project.) There are lots of resources online that I am using and I've managed to figure things out as I go. However, I am encountering an issue: I have an .svg border around my page and then some text that I have added. Somehow the text has a white background that goes over the border and I want to eliminate this text background but I can't seem to figure out how. I have attached an image showing what it looks like and my code.

I'd appreciate any help or direction on how to resolve this. And as I am very very new to this, please explain it step by step as I am not familiar with any of the terminologies (for example, I still don't understand what div is lol)

Thanks in advance! :D

HTML: 
<!DOCTYPE html>
<html>
<head>
    <title>PDF</title>
</head>

<style>
    html {
        background-image: url("border\ cleaned.svg");
        background-repeat: no-repeat;
        background-size: cover;
    }
    body {
        background-color: rgb(255, 255, 255);
    }

    .title {
        padding-left: 160px;
        padding-top: 100px;
        text-align: left;
        font-family: sans-serif;
        font-size: 30px;
        color: rgb(0, 0, 0);
        background-color: transparent;
    }
    .intro {
        padding-top: 40px;
        text-align: center;
        font-family: sans-serif;
        font-size: 20px;
        color: black;
        background-color: transparent;
    }
    
</style>

<body>

<h1 class="title">Portable
    <br>Digital
    <br>Format</h1>
<p class="intro">Portable Digital Format is a curated virtual space
    <br>founded by Ahmad Saleh to showcasing creative
    talent
    <br>within the SWANA region.
</p>

</body>

</html>

Screen Shot 2022-02-23 at 10.50.26 PM.png
 
Solution
Johna
So the body of HTML will automatically take up 100% of the width, and the height will start at 0px and increase as you add more content to it. That's why below the last line of your paragraph it's displaying correctly, because there's no "body" there.



To have those black bars to the side, I don't think using SVG is the best way.
A better way will be to make the html black by replacing your background-image: url("border\ cleaned.svg"); with background-color: black;.

For the body to be white, keep your background-color: rgb(255, 255, 255); (tip: you can also just write background: white;).

Then to make the bars on the sides visible you have to narrow down the body by adding margins on each side:
CSS: 
body {...
Sort by date Sort by votes
So the body of HTML will automatically take up 100% of the width, and the height will start at 0px and increase as you add more content to it. That's why below the last line of your paragraph it's displaying correctly, because there's no "body" there.



To have those black bars to the side, I don't think using SVG is the best way.
A better way will be to make the html black by replacing your background-image: url("border\ cleaned.svg"); with background-color: black;.

For the body to be white, keep your background-color: rgb(255, 255, 255); (tip: you can also just write background: white;).

Then to make the bars on the sides visible you have to narrow down the body by adding margins on each side:
CSS: 
body {
    background: white;
    margin-left: 150px;    /*change the 150px to whatever width you want each side to be*/
    margin-right: 150px;
}

Then you still don't have the white reaching all the way to the bottom, to do that you'll need to make the minimum body height the full screen height by adding this to you CSS.
CSS: 
body {
    background: white;
    margin-left: 150px;
    margin-right: 150px;
    min-height: 100vh;    /*this will make sure the white reaches the bottom of the page, even if you have little content in the body*/
}



If you really want to use SVG, then just add the margins to the side and that should fix it (make sure the margins are the same or more than the width of the black border.)



Btw <div> is like a section in the HTML or division.
More on div elements here:
www.w3schools.com

HTML div tag

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com
 
Upvote 1 Downvote
Solution
Johna said:
So the body of HTML will automatically take up 100% of the width, and the height will start at 0px and increase as you add more content to it. That's why below the last line of your paragraph it's displaying correctly, because there's no "body" there.



To have those black bars to the side, I don't think using SVG is the best way.
A better way will be to make the html black by replacing your background-image: url("border\ cleaned.svg"); with background-color: black;.

For the body to be white, keep your background-color: rgb(255, 255, 255); (tip: you can also just write background: white;).

Then to make the bars on the sides visible you have to narrow down the body by adding margins on each side:
CSS: 
body {
    background: white;
    margin-left: 150px;    /*change the 150px to whatever width you want each side to be*/
    margin-right: 150px;
}

Then you still don't have the white reaching all the way to the bottom, to do that you'll need to make the minimum body height the full screen height by adding this to you CSS.
CSS: 
body {
    background: white;
    margin-left: 150px;
    margin-right: 150px;
    min-height: 100vh;    /*this will make sure the white reaches the bottom of the page, even if you have little content in the body*/
}



If you really want to use SVG, then just add the margins to the side and that should fix it (make sure the margins are the same or more than the width of the black border.)



Btw <div> is like a section in the HTML or division.
More on div elements here:
www.w3schools.com

HTML div tag

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com
Click to expand...

Thank you. This makes sense now and it solved the issue. I really appreciate it.
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom