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>
Related
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.
I'm trying to get my codes work but not sure where's the issue. The links for the first 2 classes don't work and I cannot click on to open linked pages.
Here's the HTML:
footer {
width: calc(100%-80px);
padding: 40px 40px;
margin-top: 20px;
background-color: #111;
overflow: hidden;
}
footer ul {
width: fit-content;
float: left;
padding-left: 20px;
}
footer ul li {
display: block;
list-style-type: none;
font-family: 'Catamaran';
font-size: 24px;
color: #fff;
line-height: 40px;
}
.footer-links-news {
display: none;
}
.footer-sm {
width: 50px;
float:right;
}
.footer-sm img {
width: 100%;
margin-bottom: 10px;
}
<footer>
<ul class="footer-links-main">
<li>Home</li>
<li>Developer</li>
<li>Vietnam Virtual Tour</li>
<li>Hanoi Photo Gallery</li>
<li>Contact</li>
</ul>
<ul class="footer-links-news">
<li>Lastest News on Vietnam News</li>
<li>Soptlights</li>
<li>Economy</li>
<li>Life & Style</li>
<li>Enviroment</li>
</ul>
<div class="footer-sm">
<a href="#">
<img src="Images/plugsin-icon-yt.png" alt="Youtube Icon">
</a>
<a href="#">
<img src="Images/plugsin-icon-fb.png" alt="Facebook Icon">
</a>
<a href="#">
<img src="Images/plugsin-icon-tt.png" alt="Twitter Icon">
</a>
</div>
</footer>
The text of the link needs to go inside the anchor:
<!-- this -->
Home
<!-- not this -->
Home
You need the anchor to actual contain something so it is clickable.
<ul class="footer-links-main">
<li>Home</li>
<li>Developer</li>
Text should be between HERE tags
<footer>
<ul class="footer-links-main">
<li>Home</li>
<li>Developer</li>
<li>Vietnam Virtual Tour</li>
<li>Hanoi Photo Gallery</li>
<li>Contact</li>
</ul>
<ul class="footer-links-news">
<li>Lastest News on Vietnam News</li>
<li>Soptlights</li>
<li>Economy</li>
<li>Life & Style</li>
<li>Enviroment</li>
</ul>
</footer>
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 am trying to recreate the Windows 8 application menu ( the new "start menu" )
My goal is to have square divs with a descriptive text next to it, the column splits itself up when it reaches a certain point ( something I have yet to determine but Iv'e come quite far with this )
In other words: I am trying to make a column that goes down and splits itself into 3 columns automatically and beginnen at the left side again after it has reached the end of the wrapper width.
as you can see in my JFIDDLE Iv'e made something that comes quite close.
http://jsfiddle.net/Qq98X/
Stil I can't seem to find the correct solution for this.
Mainly because i cannot use NTH-CHILD etc properties because it is meant to work on IE7
<html>
<head>
<style>
.mp-submenu {
margin-bottom: 1px;
position:relative;
}
.mp-submenu ul{
max-width:500px;
max-height:300px;
list-style:none;
}
.mp-submenu ul li{
float:left;
}
#triple li { width:30.333%; }
.mp-submenu-square-dg,
.mp-submenu-square {
float:left;
margin: 5px 0 5px 0;
padding:5px;
width:50px;
height:50px;
background-color: #8D8D8D;
}
.mp-submenu-square-dg:hover,
.mp-submenu-square:hover {
background-color: #F17B0A;
}
.mp-submenu-square-dg {
background-color: #696969;
}
.mp-submenu-headletter {
margin: 5px 0 5px 0;
font: normal 27px arial;
text-align: left;
vertical-align:bottom;
width:50px;
height:50px;
color: black;
display:inline-block;
background-color:none;
float:left;
}
.mp-submenu-headletter-desc {
padding-top:35px;
font: normal 12px arial;
}
</style>
</head>
<body>
<article class="mp-submenu">
<ul id="triple">
<li>
<div class="mp-submenu-headletter">A</div>
</li>
<li>
<div class="mp-submenu-square">1</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square-dg">2</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square">3</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square-dg">4</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square">5</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-headletter">B</div>
</li>
<li>
<div class="mp-submenu-square">1</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square-dg">2</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square">3</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square">1</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-headletter">C</div>
</li>
<li>
<div class="mp-submenu-square">1</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square-dg">2</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square-dg">3</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
</ul>
</article>
</body>
Add this:
#triple li:nth-child(3n+1) {clear:both}
This will cause every third item beginning from the first to clear the float and start a new row.
I have a problem with my navigation bar. When loading the page, sometimes it changes to look like its in steps however when you refresh it changes back to normal. I cant seem to find out what im doing wrong! Please help!!
Website is http://www.pearsonfoods.com.au
<div id="nav">
<a href="index.html" >
<div class="navBlock" style="color:red;"><p>Home</p>
</div>
</a>
<a href="about.html">
<div class="navBlock"><p>About us</p>
</div>
</a>
<a href="where.html">
<div class="navBlock"><p>Where we sell</p>
</div>
</a>
<a href="foods.html">
<div class="navBlock"><p>Our Foods</p>
</div>
</a>
<a href="contact.php">
<div class="navBlock"><p>Contact us</p>
</div>
</a>
</div>
Your markup is not well-formed. <a> is an "inline element" and <div> is a "block element". Block elements cannot exist within inline elements.
Your navigation list is better structured as a simple unordered list:
<ul>
<li>Home</li>
<li>About us</li>
<li>Where we sell</li>
</ul>
See? So much cleaner :)
Style each <li><a> as a block-flow element with display: block; (note this does not affect the inline/block semantics of elements, it's strictly a visual thing) and apply float: left; to the <li> elements.
html
<ul class="nav">
<li class="current">Home</li>
<li> About Us</li>
<li> Where we sell</li>
<li> Our Foods</li>
<li> Contact Us</li>
</ul>
css
.nav {
width: 900px;
margin: 0 auto;
}
.nav li {
background-color: rgba(0, 0, 0, 0.72);
border-radius: 10px 10px 0px 0px;
width: 180px;
float:left;
}
.nav li a{
color:#fff;
text-decoration:none;
text-align:center;
line-height:50px;
display:block;
}
.nav li a:hover,.nav li.current a{
color:red;
}
Link to running example