How do I make the background color touch each end. I am fairly new to html and CSS below I have the code that I input for the background. Please let me know exactly what I need to change in my code. I know some of it needs to be changed I just don't know exactly what I need to change.
.black {
background-color: black;
font-size: 20px;
}
<div class="black">
<hr>
<h2 class="white">Documentation Examples</h2>
<a>
<ul class="documentations">
<li>
Savings or Checkings Accounts
</li>
<li>
Stocks, Dividends, Bonds or Debentures
</li>
<li>
Life Insurance Accounts
</li>
<li>
Escrow Accounts
</li>
<li>
Negotiable Instruments, Certified Checks, Money Orders, or Travelers Checks.
</li>
<li>
Safe Deposit Box Contents
</li>
<li>
Business Accounts
</li>
<li>
Corporation/Business Entity/Partnership
</li>
<li>
Governmental Agency Accounts
</li>
<li>
Miscellaneous Accounts
</li>
</ul>
</nav>
</a>
<br>
<br>
<br>
</div>
enter image description here
Nest your code in a body and use margin: 0; in your stylesheet. See below.
.black {
background-color: black;
font-size: 20px;
}
body {
margin: 0;
}
li {
color: white;
}
<body>
<div class="black">
<hr>
<h2 class="white">Documentation Examples</h2>
<a>
<ul class="documentations">
<li>
Savings or Checkings Accounts
</li>
<li>
Stocks, Dividends, Bonds or Debentures
</li>
<li>
Life Insurance Accounts
</li>
<li>
Escrow Accounts
</li>
<li>
Negotiable Instruments, Certified Checks, Money Orders, or Travelers Checks.
</li>
<li>
Safe Deposit Box Contents
</li>
<li>
Business Accounts
</li>
<li>
Corporation/Business Entity/Partnership
</li>
<li>
Governmental Agency Accounts
</li>
<li>
Miscellaneous Accounts
</li>
</ul>
</nav>
</a>
<br>
<br>
<br>
</div>
</body>
div tag always have margin and you have to remove it with margin : 0. and if you want to display black background-color on your entire screen you have to give height: 100vh
.black {
background-color: black;
font-size: 20px;
color: white;
height: 100vh;
}
.body {
margin: 0;
padding: 0;
}
Your code is correct, but you need to wrap the css in <style type="text/css">...</style> tags.
This should be in the <head>...</head> tag on your page:
<head>
<!-- title and other things go here -->
<style type="text/css">
.black {
background-color: black;
font-size: 20px;
}
</style>
</head>
You should remove all the paddings and margins by adding margin:0 and padding:0. Like this:
body {
padding: 0;
margin: 0;
}
This would remove all the paddings and margin so the background will be fully covered.
Related
When I change size of display in ¨Show code¨ mode in Google Chrome text changing size, but I set font-size 30px Big screen Small screen
*{
margin: 0;
padding: 0;
outline: none;
font-size: 30px;
}
<nav id="head-menu">
<ul id="head-bar">
<li> <p href="#">Sobre nos</a></li>
<li> Menú </li>
<li> Galería </li>
<li> Contactos </li>
</ul>
</nav>
Result always the same and I can't understand why
Hello im trying to use a customer image as a list marker through css, this is my code
<li class="unorderedList">
Bread
<ul>
<li> brown </li>
<li> white </li>
</ul>
</li>
<li> Milk </li>
<li> Butter </li>
<li> Onions </li>
<li> Coriander </li>
the image isnt loading onto the webpage as my list marker, this is the css i used.
div.unorderedList { border-style: solid;
padding: 10px; }
li.unorderedList { list-style-image: url('..\images\marker.png');}
I would recommend not to use the list-style-image property. Instead i would use an image tag. Example:
.list-image {
list-style: none;
padding: 0;
}
.list-image li img{
height: 15px;
width: auto;
margin-right: 5px;
}
<ul class="list-image">
<li><img src="https://cdn.iconscout.com/icon/free/png-256/right-1478289-1251141.png" alt=""> brown </li>
<li><img src="https://cdn.iconscout.com/icon/free/png-256/right-1478289-1251141.png" alt=""> white </li>
</ul>
But to answer your question directly. You did not target your list.
li.unorderedList ul would be the solution.
I'm trying to create a footer kind of like this one here
Right now the issue I'm having is getting the content to sit beside eachother instead of stacked on top of eachother.
I've tried using display:flex but that moves everything, including text I want to stay in place, and that isn't the result I'm aiming for, so I'm not sure what to try next.
.footer {
background-color: #EB5931;
color: white;
padding-left: 30px;
padding-bottom: 10px;
padding-top: 10px;
}
.pleft {
width: 20%;
color: rgba(255, 255, 255, 0.74);
}
<div class="footer">
<h3 class="footerleft">THE DESIGN PROCESS</h3>
<p class="pleft">The design process includes many different parts, each used in their own way.
</p>
<ul class="footernav">
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
DESIGNS
</li>
<li>
HELP
</li>
</ul>
<h3 class="contactus">CONTACT US</h3>
<ul class="contactinfo">
<li>
info#designer.com
</li>
<li>
123-456-7890
</li>
<li>
101-101-1010
</li>
</ul>
<hr>
</div>
If anyone can help me figure this out, it'd be greatly appreciated.
used display:flex
.footer {
background-color: #EB5931;
color: white;
padding-left: 30px;
padding-bottom: 10px;
padding-top: 10px;
display: flex;
}
.pleft {
/* width: 20%; */
color: rgba(255, 255, 255, 0.74);
}
.footer div {
width: 33.333%}
<div class="footer">
<div>
<h3 class="footerleft">THE DESIGN PROCESS</h3>
<p class="pleft">The design process includes many different parts, each used in their own way.
</p>
</div>
<div>
<ul class="footernav">
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
DESIGNS
</li>
<li>
HELP
</li>
</ul>
</div>
<div>
<h3 class="contactus">CONTACT US</h3>
<ul class="contactinfo">
<li>
info#designer.com
</li>
<li>
123-456-7890
</li>
<li>
101-101-1010
</li>
</ul>
</div>
<hr>
</div>
I have two headers enclosed inside one div. The div background color fills the first header but not the second. Why is this? I would assume that putting two divs inside one div would cause them to inherit the background color. I have done this before without problems. Thank you.
<div id="contain">
<header id="head_1">
<img src="images/Logos/Actlogo.png"/>
<p> P.O. Box 4524 </br>
Wattville </br>
</br>
(203) 444 - 4444 </br>
www.Acts4Peace.com
<p>
</header>
<!-- menu and statement -->
<header id="head_2">
<p>Keeping Families Warm in Winter</p>
<ul> <!-- main menu -->
<li> Furniture
<ul> <!-- submenu -->
<li> Couches </li>
<li> Chairs </li>
<li> Tables </li>
</ul>
</li>
<li> Clothing
<ul> <!-- submenu -->
<li> Women </li>
<li> Men </li>
<li> Kids </li>
</ul>
</li>
<li> Kitchen
<ul> <!-- submenu -->
<li> Utensils </li>
<li> Blenders </li>
<li> Baking </li>
</ul>
</li>
</ul>
</header>
#contain { /* main wrapper */
width: 1200px;
background-color: tan;
margin: auto;
}
#head_1 p { /* mailing address floated right */
float: right;
text-align: right;
font-size: 11pt;
}
#font-face {
font-family: cursive;
src: url(C:/Windows/Fonts/Cursive standard.ttf);
}
#head_2 p { /*second header paragraph, business mission*/
float: right;
font-family: "cursive standard";
font-size: 26pt;
}
Instead of using the header tag twice, I would put the two elements in separate divs, withing one . Then change the background of either , or the two divs inside.
<div id="contain">
<header>
<div id="head_1">
<img src="images/Logos/Actlogo.png"/>
<p> P.O. Box 4524 </br>
Wattville </br>
</br>
(203) 444 - 4444 </br>
www.Acts4Peace.com
<p>
</div>
<!-- menu and statement -->
<nav>
<p>Keeping Families Warm in Winter</p>
<ul> <!-- main menu -->
<li> Furniture
<ul> <!-- submenu -->
<li> Couches </li>
<li> Chairs </li>
<li> Tables </li>
</ul>
</li>
<li> Clothing
<ul> <!-- submenu -->
<li> Women </li>
<li> Men </li>
<li> Kids </li>
</ul>
</li>
<li> Kitchen
<ul> <!-- submenu -->
<li> Utensils </li>
<li> Blenders </li>
<li> Baking </li>
</ul>
</li>
</ul>
</nav>
</header>
</div>
#contain { /* main wrapper */
width: 1200px;
background-color: tan;
margin: auto;
}
#head_1 p { /* mailing address floated right */
float: right;
text-align: right;
font-size: 11pt;
}
#font-face {
font-family: cursive;
src: url(C:/Windows/Fonts/Cursive standard.ttf);
}
nav p { /*second header paragraph, business mission*/
float: right;
font-family: "cursive standard";
font-size: 26pt;
}
header {
background-color:#;
}
Although I can't recreate your issue (perhaps the window in JSFiddle isn't big enough), from your comment to Adam Ciardelli it appears this is a float issue. You can set overflow:hidden on .contain or use a clearfix:
#contain { /* main wrapper */
width: 1200px;
background-color: tan;
margin: auto;
overflow: hidden;
}
FIDDLE
I have this page where all the div's seem to work and then all of the sudden my last one breaks. I have two divs in my CSS, one being centeredRight and one centeredLeft. They are lined up down the page. But my last div on the left seems to get pushed to the right.
Here is my CSS.
.centeredlistleft {
width: 300px;
margin: 0 auto;
text-align: left;
border: 2px solid;
float: left;
margin-bottom: 25px;
padding-right: 10px;
}
.centeredlistright {
width: 300px;
margin: 0 auto;
text-align: left;
border: 2px solid;
float: right;
margin-bottom: 25px;
padding-right: 10px;
}
.body {
margin: 0 auto;
padding: 0;
text-align: center;
color: purple;
background-color: pink;
}
And here is my HTML.
<div id="sandrcontainer" class="body" style="width:700px">
<div id="onsieforbaby" class="centeredlistleft" >
<h3> Onesie for Baby </h3>
<ul>
<li>
Price
<ul>
<li>$10.00</li>
</ul>
</li>
<li>
Description
<ul>
<li>It's a boy onesie for a new baby boy. Carter onesies are used. Can ask for specific size. Can also make one for girls using pink.</li>
</ul>
</li>
</ul>
</div>
<div id="largetennistowel" class="centeredlistright">
<h3> Large Tennis Towel </h3>
<ul>
<li>
Price
<ul>
<li>$14.00</li>
</ul>
</li>
<li>
Size
<ul>
<li>16 x 26 (Inches)</li>
</ul>
</li>
<li>
Description
<ul>
<li> Cotton fleece. Very soft. Washes Well. Can be personalized. Check out the photo gallery for examples. Ask seller what color towels are available at time of order.</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="sandrcontainer2" class="body" style="width:700px">
<div id="largegolftowel" class="centeredlistleft">
<h3> Large Golf Towel </h3>
<ul>
<li>
Price
<ul>
<li>$14.00</li>
</ul>
</li>
<li>
Size
<ul>
<li>16 x 26 (Inches)</li>
</ul>
</li>
<li>
Description
<ul>
<li> Golf towel. Elegant. Large white towel. Cotton fleece. Very soft. Can be personalized. Check out photo gallery for examples. Ask seller what color towels are avaiable at time of order. This towel has a grommet and can be hung on golf bags. Could also make this on fingertipe towel for guest bath or on linen towel for that elegant look.</li>
</ul>
</li>
</ul>
</div>
<div id="terrysmalltowel" class="centeredlistright">
<h3> Terry Small Towel </h3>
<ul>
<li>
Price
<ul>
<li>$11.00</li>
</ul>
</li>
<li>
Size
<ul>
<li>11 x 18 (Inches)</li>
</ul>
</li>
<li>
Description
<ul>
<li> With fringe. Made of 100% cotton loop terry. Can be personalized. Check out photo gallery for examples. Ask seller what color towels are avaiable at time of order.</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="sandrcontainer3" class="body" style="width:700px">
<div id="contactmerands" class="centeredlistleft" >
<p> Please make sure to send me an email before any orders. I may not have the color towel you want but can always order more </p>
</div>
<div id="smallfingertip" class="centeredlistright" >
<h3> Small Fintertip Holiday Towel </h3>
<ul>
<li>
Price
<ul>
<li>$11.00</li>
</ul>
</li>
<li>
Size
<ul>
<li>11 x 18 (Inches)</li>
</ul>
</li>
<li>
Description
<ul>
<li> Terry small towel with decorated cat for xmas. Made of 100% cotton loop terry. Can be personalized. Check out photo gallery for examples. Ask seller what color towels are available at time of order.</li>
</ul>
</li>
</ul>
</div>
</div>
TLDR - ctrl f for "Contactmerands" and please explain to me why this box is getting pushed to the bottom RIGHT of the large golf towel box. It should appear under the large golf towel box just like the rest of the divs.
If you would like to see what I mean you can go to my school web portal where I have the page posted HERE.
When an element is floated, it is essentially removed from the flow of the document. Thus, when a parent element's children are all floated, the parent collapses upon itself as it doesn't have any defined dimensions.
To solve this, you could set either overflow:hidden or overflow:auto on the parent elements. This essentially forces it to contain the children elements, therefore preventing it from collapsing.
Add the following CSS and your problem is solved:
#sandrcontainer,
#sandrcontainer2,
#sandrcontainer3 {
overflow: hidden;
}
Sometimes changing the overflow property will conflict with existing CSS. You could alternatively use the pseudo element clearfix:
.clearfix:after {
content: '';
clear: both;
display: table;
}
You must clear your floats in order to achieve the desired effect.
I suggest using a valid clearfix for this.
You need to declare this in CSS:
.clearfix:after {
clear:both;
content:".";
display:block;
font-size:0;
height:0;
visibility:hidden;
}
.clearfix { display:block; }
Now wrap all your elements that should float next to each other in a DIV and apply the clearfix class:
<div class="clearfix">
<!-- put your divs here //-->
</div>
<!--put your last div here //-->