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>
Related
My images won't sit side by side & I'm not sure why.
I've set the display to be inline and it still doesn't work.
I think i should mention that i'd like the 4 colourful buttons to be grouped as how they are now, 2 on top and 2 on the bottom, but i'd still like for it to be inline with the logo and the pfp image..
Here's what I have for the css page so far.
and here's how they currently sit
*the 'vengage' box is the logo, so it should sit like
on 1 row [vengage][home][settings] [pfp]
and then have [fyp] [search] directly underneath the home & settings buttons
if it's useful, this is along the lines of how i'd like them to sit on the webpage if possible
* {
box-sizing: border-box;
}
body {
width: 999px;
height: 1000px;
text-decoration: none;
}
.logo {
padding: 5px;
display: flex;
}
.menu {
display: flex;
flex-direction: row;
}
<div class='menu'>
<div class='logo'>
<img src='https://via.placeholder.com/140x100?text=LOGO' width='100'>
</div>
<div class='above'>
<div class='homebutton'>
<a href='Code draft.html'>
<img src='https://via.placeholder.com/140x100' width='50'>
</a>
</div>
<div class='settingsbutton'>
<a href='menusettings.html'>
<img src='https://via.placeholder.com/140x100' width='50'>
</a>
</div>
</div>
<div class='below'>
<div class='fypbutton'>
<a href='fyp.html'>
<img src='https://via.placeholder.com/140x100' width='50'>
</a>
</div>
<div class='searchbutton'>
<a href='search.html'>
<img src='https://via.placeholder.com/140x100' width='50'>
</a>
</div>
</div>
<div class="pfp">
<a href="Profile Page.html">
<img src='https://via.placeholder.com/140x100' width='50'>
</a>
</div>
</div>
Remove display: inline from menu class and add display: flex again if you want to align all the elements with the logo than just change the position of menu div, make it as a mother div. Hope it solves your problem
* {
box-sizing: border-box;
}
body {
display: inline-block;
width: 999px;
height: 1000px;
text-decoration: none;
}
.logo {
padding: 5px;
display: inline;
}
.menu {
display: flex;
}
<div class='menu'>
<div class='logo'>
<img src='https://i.ibb.co/h9L3Fyq/logo.jpg' width='100'>
</div>
<div class='above'>
<div class='homebutton'>
<a href='Code draft.html'>
<img src='https://via.placeholder.com/140x100' width='50'>
</a>
</div>
<div class='settingsbutton'>
<a href='menusettings.html'>
<img src='https://via.placeholder.com/140x100' width='50'>
</a>
</div>
</div>
<div class='below'>
<div class='fypbutton'>
<a href='fyp.html'>
<img src='https://via.placeholder.com/140x100' width='50'>
</a>
</div>
<div class='searchbutton'>
<a href='search.html'>
<img src='https://via.placeholder.com/140x100' width='50'>
</a>
</div>
</div>
<div class="pfp">
<a href="Profile Page.html">
<img src='https://via.placeholder.com/140x100' width='50'>
</a>
</div>
</div>
try this instead,
Add display:flex; to body. also add vertical-align:top;to all image
that is
body{
display:flex;
}
img{
vertical-align:top;
}
* {
box-sizing: border-box;
}
body{
width: 999px;
height: 1000px;
text-decoration: none;
display:flex;
}
img{
vertical-align:top;
border:1px solid #111;
}
<div class='logo'>
<img src='https://i.stack.imgur.com/8U82Z.png' width ="75px">
</div>
<div class = 'menu'>
<div class = 'above'></div>
<div class = 'homebutton'>
<a href = 'Code draft.html'>
<img src = 'https://i.stack.imgur.com/QM11G.png' width = "50px">
</a>
</div>
<div class = 'settingsbutton'>
<a href = 'menusettings.html'>
<img src = 'https://i.stack.imgur.com/LFcP2.png' width = "50px">
</a>
</div>
</div>
<div class = 'below'>
<div class = 'fypbutton'>
<a href = 'fyp.html'>
<img src = 'https://i.stack.imgur.com/rV49R.png' width = "50px">
</a>
</div>
<div class = 'searchbutton'>
<a href = 'search.html'>
<img src = 'https://i.stack.imgur.com/z6gVZ.png' width = "50px">
</a>
</div>
</div>
<div class="pfp">
<a href="Profile Page.html">
<img src='https://i.stack.imgur.com/qpEQy.png' width = "29px">
</a>
</div>
</div>
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 have tried for some time to do something like on the image.
Elements (.element) goes down but they are not centered but stick left.
My code now is:
Html:
<div id="_technology_page" class="region">
<div class="actions_container">
<div class="actions">
{{#each actions}}
<div class="action">
<a href="{{link}}">
<img src="/img/technology/grafiki/{{icon}}.png" alt="">
<p class="action_text">
{{text}}
</p>
</a>
</div>
{{/each}}
</div>
</div>
</div>
Css: (scss):
#_technology_page {
.actions_container {
max-width: 100%;
position: relative;
text-align: center;
display: flex;
.actions {
position: relative;
.action {
float: left;
position: relative;
position: relative;
margin: 10px 40px;
text-align: center;
float: left;
height: 300px;
width: 250px;
display: flex;
img {
margin: auto;
width: 120px
}
.action_text {
width: 100%;
color: black;
position: absolute;
bottom: 0;
}
}
}
}
}
I have tried many things, search examples, bot nothing works as I want it to works.
Also, I have tried to do it on Bootstrap grid system, but those elements are still stuck to the left side of the container.
Please provide some examples how to do it, I have no idea how to do it anymore.
using flexbox here is a way simpler code from yours
body {
margin: 0
}
.region {
border: solid;
padding: 50px 0
}
.actions {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
border: red solid;
padding: 10px;
}
.action {
flex: 0 140px;
height: 140px;
border: orange solid;
margin: 5px;
}
<div id="_technology_page" class="region">
<div class="actions_container">
<div class="actions">
<div class="action">
<a href="{{link}}">
<img src="/img/technology/grafiki/{{icon}}.png" alt="">
<p class="action_text">
</p>
</a>
</div>
<div class="action">
<a href="{{link}}">
<img src="/img/technology/grafiki/{{icon}}.png" alt="">
<p class="action_text">
</p>
</a>
</div>
<div class="action">
<a href="{{link}}">
<img src="/img/technology/grafiki/{{icon}}.png" alt="">
<p class="action_text">
</p>
</a>
</div>
<div class="action">
<a href="{{link}}">
<img src="/img/technology/grafiki/{{icon}}.png" alt="">
<p class="action_text">
</p>
</a>
</div>
<div class="action">
<a href="{{link}}">
<img src="/img/technology/grafiki/{{icon}}.png" alt="">
<p class="action_text">
</p>
</a>
</div>
<div class="action">
<a href="{{link}}">
<img src="/img/technology/grafiki/{{icon}}.png" alt="">
<p class="action_text">
</p>
</a>
</div>
<div class="action">
<a href="{{link}}">
<img src="/img/technology/grafiki/{{icon}}.png" alt="">
<p class="action_text">
</p>
</a>
</div>
</div>
</div>
</div>
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>
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.