As you can see from my code the 4 sections are piled up. It would be great if someone could please help me spread them evenly across the page. The 4 sections that are: The History Of Gaming, Atari, Other Games, Future gaming.
.jumbotron h1 {
color: #ffffff;
font-size: 150px;
font-family: Sans-serif;
font-weight: bold;
text-align: center;
margin-top: 0px;
}
.jumbotron {
background-image: url('http://i118.photobucket.com/albums/o117/Shawnthebro/bandicam2014-03-2311-20-03-210_zpse7f7712f.jpg');
position: absolute;
left: 0px;
top: 100px;
height: 350px;
display: block;
}
.nav li {
display: inline;
text-align: center;
color: #ff0000;
font-size: 50px;
bottom: 350px;
padding-left: 35px;
font-family: Sans-serif;
}
.page ul {
color: #000000;
font-size: 20px;
font-family: Calibri;
padding-left: 75px;
.page ul li {
display: inline;
}
.page a {
color: #000000;
font-size: 15px;
font-family: Calibri;
padding-left: 70px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="home.css">
<title>Gaming T,N & B</title>
</head>
<div class="jumbotron">
<div class="container">
<h1>Gaming: Then, Now & Beyond</h1>
</div>
</div>
<body>
<div class="nav">
<div class="container">
<ul>
<li>History of Gaming
</li>
<li>Atari
</li>
<li>Other Games
</li>
<li>Future
</li>
</ul>
</div>
</div>
<style>
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="history.png">
<img src="history.png" alt="The History of Gaming" width="300" height="200">
</a>
<div class="desc">
<div class="page">
<div class="container">
<div>
<div>
<div>
<h3>History of Gaming</h3>
<ul>
<li>What is gaming?</li>
<li>Pong</li>
<li>Technology Boom</li>
</ul>
<p>Learn more about the history of gaming
</p>
</div>
</div>
</div>
<div class="img">
<a target="_blank" href="atari.jpg">
<img src="atari.jpg" alt="Atari" width="600" height="400">
</a>
<div class="desc">
<div>
<h3>Atari</h3>
<ul>
<li>40 years of fun</li>
<li>Who is Nolan Bushnell</li>
<li>Bought & Sold</li>
</ul>
<p>Learn more about Atari
</p>
</div>
</div>
</div>
<div class="img">
<a target="_blank" href="xbox_ps1.jpg">
<img src="xbox_ps1.jpg" alt="Other Games" width="600" height="400">
</a>
<div class="desc">
<div>
<h3>Other Games</h3>
<ul>
<li>PC</li>
<li>Xbox</li>
<li>PlayStation</li>
</ul>
<p>Learn more about other games
</p>
</div>
</div>
</div>
<div class="img">
<a target="_blank" href="future_ocu.jpg">
<img src="future_ocu.jpg" alt="Future Gaming" width="600" height="400">
</a>
<div class="desc">
<div>
<h3>Future</h3>
<ul>
<li>Gaming in society</li>
<li>Who is driving who?</li>
<li>CrowdFunding</li>
</ul>
<p>Learn about future gaming
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<iframe width="1150" height="315" src="http://www.youtube.com/embed/X1tBEKFYKJg?autoplay=1" style="border:5px dotted red">
</iframe>
</body>
</html>
Many Thanks
Adam
James's answer would probably still work if you apply the same technique to that section. Since that is technically his answer, I will offer an alternative solution. You could add this to your CSS:
ul {text-align-justify}
Or if you only want that rule to apply to that section, you can give that UL an ID and apply it to the ID in the CSS.
I would also recommend moving the h1 section down into the body.
Your HTML code structure is not valid. I just revised it. The head tag was opened twice and the style was placed inside the body. The body tag was also opened multiple times and some div tags were not closed.
.jumbotron h1 {
color: #ffffff;
font-size: 150px;
font-family: Sans-serif;
font-weight: bold;
text-align: center;
margin-top: 0px;
}
.jumbotron {
background-image: url('http://i118.photobucket.com/albums/o117/Shawnthebro/bandicam2014-03-2311-20-03-210_zpse7f7712f.jpg');
position: absolute;
left: 0px;
top: 100px;
height: 350px;
display: block;
}
.nav li {
display: inline;
text-align: center;
color: #ff0000;
font-size: 50px;
bottom: 350px;
padding-left: 35px;
font-family: Sans-serif;
}
.page ul {
color: #000000;
font-size: 20px;
font-family: Calibri;
padding-left: 75px;
.page ul li {
display: inline;
}
.page a {
color: #000000;
font-size: 15px;
font-family: Calibri;
padding-left: 70px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="home.css">
<title>Gaming T,N & B</title>
<style>
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>Gaming: Then, Now & Beyond</h1>
</div>
</div>
<div class="nav">
<div class="container">
<ul>
<li>History of Gaming
</li>
<li>Atari
</li>
<li>Other Games
</li>
<li>Future
</li>
</ul>
</div>
</div>
<div class="img">
<a target="_blank" href="history.png">
<img src="history.png" alt="The History of Gaming" width="300" height="200">
</a>
</div>
<div class="desc">
<div class="page">
<div class="container">
<div>
<div>
<div>
<h3>History of Gaming</h3>
<ul>
<li>What is gaming?</li>
<li>Pong</li>
<li>Technology Boom</li>
</ul>
<p>Learn more about the history of gaming
</p>
</div>
</div>
</div>
<div class="img">
<a target="_blank" href="atari.jpg">
<img src="atari.jpg" alt="Atari" width="600" height="400">
</a>
<div class="desc">
<div>
<h3>Atari</h3>
<ul>
<li>40 years of fun</li>
<li>Who is Nolan Bushnell</li>
<li>Bought & Sold</li>
</ul>
<p>Learn more about Atari
</p>
</div>
</div>
</div>
<div class="img">
<a target="_blank" href="xbox_ps1.jpg">
<img src="xbox_ps1.jpg" alt="Other Games" width="600" height="400">
</a>
<div class="desc">
<div>
<h3>Other Games</h3>
<ul>
<li>PC</li>
<li>Xbox</li>
<li>PlayStation</li>
</ul>
<p>Learn more about other games
</p>
</div>
</div>
</div>
<div class="img">
<a target="_blank" href="future_ocu.jpg">
<img src="future_ocu.jpg" alt="Future Gaming" width="600" height="400">
</a>
<div class="desc">
<div>
<h3>Future</h3>
<ul>
<li>Gaming in society</li>
<li>Who is driving who?</li>
<li>CrowdFunding</li>
</ul>
<p>Learn about future gaming
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<iframe width="1150" height="315" src="http://www.youtube.com/embed/X1tBEKFYKJg?autoplay=1" style="border:5px dotted red">
</iframe>
</body>
</html>
The CSS code was not working because of invalid structure, now try layout your document and it should work now.
Related
See Umbrella image in images:
Full-size window:
.
Reduced (ideal placement):
I would like to have my umbrella image in the centre of the screen no matter the size of the window.
It works from the point where the window shrinks and works in mobile view too.
I've tried various methods but it doesn't seem to be working, any tips would be greatly appreciated.
Here is my code:
HTML
<div class="wrapper">
<div class="page2">
<h2>Blog</h2>
<div class="wrap">
<div class="card">
<a href="welcome.html">
<img class="card-img" src="str3.jpg">
</a>
<div class="card-text">
<h3>Welcome</h3>
<p>Website Launch and my First Project</p>
</div>
</div>
<div class="card">
<a href="blog.html">
<img class="card-img" src="steve_roe_kyoto.jpg">
</a>
<div class="card-text">
<h3> Kyoto</h3>
<p>My Recent Trip</p>
</div>
</div>
<div class="card">
<a href="best.html">
<img class="card-img" src="str4.jpg">
</a>
<div class="card-text">
<h3>Best of 2018</h3>
<p>Neon Goodness from Last Year</p>
</div>
</div>
</div>
<div class="page3">
<footer>
<div class="umbrella_icon">
<img src="umbrella-02.png">
</div>
<div class="logo_footer">Steve Roe</div>
<div class="footer_menu">
<ul class="ul_footer">
<li>Work With Me</li>
<li>
Contact</li>
</ul>
</div>
</footer>
</div>
</div>
</div>
CSS
.page2{
width: 100%;
margin: 0 auto;
margin-top: 20px;
height: 100%;
}
//cards
.wrap{
width:960px;
margin:auto;
margin-top: 100px;
}
.card{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.15);
transition: 0.4s;
width: 300px;
text-align: center;
font-size: 16px;
float:left;
margin:10px;
text-decoration: none;
}
.page3{
margin: 20px;
margin-top: 20px;
height: 30%;
}
.umbrella_icon {
text-align: center;
}
.footer {
z-index: 1000;
width: 960px;
margin: 0 auto;
}
Use dispaly:flex to .wrap
See working code
.page2{
width: 100%;
margin: 0 auto;
margin-top: 20px;
height: 100%;
}
.wrap{
margin: auto;
margin-top: 100px;
display: flex;
}
.card{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.15);
transition: 0.4s;
width: 300px;
text-align: center;
font-size: 16px;
float:left;
margin:10px;
text-decoration: none;
}
.page3{
margin: 20px;
margin-top: 20px;
height: 30%;
}
.umbrella_icon {
text-align: center;
}
.footer {
z-index: 1000;
width: 960px;
margin: 0 auto;
}
<div class="wrapper">
<div class="page2">
<h2>Blog</h2>
<div class="wrap">
<div class="card">
<a href="welcome.html">
<img class="card-img" src="str3.jpg">
</a>
<div class="card-text">
<h3>Welcome</h3>
<p>Website Launch and my First Project</p>
</div>
</div>
<div class="card">
<a href="blog.html">
<img class="card-img" src="steve_roe_kyoto.jpg">
</a>
<div class="card-text">
<h3> Kyoto</h3>
<p>My Recent Trip</p>
</div>
</div>
<div class="card">
<a href="best.html">
<img class="card-img" src="str4.jpg">
</a>
<div class="card-text">
<h3>Best of 2018</h3>
<p>Neon Goodness from Last Year</p>
</div>
</div>
</div>
<div class="page3">
<footer>
<div class="umbrella_icon">
<img src="umbrella-02.png" alt="umbrella">
</div>
<div class="logo_footer">Steve Roe</div>
<div class="footer_menu">
<ul class="ul_footer">
<li>Work With Me</li>
<li>
Contact</li>
</ul>
</div>
</footer>
</div>
</div>
</div>
End The page 2 div before starting page 3 div.
Change the page3 css to
.page3{
margin: 50vh 50vw;
}
<h2>Blog</h2>
<div class="wrap">
<div class="card">
<a href="welcome.html">
<img class="card-img" src="str3.jpg">
</a>
<div class="card-text">
<h3>Welcome</h3>
<p>Website Launch and my First Project</p>
</div>
</div>
<div class="card">
<a href="blog.html">
<img class="card-img" src="steve_roe_kyoto.jpg">
</a>
<div class="card-text">
<h3> Kyoto</h3>
<p>My Recent Trip</p>
</div>
</div>
<div class="card">
<a href="best.html">
<img class="card-img" src="str4.jpg">
</a>
<div class="card-text">
<h3>Best of 2018</h3>
<p>Neon Goodness from Last Year</p>
</div>
</div>
</div>
</div>
<div class="page3">
<footer>
<div class="umbrella_icon">
<img src="umbrella-02.png" alt="umbrella Here">
</div>
<div class="logo_footer">Steve Roe</div>
<div class="footer_menu">
<ul class="ul_footer">
<li>Work With Me</li>
<li>
Contact</li>
</ul>
</div>
</footer>
</div>
Use flex for .wrap like this :
.wrap{
width:960px;
margin:auto;
margin-top: 100px;
display: flex;
justify-content: center;
}
this code make image in center horizontally.
I've been attending a web design class and I started to work on my own to test some things. I set up a bunch of panels for the webpage and I found a problem when I made the footer.
Whenever my main body div starts to fill up and reaches the footer, it goes under the footer instead of adjusting the webpage and pushing it down. Any idea?
Picture of div going under:
body,
html {
background-color: #bee9e4;
height: 100%;
width: 100%;
}
.center {
text-align: center;
}
#banner {
background-color: lightgrey;
background: linear-gradient(to right, #99ffcc, white, #99ffcc);
border-style: groove;
}
#aboutme {
border-style: groove;
border-width: 2px;
border-color: lightblue;
box-shadow: 0px 2px 2px grey;
}
#wrapper {
min-height: 100%;
position: relative;
}
#middlepanel {
margin-top: 20px;
background-color: lightgrey;
margin-left: 21%;
width: 58%;
border-style: groove;
overflow: auto;
}
#bannerpic {
float: right;
margin: 5px 20px 10px 5px;
border-style: inset;
border-width: 7px;
border-color: lightblue;
padding: 3px;
box-shadow: 6px 6px 6px red;
}
#leftpanel {
float: left;
background-color: lightgrey;
width: 20%;
border-style: groove;
overflow: auto;
}
#rightpanel {
float: right;
background-color: lightgrey;
width: 20%;
border-style: groove;
overflow: auto;
}
#footer {
background-color: lightgrey;
border-style: groove;
overflow: auto;
width: 100%;
height: 75px;
position: absolute;
bottom: 0;
left: 0;
}
#content {
padding-bottom: 75px;
/* Height of the footer element */
}
.videoleft {
float: left;
width: 45%;
}
.videoright {
float: right;
width: 45%;
}
#media only screen and (max-width: 640px) {
#leftpanel {
display: none;
}
#rightpanel {
display: none;
}
#footer {
display: none;
}
#middlepanel {
width: 100%;
margin-left: 0%;
}
}
.clearfloat {
clear: both;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-left: 5px;
}
<div id="infoaboutme">
<p>I am a Junior at //</p>
<p>I like to learn at school.</p>
<p>I love to spend time on the computer</p>
</div>
<br class="clearfloat">
</div>
<div>
<ul class="w3-navbar w3-card-2 w3-grey">
<li>
Mr. M
</li>
<li>
Home
</li>
<li class="w3-dropdown-hover w3-hover-light-grey">
<a class="w3-hover-grey" href="#">My Favs<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
Google
Twitch
Youtube
</div>
</li>
<li class="w3-dropdown-hover w3-hover-light-grey">
<a class="w3-hover-grey" href="#">CHS<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
Eli T
Ashley X
Andrew H
Savannah C
Robert G
</div>
</li>
<li class="w3-dropdown-hover w3-hover-light-grey">
<a class="w3-hover-grey" href="#">EHS<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
Ethan P
Richard M
</div>
</li>
<li class="w3-dropdown-hover w3-hover-light-grey">
<a class="w3-hover-grey" href="#">MA<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
Bryan H
</div>
</li>
<li class="w3-dropdown-hover w3-hover-light-grey">
<a class="w3-hover-grey" href="#">MHS<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
Tyler P
Neomi B
Tanis S B
Nicole C
Vic S
</div>
</li>
<li class="w3-dropdown-hover w3-hover-light-grey">
<a class="w3-hover-grey" href="#">MVHS<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
Daniel C
Brendon S
Micah G
</div>
</li>
<li class="w3-dropdown-hover w3-hover-light-grey">
<a class="w3-hover-grey" href="#">RHS<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
Cole P
Andrew W
Alexis B
Chase S
David B
</div>
</li>
</ul>
</div>
<div id="wrapper">
<div id="leftpanel">
<p>Test left float</p>
</div>
<div id="rightpanel">
<p>This is a test right float</p>
</div>
<div id="middlepanel">
<h1 class="center">Pictures taken for and of class!</h1>
<div id="slideShow" class="w3-content" style="max-width:600px;position:relative">
<div>
<div class="w3-display-container mySlides">
<img src="images/code.png" style="width:100%" height="360px" alt="code.jpg">
<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
Code
</div>
</div>
<div class="w3-display-container mySlides">
<img src="images/class.JPG" style="width:100%" height="360px" alt="class.jpg">
<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
Class
</div>
</div>
<div class="w3-display-container mySlides">
<img src="images/graded.JPG" style="width:100%" height="360px" alt="graded.jpg">
<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
Class
</div>
</div>
<a class="w3-btn-floating w3-hover-dark-grey" style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)">[</a>
<a class="w3-btn-floating w3-hover-dark-grey" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)">]</a>
<script src="js/slideshow.js"></script>
</div>
</div>
<h1 class="center">Videos for the class!</h1>
<div class="videoleft">
<video width="100%" height="100%" controls>
<source src="videos/video_converted.ogg" type="video/ogg">
<source src="videos/video_converted2.webm" type="video/webm">
<source src="videos/video_converted3.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
<div class="videoright">
<video width="100%" height="100%" controls>
<source src="#" type="video/ogg">
<source src="#" type="video/webm">
<source src="#" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
</div>
<div id="footer">
<h3>Stest</h3>
</div>
</div>
Here's the source of your problem:
#footer {
background-color: lightgrey;
border-style: groove;
overflow: auto;
width: 100%;
height: 75px;
position: absolute; /* <--- REMOVES ELEMENT FROM NORMAL FLOW */
bottom: 0;
left: 0;
}
When you absolutely position an element, you remove it from the "normal flow" (also called "document flow"). This means that the element doesn't take up any space in the document and surrounding elements don't even know it exists.
Your main content div is overlapping the footer because the space is empty, as far as the content div is concerned. Before being absolutely positioned, the footer was more like a wall. After, it is more like a cloud, and surrounding elements go right through it.
There are two concepts you need to grasp in order to understand how this works:
CSS Positioning
CSS Normal Flow
Check the output in jsbin
Link to Jsbin
update ur css as follows
#footer {
background-color: lightgrey;
border-style: groove;
overflow: auto;
width: 100%;
height: 75px;
}
body,
html {
margin:0;
padding:0;
background-color: #bee9e4;
width: 100%;
}
.center {
text-align: center;
}
#banner {
background-color: lightgrey;
background: linear-gradient(to right, #99ffcc, white, #99ffcc);
border-style: groove;
}
#aboutme {
border-style: groove;
border-width: 2px;
border-color: lightblue;
box-shadow: 0px 2px 2px grey;
}
#wrapper {
min-height: 100%;
position: relative;
}
#middlepanel {
margin-top: 20px;
background-color: lightgrey;
margin-left: 21%;
width: 58%;
border-style: groove;
overflow: auto;
}
#bannerpic {
float: right;
margin: 5px 20px 10px 5px;
border-style: inset;
border-width: 7px;
border-color: lightblue;
padding: 3px;
box-shadow: 6px 6px 6px red;
}
#leftpanel {
float: left;
background-color: lightgrey;
width: 20%;
border-style: groove;
overflow: auto;
}
#rightpanel {
float: right;
background-color: lightgrey;
width: 20%;
border-style: groove;
overflow: auto;
}
#footer {
background-color: lightgrey;
border-style: groove;
overflow: auto;
width: 100%;
height: 75px;
}
#content {
padding-bottom: 75px;
/* Height of the footer element */
}
.videoleft {
float: left;
width: 45%;
}
.videoright {
float: right;
width: 45%;
}
#media only screen and (max-width: 640px) {
#leftpanel {
display: none;
}
#rightpanel {
display: none;
}
#footer {
position:relative;
top:50px;
}
#middlepanel {
width: 100%;
margin-left: 0%;
}
}
.clearfloat {
clear: both;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-left: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Daniel's Intro Website</title>
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" type="text/css" href="css/w3.css">
<link rel="stylesheet" type="text/css" href="css/main.css"/>
</head>
<body>
<div id="banner">
<img id="bannerpic" src="images/graded.JPG" alt="class.jpg">
<h1 id="Welcome">Welcome!</h1>
<h4>Created by Daniel C.</h4>
<input id="aboutme" type="button" value="About Me!">
<div id="infoaboutme">
<p>I am a Junior at Mountain View High School.</p>
<p>I like to learn at school.</p>
<p>I love to spend time on the computer</p>
</div>
<br class="clearfloat">
</div>
<div>
<ul class="w3-navbar w3-card-2 w3-grey">
<li>
Mr. M
</li>
<li>
Home
</li>
<li class="w3-dropdown-hover w3-hover-light-grey">
<a class="w3-hover-grey" href="#">My Favs<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
Google
Twitch
Youtube
</div>
</li>
<li class="w3-dropdown-hover w3-hover-light-grey">
<a class="w3-hover-grey" href="#">CHS<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
Eli T
Ashley X
Andrew H
Savannah C
Robert G
</div>
</li>
<li class="w3-dropdown-hover w3-hover-light-grey">
<a class="w3-hover-grey" href="#">EHS<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
Ethan P
Richard M
</div>
</li>
<li class="w3-dropdown-hover w3-hover-light-grey">
<a class="w3-hover-grey" href="#">MA<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
Bryan H
</div>
</li>
<li class="w3-dropdown-hover w3-hover-light-grey">
<a class="w3-hover-grey" href="#">MHS<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
Tyler P
Neomi B
Tanis S B
Nicole C
Vic S
</div>
</li>
<li class="w3-dropdown-hover w3-hover-light-grey">
<a class="w3-hover-grey" href="#">MVHS<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
Daniel C
Brendon S
Micah G
</div>
</li>
<li class="w3-dropdown-hover w3-hover-light-grey">
<a class="w3-hover-grey" href="#">RHS<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
Cole P
Andrew W
Alexis B
Chase S
David B
</div>
</li>
</ul>
</div>
<div id="wrapper">
<div id="leftpanel">
<p>Test left float</p>
</div>
<div id="rightpanel">
<p>This is a test right float</p>
</div>
<div id="middlepanel">
<h1 class="center">Pictures taken for and of class!</h1>
<div id="slideShow" class="w3-content" style="max-width:600px;position:relative">
<div>
<div class="w3-display-container mySlides">
<img src="images/code.png" style="width:100%" height="360px" alt="code.jpg">
<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
Code
</div>
</div>
<div class="w3-display-container mySlides">
<img src="images/class.JPG" style="width:100%" height="360px" alt="class.jpg">
<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
Class
</div>
</div>
<div class="w3-display-container mySlides">
<img src="images/graded.JPG" style="width:100%" height="360px" alt="graded.jpg">
<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
Class
</div>
</div>
<a class="w3-btn-floating w3-hover-dark-grey" style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)">[</a>
<a class="w3-btn-floating w3-hover-dark-grey" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)">]</a>
<script src="js/slideshow.js"></script>
</div>
</div>
<h1 class="center">Videos for the class!</h1>
<div class="videoleft">
<video width="100%" height="100%" controls>
<source src="videos/video_converted.ogg" type="video/ogg">
<source src="videos/video_converted2.webm" type="video/webm">
<source src="videos/video_converted3.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
<div class="videoright">
<video width="100%" height="100%" controls>
<source src="#" type="video/ogg">
<source src="#" type="video/webm">
<source src="#" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
</div>
<div id="footer">
<h3>Stest</h3>
</div>
</div>
</body>
</html>
This question already has answers here:
Sticky footer with sticky header?
(2 answers)
Closed 6 years ago.
I think my coding is correct, but I still can't put the footer to the bottom of the page, and I really need to do it.
The footer on the result appears directly under the header which is annoying as I want it to go into my main div which is located in my body.
Thanks. :)
<!DOCTYPE html>
<html>
<head>
<title>Gallery</title>
<link type="text/css" rel="stylesheet" href="mobile.css"/>
</head>
<body>
<div id="header">
<div id="companyname">Shutter Up Photography</div>
<div id="nav">
<ul>
<li>Contact Us</li>
<li>Experience</li>
<li>Offers</li>
<li>Gallery</li>
<li>Location</li>
<li>About Us</li>
<li>Home</li>
</ul>
</div>
</div>
<div id="main">
<div id="content">
<div class="img">
<img src="img_model.jpg"/>
<div class="desc">Model Shot</div>
</div>
<div class="img">
<img src="img_classy.jpg"/>
<div class="desc">A classy family shot</div>
</div>
<div class="img">
<img src="img_father.jpg"/>
<div class="desc">A father and his boys</div>
</div>
<div class="img">
<img src="img_wedding.jpg"/>
<div class="desc">Timeless Wedding Shot</div>
</div>
<div class="img">
<img src="img_mother.jpg"/>
<div class="desc">A mother and her children</div>
</div>
<div class="img">
<img src="img_kid.jpg"/>
<div class="desc">Imaginative Kid</div>
</div>
</div>
</div>
<div id="footer">
<div id="companyname">Shutter Up Photography</div>
</div>
</body>
</html>
This is the result from my coding, I've tried to put the css gallery into the main div, but won't work
This is my css code for it
Add a wrapper with the following CSS attributes as the code below. This should do the trick:
html,
body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow: auto;
padding-bottom: 150px;
/* must be same height as the footer */
}
#footer {
position: relative;
margin-top: -150px;
/* negative value of footer height */
height: 150px;
border-bottom-style: solid;
clear: both;
background-color: #006BFE;
border: 2px solid red;
/* remove border, showns for illustration purposes only */
}
div.img {
margin: 5px;
display: inline-block;
width: 400px;
border: 1px solid blue;
padding: 10px;
}
div.img img {
width: 100%;
height: auto;
border: 2px solid #006bFE;
}
div.desc {
padding: 15px;
text-align: center;
}
.somelist {
list-style-type: square;
list-style-position: inside;
float: none;
line-height: 1.5em;
background-color: #93dbfe;
}
<div id="wrap">
<div id="header">
<div id="companyname">Shutter Up Photography</div>
<div id="nav">
<ul>
<li>Contact Us
</li>
<li>Experience
</li>
<li>Offers
</li>
<li>Gallery
</li>
<li>Location
</li>
<li>About Us
</li>
<li>Home
</li>
</ul>
</div>
</div>
<div id="main">
<div id="content">
<div class="img">
<img src="http://lorempixel.com/300/300/people" />
<div class="desc">Model Shot</div>
</div>
<div class="img">
<img src="http://lorempixel.com/300/300/people" />
<div class="desc">A classy family shot</div>
</div>
<div class="img">
<img src="http://lorempixel.com/300/300/people" />
<div class="desc">A father and his boys</div>
</div>
<div class="img">
<img src="http://lorempixel.com/300/300/people" />
<div class="desc">Timeless Wedding Shot</div>
</div>
<div class="img">
<img src="http://lorempixel.com/300/300/people" />
<div class="desc">A mother and her children</div>
</div>
<div class="img">
<img src="http://lorempixel.com/300/300/people" />
<div class="desc">Imaginative Kid</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="companyname">Shutter Up Photography</div>
</div>
Its because your images are being floated which takes them out of the flow of the page.
Try this
div div div.img {
margin: 5px;
border: 2px solid blue;
display: inline-block;
width: 400px;
}
By removing the float and replacing with inline block you keep the elements within the flow of the page.
EDIT -
HTML -
<div class="img">
<img/>
</div><div class="img">
<img/>
</div><div class="img">
<img/>
</div>
If you choose to use inline-block, layer your html like this, as inline-block elements take into consideration the white space between elements.
**/ EDIT **
Or if you wish to keep the float, create a clearfix class and attach it to the parent
.clearfix:after {
content: "";
display: table;
clear: both;
}
EDIT -
<div id="content" class="clearfix">
<!-- your floated divs here -->
</div>
I'm trying to set up separate sections within the body that would show info in them like this
using float: left; doesn't help, it only messes up the page layout.
here's my html...
#a,
#g {
background-color: #6d6d6d;
color: #bdc3c7;
list-style: none;
}
#pic {
margin: +5% 0 0;
border: 3px solid black;
}
#wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 5%;
list-style: none;
}
<div Id="wrapper">
<section>
<ul id="a">
<li>
<a href="img/appstore.jpg">
<img src="img/appstore.jpg" alt="" width=180px id="pic">
<p>info</p>
</a>
</li>
</ul>
</section>
<section>
<ul id="g">
<li>
<a href="img/googleplay.jpg">
<img src="img/googleplay.jpg" alt="" width=180px id="pic">
<p>info</p>
</a>
</li>
</ul>
</section>
</div>
Why are you using the same name for multiple instances of the same id for your images? ID's are supposed to be unique, you're better of using a class if you're going to group. Check my solution out for your question:
#a, #g {
color: #bdc3c7;
list-style: none;
}
.pic {
margin:+5% 0 0;
border: 3px solid black;
float:left;
}
.sections {
height:100px;
background-color: #6d6d6d;
}
.info {
margin:+5% 10px;
float:left;
}
#wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 5%;
list-style: none;
}
<div Id="wrapper">
<section class="sections">
<ul id="a">
<li>
<a href="img/appstore.jpg">
<img src="img/appstore.jpg" alt="" width=180px class="pic">
<p class="info">info</p>
</a>
</li>
</ul>
</section>
<section class="sections">
<ul id="g">
<li>
<a href="img/googleplay.jpg">
<img src="img/googleplay.jpg" alt="" width=180px class="pic">
<p class="info">info</p>
</a>
</li>
</ul>
</section>
</div>
I classed the section tags as that's what you would need to add the background colour to and set a height. You would need to set a height as the items are floating so they would not stretch the section automatically, so you need to provide a fixed height.
I added classes to your paragraphs as these would also need to be floated left as well as your images. Also you needed to add the same margins as your images.
I changed your pics ID's to classes.
If you have any questions, let me know.
change id="pic" to class="pic". because ID should be used 1 time in a page..
then write in css:
.pic {
float: left;
}
Try using float:right
#wrapper ul {
padding: 0;
margin: auto;
width: 80%;
list-style-type: none;
}
#wrapper ul li {
background-color: #6d6d6d;
padding: 30px;
margin-bottom: 20px;
display: table;
width: 100%;
}
#wrapper ul li img {
float: left;
}
#wrapper ul li .details {float: right;width: 75%;}
<div Id="wrapper">
<section>
<ul id="a">
<li>
<a href="img/appstore.jpg">
<img src="img/appstore.jpg" alt="" width=180px id="pic">
<!-- Wrapped into div -->
<div class="details">
<p>info</p>
</div>
</a>
</li>
<li>
<a href="img/appstore.jpg">
<img src="img/appstore.jpg" alt="" width=180px id="pic">
<!-- Wrapped into div -->
<div class="details">
<p>info</p>
</div>
</a>
</li>
<li>
<a href="img/appstore.jpg">
<img src="img/appstore.jpg" alt="" width=180px id="pic">
<!-- Wrapped into div -->
<div class="details">
<p>info</p>
</div>
</a>
</li>
<li>
<a href="img/appstore.jpg">
<img src="img/appstore.jpg" alt="" width=180px id="pic">
<!-- Wrapped into div -->
<div class="details">
<p>info</p>
</div>
</a>
</li>
<li>
<a href="img/appstore.jpg">
<img src="img/appstore.jpg" alt="" width=180px id="pic">
<!-- Wrapped into div -->
<div class="details">
<p>info</p>
</div>
</a>
</li>
</ul>
</section>
</div>
I changed your code and list things a bit.. Tell me if i misinterpreted your question..
<html>
<head>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<style>
#a, #g {
background-color: #6d6d6d;
color: #bdc3c7;
list-style: none;
width: 100%;
}
#pic {
margin: +5% 0 0;
border: 3px solid black;
display:table-cell; width:100px;height:100px;
}
#wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 5%;
list-style: none;
}
section{
width: 100%;
}
</style>
</head>
<body>
<div Id="wrapper">
<section>
<a href="img/appstore.jpg" id="a">
<div style="display:table" id="g">
<div style="" id="pic">
<img src="img/appstore.jpg" width=180px alt="">
</div>
<div style="padding:12 16;">
<p>info</p>
</div>
</div>
</a>
</section>
<section>
<a href="img/googleplay.jpg">
<div style="display:table" id="g">
<div style="" id="pic">
<img src="img/googleplay.jpg" alt="" width=180px>
</div>
<div style="padding:12 16;">
<p>info</p>
</div>
</div>
</a>
</section>
</div>
</body>
</html>
I am using Tumlbr and wish remove an indent made either side of each post. I would prefer to have the blog posts width to be 100%. Thanks in advance. The url to the website which I am editing is http://jarroldtheme.tumblr.com.
<!DOCTYPE html>
<html>
<head>
<title>{title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<style>
header h1 {
color: {TitleColor};
font-family: {TitleFont};
font-weight: {TitleFontWeight};
text-align: center;
font-size: 35px;
padding-top: 20px;
padding-bottom: 4px;
}
header p {
color: black;
font-family: helvetica;
text-align: center;
font-size: 18px;
}
header a {
color: {TitleColor};
text-decoration: none;
}
.page {
text-align: center;
padding-top: 25px;
}
.page a {
text-decoration: none;
border-bottom: 1px solid #000;
font-size: 16px;
margin-left: 5px;
margin-right: 5px;
padding-bottom: 3px;
}
body {
background: {BackgroundColor};
font-family: helvetica;
}
.post {
text-align: center;
padding-top: 45px;
padding-bottom: 45px;
list-style: none;
}
.link-post {
background: #000;
}
.like-reblog {
list-style: none;
}
.like-reblog li {
float: right;
padding: 6px;
}
.quote-source {
padding:20px;
font-style: italic;
}
form {
text-align: center;
}
.sfm input {background-color: #f5f5f5;
font-size: 9px;
border: 0px;
text-transform: lowercase;
margin-top: 0px;
color: #999;
letter-spacing: 1px;
padding: 4px 8px;
font-family: helvetica, arial;}
input[type="submit"] {
background: #900000;
color: white;
}
</style>
</head>
<body>
<header>
{block:haspages}
<div class="page">
{block:pages}
{Label}
{/block:pages}
</div>
{/block:haspages}
<h1>{title}</h1>
{block:Description}
<p>{Description}</p>
{/block:Description}
<form action="/search" method="get" class="sfm">
<input type="text" name="q" value="{SearchQuery}" id="sf"/>
<input type="submit" value="Search" id="sb"/>
</form>
</header>
<ol>
{block:Posts}{block:Text}
<div class="post">
<li>
{block:Title}
<h3>{Title}</h3>
{/block:Title}{Body}
</li>
<ul class="like-reblog">
<li>{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</li><li>{likebutton}</li><li>{reblogbutton}</li>
</ul>
</div>
{/block:Text}{block:Photo}
<div class="post">
<li>
<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
{block:Caption}
{Caption}
{/block:Caption}
</li>
<ul class="like-reblog">
<li>{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</li><li>{likebutton}</li><li>{reblogbutton}</li>
</ul>
</div>
{/block:Photo}{block:Panorama}
<div class="post">
<li>
{LinkOpenTag}
<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
{LinkCloseTag}{block:Caption}
{Caption}
{/block:Caption}
</li>
<ul class="like-reblog">
<li>{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</li><li>{likebutton}</li><li>{reblogbutton}</li>
</ul>
</div>
{/block:Panorama}{block:Photoset}
<div class="post">
<li>
{Photoset-500}{block:Caption}
{Caption}
{/block:Caption}
</li>
<ul class="like-reblog">
<li>{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</li><li>{likebutton}</li><li>{reblogbutton}</li>
</ul>
</div>
{/block:Photoset}{block:Quote}
<div class="post">
<li>
"{Quote}"
{block:Source}
<div class="quote-source">{Source}</div>
{/block:Source}
</li>
<ul class="like-reblog">
<li>{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</li><li>{likebutton}</li><li>{reblogbutton}</li>
</ul>
</div>
{/block:Quote}{block:Link}
<div class="post">
<div class="link-post">
<li>
<a href="{URL}" class="link" {Target}>{Name}</a>
{block:Description}
{Description}
{/block:Description}
</li>
</div>
<ul class="like-reblog">
<li>{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</li><li>{likebutton}</li><li>{reblogbutton}</li>
</ul>
</div>
{/block:Link}{block:Chat}
<div class="post">
<li>
{block:Title}
<h3>{Title}</h3>
{/block:Title}
<ul>
{block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}
<span>{Label}</span>
{/block:Label}{Line}
</li>
{/block:Lines}
</ul>
</li>
<ul class="like-reblog">
<li>{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</li><li>{likebutton}</li><li>{reblogbutton}</li>
</ul>
</div>
{/block:Chat}{block:Video}
<div class="post">
<li>
{Video-500}{block:Caption}
{Caption}
{/block:Caption}
</li>
<ul class="like-reblog">
<li>{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</li><li>{likebutton}</li><li>{reblogbutton}</li>
</ul>
</div>
{/block:Video}{block:Audio}
<div class="post">
<li>
{AudioEmbed}{block:Caption}
{Caption}
{/block:Caption}
</li>
<ul class="like-reblog">
<li>{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</li><li>{likebutton}</li><li>{reblogbutton}</li>
</ul>
</div>
{/block:Audio}
{/block:Posts}
</ol>
</body>
</html>
If what you mean is that you are trying to get the elements with the post ID to move all the way to each side you can try by setting the padding of the ordered list to 0. Checked it using Chrome dev tools.
`ol{padding: 0;}`
I would also recommend using a css reset to remove the browser default styles like normalize.css. They really help out a ton
Edit: To move the black box all the way over, you can set the margin of the body to 0 on both the left and right:
body{margin:auto 0;}
a CSS reset could help you avoid doing all this ^.^