The problem I am having with my website is that I am trying to make different sections of background colors on one page. I was able to get the main background color, but then I want a portion of the rest of the site to be another, and the footer to also be a different color. Here is the html code and css that I tried. I couldn't for the life of me figure out what I was doing wrong so if you know what I'm doing wrong that would help a ton! thanks!
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Travel</title>
</head>
<body bgcolor="#045889">
<table>
<tr>
<th><font color="white"><strong>Share Your Travels</strong>
</font> </header></th>
</table>
<table>
<td> <font color="white">Let Us Know Where You've Been</font></td>
</table>
<section>
<h2>Description</h2>
<p>
<i>Photo by Randy Connolly</i>
</p>
<p>
This photo of Conservatory Pond in
Central Park in
New York City
was taken on October 22, 2014 with a Cannon EOS 30D camera.
</p>
<p><img src="images_Travel/large-central-park.jpg" alt="Travel"/></p>
<p><i>Conservatory Pond in Central Park</i></p>
<p>
Share: <img src="images_Travel/social/email_16.png" alt="Travel"/>
<img src="images_Travel/social/rss_16.png" alt="Travel"/>
<img src="images_Travel/social/twitter_16.png" alt="Travel"/>
<img src="images_Travel/social/facebook_16.png" alt="Travel"/>
<img src="images_Travel/social/flickr_16.png" alt="Travel"/>
</p>
</section>
<h2>Related Photos</h2>
<p>
<img src="images_Travel/related-square1.jpg"alt="Travel"/>
<img src="images_Travel/related-square2.jpg"alt="Travel"/>
<img src="images_Travel/related-square3.jpg"alt="Travel"/>
</p>
<h2>Reviews</h2>
<p>
<i>by Ricardo on September 25th, 2015 </i>
</p>
<p>Easy on the HDR Buddy</p>
<p><i>by Susan on October 1, 2015</i>
</p>
<p>I Love Central Park.</p>
<footer>
Copyright ©
</footer>
</body>
</html>
CSS:
body {
background-color: #045889;
}
table{
font color= ''white'';
text-wrap: normal;
}
Ok, first off we need to clean up your HTML:
Tables are a Really Bad thing to use for formatting (almost always). Instead, it's best to use other html elements as appropriate. However, if you are going to use them make sure to put the <th> first (that's your Table Header), then <tr> (that's your Table Rows), then put <td> (your Table Data) inside of those as cells.
But a better solution than <table> is a <header> with <h1> and <h2> tags in it. Cleaner to style.
You need to double check that all of your opening tags have closing tags, and vice versa (see the </header> tag in your original code)
The font tag really isn't used anymore. Your CSS for the table shows that you can format that text color in a better way - we just have to get it to work!
I've also enclosed the rest of your content in another <section> tag so we can target that with CSS separate from the body.
Formatting your code can seem a bit of a waste of time, especially when you're just working on something for yourself, but it's REALLY helpful when you have a problem you can't sort out. Generally, you indent 1 tab/a few spaces each time you go a level deeper (nested) into the HTML. This makes it super easy to see when you've missed closing a tag.
<header>
<h1>Share Your Travels</h1>
<h2>Let Us Know Where You've Been</h2>
</header>
<section>
<h2>Description</h2>
<p>
<i>Photo by Randy Connolly</i>
</p>
<p>
This photo of Conservatory Pond in Central Park in New York City was taken on October 22, 2014 with a Cannon EOS 30D camera.
</p>
<p>
<img src="images_Travel/large-central-park.jpg" alt="Travel"/>
</p>
<p>
<i>Conservatory Pond in Central Park</i>
</p>
<p>
Share: <img src="images_Travel/social/email_16.png" alt="Travel"/>
<img src="images_Travel/social/rss_16.png" alt="Travel"/>
<img src="images_Travel/social/twitter_16.png" alt="Travel"/>
<img src="images_Travel/social/facebook_16.png" alt="Travel"/>
<img src="images_Travel/social/flickr_16.png" alt="Travel"/>
</p>
</section>
<section>
<h2>Related Photos</h2>
<p>
<img src="images_Travel/related-square1.jpg"alt="Travel"/>
<img src="images_Travel/related-square2.jpg"alt="Travel"/>
<img src="images_Travel/related-square3.jpg"alt="Travel"/>
</p>
<h2>Reviews</h2>
<p>
<i>by Ricardo on September 25th, 2015 </i>
</p>
<p>Easy on the HDR Buddy</p>
<p>
<i>by Susan on October 1, 2015</i>
</p>
<p>I Love Central Park.</p>
</section>
<footer>
Copyright ©
</footer>
For the CSS, there are a couple of fixes and some new styles
font color = ''white''; isn't proper CSS. It should be color: white; as is mentioned in the comments already.
To get the background color to change on elements, you just need to assign classes or ids to those elements, then style them appropriately (background-color: red; for example will do it).
That * is a wildcard: it applies the following styles to everything on the page. Needed to get rid of some default margins on the HTML elements
CSS:
* {
margin: 0;
}
body {
background-color: #045889;
}
header {
color: white;
background-color: green;
text-wrap: normal;
}
section {
background-color: yellow;
}
footer {
background-color: red;
}
In the parts where you want a different color, try adding a style
<footer style="background-color:green">
Copyright ©
</footer>
Your code has several errors, and you may want to have a look through it first. Here is a good tool to help you with that: W3C Markup Validator and CSS Validator
To change the background color of an element, simply use: background-color: followed by the color you want.
So for example, to change your footer to red, and your section to green, you can do:
footer {
background-color: #ff0000;
}
section {
background-color: #00ff00;
}
You can also use classes or ids' to mark sections of your page that you want to style. W3Schools - CSS Selectors
Related
body {
background-color: red;
font-family: arial;
}
h1 {
text-align: center;
}
.thumbail {
height: 600px;
width: auto;
}
<!doctype html>
<html>
<head>
<title>Services - Salazar's Stickers</title>
<link rel='stylesheet' type='text/css' href='./style.css'>
</head>
<body>
<header>
<h1>Salazar's Stickers</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</nav>
<h2>Personalized Name Stickers</h2>
<p>
These stickers can be customized with your name or initials, making it easy to add a personal touch to your belongings.
</p> <br>
<img src="./nameStickers.png" class='thumbnail' alt="Personalized Name Stickers">
<h2>Decorative Sticker Packs</h2>
<p>
Our decorative sticker packs include a variety of designs, perfect for adding a touch of creativity to your notebook, phone case, or any other item.
</p> <br>
<img src="./decStickers.jpg" class='thumbnail' alt="Decorative Stickers">
<h2>Vinyl Wall Decals</h2>
<p>
Our vinyl wall decals are a great way to decorate your living space. They are easy to apply, remove, and won't damage your walls, making it the perfect solution for apartment dwellers or those who prefer not to make permanent changes to their walls.
</p>
<img src="./vinylWallDecal.jpg" class='thumbnail' alt="Vinyl Wall Decals">
<div class='content'> </div>
<footer>© Salazar's Stickers 2023 </footer>
</body>
</html>
It was working initially, but now, any changes that I implement do not seem to work?
I can't change the color or the text-alignment.
The thumbnail class doesn't seem to be working either.
I'm new to CSS and HTML, so I'm probably sure that this is some simple mistake, but I searched the web and nothing seems to be working.
Not sure if this helps, but your css has .thumbail, and your html classes have thumbnail. You are missing the letter n.
Texts are displayed word-for-word in both and sections after specifying margins.I want the contents of the first and tags to be on the left and the contents of the second and tags to be on the right.I want to solve this operation according to properties such as margin left, margin right and inline styling.I am currently training at this level and I have to practice with this tool
<!doctype html>
<html lang="en";>
<head>
<title>solarise_mk</title>
</head>
<body style="background-color:rgb(233, 150, 122);">
<br>
<br>
<br>
<!--Several nested tags to create a key to link to another site-->
<!--start coding for the key -->
<a href="https://www.herzing.edu/description/computer-programmer ">
<h1 style="text-align:center;">
<mark style="background-color:rgb(64,224,208);
color:rgb(233, 150, 122);
padding:30px;
border-radius:35px;
font-family:Times New Roman";>
solarise-mk
</mark>
</h1>
</a>
<!--end coding for yhe key-->
<br>
<br>
<br>
<br>
<br>
<!--The following code is for inserting a photo from another site-->
<center>
<img src="https://www.herzing.edu/sites/default/files/styles/fp_960_640/public/2020-09/it_computer_programming.jpg.webp?itok=8aEwtSxk" alt="What Does a Computer Programmer Do?" style="width:1000px;height:700px;">
</center>
<!--ending coding for photo-->
<br>
<br>
<br>
<br>
<br>
<!--start first Start the first header and paragraph-->
<h3 style="color:rgb(139,0,139);font-family:Times New Roman;margin-left: 10%;margin-right: 90%;">Site goals:</h3>
<p style="color:rgb(255,240,245);font-family:Times New Roman;;margin-left: 10%;margin-right: 90%;">
we want to introduce you
exciting art of computer programming
And what programming is,what capabilities
are needed...
If you find you are interested in this
technique And you have traces of the ability
to accurately observe and then analyze
them correctly,Join us to enter the field of
programming professionally
</p>
<!--end first the firstparagraph-->
<br>
<br>
<br>
<br>
<br>
<!--Start the second header and paragraph-->
<h3 style="color:rgb(119,136,153);font-family:Times New Roman;margin-left: 90%;margin-right: 10%;">As the site owner:</h3>
<p style="color:rgb(230,230,250);font-family:Times New Roman;;margin-left: 90%;margin-right: 10%;">
Ever since I got to know myself, I have noticed
I prefer to have a private and safe environment
to think about analyzing problems and to
discovering creative solutions to solve them.
Usually I look around in detail, Unless I'm
focused on fatigue.I am interested in mathematics,
painting and artwork.Of course, mathematics,
except for arithmetic and mental counting,because
sometimes it is difficult for me to concentrate
and I basically know this as long as there
is a calculator.
People around me tell me that you are smart but
distracted and I believe in this judgment.
Distraction has become a problem for me in
many places,if I did not have the other
capabilities next to it might have been a
problem .
Finally, I love programming and one of
my goals is to specialize in this field e.
</p>
<!--end the second header and paragraph-->
</body>
</html>
Doing all that inside one single paragraph tag is unnecessary and not often done. You should instead divide the content up into 3 sections. One for the left content, one for the center content and the last one for the right content. Do this with <div> tags (or other elements such as <aside> and <main>):
<div class="left_div">Left content</div>
<div class="center_div">Center content</div>
<div class="right_div">Right content</div>
/* css */
.left_div { width: 20%; text-align: left; }
.center_div { width: 60%; text-align: center; }
.right_div { width: 20%; text-align: right; }
This produces 3 sections or divisions, where text-align takes care of aligning the contents of the divs.
You can also use float: left; (or right;) on image elements or button elements to make those elements shift to one side while making the text around it flow around the object that is floated. This is often done with images inside of text.
so i have pretty easy coding running right now on the email we want to send out for the company consist of our logo a picture of the new company where we are a new agent in and the i don't have any Blurb yet for the company but it will still come
so whats happening is want to add a small background change to my emailer where our logo is in white and the rest of the body is in a dark grey but as soon as i create a div in my body it breaks where my picture and text appear
CODE
<html>
<header>
<img src="https://gallery.mailchimp.com/2e2d72a3d233cacb63ee93d53/_compresseds/03bb5db7-9357-47d4-b8ab-a6f0ae575554.jpg" style="max-width:80%;height:auto;padding-left:9%;"/>
<style>
body {Color: ; background-color:white} div {background-color:#545454;padding-top:20px;padding-bottom:0.2px}
</style>
</header>
<body>
<br>
<h2 Style="Text-align:center;color:#A6ACAF;text-size:100%">We Are Now A</h2><h1 Style="text-align:center">LUK Agent <br><br>
<div>
<img src="https://gallery.mailchimp.com/2e2d72a3d233cacb63ee93d53/images/08ed7f7f-6417-4719-a3bc-3bf29a97bd1b.jpg" style="max-width:70%;height:auto;padding-left:0%;"/> <p Style="Text-align:Center;Border:5% solid #364C94;Align:Center;padding:5px;width:68.5%;margin-left:15%">Small Blurp of LUK</p>
</div>
when running it in a w3schools it works perfectly
if anyone can add this coding to their Mailchimp will see what i mean with it breaks the code and structure
Here are some guidelines:
Close all tags that are not self-closing (img tags are self-closing, but body, html and h1 are not).
Do not put an img tag in the header. It is not allowed there. Move it to the body.
Do not use empty CSS commands, like 'Color: ;'.
Do not make up your own CSS commands, like 'Align';
Write CSS commands and attributes in small letters (not sure this is mandatory, but it is very uncommon to capitalize them).
Use indentation for clarity (of the HTML structure).
This would result in the following code:
<html>
<header>
<style>
body {color: black;background-color:white;}
div {background-color:#545454;padding-top:20px;padding-bottom:0.2px;}
</style>
</header>
<body>
<img src="https://gallery.mailchimp.com/2e2d72a3d233cacb63ee93d53/_compresseds/03bb5db7-9357-47d4-b8ab-a6f0ae575554.jpg" style="max-width:80%;height:auto;padding-left:9%;" />
<br>
<h2 style="text-align:center;color:#A6ACAF;text-size:100%">We Are Now A</h2>
<h1 style="text-align:center">LUK Agent</h1>
<br>
<br>
<div>
<img src="https://gallery.mailchimp.com/2e2d72a3d233cacb63ee93d53/images/08ed7f7f-6417-4719-a3bc-3bf29a97bd1b.jpg" style="max-width:70%;height:auto;padding-left:0%;" />
<p style="text-align:center;border:5% solid #364C94;padding:5px;width:68.5%;margin-left:15%;">
Small Blurp of LUK
</p>
</div>
</body>
</html>
body { background-color: bisque;
}
<!DOCTYPE html>
<html>
<head>
<title>Reading</title>
</head>
<body>
<h1>
<button>Home</button>
<button>Reading<br/></button>
<button>Coffee</button>
</h1>
<div>
<h1>I usually drink three to four cups of coffee on weekdays</h1>
<img src="cof1.JPG" height="171" width="294"
alt="Coffee"/>
<img src="cof2.JPG" height="168" width="300"
alt="Coffee"/>
<h2>Some of my favorite coffees are: </h2>
<OL>
<LI> Cafe Crema</LI>
<LI>Yaucono</LI>
<LI>Arabigo</LI>
<LI>Cafe Lareño</LI>
<LI>Mami</LI>
</OL>
</div>
</body>
</html>
I have tried many styles to see what's wrong, but I can't seem to change the background color. This webpage works, but it's just plain. I am required to use CSS in order to compare both styles.
I copy and paste you're code and its working fine
i guess the problem is that you didn't refresh the page
try to do hard reload
CTRL+ F5 or in mac command+R
It actually does. I edited your question so it should be a snippet, and it worked in your source too. The only change I made was to change the p tag into div tag since p tag is meant for a paragraph, and what you wanted is a block.
Look how I changed the background color to blue:
body {
background-color: blue;
}
<!DOCTYPE html>
<html>
<head>
<title>Reading</title>
</head>
<body>
<h1>
<button>Home</button>
<button>Reading<br/></button>
<button>Coffee</button>
</h1>
<div>
<h1>I usually drink three to four cups of coffee on weekdays</h1>
<img src="cof1.JPG" height="171" width="294"
alt="Coffee"/>
<img src="cof2.JPG" height="168" width="300"
alt="Coffee"/>
<h2>Some of my favorite coffees are: </h2>
<OL>
<LI> Cafe Crema</LI>
<LI>Yaucono</LI>
<LI>Arabigo</LI>
<LI>Cafe Lareño</LI>
<LI>Mami</LI>
</OL>
</div>
</body>
</html>
Maybe the page is not refreshing right
PRESS Ctrl + F5
HTML have bothered me since HTML1 emerged.
One thing is about line breaks.
http://jsfiddle.net/LhDFs/2/
<p>1</p>
<p>2</p>
<p>br1</p>
<br/>
<p>br2</p>
<p>p1</p>
foo
<p>p2</p>
<p>pp1</p>
<p>foo</p>
<p>pp2</p>
p tag has 1 line between the element.
Is it impossible to have 2 blank lines between <p>?
It appears <br/> or space symbol doesn't work for that.
Well, of course, it's possible to use <br/> instead of <p>, but now I tweak Markdown, especially gfm, so I need to preserve paragraph structure.
I short, it's way too strange that we never be able to have 2 blank lines as long as we stick on <p>.
What I consider is
foo
bar
2 blank lines:instead of
foo
bar
3 blank lines with p tag structure.
EDIT:
Well, what I intended is to have consistent structure of P tag, but thanks to everyone, I've got a hint that I can prepare multiple classed p tag with CSS hack.
This is truly hacky on first thought, but I think I can manage it. Appreciated to all comments.
EDIT2:
I thought we have solution for this, but it seems not;
I post another:
It seems impossible to have 2 blank lines between p tags Without modification of the original elements
White space in your mark up (new lines, spaces) will not show up on the front end of a website.
This:
<p>example</p>
<p>example</p>
Is the same as:
<p>
example
</p>
<p>
example
</p>
On a website, both those examples will appear exactly the same.
To control spacing, padding, margin and position on the front end of a website we use css:
HTML
<p>
example
</p>
CSS
p {
padding-left: 20px;
}
Here is a demo showing different paragraph margins controlled by css:
HTML
<p class="noMargin">No margin</p>
<p class="noMargin">No margin</p>
<p class="noMargin">No margin</p>
<p>Default margin</p>
<p>Default margin</p>
<p>Default margin</p>
<p class="doubleMargin">Double margin</p>
<p class="doubleMargin">Double margin</p>
<p class="doubleMargin">Double margin</p>
CSS
p.noMargin {
margin: 0;
}
p.doubleMargin {
margin: 2em 0;
}
Demo
If I understand you correctly it seems to be working for me.
But one thing is the correct syntax for line break is:
<br>
<br />
Or style it like one of these
<p style="margin-bottom: 10px;">text</p>
<p style="line-height: 200%;">text</p>
A line height in percent of the current font size
Try this:
<br />
<br />
nbsp means "non-breaking space".