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
<!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>
Related
I just switched from VSC to Adobe Dreamweaver and i don't know if I should keep it or not; but that's besides the point.
When I try to add a background to some text, it fills the whole screen with the background with the background, and if I try to change the width it only adds on to the background which is filling the whole screen.
I don't know if it's user error, something changed in HTML/CSS overnight or if it's because of the Dreamweaver display box thing on the top of my screen
#charset "utf-8";
* {
margin: 0;
padding: 0;
}
.Container {
padding: 25%;
padding-left: 50%;
padding-right: 50%;
font-family: comfortaa;
font-style: normal;
font-weight: 600;
color: white;
background: #00C3FF;
margin: 0;
}
body {
background-image: url(http://www.incomeactivator.com/images/freebg5.jpg);
background-repeat: no-repeat;
background-size: 100%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<link href="file:///C|/Users/REDACTED/Documents/style.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>
var __adobewebfontsappname__ = "dreamweaver"
</script>
<script src="http://use.edgefonts.net/comfortaa:n3:default.js" type="text/javascript"></script>
</head>
<body>
<div class="Container">
<h1>Hello</h1>
</div>
</body>
</html>
p.s: let me know if you need a ss of the results I get.
Instead of using the class, you can change the texts background color by adding
background-color: rgb(255, 236, 139)
in the h1 tag
Demo:
YOURTEXT
It should work as expected if you apply the css to the H1 tag:
.Container h1{}
You have used padding property incorrectly. Reference
Correct syntax: padding: top right bottom left
padding:0 50% 0 50%;
So the css should be:
.Container{ margin: 0; }
.Container h1{
padding:0 50% 0 50%;
font-family: comfortaa;
font-style: normal;
font-weight: 600;
color: white;
background: #00C3FF;
}
I want to add a background image on my webpage but when I add in my code it doesn't show the image. The page is linked to the home page but how would I get my background image to appear when the user selects the help guide tab, which it then takes them to another page.
<html>
<head>
<meta charset="utf-8" />
<style>
h1 { text-align: center; font-family: "Comic Sans MS", "Comic Sans", cursive; font-size: 50; }
p.p-stage { text-align: center; font-family: Arial; font-size: 150%; }
p.p-help { text-align: center; font-family: Arial; font-size: 100%; }
body {
background-image: url("assets/images/Festival.jpg");
background-height: 100%;
backgroud-width: 100%;
background-repeat: no-repeat;
background-size: cover;
}
#rcorners2 {
margin: auto;
text-align:left;
border-radius: 25px;
border: 2px solid #000000;
padding: 20px;
width: 1000px;
height: 750px;
overflow: auto;
}
</style>
</head>
<body>
<h1>Help Guide</h1>
<p class ="p-stage" id="rcorners2">Stages:<br><br>1. How to add a stage?<br><br>
To create a stage please do this.................<br><br>
2. How to delete a stage?<br><br>
To delet a stage please do this.................<br><br>
3. Add a help guide with a questions users may come up with and then com up with answers.
</p>
</body>
</html>
Here is my webpage
I fixed the problem. it is due to path of the root directory. To go back in the root directory where the image file might be in use:
background: url("../../assets/images/Wallpaper4.jpg");
the 2 dots go back one folder so two .. means you have gone back 2 folders
I'm trying to replicate a webpage template solely for the purpose of becoming more familiar with the works of HTML/CSS. I want to use an image in my documents as a background for a DIV, but for some odd reason, it will not import. Keep in mind, I'm still pretty new to coding.
I pulled a random stock photo address off of Google as a test, and that would work. So, I'm thinking either I have the photo located in the wrong folder (It's in the same exact folder as the document I'm calling it from), or there's something else in my code that is conflicting with the called image/file. I'm still not sure, though.
HTML file:
<html>
<head>
<title>conquer</title>
<link rel="stylesheet" type="text/css" href="conquer.css" />
</head>
<body>
<div class="navbar">
Homepage
About Us
Services
Contact
External
</div>
<div class="topbanner"></div>
</body>
</html>
CSS file:
body {
background-color: #fff;
margin: 0;
}
/** Navigation Bar **/
.navbar {
background-color: #383E4C;
height: 100px;
width: 100%;
position: fixed;
text-align: center;
margin-top: 0px;
}
.navbar a {
color: #F6F6F7;
text-decoration: none;
font-size: 22px;
font-family: "Helvetica", sans-serif;
border: 1px solid #646D7C;
padding: 15px;
margin-top: 20px;
margin-right: 20px;
display:inline-block;
}
.navbar a:hover {
background-color: #49505F;
}
/** Top Banner **/
.topbanner {
height: 500px;
width: 300px;
background-image: url('/city.jpg');
background-repeat: no-repeat;
}
I want the image to display in the DIV, but when I open the console elements, it's just a huge invisible block.
In paths, the leading slash /, tells the browser to goto the ROOT folder.
So you will want to change this:
background-image: url('/city.jpg');
to
background-image: url('city.jpg');
I was wondering if someone had an answer as to why the CSS for my HTML file only appears to be formatted in Google Chrome, but appears not formatted in Microsoft Edge, or Internet Explorer. First time post over here, so feedback would be much appreciated.
Here's my CSS and then my HTML:
html {
margin: 0;
padding: 0;
background-color: #777;
}
body {
width: 70%;
margin: 0 auto;
font: 100% Arial, Helvetica, sans-serif;
padding: 1em 50px;
background: white;
border-bottom: 10px solid gold;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 2em;
font-weight: normal;
font-style: italic;
margin: 0 0 .4em;
color: #ddd;
background-color: rgb(44, 45, 140);
padding: 5px 10px;
}
p {
line-height: 1.6;
text-align: justify;
width: 60%;
margin: 0;
margin-bottom: 1em;
}
a {
text-decoration: none;
color: red;
}
a:hover {
color: black;
}
//And here's my HTMl
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>External styles</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>HTML and CSS</h1>
<p>Page 2</p>
<p>One way to visualize how HTML and CSS work together is to think about a new building under construction. As the building goes up, the structure of the building is built first. At just the structural level, all you see is the frame of the new building, and other than the basic shape, you don’t really know how the building is going to look. Once the frame is complete, the “skin” of the building is added. This could be brick, wood, glass, stucco, or any number of outer materials that determine what the final look of the building will be.</p>
<p>HTML and CSS work much the same way. HTML gives us the structure, or “frame”, of our pages. We can use CSS to then control how this structure looks, where elements are positioned, and add additional decorative styling. What’s more, much the same way a building can change dramatically by adding a new façade; web pages can change their visual design by simply changing the page’s CSS.</p>
<p>This separation of structure and presentation creates a very flexible and efficient workflow where the structure of pages is independent of how the pages are presented. This allows you to update styling without changing page content, and provide different visual designs based on the context of where the page is being displayed.</p>
</body>
</html>
if your structure project
root
index.html
style.css
If you include style.css,
<link href="style.css"/>
But if your structure project
root
index.html
assets
style.css
You can include location style.css
<link href="assets/style.css"/>
I'm sorry, I'll admit I'm a bit of a newbie when it comes to HTML. But I can't see where I'm going wrong. I've declared the page to be aligned center, but for some reason invisible to me, it won't actually align!
My code is here...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body,td,th {
font-size: 14px;
text-shadow: inherit;
max-width: 1000px;
min-width: 600px;
float: none;
vertical-align: central;
position: absolute;
width: auto;
}
h1 {
font-size: 40px;
color: #FFF;
}
h1,h2,h3,h4,h5,h6 {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
h2 {
font-size: 16px;
color: #666;
}
h3 {
font-size: 24px;
color: #FFFFFF;
}
.Headertext2 {
}
h5 {
font-size: 16px;
color: #666;
}
h6 {
font-size: medium;
color: #000;
}
h4 {
font-size: 12px;
color: #FFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #999;
}
a:active {
text-decoration: none;
}
</style> <title>We'll fix your Potholes!</title>
</head><center>
<body bgcolor="#B90D32"> <div id="container" width "1200" align="center" >
<h1>A1Jay Pothole Solutions</h1>
<h3><strong>Permanent Pothole Repair that lasts</strong></h3>
<div id="content" align="center" bgcolor="#FFFFFF" width"600" class="content">
<h6>Potholes are a growing problem and cause lasting damage to your vehicle.
We here at A1JAy Pothole Solution have the solution. We use only the best products on the market to repair potholes ensuring that the problem is fixed permanently and never returns. Our repairs are professional water tight and permanent. We replace any road markings that may be removed. We respond quickly to repair any holes, therefore stopping the damage to your vehicle.
Our products are cold lay, fully graded to PSV-60 and all packaging is recyclable.
We have different rates depending on the amount of potholes you require permanently repairing, get in touch for details.
If you have a pothole on your drive, street, place of work, car park, walkway or anywhere else, please get in contact and I will happily give you a free, no obligation quote.. </h6>
<p> </p>
</div>
</div>
</body>
</html>
I apologise if this question has already been asked, I'm still getting to know Stack Overflow. Thanks in advance :).
Let's start with a stripped down (and working) solution: http://jsfiddle.net/WDTCK/1/
Major Points
<center> is obsolete* (it's also an illegal parent for body, and unclosed in your example)
align=center is obsolete*
A simple way to center something using CSS is to assign a container element a width and margin: 0 auto
Like this:
#container {
margin: 0 auto;
width: 600px;
}
Minor Points
Always prefer styles declared separate from the markup
Always declare styles using CSS (not deprecated properties like bgcolor="#B90D32")
Make sure you are using headings correctly. I see H1, H3, and H6. Headings should represent the outline of your document; they should not be used just for formatting.
Here's a cleaner example which demonstrates better semantics: http://jsfiddle.net/WDTCK/2/
* "obsolete and non-conforming, and [...] must not be used by authors."
Put this inside the body
<div align = "center">
<!--somecodes-->
</div>