I am having trouble with the layout of my HTML & CSS site.
There are meant to be 4 boxes under the top image, At the moment there are only 3. I would like them to be spread out evenly across the page. The one that isn't visible is history of gaming, I believe that for some reason it is underneath the image...
here is the code:
.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;
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 275px;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}<!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: 275px;
}
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><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/hog.html">History of Gaming</a>
</li>
<li><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/atari.html">Atari</a>
</li>
<li><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/othergames.html">Other Games</a>
</li>
<li><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/future.html">Future</a>
</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">
<h3>History of Gaming</h3>
<ul>
<li>What is gaming?</li>
<li>Pong</li>
<li>Technology Boom</li>
</ul>
<p><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/hog.html">Learn more about the history of gaming</a>
</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><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/atari.html">Learn more about Atari</a>
</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><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/othergames.html">Learn more about other games</a>
</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><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/future.html">Learn about future gaming</a>
</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
.col-sm-6will make each box 50% of the screen on a small device, giving the appearance of 2 boxes next to eachother with 2 immediately underneath: getbootstrap.com/css CSS guide heredescdiv before your firstimgdiv. That's why you only see the three down below. You also don't need to prefix every class with thedivselector. Just the classes work great.