I am trying to get a White Border Around Everything present in the <main> tag, but I have not had any luck. It will only to around the <nav> section for some reason. Help?
header{
background-color: #030303;
color:#ffffff;
height: 60px;
text-align: center;
padding-top: 30px;
padding-left: 3em;
background-image: url("assets/dndlogo.jpg");
background-repeat: no-repeat;
background-position: right;
}
#dndlogo{
float: right;
height: 50px;
}
header h1{
font-family: Georgia, "Times New Roman", Serif;
margin-top: 0px;
font-size: 3em;
letter-spacing: 0.25em;
}
#schedulebox{
float: left;
height: 750px;
width: 15%;
float: left;
background-color: aqua;
text-align: center;
}
#homecontent{
height: 750px;
width: 84.3%;
float: left;
background-color: aquamarine;
border: red solid;
}
nav {
overflow: hidden;
background-color: #030303;
font-family: Arial;
float: top;
margin: 0;
padding: 0;
}
nav li{
float: left;
font-size: 20px;
color: black;
text-align: center;
padding: 15px 20px;
text-decoration: none;
list-style-type: none;
color: white;
height: 15px;
}
nav li:hover{
background-color: white;
border-radius: 15px;
transition: 0.5s;
color: black;
}
nav ul{
margin: 0;
padding-bottom: 10px;
padding-left: 0;
}
footer{
background-color: #030303;
float: bottom;
color: white;
}
#schedulebox h1{
border-bottom: solid;
padding-top: 0;
margin: 0;
}
html{
background-color: #030303;
}
a{
color: white;
text-decoration: none;
}
a:hover{
color: black;
}
main{
border: white solid;
order-radius: 10px;
}
#wrapper{
background-color: #030303;
}
#schedulebox{
border: red solid;
}
#dragonpic{
width: 1600px;
height: auto;
}
<html lang="en">
<link rel="stylesheet" href="style.css" type="text/css">
<head>
<meta charset="UTF-8">
<title>D&D WCTC Home</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>Dungeons and Dragons: WCTC</h1>
</header>
<main>
<nav><ul><li>Home</li> <li><a>Page2</a></li> <li><a>Page3</a></li></ul></nav>
<div id="schedulebox">
<h1>Schedule</h1>
<p>We will usually have games twice every week. However, we will switch games every week so please look at the schedule for the one you wish to join.</p>
<h2>Campaigns in Progress:</h2>
<ul><li>Plague of The Gods</li><li>Inheritence of Felwinter</li></ul>
<h2>Upcoming Campaigns</h2>
<ul><li>Plague of The Gods</li><li>Inheritence of Felwinter</li></ul>
<h3>We run games at 5pm CST to 8pm CST on Wednesdays and Fridays 5pm CST to 8pm CST</h3>
</div>
<div id="homecontent">
<img src="assets/dragon.png" id="dragonpic">
<h2>Who are we?</h2>
<h3>We are a local Dungeons and Dragons club at Waukesha County Technical College. We host multiple games occuring at the same time with as many as 6 players at once. Each party's actions effect the in game universe that other parties will have to deal with. We are always welcoming new members and are also looking for people looking to become Dungeon Masters!</h3>
<h2>Looking to Join?</h2>
<h3>Head over to our join page to learn how to get started!</h3>
</div>
</main>
<footer>
<div id="footercontent">
<small><i>Copyright © 2020 Company</i></small>
</div>
</footer>
</div>
</body>
</html>
I am just trying to get a white border around the main website content and not the <nav> or <header> section. I've tried having a separate division in the code for the content, but to no avail.
You need to have clearfix hack to clear floats. Refer to w3schools tutorial for more info.
<main class="clearfix">
.clearfix::after {
content: "";
clear: both;
display: table;
}
header {
background-color: #030303;
color: #ffffff;
height: 60px;
text-align: center;
padding-top: 30px;
padding-left: 3em;
background-image: url("assets/dndlogo.jpg");
background-repeat: no-repeat;
background-position: right;
}
#dndlogo {
float: right;
height: 50px;
}
header h1 {
font-family: Georgia, "Times New Roman", Serif;
margin-top: 0px;
font-size: 3em;
letter-spacing: 0.25em;
}
#schedulebox {
float: left;
height: 750px;
width: 15%;
float: left;
background-color: aqua;
text-align: center;
}
#homecontent {
height: 750px;
width: 84.3%;
float: left;
background-color: aquamarine;
border: red solid;
}
nav {
overflow: hidden;
background-color: #030303;
font-family: Arial;
float: top;
margin: 0;
padding: 0;
}
nav li {
float: left;
font-size: 20px;
color: black;
text-align: center;
padding: 15px 20px;
text-decoration: none;
list-style-type: none;
color: white;
height: 15px;
}
nav li:hover {
background-color: white;
border-radius: 15px;
transition: 0.5s;
color: black;
}
nav ul {
margin: 0;
padding-bottom: 10px;
padding-left: 0;
}
footer {
background-color: #030303;
float: bottom;
color: white;
}
#schedulebox h1 {
border-bottom: solid;
padding-top: 0;
margin: 0;
}
html {
background-color: #030303;
}
a {
color: white;
text-decoration: none;
}
a:hover {
color: black;
}
main {
border: thick solid white;
border-radius: 10px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
#wrapper {
background-color: #030303;
}
#schedulebox {
border: red solid;
}
#dragonpic {
width: 1600px;
height: auto;
}
<html lang="en">
<link rel="stylesheet" href="style.css" type="text/css">
<head>
<meta charset="UTF-8">
<title>D&D WCTC Home</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>Dungeons and Dragons: WCTC</h1>
</header>
<main class="clearfix">
<nav>
<ul>
<li>Home</li>
<li><a>Page2</a></li>
<li><a>Page3</a></li>
</ul>
</nav>
<div id="schedulebox">
<h1>Schedule</h1>
<p>We will usually have games twice every week. However, we will switch games every week so please look at the schedule for the one you wish to join.</p>
<h2>Campaigns in Progress:</h2>
<ul>
<li>Plague of The Gods</li>
<li>Inheritence of Felwinter</li>
</ul>
<h2>Upcoming Campaigns</h2>
<ul>
<li>Plague of The Gods</li>
<li>Inheritence of Felwinter</li>
</ul>
<h3>We run games at 5pm CST to 8pm CST on Wednesdays and Fridays 5pm CST to 8pm CST</h3>
</div>
<div id="homecontent">
<img src="assets/dragon.png" id="dragonpic">
<h2>Who are we?</h2>
<h3>We are a local Dungeons and Dragons club at Waukesha County Technical College. We host multiple games occuring at the same time with as many as 6 players at once. Each party's actions effect the in game universe that other parties will have to
deal with. We are always welcoming new members and are also looking for people looking to become Dungeon Masters!</h3>
<h2>Looking to Join?</h2>
<h3>Head over to our join page to learn how to get started!</h3>
</div>
</main>
<footer>
<div id="footercontent">
<small><i>Copyright © 2020 Company</i></small>
</div>
</footer>
</div>
</body>
</html>
make a div under <div id="wrapper"></div> then give padding around 20px to the wrapper div , and then give border value to the new div you will make under the div with id wrapper
When I removed the float:left, it worked for me like this.
#schedulebox{
height: 750px;
width: 15%;
background-color: aqua;
text-align: center;
}
#homecontent{
height: 750px;
width: 84.3%;
background-color: aquamarine;
border: red solid;
}
Then I added border to wrapper
#wrapper{
border:1vw solid white;
background-color: #030303;
}
This worked for me!
Since there are floated elements in main, you need to add overflow: auto; to main to include all floated elements in it.
header{
background-color: #030303;
color:#ffffff;
height: 60px;
text-align: center;
padding-top: 30px;
padding-left: 3em;
background-image: url("assets/dndlogo.jpg");
background-repeat: no-repeat;
background-position: right;
}
#dndlogo{
float: right;
height: 50px;
}
header h1{
font-family: Georgia, "Times New Roman", Serif;
margin-top: 0px;
font-size: 3em;
letter-spacing: 0.25em;
}
#schedulebox{
float: left;
height: 750px;
width: 15%;
float: left;
background-color: aqua;
text-align: center;
}
#homecontent{
height: 750px;
width: 84.3%;
float: left;
background-color: aquamarine;
border: red solid;
}
nav {
overflow: hidden;
background-color: #030303;
font-family: Arial;
float: top;
margin: 0;
padding: 0;
}
nav li{
float: left;
font-size: 20px;
color: black;
text-align: center;
padding: 15px 20px;
text-decoration: none;
list-style-type: none;
color: white;
height: 15px;
}
nav li:hover{
background-color: white;
border-radius: 15px;
transition: 0.5s;
color: black;
}
nav ul{
margin: 0;
padding-bottom: 10px;
padding-left: 0;
}
footer{
background-color: #030303;
float: bottom;
color: white;
}
#schedulebox h1{
border-bottom: solid;
padding-top: 0;
margin: 0;
}
html{
background-color: #030303;
}
a{
color: white;
text-decoration: none;
}
a:hover{
color: black;
}
main{
border: white solid;
border-radius: 10px;
overflow: auto;
}
#wrapper{
background-color: #030303;
}
#schedulebox{
border: red solid;
}
#dragonpic{
width: 1600px;
height: auto;
}
<html lang="en">
<link rel="stylesheet" href="style.css" type="text/css">
<head>
<meta charset="UTF-8">
<title>D&D WCTC Home</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>Dungeons and Dragons: WCTC</h1>
</header>
<main>
<nav><ul><li>Home</li> <li><a>Page2</a></li> <li><a>Page3</a></li></ul></nav>
<div id="schedulebox">
<h1>Schedule</h1>
<p>We will usually have games twice every week. However, we will switch games every week so please look at the schedule for the one you wish to join.</p>
<h2>Campaigns in Progress:</h2>
<ul><li>Plague of The Gods</li><li>Inheritence of Felwinter</li></ul>
<h2>Upcoming Campaigns</h2>
<ul><li>Plague of The Gods</li><li>Inheritence of Felwinter</li></ul>
<h3>We run games at 5pm CST to 8pm CST on Wednesdays and Fridays 5pm CST to 8pm CST</h3>
</div>
<div id="homecontent">
<img src="assets/dragon.png" id="dragonpic">
<h2>Who are we?</h2>
<h3>We are a local Dungeons and Dragons club at Waukesha County Technical College. We host multiple games occuring at the same time with as many as 6 players at once. Each party's actions effect the in game universe that other parties will have to deal with. We are always welcoming new members and are also looking for people looking to become Dungeon Masters!</h3>
<h2>Looking to Join?</h2>
<h3>Head over to our join page to learn how to get started!</h3>
</div>
</main>
<footer>
<div id="footercontent">
<small><i>Copyright © 2020 Company</i></small>
</div>
</footer>
</div>
</body>
</html>
Related
When I run my code in the browser, I have this little line of white space at the bottom of the page. I’ve been trying different solutions but can’t seem to find one that works. Below is the home.html page. Maybe someone here can shed some light into the problem.
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="cooper, scooper, dog, pop, pick, up>
<meta name="author" content="primarysnail">
<meta name="viewport" content="width=device-width">
<meta name="description" content="connecting clients in need of dog pick pick up srvice with scoopers who will come to the client and scoop the poop">
<title>CoopersScoopers || Home</title>
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
</head>
<body>
<header> <!-- company name top left; nav bar top right -->
<div class="container">
<div class="branding">
<h1><span>cooper</span>Scoopers</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Contact Us</li>
<li>Find a Scooper</li>
</ul>
</nav>
</div>
</header>
<section class="showcase"> <!-- showcase section; button to find scooper (./find.html) -->
<div class="container">
<h1>Leave the</h1>
<br>
<h1>Poo to the</h1>
<br>
<h1>Professionals.</h1>
<button type="button">Connect With a Scooper Today</button>
</div>
</section>
<section class="info-bar"> <!-- info bar; shows scooper process in 3 sections -->
<div class="container">
<div class="box">
<img src="../images/poop.jpg">
<h3>Connect With a Local Scooper</h3>
</div>
<div class="box">
<img src="../images/location.jpg">
<h3>Mark Your Poo</h3>
</div>
<div class="box">
<img src="../images/calendar.jpg">
<h3>Schedule Future Scoops</h3>
</div>
</div>
</section>
<section class="testimonials">
<div class="container">
<h1>Come Experience the Joy of a Poop-Free Life.</h1>
</section>
</body>
<footer>
<p>Copyright © primarySnail//</p>
</footer>
</html>
Here is the linked style.css file:
body {
font-family: Tahoma, Verdana, Segoe;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #ffffff;
}
/* global */
.container {
margin: auto;
width: 80%;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
button {
height: 50px;
background-color: #ffff00;
opacity: 0.8;
border: none;
padding-right: 30px;
padding-left: 30px;
float: left;
margin-top: -20px;
float: right;
}
button a {
text-decoration: none;
color: #4b0082;
font-weight: bold;
font-size: 25px;
}
/* header */
header {
padding-top: 30px;
min-height: 70px;
border-bottom: 4px solid #f0e68c;
background-color: #ffffff;
color: #8a2be2;
font-size: 10px;
}
header a {
text-decoration: none;
}
nav a {
color: #8a2be2;
text-decoration: none;
text-transform: uppercase;
font-size: 10px;
}
header span {
font-size: 15px;
}
header li {
float: left;
display: inline;
padding: 0px 10px 0px 10px;
}
.branding {
float: left;
}
.branding h1 {
margin: 0;
padding: 0px 10px 0px 10px;
border: 4px solid #8a2be2;
}
header nav {
float: right;
margin-top: 10px;
}
header .current {
border: 1px solid #999;
background-color: #8a2be2;
border-collapse: collapse;
}
header .current a {
color: #ffffff;
font-weight: bold;
}
/* showcase */
.showcase {
background-color: #8a2be2;
color: #ffffff;
text-align: left;
min-height: 200px;
border-bottom: 4px solid #f0e68c;
}
.showcase h1 {
font-size: 55px;
margin-top: 0;
margin-bottom: 0;
padding: 0px;
display: inline-block;
}
/* info bar*/
.info-bar {
margin-top: 20px;
border-bottom: 4px solid #f0e68c;
}
.info-bar .box {
float: left;
width: 30%;
padding: 10px;
text-align: center;
}
.info-bar .box img {
width: 90px;
height: 90px;
}
/* testimonials */
.testimonials {
background-color: #8a2be2;
color: #ffffff;
}
.testimonials h1 {
text-align: center;
}
/* footer */
footer {
background-color: #f0e68c;
margin-top: 0px;
padding: 5px;
text-align: center;
color: black;
opacity: 0.6;
}
I cannot for the life of me figure out why that little line of white space is in there at the very bottom. screenshot
Yes, I have observed white space showing in the bottom. It is because the elements inside body tag is not occupying the full available body size.
elemets heights are as
body- 722
header- 104
.showcase- 251enter code here
.info-bar- 201
.testimonials- ~71
footer- ~62
the white space in the botom is remaining area of viewport. If you make the browser smaller the white space will go away.
To fix this proble you can use below css to the body.
body {
font-family: Tahoma, Verdana, Segoe;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #ffffff;
/* Add below lines*/
display: flex;
flex-direction: column;
align-items: stretch;
}
I am finishing up a site for my church and I am having trouble figuring out how to keep my section content inside of the container. It overflows down beyond the footer. I am not very experienced with CSS so I'm not sure where the problem is. I have tried making adjustments to the display type of the section. I already have overflow: hidden included. I'm not sure where the problem is, beyond my inexperience, that is. I know my limits are surpassed with this project for sure. I just want to help my church out with this and finish it up. Any help is appreciated greatly.
nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover:not(.active) {
background-color: #000;
}
.active {
background-color: #840D55;
}
header {
background-color: #840D55;
position: absolute;
top: 47px;
width: 100%;
border-bottom: solid;
border-bottom-color: #840D55;
}
header img {
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
#container {
height: 100%;
width: 100%;
margin-right: auto;
}
#wrapper {
position: absolute;
top: 0;
height: 100%;
width: 100%;
border-left: solid;
border-right: solid;
border-left-color: #333;
border-right-color: #333;
}
section {
height: auto;
width: auto;
color: #333;
position: relative;
top: 310px;
padding-left: 20px;
}
h1 {
position: relative;
top: 240px;
color: #333;
margin-left: 20px;
padding: 0;
text-align: center;
}
h2 {
color: #333;
}
h3 {
color: #333;
}
p {
line-height: 1.5;
}
.floatLeft {
padding-left: 40px;
width: 50%;
position: relative;
float: left;
margin: auto;
line-height: 1.8;
}
.floatRight {
width: 38%;
position: relative;
float: left;
margin: auto;
text-align: right;
padding-right: 20px;
line-height: 1.8;
}
#schAlign {
padding-right: 20px;
}
footer {
clear: both;
position: absolute;
bottom: 0px;
color: #777;
width: 100%;
background-color: #840D55;
}
<div id="wrapper">
<div id="container">
<nav>
<a class="active" href="">Home</a>
About
Pastors
Contact
</nav>
<header>
<img src="Images/bannerImg.jpg" alt="Flame of Fire Church">
</header>
<h1>In the name of Jesus, come and be blessed.</h1>
<section>
<div class="floatLeft">
<h3>Acts chapter 2 verse 38 says</h3>
<blockquote>Peter replied, "Repent and be baptized, every one of you, in the name of Jesus Christ for the forgiveness of your sins. <strong><em>And you will receive the gift of the <u>Holy Spirit</u>.</strong></em>"</blockquote>
<br />
<h3>Verse 39 continues</h3>
<blockquote>"The promise is for you and your children and for all who are far off - for all whom the Lord our God will call."</blockquote>
<br />
<p></p>
</div>
<div class="floatRight">
<h2>Service Schedule</h2>
<div id="schAlign">
<p>Wednesday Night</p>
<ul>
<li>7:00PM</li>
</ul>
<p>Sunday Morning</p>
<ul>
<li>10:00AM</li>
</ul>
</div>
</div>
</section>
</div>
<footer>
<!-- This site built with love and joy by Keith Graham -->
© Flame of Fire Church, 2017. All rights reserved.
</footer>
</div>
Updated styles (without positioning - it seems you don't need it here - and other bloat). Use margins to set distances among elements accordingly to your ideas, not positioning. Also you might want to add normalize.css before your styles for better cross-browserness. So, you can start again from here:
html {
box-sizing: border-box;
font-size: 14px;
}
*, *:before, *:after {
box-sizing: inherit;
}
nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover:not(.active) {
background-color: #000;
}
.active {
background-color: #840D55;
}
header {
background-color: #840D55;
border-bottom: solid;
border-bottom-color: #840D55;
}
header img {
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
#wrapper {
width: 90%;
margin: 0px auto;
border-left: solid;
border-right: solid;
border-left-color: #333;
border-right-color: #333;
}
section {
color: #333;
padding-left: 20px;
}
section:after {
content: "";
display: table;
clear: both;
}
h1 {
color: #333;
padding: 0;
text-align: center;
}
h2 {
color: #333;
}
h3 {
color: #333;
}
p {
line-height: 1.5;
}
.floatLeft, .floatRight {
line-height: 1.8;
width: 50%;
text-align: left;
}
.floatLeft {
float: left;
}
.floatRight {
float: right;
padding-left: 10%;
}
#schAlign {
padding-right: 20px;
}
footer {
clear: both;
color: #fff;
text-align: center;
padding: 1rem;
background-color: #840D55;
}
#media (max-width: 767px) {
#wrapper {
width: 100%;
}
.floatLeft, .floatRight {
width: 100%;
padding: .8rem;
}
}
<div id="wrapper">
<div id="container">
<nav>
<a class="active" href="">Home</a>
About
Pastors
Contact
</nav>
<header>
<img src="Images/bannerImg.jpg" alt="Flame of Fire Church">
</header>
<h1>In the name of Jesus, come and be blessed.</h1>
<section>
<div class="floatLeft">
<h3>Acts chapter 2 verse 38 says</h3>
<blockquote>Peter replied, "Repent and be baptized, every one of you, in the name of
Jesus Christ for the forgiveness of your sins. <strong><em>And you will receive the gift of the <u>Holy Spirit</u>.</strong></em>"</blockquote>
<br />
<h3>Verse 39 continues</h3>
<blockquote>"The promise is for you and your children and for all who are far off - for all whom the Lord our God will call."</blockquote>
<br />
<p></p>
</div>
<div class="floatRight">
<h2>Service Schedule</h2>
<div id="schAlign">
<p>Wednesday Night</p>
<ul>
<li>7:00PM</li>
</ul>
<p>Sunday Morning</p>
<ul>
<li>10:00AM</li>
</ul>
</div>
</div>
</section>
</div>
<footer>
<!-- This site built with love and joy by Keith Graham -->
© Flame of Fire Church, 2017. All rights reserved.
</footer>
</div>
I can't seem to get my 4th section to fall into line with the other sections.
Any help or clues would be greatly appreciated. I am at a loss as to what is wrong, I keep messing around with the chrome devolper tool trying to luck into a solution.
http://landonsimmons.altervista.org/School/assign7/assign7.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utc-8">
<link rel="stylesheet" type="text/css" href="css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<img src="img/logo.png" />
<span>Computer Science Department</span>
</header>
<nav>
<ul>
<li>Contact</li>
<li>Faculty</li>
<li>Programs</li>
<li>Classes</li>
<li>Program List</li>
</ul>
</nav>
<section id="left">
<ul>
<li>
<a>Computer Programming</a>
<a>Computer Specialist</a>
</li><br>
<li>
<a>Information Technology Analysis</a>
</li><br>
<li>
<a>Information Technology Management</a>
</li><br>
<li>
<a>Network System Developer</a>
</li><br>
<li>
<a>Web Development Specialist</a>
</li>
</ul>
</section>
<section id="middle">
<h1 id="hist">History of College</h1>
<p id="first">
</p>
<p>
</p>
<h1 id="comp">About Computer Science</h1>
<p>
<img id="img" src="img/Capture3.PNG" />
While the computing field is one of the fastest growing segments of industry,
it is also one of the fastest changing areas technologically. Computing professionals
education does not stop with the college degree, but continues with seminars, conferences, and advanced courses and training.
In computer theory and applications, new ideas are developed every day.
Success requires an ongoing commitment to learning to maintain knowledge, skills and career opportunities.
</p>
</section>
<section id="right">
<h1 id="gain">Gainful Employment Information</h1>
<p>
The U.S. Department of Education requires colleges to disclose a variety of information for any financial
aid eligible program that <q>prepares students for gainful employment in a recognized occupation.</q> The information provided
here describes the graduation rates, the median debt of students who
completed the program and other important information regarding gainful employment for the latest completed academic year (as of July 1).
</p>
<br>
<p style="font-size: 13px">— US Labor Department</p>
</section>
<section id="bot">
<video height=260 width=323 >
<source src="vid/a1.mp4"/>
</video>
</section>
<footer>
<address>
</address>
</footer>
</body>
</html>
/***********************************************
font
***********************************************/
pre {
font-family: serif;
}
#first::first-letter {
font-size: 45px;
}
#big b {
letter-spacing: 4px;
font-family: serif;
font-size: 20px;
text-align: center;
margin-left: 180px
}
#middle p {
margin-right: 5px;
margin-top: -10px;
}
#right p {
margin: 16px 30px;
}
h1 {
padding: 5px 40px;
letter-spacing: 2px;
font-family: "Times New Roman", Times, serif;
font-weight: lighter;
}
footer address {
color: green;
font-variant: small-caps;
font-style: normal;
font-weight: bolder;
font-size: 12px;
text-align: center;
font-family: sans-serif;
}
/***********************************************
page setup
***********************************************/
body {
background-image: url(../img/parch.jpg);
display: inline-block;
max-width: 850px;
margin: 25px 8px 0 8px;
}
#left {
width: 20%;
float: left;
text-align: center;
}
#middle {
width: 40%;
border-right: 1px solid black;
border-left: 1px solid black;
display: inline-block;
}
video {
overflow: hidden;
}
#bot {
float: right;
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
width: 38%;
display: inline-block;
vertical-align: sub;
}
#right {
border-bottom: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
width: 38%;
display: inline-block;
float: right;
}
#small {
width: 18%;
text-align: center;
display: inline-block;
float: left;
}
#big a {
letter-spacing: 8px;
}
#big {
width: 75%;
border-left: 1px solid gray;
display: inline-block;
padding-left: 25px;
}
#img {
max-height: 90px;
max-width: 140px;
margin: 10px 10px 10px 10px;
float: right;
}
/***********************************************
color scheme
***********************************************/
#comp {
background-color: gray;
text-align: center;
color: #872E3F;
}
#gain {
background-color: #B28570;
text-align: center;
}
#hist {
background-color: black;
color: #872E3F;
text-align: center;
}
#right {
background-color: #FFC1A2;
}
/***********************************************
Header
***********************************************/
header {
width: 100%;
height: 120px;
background-color: #000;
}
header span {
color: #D2E1FF;
font-size: 25px;
margin: 30px;
letter-spacing: 4px;
position: relative;
top: -30px;
}
/***********************************************
nav + list
***********************************************/
#left ul {
list-style: none;
padding: 0 0 0 0;
}
#left ul li a {
text-decoration: none;
color: black;
}
#small ul {
list-style: none;
padding: 0 0 0 0;
}
#small ul li a {
text-decoration: none;
color: black;
}
nav ul li a {
color: #fff;
font-size: 18px;
text-decoration: none;
padding: 0 15px 0 50px;
font-weight: bold;
letter-spacing: 2px;
}
nav ul {
list-style: none;
margin: 0 0 0 0;
}
nav {
width: 100%;
height: 25px;
background-color: #0000FC;
}
nav ul li {
display: inline;
}
nav ul li a:hover {
color: red;
}
#small ul li a:hover,
#left ul li a:hover {
color: #ff6666;
outline: 1px double black;
}
/***********************************************
footer
***********************************************/
footer {
clear: right;
border-top: 1px solid black;
}
Here are the two changes you will have to made
Add float:left; to #middle and change clear:right to clear:both for footer css.
footer { clear:both; }
#middle {float:left;width: 40%;border-right: 1px solid black;border-left: 1px solid black;display: inline-block;}
Working CODEPEN
Or you can do this :
put right and bot section in a new div
the new div should have the right styles as a class style = .right so you can keep the #right section style
take out borders, floats, and #right and #bot
Look at the result there :
http://lespointscom.com/a/misc/demo/2016_06_21/question_2/assign7.html
changed HTML
<div class="right">
<section id="right">
<h1 id="gain">Gainful Employment Information</h1>
<p>
The U.S. Department of Education requires colleges to disclose a variety of information for any financial
aid eligible program that <q>prepares students for gainful employment in a recognized occupation.</q> The information provided
here describes the graduation rates, the median debt of students who
completed the program and other important information regarding gainful employment for the latest completed academic year (as of July 1).
</p>
<br>
<p style="font-size: 13px">— US Labor Department</p>
</section>
<section id="bot">
<video height="260" width="323">
<source src="http://landonsimmons.altervista.org/School/assign7/vid/a1.mp4">
</video>
</section>
</div>
changed CSS
#bot {
/*float: right;
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
width: 38%;*/
display: inline-block;
vertical-align: sub;
}
#right {
/*border-bottom: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
width: 38%;*/
display: inline-block;
/*float: right;*/
}
So I'm trying to create a landing page exactly like this (FYI, to work on my HTML/CSS skills, I have decided to exactly imitate this landing page just for practice!)
http://oi67.tinypic.com/b8qp8i.jpg
However, as you can see from what I did, the full background picture (sailing boat + ocean) does not show up in the first column: http://oi66.tinypic.com/o7ktgl.jpg
Another issue is that on the left side of the background image on the third column, I keep seeing on a small "broken page" icon (I don't know why it's there but it's really been annoying) ... is it an image problem or something wrong with the image file?
Help would be much appreciated, thank you!
Here is my full HTML and CSS code:
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta name="description" content="Your description goes here">
<meta name="keywords" content="one, two, three">
<title>Relaxr</title>
<!-- external CSS link -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="mainColumn">
<header>
<h1>Relaxr</h1>
<h2>Get piece of mind with a single tap</h2>
</header>
<span>
<button id="getButton">Get it Now</button>
</span>
</div>
<div id="secondColumn">
<header>
<h1>Benefits</h1>
<p>The perfect personal assistant. Relaxr does your job<br>for you so you can enjoy life as it is meant to be.</p>
<ul class="benefitss">
<li>Schedule meetings for you</li>
<li>Excel automation to complete your <br>work for you</li>
<li>Responds to e-mails on your behalf</li>
<li>Does all yor work for you with our<br>revolutionary technology</li>
</ul>
</header>
</div>
<div id="thirdColumn">
<img src="../images/testimonial_bg.jpg">
<p>“Relaxr changed my life. I’ve been able<br> to travel the world, spend limited time<br> working and my boss keeps thanking<br>me for crushing work.”</p>
<p>- Amanda, Intuit</p>
</div>
<div id="fourthColumn">
<button id="signupButton">Sign Up Now!</button>
</div>
<div id="fifthColumn">
<p>Relaxr</p>
<div id="footer">
<p>Copyright 2015. Relaxr.</p>
</div>
</div>
</body>
</html>
CSS:
/******************************************
/* SETUP
/*******************************************/
/* Box Model Hack */
* {
-moz-box-sizing: border-box; /* Firexfox */
-webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
box-sizing: border-box; /* IE */
}
/* Clear fix hack */
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clear {
clear: both;
}
.alignright {
float: right;
padding: 0 0 10px 10px; /* note the padding around a right floated image */
}
.alignleft {
float: left;
padding: 0 10px 10px 0; /* note the padding around a left floated image */
}
/******************************************
/* BASE STYLES
/*******************************************/
body {
color: #000;
font-size: 12px;
line-height: 1.4;
font-family: Open Sans;
background: url(../images/header_bg.jpg) no-repeat center top;
background-size: cover;
}
/******************************************
/* LAYOUT
/*******************************************/
/*MAIN COLUMN*/
#mainColumn {
width: 100%;
height: 450px;
text-align: center;
}
#mainColumn h1 {
color: white;
padding-right: 80%
}
#mainColumn h2 {
color: white;
font-size: 24px;
font-weight: 600;
letter-spacing: 1px;
margin-top: 50px;
text-align: center;
}
header {
height: 40%;
}
/*GET IT NOW BUTTON*/
#getButton {
background-color: yellow;
border-radius: 3px;
border-style: none;
font-size: 14px;
font-weight: 700;
height: 30px;
width: 130px;
}
/*SECOND COLUMN*/
#secondColumn {
width: 100%;
margin: auto;
height: 360px;
background-color: white;
}
#secondColumn h1 {
padding-left: 65px;
padding-top: 60px;
color: navy;
font-size: 20px;
font-weight: 700;
}
#secondColumn p {
font-size: 13px;
padding-left: 70px;
}
.benefitss {
margin-left: 80px;
padding-top: 20px;
font-size: 13px;
}
.benefitss li{
padding-top: 2px;
}
/*THIRD COLUMN*/
#thirdColumn {
width: 100%;
height: 250px;
}
#thirdColumn p:nth-child(2) {
color: #ffffff;
font-style: italic;
font-size: 15px;
text-align: center;
}
#thirdColumn p:nth-child(3) {
color: #ffffff;
font-size: 18px;
font-weight: 700;
text-align: center;
}
/*FOURTH COLUMN*/
#fourthColumn {
background-color: yellow;
width: 100%;
height: 75px;
}
/*SIGN UP BUTTON*/
#signupButton {
background-color: #000040;
color: white;
border-radius: 3px;
border-style: none;
font-size: 12px;
font-weight: 800;
height: 30px;
width: 150px;
margin-left: 42.9%;
margin-top: 25px;
}
#fifthColumn {
background-color: #000000;
width: 100%;
height: 225px;
position: absolute;
}
#fifthColumn p {
color: yellow;
text-align: center;
font-size: 24px;
font-weight: 800;
}
#footer p {
font-size: 9px;
color: #ffffff;
text-align: center;
padding-top: 11%;
}
Problem:
https://postimg.cc/image/tunhwh8qj/
The trouble I am currently having is that the border around my body is not outlining everything. As I have recently learned I'm guessing this means an element is out of the flow due to floating? However I am not certain how to fix it in this case.
My html is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="swaggersstyle.css">
<title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
<body>
<img src="final.jpg" id="banner">
<ul id="nav">
<li class="links">Home</li>
<li class="links">Location</li>
<li class="links">Facilities</li>
<li class="links">Attractions</li>
<li id = "endlink">Bookings</li>
</ul>
<div id="leftcolumn">
<p>hghadgadgadg</p>
<p>easfasf</p>
<p>safSFS</p>
<p>afafafadf</p>
<p>safasf</p>
<p>saasfasf</p>
<p>fasfsaf</p>
</div>
<div id="mainc">
<p>Make Yourself at Home</p>
<p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p>
<div class="slideshow">
<img src="1.jpg" width="600" height="450" />
<img src="2.jpg" width="600" height="450" />
<img src="3.jpg" width="600" height="450" />
</div>
</div>
<div id ="footer">
<p> fsafasfasf </p>
</div>
</body>
</html>
and my CSS is:
html{
font-family: sans-serif;
background-color:#464E54;
height: 100%;
}
body{
width: 960px;
margin: auto;
background-color: white;
border: 3px solid black;
padding: 0;
height: 100%;
}
#banner{
padding: 0px;
margin: 0;
display: block;
}
#nav {
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;
border-bottom: 1px solid #7f7f7f;
border-top: 1px solid #7f7f7f;
}
#mainc {
float: left;
width: 654px;
background-color: white;
margin: 0;
padding-left: 8px;
padding-right: 4px;
height: 100%;
}
#leftcolumn {
padding-left: 3px;
float: left;
background-color: #dad8bf;
width: 290px;
border-right: 1px solid #7f7f7f;
height: 100%;
}
#footer {
clear: both;
position: relative;
bottom: 0.5px;
margin: 0;
background-color: #dad8bf;
border-top: 1px solid #7f7f7f;
}
#footer p{
margin: 0;
}
.links {
float: left;
margin: 0px;
border-right: 1px solid #7f7f7f;
}
#endlink {
float: left;
margin: 0px;
border-right: none;
}
#lastlink{
display: block;
width: 184px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
#lastlink:hover{
background-color: #999999;
}
a:link {
display: block;
width: 183px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:visited {
display: block;
width: 183px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:hover {
background-color: #999999;
}
a:active{
background-color: #999999;
}
.slideshow {
height: 483px;
width: 632px;
margin: auto;
padding: 0px;
}
.slideshow img {
padding: 0px;
border: 1px solid #ccc;
background-color: #eee;
}
thanks in advance guys!!
This is happening because your body has fix height of 100%.Change body tag css as:
height:auto;
min-height: 100%
if this doesn't work then add following with this:
overflow:auto;
Probably better NOT to use the body element for your container. Instead, just add
<div class="container"></div>
around your code and in your CSS changehtml to body and body to div.container.
body{
font-family: sans-serif;
background-color:#464E54;
height: 100%;
}
div.container{
width: 960px;
margin: auto;
background-color: white;
border: 3px solid black;
padding: 0;
}
Edit: I completely missed the 100%, that's gotta be it.
Add overflow: hidden to your body element. When elements are floated it will not push the parent container height past it unless there is a clearer