How to change colour of a box div (HTML) - html

I am trying to create a website and I am separating my information into boxes. I am trying to change the colour of each individual box but it is not working.
Here is my code. The and is trying to change the colour of the div.
Thanks.
<!DOCTYPE html>
<html>
<head>
<title>Blank</title>
***<!--Box-->
<style>.boxed {
border: 1px solid black ;
margin-top: 20px;
margin-left: 50px;
margin-right: 50px;
padding-left: 20px;
padding-right: 20px;
}
</style>***
</head>
<body>
<main>
</main>
<font face="caslon">
<color background: green>
<div class="boxed">
<h1> <font face="caslon", style="font-weight:bold">How is electricity produced?</font></h1>
<p style="font-weight:normal">There are multiple ways electricity can be produced that thave been found over the course of history. They differ in their efficency and cost.</p>
<p style="font-weight:normal">They include: </p>
</div>
</color>
<color background: red>
<div class="boxed">
<h3><p style="font-weight:bold">Static electricity</p></h3>
<p style="font-weight:normal">
Static electricity is produced by bringing two different materials into contact. This causes a phenomenon known as triboelectricity (or the triboelectric effect). All materials are made of atoms with a positive nucleus and negative electrons orbiting. Some atoms have a stronger pull on these electrons than others. When we bring the two materials into contact one may have a stronger pull on the electrons. When we separate them, electrons can stick to the material with a stronger pull. This results in a material with more electrons and results in static electricity.
</p>
</div>
</color>
</font>
</body>
</html>

You need to style each div with a background-color
Try adding this style="background-color:YourColorCode;" to your div.
For better understanding on font-face, see this link
See below snippet:
.boxed {
border: 1px solid black ;
margin-top: 20px;
margin-left: 50px;
margin-right: 50px;
padding-left: 20px;
padding-right: 20px;
}
<body>
<main>
</main>
<div class="boxed" style="background-color:green;">
<h1><font style="font-weight:bold">How is electricity produced?</font></h1>
<p style="font-weight:normal">There are multiple ways electricity can be produced that thave been found over the course of history. They differ in their efficency and cost.</p>
<p style="font-weight:normal">They include: </p>
</div>
<div class="boxed" style="background-color:red">
<h3><p style="font-weight:bold">Static electricity</p></h3>
<p style="font-weight:normal">
Static electricity is produced by bringing two different materials into contact. This causes a phenomenon known as triboelectricity (or the triboelectric effect). All materials are made of atoms with a positive nucleus and negative electrons orbiting. Some atoms have a stronger pull on these electrons than others. When we bring the two materials into contact one may have a stronger pull on the electrons. When we separate them, electrons can stick to the material with a stronger pull. This results in a material with more electrons and results in static electricity.
</p>
</div>
</body>

You need to give each element an id
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
Your Css will then look like
#box1{
background-color:red;
}
#box2{
background-color:blue;
}
hope it is helpfull to you :)

You are creating custom color tag instead of this use style attribute in div tag.
<div class="boxed" style="background-color:green">
</div>

Related

Sidebar not collapsing on smaller screens

I'd like my header to expand the same width as the entire div of the container so that it is one long block. I'm using Bootstrap 4 and the "cards" which replaced the old panels.
Unfortunately, my header isn't able to do that. I've tried manipulating the margins and padding in CSS, but that hasn't worked. You can see in the picture there is a sliver of white around the edges of the header. I want the white borders around the entire div of the container to keep it offset from other content, I just want the header element to cover it up.
For convenience, I've put a small border around the header element (h2) and the div which it sits inside.
#bio .container {
background-color: #fff;
border-radius: 10px;
padding-bottom: 4px;
}
.card-header {}
<div class="col-9 ml-2">
<section id="bio">
<!--bio section-->
<div class="container">
<div class="card-header" style="border: 1px solid black">
<h2 style="border: 1px solid green">Summary</h2>
</div>
<p class="card-text">
I am a UCI honors graduate in mathematics with a minor in computer science. I started tutoring as a favor for a friend and have found that tutoring is one of the most rewarding experiences I can have. Many of my students have gone from D's with no understanding
to A's with the ability to peer tutor their classmates. It is always wonderful to enter a student's home and hear "I got an A on the test!" or "the teacher says I am her most improved student."
<br />
<br /> I look for the concepts that students may not have totally grasped and help them get up to speed so that future classes are easy and fun. Most of my students continue to call me back on an "as needed" basis when they don't understand some
one concept in class, even in college. I frequently am recommended by parents to friends and family members.
</p>
</div>
</section>
It looks like there's just a bit of padding around your .card-header class. Below I set the left and right padding of the class to 0. Here's a CodePen to show it working with Bootstrap 4 included.
Feel free to let me know if I missed the point completely.
#bio .container {
background-color: #fff;
border-radius: 10px;
padding-bottom: 4px;
}
.card-header {
padding-left: 0;
padding-right: 0;
}
<div class="col-9 ml-2">
<section id="bio">
<!--bio section-->
<div class="container">
<div class="card-header" style="border: 1px solid black">
<h2 style="border: 1px solid green">Summary</h2>
</div>
<p class="card-text">
I am a UCI honors graduate in mathematics with a minor in computer science. I started tutoring as a favor for a friend and have found that tutoring is one of the most rewarding experiences I can have. Many of my students have gone from D's with no understanding
to A's with the ability to peer tutor their classmates. It is always wonderful to enter a student's home and hear "I got an A on the test!" or "the teacher says I am her most improved student."
<br />
<br /> I look for the concepts that students may not have totally grasped and help them get up to speed so that future classes are easy and fun. Most of my students continue to call me back on an "as needed" basis when they don't understand some
one concept in class, even in college. I frequently am recommended by parents to friends and family members.
</p>
</div>
</section>
Edit: This padding is caused by the .card-header class included with card.scss

Text not wrapping, instead opts to go under

My Problem
So I am trying to create a news section for my website. Each section contains a title, an image, and the article itself. The problem is that the article text will refuse to go beside the image unless I use <br> to break it up myself.
Description
All the elements of each section is listed under a single div element. The section includes the title, image, and article. After that, the picture has its own class and the article also to CSS after.
The Title is a block element
The Picture is an inline-block element
The Article is an inline-block element
HTML CODE (STARTING FROM NEWS BOX NOT INCLUDING NAV BAR AND ABOVE)
<div id=newsboard>
<div class=newsboard_topic>
<h1>Website in Development!</h1>
<img src="/image/newsboard/construction.gif" alt="Dev">
<p class=newsboard_topic_article>
Greetings!
<br>The GeoVillage website is currently under construction, but feel free to register and login to check out the stuff we have so far!
<br>- Geo Jones
<br>Owner and Developer
</p>
</div>
<div class=newsboard_topic>
<h1>kimmy and donald!</h1>
<img class=newsboard_topic_picture src="/image/newsboard/kimdon.jpg" alt="kimmyanddonald">
<p class=newsboard_topic_article>
The fan fiction of Donald Trump and Kim Jong Un! Yes, they photoshopepd it. This is a test by the way to test the standing of articles.
</p>
</div>
</div>
CSS CODE FOR SECTION OF HTML
#newsboard {
margin-left: 100px;
margin-right: 100px;
margin-top: 25px;
margin-bottom: 25px;
border-color: #0099FF;
border-style: solid;
border-width: 5px;
}
.newsboard_topic {
padding: 20px;
display: block;
}
.newsboard_topic_article {
display: inline-block;
vertical-align: top;
word-wrap: break-word;
margin: 0px;
padding: 10px;
}
.newsboard_topic_picture {
display: inline-block;
}
LIVE EXAMPLE
is currently up at geo-village.com
Make the picture a floating element inside the text container, then the text will float next to it (and below it, if it's longer)
Separate your newsboard_topic class.
<div class=newsboard_topic>
<img src="/image/newsboard/construction.gif" alt="Dev">
<h1>Website in Development!</h1>
</div>
<p class=newsboard_topic_article>
Greetings!
<br>The GeoVillage website is currently under construction, but feel free to register and login to check out the stuff we have so far!
<br>- Geo Jones
<br>Owner and Developer
</p>
Then give your newsboard_topic class a display:flex;.
.newsboard_topic {
padding: 20px;
display: flex;
}
I think the obvious answer no one wanted to give, which would make a lot of your coding more smooth is... Bootstraps. If you are learning to code, I highly recommend learning from some of the great opensource solutions available.
<div class="row">
<div class="col-md-5">
<h1>Website in Development!</h1>
<img src="/image/newsboard/construction.gif" alt="Dev">
</div>
<div class="col-md-5">
<p class=newsboard_topic_article>
Greetings!
<br>The GeoVillage website is currently under construction, but feel free to register and login to check out the stuff we have so far!
<br>- Geo Jones
<br>Owner and Developer
</p>
</div>
</div>

Float blocks of text over images in left and right columns

I am trying to recreate the attached screen shot in wordpress and I'm having some css issues.
As you can see there are two columns with very simular content.
At present I have got this far:
.race-tri {
width: 570px;
position: relative;
}
.banner_txt {
width: 250px;
background: #F08E03;
padding: 5px 15px;
color: #ffffff;
position: absolute;
top: 150px;
left: 0;
}
.race-tri h3 {
text-transform: uppercase;
margin-bottom: 15px;
font-weight: 800;
}
<h1 style="text-align:center;">RACES</h1>
<div class="race-bar-text">
<div style="float:left; width:570px; box-sizing:border-box;">
<p>Throughout the year Tri Team Glos runs various events, notably the TTG Gloucester Triathlon and the TTG Newent Duathlon.</p>
<p>Our Triathlon is a pool based Sprint race with a 400m Swim and a two lap 28km bike course finished off with a 6km run and will take place on Sunday 29th May 2016.</p>
</div>
<div style="float:right; width:570px; box-sizing:border-box;">
<p>Our duathlon comprises a 5k run, 18k bike and 5k run. Next year's event will take place on 3rd April 2016,</p>
<p>For those wishing to enter the Tri Team Glos' Children's Race, please click here.
</p>
</div>
</div>
<div class="race-tri">
<img src="http://staging-triteamglos.transitiongraphics.co.uk/wp-content/uploads/2016/04/img2.png">
<div class="banner_txt">
<h3>Glocester triathlon</h3>
<span class="race-date">May 25th, 2016</span>
<span class="race-type">Triathlon</span>
<p>Swim: 1km
<br>Bikd: 20km
<br>Run: 5km</p>
</div>
<a class="btn">ENTER EVENT</a>
<a class="btn" style="float:right;">MORE INFORMATION</a>
</div>
<div class="race-tri" style="float: right;">
<img src="http://staging-triteamglos.transitiongraphics.co.uk/wp-content/uploads/2016/04/img-3.jpg">
<div class="banner_txt">
<h3>Newent Duathlon</h3>
<span class="race-date">April 16th, 2017 (TBC)</span>
<span class="race-type">Duathlon</span>
<p>Swim: 1km
<br>Bikd: 20km
<br>Run: 5km</p>
</div>
<a class="btn">ENTER EVENT</a>
<a class="btn" style="float:right;">MORE INFORMATION</a>
</div>
Ignoring the main background image and some the smaller styling issues, I am having issues floating the two blocks side by side, whilst floating the inner orange text block.
I thought I could achieve this by making the background relative and then the inner text block absolute. Hoping it would be absolute within the block, not the page.
Many thanks in adavance for suggestions.
#Dhaval Chheda recommended looking at flexboxes, which I'd recommend too - they'd be a better way to get what you're looking for.
.container {
display: flex;
}
See this link for a way to divvy up the structure of the blocks, and this fiddle for it in action. This way you'll be able to have some more precise control over the layout of the page.

How to align 3 paragraphs side by side html

Okay, so I've tried all the possible examples of implementing divs, floats, and in-lines to have all three tables side by side with nothing working. Here is the code I have programmed so far, please show me what I might be doing wrong. I could not figure it out after spending a good few hours trying different ways to input the coding
<div align="left;"><div style="width:30%;auto;position;relative;background-color:#131313;border:2px solid #1b463d;"><div style="left;"><img src="http://wallpapershacker.com/wallpaper_3840x2160/clockwork_watches_clocks_time_desktop_1600x1200_hd-wallpaper-455121.jpg" style="max-width:100%;">
<div style="width:100%;height:100%;overflow:auto;background-color:#111111;text-align:float:left;justify;font-family:verdana;font-size:10px;color:#636362;"><br>CLOCKWORK DREAMS.</br> This is where the machines rule. Whether it be an entire being augmented with robotics, or humans with mechanical adornaments. Those who embrace Science and obey its principles are welcomed here. >$[zone_1]</div></div>
<div align="left;"><div style="width:30%;auto;position;relative;background-color:#131313;border:2px solid #1b463d;"><div style="center;"><img src="http://trucosyfondos.com/fondos-de-pantalla/data/media/10/Demon_angel.jpg" style="max-width:100%;">
<div style="width:100%;height:100%;overflow:auto;background-color:#111111;text-align:float:left;justify;font-family:georgia;font-size:10px;color:#636362;"><br>TRANSCENDED.</br>Hell and Heaven have an existence, and this is where it dwells. Those who are monsters, saints, or perhaps even a hybrid of each thrive in this part of the world. >$[zone_2]</div></div>
<div align="left;"><div style="width:30%;auto;position;relative;background-color:#131313;border:2px solid #1b463d;"><div style="right;"><img src="http://orig10.deviantart.net/8658/f/2007/202/9/b/human_reflection_by_yudha3.jpg" style="max-width:100%;">
<div style="width:100%;height:100%;overflow:auto;background-color:#111111;text-align:float:left;justify;font-family:sylfaen;font-size:10px;color:#636362;"><br>THE ENIGMATIC</br>What does it mean to be human? The idea of freedom and independance has long been sought for, and here is where those ideals exist. >$[zone_3]</div></div>
UPDATED
Look at this:
https://jsfiddle.net/fh2st5nm/2/
html:
<div class="oneThird">
<img src="http://wallpapershacker.com/wallpaper_3840x2160/clockwork_watches_clocks_time_desktop_1600x1200_hd-wallpaper-455121.jpg" />
<p>CLOCKWORK DREAMS.<br> This is where the machines rule. Whether it be an entire being augmented with robotics, or humans with mechanical adornaments. Those who embrace Science and obey its principles are welcomed here. >$[zone_1]</p></div>
<div class="oneThird">
<img src="http://trucosyfondos.com/fondos-de-pantalla/data/media/10/Demon_angel.jpg" />
<p>TRANSCENDED.<br>Hell and Heaven have an existence, and this is where it dwells. Those who are monsters, saints, or perhaps even a hybrid of each thrive in this part of the world. >$[zone_2]</p></div>
<div class="oneThird">
<img src="http://orig10.deviantart.net/8658/f/2007/202/9/b/human_reflection_by_yudha3.jpg" />
<p>THE ENIGMATIC<br>What does it mean to be human? The idea of freedom and independance has long been sought for, and here is where those ideals exist. >$[zone_3]</p></div>
css:
.oneThird {
width: 33%;
float: left;
background-color: #111;
text-align: justify;
font-family: sylfaen;
font-size: 10px;
color: #636362;
}
.oneThird img {width: 100%;}
.oneThird p {padding: 3px;}
here you dont need css also you should have one main div with width 100% and its children are have style float=left likebelow
<div id="maindiv">
<div class="inline">div 111111111111111111 </div>
<div class="inline">div 2222222222222222222 </div>
<div class="inline"> div 33333333333333333333333</div>
</div>
css..........
.inline{
float:left
}

HTML padding-left not working for div

I'm creating a very simple webpage. It has a div tag with a single paragraph containing some text.
<HTML>
<Head>....</Head>
<Body>
<div id="titlebox">
<p>First Heading</p>
</div>
</Body>
Here is a the CSS style for the div:
div#titlebox {background-color:#f2f2f2;
padding-top:2px;
padding-bottom:2px;
padding-left:2px; }
Snippet:
div#titlebox {
background-color: #f2f2f2;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 2px;
}
<HTML>
<Head>....</Head>
<Body>
<div id="titlebox">
<p>First Heading</p>
</div>
</Body>
</HTML>
The text appears correctly, background color is also fine, but regarding padding, only padding-top is applied while padding bottom and left are ignored. Any suggestions on what is wrong with this code? By the way I am new to HTML. I googled the issue, there was point regarding float, but that doesn't solve my problem.
Here's a solution you can try without using css
<html>
<head></head>
<body>
<div align="left" style="padding-top: 20px;padding-left: 20px;padding-bottom: 20px;">
<p>First Heading</p>
</div>
</body>
Hello I wouldn't criticise you I see you are a beginner, that would just dis encourage you but normal syntax, html,head,body written in simple letters to avoid confusion of reading your own code later
follow this url:
Is it bad to use uppercase letters for html tags?
Your code works fine :)) I simply made padding bigger to make it more obvious
div#titlebox {
background-color: #f2f2f2;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 100px;
}
<HTML>
<Head>....</Head>
<Body>
<div id="titlebox">
<p>First Heading</p>
</div>
</Body>
</HTML>
Your left and bottom padding is working but you probably can't see it because 2px is really small. Change it to 20px or something and you should see the padding.
Handy tool - if you are using Chrome, you can right-click on the element you want to inspect and select the Inspect tool to see all your padding and margins on a diagram.
--note-- depending on which browser you are using, there will be some default styles/padding/margin applied to certain elements already, in this case your paragraph tag already have some top and bottom padding