I have created a webpage,which look like this
I have to display a image gallery in the yellow mark which I have made. I haved tried everything but it comes below the footer. Can I get some idea how can I achieve this?
here is my code
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index_style.css">
</head>
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<ul class="pull-right">
<li>Welcome to our Store</li>
<li>Login</li>
<li>or</li>
<li>Register</li>
<li>yourself!</li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="extra0">
<div class="cata-head">
Choose a category!
</div>
<ul class="cata">
<li>Men's Clothing</li>
<li>Men's Accesories</li>
<li>Women's Clothing</li>
<li>Women's Accesories</li>
<li>Baby Products</li>
</ul>
</div>
<div class="extra">
<img src="extra.png">
<img src="extra1.png">
</div>
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="foot">
<footer>
Policies: Terms of use | Security | Privacy | Infringement <b> UsamaRehan & AsjadHussaini©</style> </b>
<img src="face.png">
<img src="tweet.png">
<img src="you.png">
</footer>
</div>
</body>
</html>
******CSS
body {
//overflow: hidden;
background-color: #d0e4fe;
//background-image: url("background.jpg");
font-family: "Book Antiqua",Times New Roman, Georgia, Serif;
}
.nav
{
border-style: solid;
}
.nav a {
color: #5a5a5a;
font-size: 15px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
a:hover {
color: coral;
}
.pull-left
{
float:left
}
.pull-right
{
float:right
}
.clear
{
clear:both;
}
.container
{
padding-right: 75px;
margin-right: auto;
margin-left: auto;
background-color:#bbb;
}
.extra0{
background-color: #555;
width: 250px;
padding-bottom: 10px;
margin-top: 5px;
border-style: solid;
border-color: #0ca3d2;
}
.cata-head
{
font-size: 18px;
font-weight: bold;
padding: 10px 0px 5px 15px;
text-transform: uppercase;
color: activeborder;
border-style: solid;
border-bottom-color: #0ca3d2;
border-left-color:#555;
border-right-color: #555;
border-top-color: #555;
}
.cata
{
color: #b3c0c8;
list-style-image: url("list.png");
line-height: 2.333em;
}
.foot
{
background:#ffab62;
width:100%;
height:30px;
position:absolute;
bottom:0;
left:0;
padding-left: 15px;
padding-bottom: 5px;
}
b
{
color: firebrick;
}
.extra
{
width: 250px;
padding-top: 12px;
padding-left: 12px;
}
.main
{
border-style: solid;
border-color: black;
display: block;
width: 250px;
margin: 10px 10px;
}
div.img {
/* margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;*/
margin: 10px 10px;
width: auto;
border:3px solid #73AD21;
padding: 10px;
float: left;
}
div.img img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
div.img a:hover img {
border:1px solid #0000ff;
}
div.desc {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
I have added some extra div to float the element. here is the link below http://codepen.io/anon/pen/yYwVLM
HTML
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<ul class="pull-right">
<li>Welcome to our Store</li>
<li>Login</li>
<li>or</li>
<li>Register</li>
<li>yourself!</li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
<div class="pull-left">
<div class="extra0">
<div class="cata-head">
Choose a category!
</div>
<ul class="cata">
<li>Men's Clothing</li>
<li>Men's Accesories</li>
<li>Women's Clothing</li>
<li>Women's Accesories</li>
<li>Baby Products</li>
</ul>
</div>
<div class="extra">
<img src="extra.png">
<img src="extra1.png">
</div>
</div>
<div class="pull-left">
ADD GALLERY HERE <br>
<img src="http://placehold.it/500x200">
<img src="http://placehold.it/500x200">
<img src="http://placehold.it/500x200">
</div>
<div class="clear"></div>
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="clear"></div>
<div class="foot">
<footer>
Policies: Terms of use | Security | Privacy | Infringement <b> UsamaRehan & AsjadHussaini©</style> </b>
<img src="face.png">
<img src="tweet.png">
<img src="you.png">
</footer>
</div>
CSS
body {
overflow: hidden;
background-color: #d0e4fe;
background-image: url("background.jpg");
font-family: "Book Antiqua",Times New Roman, Georgia, Serif;
}
.nav
{
border-style: solid;
}
.nav a {
color: #5a5a5a;
font-size: 15px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
a:hover {
color: coral;
}
.pull-left
{
float:left;
}
.pull-right
{
float:right;
}
.clear
{
clear:both;
}
.container
{
padding-right: 75px;
margin-right: auto;
margin-left: auto;
background-color:#bbb;
}
.extra0{
background-color: #555;
width: 250px;
padding-bottom: 10px;
margin-top: 5px;
border-style: solid;
border-color: #0ca3d2;
}
.cata-head
{
font-size: 18px;
font-weight: bold;
padding: 10px 0px 5px 15px;
text-transform: uppercase;
color: activeborder;
border-style: solid;
border-bottom-color: #0ca3d2;
border-left-color:#555;
border-right-color: #555;
border-top-color: #555;
}
.cata
{
color: #b3c0c8;
list-style-image: url("list.png");
line-height: 2.333em;
}
.foot
{
background:#ffab62;
width:100%;
height:30px;
position:absolute;
bottom:0;
left:0;
padding-left: 15px;
padding-bottom: 5px;
}
b
{
color: firebrick;
}
.extra
{
width: 250px;
padding-top: 12px;
padding-left: 12px;
}
.main
{
border-style: solid;
border-color: black;
display: block;
width: 250px;
margin: 10px 10px;
}
div.img {
/* margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;*/
margin: 10px 10px;
width: auto;
border:3px solid #73AD21;
padding: 10px;
float: left;
}
div.img img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
div.img a:hover img {
border:1px solid #0000ff;
}
div.desc {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
i changed you html structure i.e
Created one div with class gallery and put all images inside that div
in your html your images doesn't have any parent. if you use parent then it will help to move all chilled according to parent.
Note : see result in full screen
<div class="container">
<div class="extra0">
</div>
<div class="gallery">
<!---all imaged-->
</div>
</div>
body {
//overflow: hidden;
background-color: #d0e4fe;
//background-image: url("background.jpg");
font- amily: "Book Antiqua", Times New Roman, Georgia, Serif;
}
.nav {
border - style: solid;
}
.nav a {
color: #5a5a5a;
font-size: 15px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
a:hover {
color: coral;
}
.pull-left {
float: left
}
.pull-right {
float: right
}
.clear {
clear: both;
}
.container {
padding-right: 75px;
margin-right: auto;
margin-left: auto;
background-color: # bbb;
width: 100 %;
display: inline-block;
}
.extra0 {
background-color: #555;
width: 20%;
display: inline-block;
padding-bottom: 10px;
margin-top: 5px;
border-style: solid;
border-color: #0ca3d2;
}
.cata - head {
font-size: 18 px;
font-weight: bold;
padding: 10px 0px 5px 15px;
text-transform: uppercase;
color: activeborder;
border-style: solid;
border-bottom-color: #0ca3d2;
border-left-color: #555;
border-right-color: #555;
border-top-color: #555;
}
.cata {
color: #b3c0c8;
list-style - image: url("list.png");
line-height: 2.333em;
}
.foot {
background: #ffab62;
width: 100%;
height: 30px;
position: fixed;
bottom: 0;
left: 0;
padding-left: 15px;
padding-bottom: 5px;
}
b {
color: firebrick;
}
.extra {
width: 250px;
padding-top: 12px;
padding-left: 12px;
}
.main {
border-style: solid;
border-color: black;
display: block;
width: 250px;
margin: 10px 10px;
}
div.img {
/* margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;*/
margin: 10px 10px;
width: auto;
border: 3 px solid #73AD21;
padding: 10px;
float: left;
}
div.img img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
div.img a: hover img {
border: 1 px solid #0000ff;
}
div.desc {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
.gallery {
width: 75%;
display: inline-block;
}
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<ul class="pull-right">
<li>Welcome to our Store</li>
<li>Login</li>
<li>or</li>
<li>Register</li>
<li>yourself!</li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="container">
<div class="extra0">
<div class="cata-head">
Choose a category!
</div>
<ul class="cata">
<li>Men's Clothing</li>
<li>Men's Accesories</li>
<li>Women's Clothing</li>
<li>Women's Accesories</li>
<li>Baby Products</li>
</ul>
</div>
<div class="gallery">
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
</div>
<div class="extra">
<img src="extra.png">
<img src="extra1.png">
</div>
<div class="foot">
<footer>
Policies: Terms of use | Security | Privacy | Infringement <b> UsamaRehan & AsjadHussaini©</style> </b>
<img src="face.png">
<img src="tweet.png">
<img src="you.png">
</footer>
</div>
I have add some new div and css here is link check : http://codepen.io/anon/pen/BobQzo
body {
//overflow: hidden;
background-color: #d0e4fe;
//background-image: url("background.jpg");
font-family: "Book Antiqua",Times New Roman, Georgia, Serif;
}
.nav
{
border-style: solid;
}
.nav a {
color: #5a5a5a;
font-size: 15px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
a:hover {
color: coral;
}
.pull-left
{
float:left
}
.sidebar {
float: left;
width: 250px;
}
.pull-right
{
float:right
}
.clear
{
clear:both;
}
.container
{
padding-right: 75px;
margin-right: auto;
margin-left: auto;
background-color:#bbb;
}
.gallery {
float: left;
width:80%;
margin-bottom: 40px;
}
.extra0{
background-color: #555;
width: 250px;
padding-bottom: 10px;
margin-top: 5px;
border-style: solid;
border-color: #0ca3d2;
}
.cata-head
{
font-size: 18px;
font-weight: bold;
padding: 10px 0px 5px 15px;
text-transform: uppercase;
color: activeborder;
border-style: solid;
border-bottom-color: #0ca3d2;
border-left-color:#555;
border-right-color: #555;
border-top-color: #555;
}
.cata
{
color: #b3c0c8;
list-style-image: url("list.png");
line-height: 2.333em;
}
.foot
{
background:#ffab62;
width:100%;
height:30px;
position:fixed;
bottom:0;
left:0;
float: left;
padding-left: 15px;
padding-bottom: 5px;
}
b
{
color: firebrick;
}
.extra
{
width: 250px;
padding-top: 12px;
padding-left: 12px;
}
.main
{
border-style: solid;
border-color: black;
display: block;
width: 250px;
margin: 10px 10px;
}
div.img {
/* margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;*/
margin: 10px 10px;
width: auto;
border:3px solid #73AD21;
padding: 10px;
float: left;
}
div.img img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
div.img a:hover img {
border:1px solid #0000ff;
}
div.desc {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index_style.css">
</head>
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<ul class="pull-right">
<li>Welcome to our Store</li>
<li>Login</li>
<li>or</li>
<li>Register</li>
<li>yourself!</li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="sidebar">
<div class="extra0">
<div class="cata-head">
Choose a category!
</div>
<ul class="cata">
<li>Men's Clothing</li>
<li>Men's Accesories</li>
<li>Women's Clothing</li>
<li>Women's Accesories</li>
<li>Baby Products</li>
</ul>
</div>
<div class="extra">
<img src="extra.png">
<img src="extra1.png">
</div>
</div>
<div class="gallery">
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="p1.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="foot">
<footer>
Policies: Terms of use | Security | Privacy | Infringement <b> UsamaRehan & AsjadHussaini©</style> </b>
<img src="face.png">
<img src="tweet.png">
<img src="you.png">
</footer>
</div>
</body>
</html>
there is two div one sidebar and gallery
I think you can use position absolute and give the top & left for your div.
.img{
position: absolute;
top: 30px;
left: 30px;
}
Related
I have given header, a menu bar and a hero image, after that created image gallery using lightbox. I have create 4 columns with 3 images each, but in the lightbox gallery it's showing 3 columns with 4 images each.
I have given new row called My Videos but the css taking the previous row into consideration not the new one. I placed a video but it's not moving according to the margins given.
Lastly, my footer is not showing up..
<!doctype html>
<html>
<head>
<title> Project One </title>
<link rel="stylesheet" href="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/main.css">
<link rel="stylesheet" href="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/lightbox.css">
</head>
<body>
<header>
<div class="header-section">
<div class="header-logo">
<h1> Superstar </h1>
</div>
<div class="header-right">
<p> Plot No.33,Mahalaxmi Nagar, Vizianagaram-535 002.<br>
email:saisankarmandala#gmail.com.
</p>
</div>
</div>
</header>
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</nav>
<div class="container"></div>
<div class="hero-text">
<h1> I am Creative </h1>
</div>
<div class="row">
<h1> My Gallery </h1>
</div>
<div class="col col-md-8-pushdown-sm">
<div class="column">
<div class="thumbnails">
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb1.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb1a.jpg" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb2.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb2a.jpg" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb3.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb3a.jpg" width="200" height="200"></a>
</div>
</div>
<div class="column">
<div class="thumbnails">
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb4.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb4a.jpg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb5.png" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb5a.png" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb6.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb6a.jpg" alt="thumb" width="200" height="200"></a>
</div>
</div>
<div class="column">
<div class="thumbnails">
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb7.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb7a.jpg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb8.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb8a.jpg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb9.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb9a.jpg" alt="thumb" width="200" height="200"></a>
</div>
</div>
<div class="column">
<div class="thumbnails">
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb10.jpeg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb10a.jpeg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb11.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb11a.jpg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb12.png" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb12a.png" alt="thumb" width="200" height="200"></a>
</div>
</div>
</div>
<div class="row">
<div class="heading">
<h1> My Videos </h1>
</div>
</div>
<div class="column">
<div class="video-area">
<video height="150" width="200" controls>
<source src="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/vids/vid1.mp4" type="video/mp4" >
<source src="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/vids/vid2.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="clearfix"></div>
<footer>
<p>© 2021, All rights reserved </p>
</footer>
<script type="text/javascript" src="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/lightbox-plus-jquery.js"></script>
</body>
</html>
This is my CSS Code
html {
height: 100%;
}
body {
position: relative;
margin: 0;
height: 100%;
}
/*styling the header section */
.header-section {
display: flex;
flex-wrap: wrap;
border-bottom: 2px solid purple;
background-color: purple;
margin-bottom: 0;
overflow: auto;
}
/* divide the header area into two and make width adjustments */
.header-logo {
width: 66%;
float: left;
flex: 1;
}
h1 {
font-family: Helvetica, arial, sans-serif;
font-size: 300%;
color: #fff;
font-weight: bold;
padding: 10px 0px 0px 40px;
box-sizing: border-box;
}
.header-right {
width: 34%;
float: right;
flex: 1;
}
p {
font-size: 110%;
font-weight: bold;
color: #fff;
padding: 40px 0px 0px 150px;
box-sizing: border-box;
}
nav li {
list-style: none;
float: left;
display: inline;
margin-top: -5px;
}
nav {
float: left;
margin-top: 0px;
bottom-border: none;
border-top: 0px solid purple;
width: 100%;
background-color: purple;
width: 100%;
height: 42px;
overflow: hidden;
}
nav a {
color: white;
text-decoration: none;
}
nav a {
display: inline;
font-family: Helvetica, arial, sans-serif;
text-decoration: none;
padding: 10px 20px;
border: 1px solid white;
border-bottom: 1px;
border-spacing: 3px;
background-color: purple;
color: white;
margin-right: 2px;
margin-top: -2px;
}
/* hero image area */
.container {
max-width: 100%;
margin-top: 45px;
background-image: url('C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/nude.jpg');
height: 75%;
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-position: right center;
}
/* hero text on the image */
.hero-text {
background-color: rgba(0, 0, 0, 0.4);
/* Black w/opacity/see-through */
color: purple;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
width: 80%;
padding: 30px;
text-align: center;
}
/* row heading */
.row h1 {
margin-top: -10px;
font-size: 150%;
font-family: Helvetica, arial, sans-serif;
font-weight: bold;
text-align: center;
color: #fff;
background-color: purple;
}
/* image gallery settings */
.column {
display: flex;
align-items: stretch;
column-gap: 20px;
}
.thumbnails img {
float: left;
width: 25%;
margin: 0 auto;
display: block;
max-width: 100%;
padding: 10px 20px 10px 30px;
margin-left: 40px;
margin-right: 10px;
margin-bottom: 15px;
transitiion: all 2s ease-in-out;
border: 1px solid grey;
box-sizing: border-box
}
.thumbnails img:hover {
transform: rotate(2deg);
box-shadow: 0 0 7px rgba(0, 0, 0, .5);
opacity: 1;
transform: scale(1)rotate(2deg);
.thumbnails:hover img {
opacity: .5;
transform: scale(.92);
}
.row::after {
content: "";
clear: both;
display: table;
}
.heading h1 {
font-size: 150%;
font-family: Helvetica, arial, sans-serif;
font-weight: bold;
text-align: center;
color: purple;
}
.video-area video {
margin: 0 auto;
display: block;
}
.footer {
position: fixed;
width: 100%;
bottom: 0;
}
html {
height: 100%;
}
body {
position: relative;
margin: 0;
height: 100%;
}
/*styling the header section */
.header-section {
display: flex;
flex-wrap: wrap;
border-bottom: 2px solid purple;
background-color: purple;
margin-bottom: 0;
overflow: auto;
}
/* divide the header area into two and make width adjustments */
.header-logo {
width: 66%;
float: left;
flex: 1;
}
h1 {
font-family: Helvetica, arial, sans-serif;
font-size: 300%;
color: #fff;
font-weight: bold;
padding: 10px 0px 0px 40px;
box-sizing: border-box;
}
.header-right {
width: 34%;
float: right;
flex: 1;
}
p {
font-size: 110%;
font-weight: bold;
color: #fff;
padding: 40px 0px 0px 150px;
box-sizing: border-box;
}
nav li {
list-style: none;
float: left;
display: inline;
margin-top: -5px;
}
nav {
float: left;
margin-top: 0px;
border-bottom: none;
border-top: 0px solid purple;
width: 100%;
background-color: purple;
width: 100%;
height: 42px;
overflow: hidden;
}
nav a {
color: white;
text-decoration: none;
}
nav a {
display: inline;
font-family: Helvetica, arial, sans-serif;
text-decoration: none;
padding: 10px 20px;
border: 1px solid white;
border-bottom: 1px;
border-spacing: 3px;
background-color: purple;
color: white;
margin-right: 2px;
margin-top: -2px;
}
/* hero image area */
.container {
max-width: 100%;
margin-top: 45px;
background-image: url('C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/nude.jpg');
height: 75%;
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-position: right center;
}
/* hero text on the image */
.hero-text {
background-color: rgba(0, 0, 0, 0.4);
/* Black w/opacity/see-through */
color: purple;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
width: 80%;
padding: 30px;
text-align: center;
}
/* row heading */
.row h1 {
margin-top: -10px;
font-size: 150%;
font-family: Helvetica, arial, sans-serif;
font-weight: bold;
text-align: center;
color: #fff;
background-color: purple;
}
/* image gallery settings */
.column {
display: flex;
align-items: stretch;
column-gap: 20px;
}
.thumbnails img {
float: left;
width: 25%;
margin: 0 auto;
display: block;
max-width: 100%;
padding: 10px 20px 10px 30px;
margin-left: 40px;
margin-right: 10px;
margin-bottom: 15px;
transition:all 2s ease-in-out;
border: 1px solid grey;
box-sizing: border-box
}
.thumbnails img:hover {
transform: rotate(2deg);
box-shadow: 0 0 7px rgba(0, 0, 0, .5);
opacity: 1;
transform: scale(1)rotate(2deg);
}
.thumbnails:hover img {
opacity: .5;
transform: scale(.92);
}
.row::after {
content: "";
clear: both;
display: table;
}
.heading h1 {
font-size: 150%;
font-family: Helvetica, arial, sans-serif;
font-weight: bold;
text-align: center;
color: purple;
}
.video-area video {
margin: 0 auto;
display: block;
}
.footer {
position: fixed;
width: 100%;
bottom: 0;
}
<!doctype html>
<html>
<head>
<title> Project One </title>
<link rel="stylesheet" href="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/main.css">
<link rel="stylesheet" href="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/lightbox.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<header>
<div class="header-section">
<div class="header-logo">
<h1> Superstar </h1>
</div>
<div class="header-right">
<p> Plot No.33,Mahalaxmi Nagar, Vizianagaram-535 002.<br>
email:saisankarmandala#gmail.com.
</p>
</div>
</div>
</header>
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</nav>
<div class="container"></div>
<div class="hero-text">
<h1> I am Creative </h1>
</div>
<div class="row">
<h1> My Gallery </h1>
</div>
<div class="col col-md-8-pushdown-sm">
<div class="column">
<div class="thumbnails">
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb4.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb4a.jpg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb5.png" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb5a.png" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb6.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb6a.jpg" alt="thumb" width="200" height="200"></a>
</div>
</div>
<div class="column">
<div class="thumbnails">
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb4.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb4a.jpg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb5.png" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb5a.png" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb6.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb6a.jpg" alt="thumb" width="200" height="200"></a>
</div>
</div>
<div class="column">
<div class="thumbnails">
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb7.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb7a.jpg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb8.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb8a.jpg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb9.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb9a.jpg" alt="thumb" width="200" height="200"></a>
</div>
</div>
<div class="column">
<div class="thumbnails">
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb10.jpeg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb10a.jpeg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb11.jpg" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb11a.jpg" alt="thumb" width="200" height="200"></a>
<a href="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb12.png" data-lightbox="gallery">
<img src="c:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/thumb12a.png" alt="thumb" width="200" height="200"></a>
</div>
</div>
</div>
<div class="row">
<div class="heading">
<h1> My Videos </h1>
</div>
</div>
<div class="column">
<div class="video-area">
<video height="150" width="200" controls>
<source src="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/vids/vid1.mp4" type="video/mp4" >
<source src="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/vids/vid2.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="clearfix"></div>
<footer>
<p>© 2021, All rights reserved </p>
</footer>
<script type="text/javascript" src="C:/Users/saisa/OneDrive/Desktop/HTML TUTORIAL/p1/lightbox-plus-jquery.js"></script>
</body>
</html>
I am creating a website and right now I am stuck.
As of now I am creating the dashboard of the website.
It has a header for the basic settings (Home, Profile and Log out) buttons.
Body which contains the navigation tools on the left and at the main body page which is located beside it.
And of course the footer below it.
It should look like this:
It fine like that but some how when I view it in using the "toggle device toolbar" under the devtools, it look like this:
How can I solve this overshoot.
Here is the code:
body,
html {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 81px;
}
.leftForm {
background-color: #2c384a;
width: 204px;
float: left;
height: 100%;
}
.leftForm img,
.leftForm1 img {
width: 204px;
height: 204px;
border-radius: 200px;
}
.name {
font-size: 26px;
font-family: calibri;
color: white;
margin: 0;
text-align: center;
}
.pageselector li,
.pageselector1 li {
width: 150px;
padding: 10px 0 10px 10px;
text-align: left;
}
.pageselector a,
.pageselector1 a,
.fa-facebook,
.fa-twitter {
color: white;
}
.pageselector li:hover,
.active,
.pageselector1 li:hover,
.active1 {
background-color: rgba(0, 0, 0, 0.7);
}
.contentcon {
width: auto;
display: inline-block;
}
.announcementSlider {
background-color: #323f4f;
border-radius: 10px 10px 3px 3px;
font-size: 24px;
margin: 5px 3px 3px 3px;
height: 400px;
width: 630px;
border: 2px solid black;
color: white;
}
.annocontent {
color: black;
height: 360px;
width: 626px;
border-radius: 0 0 3px 3px;
background: #f1f1f1;
}
.buttons-container {
border-radius: 10px 10px 0 0;
width: 640px;
}
.button {
height: auto;
border-radius: 3px;
border: 2px solid black;
margin: 3px 3px;
width: 153px;
background: #4091e3;
float: left;
color: white;
}
.button-admin {
height: auto;
border-radius: 3px;
border: 2px solid black;
margin: 3px 3px;
width: 312px;
background: #4091e3;
float: left;
color: white;
}
.button img,
.button-admin img {
height: 60px;
margin: 14px 0;
}
#media screen and (max-width: 980px) {
.buttons-container {
width: auto;
height: auto;
}
.announcementSlider {
width: auto;
}
.contentcon {
padding-left: 0;
}
.annocontent {
width: auto;
}
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 81px;
background-color: gray;
text-align: center;
}
.fa {
margin: 15px 0;
padding: 11px;
width: 50px;
height: 50px;
text-decoration: none;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
}
.fa-twitter {
background: #55ACEE;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div id="page-container">
<div id="content-wrap">
<header id="header">
<nav style="background: #2196F3; font-size: 2.1rem; padding: 0 15px;">
Dashboard
<i class="material-icons">menu</i>
<ul class="hide-on-med-and-down right">
<li>Home</li>
<li>Profile</li>
<li>Log Out</li>
</ul>
</nav>
</header>
<div style="text-align: center;">
<div class="leftForm hide-on-med-and-down">
<?php echo '<img src="picture.php?id=' . $user_check . '">';?>
<p class="name">Administrator</p>
<ul class="pageselector right">
<a href="Dashboard.php">
<li class="active">Dashboard</li>
</a>
<a href="profile.php">
<li>Profile</li>
</a>
<a href="">
<li>Subject</li>
</a>
<a href="">
<li>Workspace</li>
</a>
<a href="">
<li>Task</li>
</a>
<a href="">
<li>Messages</li>
</a>
<a href="logout.php">
<li>Log Out</li>
</a>
</ul>
</div>
<div class="leftForm1 sidenav" id="slide_out" style="width: auto;background-color: #2c384a;">
<?php echo '<img src="picture.php?id=' . $user_check . '">';?>
<p class="name">Administrator</p>
<ul class="pageselector1 right">
<a href="Dashboard.php">
<li class="active1">Dashboard</li>
</a>
<a href="profile.php">
<li>Profile</li>
</a>
<a href="">
<li>Subject</li>
</a>
<a href="">
<li>Workspace</li>
</a>
<a href="">
<li>Task</li>
</a>
<a href="">
<li>Messages</li>
</a>
<a href="logout.php">
<li>Log Out</li>
</a>
</ul>
</div>
<div class="contentcon">
<div class="announcementSlider">
Announcements
<div class="annocontent"></div>
</div>
<div class="buttons-container">
<a class="button" href=".php">
<div>
<img src='pictures/Library.png'>
<div class="span"><span>Library</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/Workspace.png'>
<div class="span"><span>Workspace</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/task.png'>
<div class="span"><span>Task</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/message.png'>
<div class="span"><span>Message</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/locker.png'>
<div class="span"><span>Locker</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/teacher.png'>
<div class="span"><span>Teachers</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/student.png'>
<div class="span"><span>Students</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/calendar.png'>
<div class="span"><span>Calendar</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/blogforum.png'>
<div class="span"><span>Blog/Forum</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/grades.png'>
<div class="span"><span>Grades</span></div>
</div>
</a>
<a class="button-admin" href=".php">
<div>
<img src='pictures/admin.png'>
<div class="span"><span>Admin</span></div>
</div>
</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript">
const slide_menu = document.querySelectorAll(".sidenav");
M.Sidenav.init(slide_menu, {});
</script>
</div>
</div>
<footer id="footer">
</footer>
</div>
this is a problem that can be solved in many ways, the best way to solve footer issues (and header) in my opinion is following this trick: https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/
solution:
set a fixed height of your footer{ height: 10px} and set body{ margin-bottom: 10px}
UPDATE BASED ON COMMENTS
I am not able to see if this works as i cannot recreate the code in my environment.
CSS
body,
html {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
body {
margin-bottom: 81px;
position: relative;
}
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 81px;
}
.leftForm {
background-color: #2c384a;
width: 204px;
float: left;
height: 100%;
}
.leftForm img,
.leftForm1 img {
width: 204px;
height: 204px;
border-radius: 200px;
}
.name {
font-size: 26px;
font-family: calibri;
color: white;
margin: 0;
text-align: center;
}
.pageselector li,
.pageselector1 li {
width: 150px;
padding: 10px 0 10px 10px;
text-align: left;
}
.pageselector a,
.pageselector1 a,
.fa-facebook,
.fa-twitter {
color: white;
}
.pageselector li:hover,
.active,
.pageselector1 li:hover,
.active1 {
background-color: rgba(0, 0, 0, 0.7);
}
.contentcon {
width: auto;
display: inline-block;
}
.announcementSlider {
background-color: #323f4f;
border-radius: 10px 10px 3px 3px;
font-size: 24px;
margin: 5px 3px 3px 3px;
height: 400px;
width: 630px;
border: 2px solid black;
color: white;
}
.annocontent {
color: black;
height: 360px;
width: 626px;
border-radius: 0 0 3px 3px;
background: #f1f1f1;
}
.buttons-container {
border-radius: 10px 10px 0 0;
width: 640px;
}
.button {
height: auto;
border-radius: 3px;
border: 2px solid black;
margin: 3px 3px;
width: 153px;
background: #4091e3;
float: left;
color: white;
}
.button-admin {
height: auto;
border-radius: 3px;
border: 2px solid black;
margin: 3px 3px;
width: 312px;
background: #4091e3;
float: left;
color: white;
}
.button img,
.button-admin img {
height: 60px;
margin: 14px 0;
}
#media screen and (max-width: 980px) {
.buttons-container {
width: auto;
height: auto;
}
.announcementSlider {
width: auto;
}
.contentcon {
padding-left: 0;
}
.annocontent {
width: auto;
}
}
#footer {
position: relative;
bottom: 0;
width: 100%;
height: 81px;
background-color: gray;
text-align: center;
}
.fa {
margin: 15px 0;
padding: 11px;
width: 50px;
height: 50px;
text-decoration: none;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
}
.fa-twitter {
background: #55ACEE;
}
}
Another possibily solution (I change php tag for this example, snippet seems not to work, maybe wv and wh doesn't work there, but it does if you try directly saving as html file, or try it here)
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body,
html {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#page-container {
position: relative;
min-height: calc(100% - 64px);
display: flex;
}
#content-wrap {
padding-bottom: 81px;
}
.leftForm {
background-color: #2c384a;
width: 204px;
float: left;
height: 100%;
}
.leftForm img,
.leftForm1 img {
width: 204px;
height: 204px;
border-radius: 200px;
}
.name {
font-size: 26px;
font-family: calibri;
color: white;
margin: 0;
text-align: center;
}
.pageselector li,
.pageselector1 li {
width: 150px;
padding: 10px 0 10px 10px;
text-align: left;
}
.pageselector a,
.pageselector1 a,
.fa-facebook,
.fa-twitter {
color: white;
}
.pageselector li:hover,
.active,
.pageselector1 li:hover,
.active1 {
background-color: rgba(0, 0, 0, 0.7);
}
.contentcon {
width: auto;
display: inline-block;
}
.announcementSlider {
background-color: #323f4f;
border-radius: 10px 10px 3px 3px;
font-size: 24px;
margin: 5px 3px 3px 3px;
height: 400px;
width: 630px;
border: 2px solid black;
color: white;
}
.annocontent {
color: black;
height: 360px;
width: 626px;
border-radius: 0 0 3px 3px;
background: #f1f1f1;
}
.buttons-container {
border-radius: 10px 10px 0 0;
width: 640px;
}
.button {
height: auto;
border-radius: 3px;
border: 2px solid black;
margin: 3px 3px;
width: 153px;
background: #4091e3;
float: left;
color: white;
}
.button-admin {
height: auto;
border-radius: 3px;
border: 2px solid black;
margin: 3px 3px;
width: 312px;
background: #4091e3;
float: left;
color: white;
}
.button img,
.button-admin img {
height: 60px;
margin: 14px 0;
}
#media screen and (max-width: 980px) {
.buttons-container {
width: auto;
height: auto;
}
.announcementSlider {
width: auto;
}
.contentcon {
padding-left: 0;
}
.annocontent {
width: auto;
}
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 81px;
background-color: gray;
text-align: center;
}
.fa {
margin: 15px 0;
padding: 11px;
width: 50px;
height: 50px;
text-decoration: none;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
}
.fa-twitter {
background: #55ACEE;
}
}
</style>
</head>
<body>
<header id="header">
<nav style="background: #2196F3; font-size: 2.1rem; padding: 0 15px;">
Dashboard
<i class="material-icons">menu</i>
<ul class="hide-on-med-and-down right">
<li>Home</li>
<li>Profile</li>
<li>Log Out</li>
</ul>
</nav>
</header>
<div id="page-container">
<div id="content-wrap">
<div style="text-align: center; width: 100vw;">
<div class="leftForm hide-on-med-and-down">
<img src="picture.php?id=">
<p class="name">Administrator</p>
<ul class="pageselector right">
<a href="Dashboard.php">
<li class="active">Dashboard</li>
</a>
<a href="profile.php">
<li>Profile</li>
</a>
<a href="">
<li>Subject</li>
</a>
<a href="">
<li>Workspace</li>
</a>
<a href="">
<li>Task</li>
</a>
<a href="">
<li>Messages</li>
</a>
<a href="logout.php">
<li>Log Out</li>
</a>
</ul>
</div>
<div class="leftForm1 sidenav" id="slide_out" style="width: auto;background-color: #2c384a;">
<img src="picture.php?id=">
<p class="name">Administrator</p>
<ul class="pageselector1 right">
<a href="Dashboard.php">
<li class="active1">Dashboard</li>
</a>
<a href="profile.php">
<li>Profile</li>
</a>
<a href="">
<li>Subject</li>
</a>
<a href="">
<li>Workspace</li>
</a>
<a href="">
<li>Task</li>
</a>
<a href="">
<li>Messages</li>
</a>
<a href="logout.php">
<li>Log Out</li>
</a>
</ul>
</div>
<div class="contentcon">
<div class="announcementSlider">
Announcements
<div class="annocontent"></div>
</div>
<div class="buttons-container">
<a class="button" href=".php">
<div>
<img src='pictures/Library.png'>
<div class="span"><span>Library</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/Workspace.png'>
<div class="span"><span>Workspace</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/task.png'>
<div class="span"><span>Task</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/message.png'>
<div class="span"><span>Message</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/locker.png'>
<div class="span"><span>Locker</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/teacher.png'>
<div class="span"><span>Teachers</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/student.png'>
<div class="span"><span>Students</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/calendar.png'>
<div class="span"><span>Calendar</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/blogforum.png'>
<div class="span"><span>Blog/Forum</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/grades.png'>
<div class="span"><span>Grades</span></div>
</div>
</a>
<a class="button-admin" href=".php">
<div>
<img src='pictures/admin.png'>
<div class="span"><span>Admin</span></div>
</div>
</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript">
const slide_menu = document.querySelectorAll(".sidenav");
M.Sidenav.init(slide_menu, {});
</script>
</div>
</div>
<footer id="footer">
</footer>
</div>
</body>
I am trying to position the "selected" hero on the right to be aligned with the gallery of heroes to the left so I can add information and a button below the selected hero later on. This page is only missing a paragraph of text that will go below both the gallery; The selected hero and a confirmation button that will go under the hero portrait on the right. Would it be easier to contain all of it in one huge section? Or am I making this too complicated?
var d = new Date();
document.getElementById("practice").innerHTML = d.toDateString();
body {
background-color: lightsteelblue;
margin: 0;
}
h1 {
text-align: center;
font-weight: bold;
font-size: 70px;
text-shadow: 3px 3px grey;
}
.time{
position: absolute;
top: 100%;
right: 0;
}
.navbar {
overflow:hidden;
background-color: black;
}
.navbar a{
float: left;
display: block;
color: White;
text-align: center;
padding: 10px 10px;
font-size: 20px;
text-decoration: none;
}
.navbar a:hover{
background-color: white;
color: black;
}
.navbar a:active {
background-color: grey;
color: white;
}
.navbar input[type=text] {
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 12px;
}
#heroList{
width: 1000px;
margin: 0 50px;
margin-top: 200px;
}
.heroes{
margin: 5px;
border: 1px solid black;
width: 180px;
float: left;
}
.heroNames{
padding: 10px;
text-align: center;
color: white;
font-weight: bold;
background-color:black;
}
.heroes img{
width: 175px;
height: 175px;
}
#chosenHero{
width: auto;
margin: 0 50px;
margin-top: 50px;
}
.myHero{
border: 1px solid black;
width: 180px;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="navbar">
Home
<a class="active" href="hero.html">Hero</a>
About
<input type="text" placeholder="Search..">
</div>
<h1>CHOOSE YOUR HERO</h1>
<!--Hero table goes here(10 heroes, 2x5)-->
<div id="heroList">
<!--Hero portraits go here(outlined, not selectable)-->
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/06/Heroes_Valter_Sprite_%283%2A%29.png/revision/latest?cb=20180427060005"><div class="heroNames"><a>Valter</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/6/65/Heroes_Walhart_Sprite_%283%2A%29.png/revision/latest?cb=20180811070849"><div class="heroNames"><a>Walhart</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/b/bc/Heroes_Zelgius_Sprite.png/revision/latest?cb=20180527163939"><div class="heroNames"><a>Zelgius</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/7/71/Heroes_Roy_Sprite_%283%2A%29.png/revision/latest?cb=20180512034742"><div class="heroNames"><a>Roy</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/8b/Heroes_Arvis_Sprite.png/revision/latest?cb=20180428141625"><div class="heroNames"><a>Arvis</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/51/Heroes_Cordelia_Sprite_%283%2A_%26_4%2A%29.png/revision/latest?cb=20180605063103"><div class="heroNames"><a>Cordelia</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/85/Heroes_Peri_Sprite_%283%2A%29.png/revision/latest?cb=20180612160011"><div class="heroNames"><a>Peri</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/04/Heroes_Effie_Sprite_%283%2A%29.png/revision/latest?cb=20180612034721"><div class="heroNames"><a>Effie</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/53/Heroes_Anna_Sprite_%28Default%29.png/revision/latest?cb=20180614160859"><div class="heroNames"><a>Anna</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--The chosen Hero goes here(selectable)-->
<div id="chosenHero">
<div class="myHero"><img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--Button for confirmation goes here-->
</div>
<p id="practice" class="time"></p>
<script type="text/javascript" src="practice.js"></script>
</body>
</html>
If you cannot use grid system, try following CSS modifications:
var d = new Date();
document.getElementById("practice").innerHTML = d.toDateString();
body {
background-color: lightsteelblue;
margin: 0;
}
h1 {
text-align: center;
font-weight: bold;
font-size: 70px;
text-shadow: 3px 3px grey;
}
.time {
position: absolute;
top: 100%;
right: 0;
}
.navbar {
overflow: hidden;
background-color: black;
}
.navbar a {
float: left;
display: block;
color: White;
text-align: center;
padding: 10px 10px;
font-size: 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: white;
color: black;
}
.navbar a:active {
background-color: grey;
color: white;
}
.navbar input[type=text] {
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 12px;
}
.navbar:after {
clear: both;
content: "";
display: block;
}
#heroList {
width: calc(100% - 200px);
float: left;
}
.heroes {
margin: 5px;
border: 1px solid black;
width: 180px;
float: left;
}
.heroNames {
padding: 10px;
text-align: center;
color: white;
font-weight: bold;
background-color: black;
}
.heroes img {
width: 175px;
height: 175px;
}
#chosenHero {
width: 200px;
float: left;
}
.myHero {
border: 1px solid black;
width: 180px;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="navbar">
Home
<a class="active" href="hero.html">Hero</a>
About
<input type="text" placeholder="Search..">
</div>
<h1>CHOOSE YOUR HERO</h1>
<!--Hero table goes here(10 heroes, 2x5)-->
<div id="heroList">
<!--Hero portraits go here(outlined, not selectable)-->
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/06/Heroes_Valter_Sprite_%283%2A%29.png/revision/latest?cb=20180427060005"><div class="heroNames"><a>Valter</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/6/65/Heroes_Walhart_Sprite_%283%2A%29.png/revision/latest?cb=20180811070849"><div class="heroNames"><a>Walhart</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/b/bc/Heroes_Zelgius_Sprite.png/revision/latest?cb=20180527163939"><div class="heroNames"><a>Zelgius</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/7/71/Heroes_Roy_Sprite_%283%2A%29.png/revision/latest?cb=20180512034742"><div class="heroNames"><a>Roy</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/8b/Heroes_Arvis_Sprite.png/revision/latest?cb=20180428141625"><div class="heroNames"><a>Arvis</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/51/Heroes_Cordelia_Sprite_%283%2A_%26_4%2A%29.png/revision/latest?cb=20180605063103"><div class="heroNames"><a>Cordelia</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/85/Heroes_Peri_Sprite_%283%2A%29.png/revision/latest?cb=20180612160011"><div class="heroNames"><a>Peri</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/04/Heroes_Effie_Sprite_%283%2A%29.png/revision/latest?cb=20180612034721"><div class="heroNames"><a>Effie</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/53/Heroes_Anna_Sprite_%28Default%29.png/revision/latest?cb=20180614160859"><div class="heroNames"><a>Anna</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--The chosen Hero goes here(selectable)-->
<div id="chosenHero">
<div class="myHero"><img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--Button for confirmation goes here-->
</div>
<p id="practice" class="time"></p>
<script type="text/javascript" src="practice.js"></script>
</body>
</html>
This would be the proper way of doing it.
https://i.imgur.com/xIm2fbV.png
I'm coding school project website and I got a problem. When I resize the width of browser, child divs float down from header, thus width of div under header is affected by floated-off divs from header.
<body>
<div id="page" class="page">
<div id="header" class="header">
<div class="headerContainer">
<h1><img src="images/logo.png" alt="Gastronerez"><span>Gastronerez</span></h1>
<ul class="menu">
<li class="active">Home</li>
<li>O nás</li>
<li>Novinky</li>
<li>Jak objednat</li>
<li>Kontakty</li>
</ul>
<ul class="contact">
<li class="first"><i class="fa fa-mobile" aria-hidden="true">
</i>+420 603 585 561</li>
<li><a href="mailto:obchod#gastronerez.cz" title="E-mail"><i
class="fa fa-envelope-o" aria-hidden="true"></i>obchod#gastronerez.eu</a></li>
</ul>
<ul class="lang">
<li class="cz">CZ</li>
<li class="line">|</li>
<li class="sk">SK</li>
</ul>
</div>
</div>
<div id="categories" class="categories">
<div class="categoriesContainer">
<div class="icons">
<div class="optionlink"><a href="" title="Pracovní stoly">
<div class="option">
<div class="white">
<div class="spriteshape-2"></div>
</div>
<div class="description special"><span>Pracovní stoly</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Stolové nástavby">
<div class="option">
<div class="gray">
<div class="spriteshape-3"></div>
</div>
<div class="description special"><span>Stolové nástavby</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Pracovní desky">
<div class="option">
<div class="gray">
<div class="spriteshape-4"></div>
</div>
<div class="description special"><span>Pracovní desky</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Mycí stoly">
<div class="option">
<div class="gray">
<div class="spriteshape-5"></div>
</div>
<div class="description"><span>Mycí stoly</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Regály">
<div class="option">
<div class="gray">
<div class="spriteshape-6"></div>
</div>
<div class="description"><span>Regály</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Skříně">
<div class="option">
<div class="gray">
<div class="spriteshape-7"></div>
</div>
<div class="description"><span>Skříně</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Police">
<div class="option">
<div class="gray">
<div class="spriteshape-8"></div>
</div>
<div class="description"><span>Police</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Podstavce">
<div class="option">
<div class="gray">
<div class="spriteshape-9"></div>
</div>
<div class="description"><span>Podstavce</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Pojezdové dráhy">
<div class="option">
<div class="gray">
<div class="spriteshape-10"></div>
</div>
<div class="description special"><span>Pojezdové dráhy</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Výlevky">
<div class="option">
<div class="gray">
<div class="spriteshape-11"></div>
</div>
<div class="description"><span>Výlevky</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Digestoře">
<div class="option">
<div class="gray">
<div class="spriteshape-12"></div>
</div>
<div class="description"><span>Digestoře</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Vyhřívané">
<div class="option">
<div class="gray">
<div class="spriteshape-13"></div>
</div>
<div class="description"><span>Vyhřívané</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Chladící">
<div class="option">
<div class="gray">
<div class="spriteshape-14"></div>
</div>
<div class="description"><span>Chladící</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Transportní zařízení">
<div class="option">
<div class="gray">
<div class="spriteshape-15"></div>
</div>
<div class="description special"><span>Transportní zařízení</span></div>
</div>
</a></div>
</div>
</div>
</div>
CSS:
.page{
margin: 0 auto;
position: relative;
}
.header{
background-color: white;
min-height: 125px;
height: 100%;
}
.header .headerContainer{
max-width: 1800px;
width: 100%;
min-height: 125px;
height: 100%;
margin: 0 auto;
position: relative;
}
.header h1{
display: inline-block;
width: 249px;
height: 85px;
margin: 0;
margin-top: 21px;
margin-left: 28px;
float: left;
}
.header h1 span{
display: none;
}
.header ul{
padding: 0;
margin: 0;
}
.header .menu{
font-size: 15px;
font-weight: 600;
display: inline-block;
margin: 0;
position: relative;
top: 56px;
left: 122px;
float: left;
}
.header .menu li{
text-decoration: none;
display: inline-block;
margin-right: 46px;
}
.header .menu li:hover{
color: #00aab9;
border-bottom: 3px solid;
}
.header .menu li a{
text-decoration: none;
color: black;
}
.header .menu .active{
color: #00aab9;
border-bottom: 3px solid;
}
.header .contact{
font-family: 'Muli';
font-size: 15px;
font-weight: 400;
display: inline-block;
margin: 0;
position: relative;
top: 56px;
left: 404px;
float: left;
}
.header .contact li{
text-decoration: none;
display: inline-block;
color: #454545;
}
.header .contact li.first{
margin-right: 16px;
}
.header .contact li i{
font-size: 20px;
margin-right: 10px;
color: #00aab9;
}
.header .contact a{
text-decoration: none;
color: #454545;
}
.header .lang{
font-size: 15px;
font-weight: bold;
display: inline-block;
margin: 0;
position: relative;
top: 56px;
left: 474px;
float: left;
}
.header .lang li{
text-decoration: none;
display: inline-block;
}
.header .lang li.cz{
color: #00aab9;
margin-right: 16px;
}
.header .lang li.line{
margin-right: 19px;
color: #c0c0c0;
}
.header .lang li.sk{
color: #3b3b3b;
}
.header .lang li a{
text-decoration: none;
}
.header .lang li.cz a{
color: #00aab9;
}
.header .lang li.sk a{
color: #3b3b3b;
}
.categories{
min-height: 230px;
height: 100%;
background-color: #13bcca;
position: relative;
overflow: auto;
}
.categories .categoriesContainer{
max-width: 1800px;
width: 100%;
margin: 0 auto;
position: relative;
}
.categories .icons{
max-width: 1233px;
width: 100%;
margin: 0 auto;
min-height: 150px;
height: 100%;
padding-top: 36px;
}
.categories .optionlink{
height: 59px;
width: 175px;
display: inline-block;
margin-bottom: 29px;
float: left;
}
.categories .icons a{
text-decoration: none;
}
.categories .option{
height: 59px;
width: 175px;
display: inline-block;
margin-bottom: 29px;
float: left;
}
.categories .icons .white, .categories .icons .gray{
display: inline-block;
float: left;
line-height: 70px;
}
.categories .icons .white{
width: 59px;
height: 59px;
background-color: #fff;
border-radius: 50%;
text-align: center;
}
.categories .icons .gray{
width: 59px;
height: 59px;
background-color: #3a3c48;
border-radius: 50%;
text-align: center;
}
.categories .description{
margin-left: 72px;
line-height: 1px;
width: 69px;
text-align: left;
position: relative;
top: 21px;
}
.categories .special{
top: 14px;
}
.categories div span{
font-weight: bold;
color: white;
font-size: 13px;
text-align: left;
line-height: 16px;
}
It's looking like this now: https://imgur.com/a/iZOF5
And I need it look like this: https://imgur.com/a/SAQ5O
Any overflow doesn't work, the second picture has strict height, but I need it being adjusted according to size of window.
Does anybody know where is the problem? Thanks for solutions.
You need to update the categories class according to this:
.categories{
min-height: 230px;
height: 100%;
background-color: #13bcca;
position: relative;
overflow: auto;
width: 100%;
}
Specify the width attribute.
No need to change display attributes or something, you only need to update the width of the container. However, I recommend you to have only one container class and please avoid that "div" hell - it's really hard to read such a code (you probably don't need to have 5 nested div's in one block of code).
I have a main page of my site
And I have been trying to get the images to be even spaced and centered on the page but have been failing.
{
padding: 50px;
font-family: sans-serif;
color: #666;
line-height: 18px;
font-size: 12px;
}
a
{
color: #06f;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
.button
{
background-color: #eaeaea;
padding: 5px 9px;
display: inline-block;
color: #06f;
font-weight: normal;
border-radius: 2px;
cursor: pointer;
border: none;
font-family: sans-serif;
font-size: 12px;
text-decoration: none;
}
.button:hover
{
background-color: #06f;
color: #fff;
}
.headline
{
font-size: 12px;
color: #333;
margin-bottom: 10px;
}
.content
{
max-width: 650px;
}
.grid-wrapper
{
float: left;
margin-top: 30px;
padding-left: 125px;
}
.grid-item
{
display: block;
float: left;
width: 100%;
padding-top: 25%;
max-width: 250px;
}
.grid-content
{
padding: 10px;
}
.grid-image-link
{
display: block;
height: 290px;
}
.grid-image
{
display: block;
width: 100%;
height: 290px;
}
#albumView{
text-align: center;
background-color: #000000;
}
#indexMain{
text-align: center;
}
<body>
<div>
<ul class="grid-wrapper">
<li class="grid-item">
<div class="grid-content">
<a class="grid-image-link" href="triangulation/triangulation.html">
<img class="grid-image" src="http://placehold.it/290x290"/>
</a>
<p>
repository on github
</p>
</div>
</li>
<li class="grid-item">
<div class="grid-content">
<a class="grid-image-link" href="distort-grid/distort-grid.html">
<img class="grid-image" src="http://placehold.it/290x290" alt="manipulated image of president lincoln" />
</a>
<p>
repository on github
</p>
</div>
</li>
<li class="grid-item">
<div class="grid-content">
<a class="grid-image-link" href="contrastdistort/contrastdistort.html">
<img class="grid-image" src="http://placehold.it/290x290" />
</a>
<p>
repository on github
</p>
</div>
</li>
</ul>
</div>
</body>
I have attempted to use % to get it just right, but it never seems to adjust correctly.
I am stumped and could use some help, is there anything I am missing?
Thanks
you can use display:flex and to evenly space it justify-content:space-between and to center it use margin:auto
check this snippet
body {
padding: 50px;
font-family: sans-serif;
color: #666;
line-height: 18px;
font-size: 12px;
}
div {
width: 300px;
margin: auto;
}
ul {
display: flex;
justify-content: space-between;
list-style-type: none;
}
<body>
<div>
<ul class="grid-wrapper">
<li class="grid-item">
<div class="grid-content">
<a class="grid-image-link" href="triangulation/triangulation.html">
<img class="grid-image" src="http://placehold.it/290x290" />
</a>
<p>
repository on github
</p>
</div>
</li>
<li class="grid-item">
<div class="grid-content">
<a class="grid-image-link" href="distort-grid/distort-grid.html">
<img class="grid-image" src="http://placehold.it/290x290" alt="manipulated image of president lincoln" />
</a>
<p>
repository on github
</p>
</div>
</li>
<li class="grid-item">
<div class="grid-content">
<a class="grid-image-link" href="contrastdistort/contrastdistort.html">
<img class="grid-image" src="http://placehold.it/290x290" />
</a>
<p>
repository on github
</p>
</div>
</li>
</ul>
</div>
</body>
Hope it helps
Remove float:left from both ul and li and add padding:0; in ul
body
{
padding: 50px;
font-family: sans-serif;
color: #666;
line-height: 18px;
font-size: 12px;
}
a
{
color: #06f;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
.button
{
background-color: #eaeaea;
padding: 5px 9px;
display: inline-block;
color: #06f;
font-weight: normal;
border-radius: 2px;
cursor: pointer;
border: none;
font-family: sans-serif;
font-size: 12px;
text-decoration: none;
}
.button:hover
{
background-color: #06f;
color: #fff;
}
.headline
{
font-size: 12px;
color: #333;
margin-bottom: 10px;
}
.content
{
max-width: 650px;
}
.grid-wrapper
{/*
float: left;*/
padding:0;
margin-top: 30px;
padding-left: 125px;
}
.grid-item
{
display: block;/*
float: left;*/
width: 100%;
padding-top: 25%;
max-width: 250px;
}
.grid-content
{
padding: 10px;
}
.grid-image-link
{
display: block;
height: 290px;
}
.grid-image
{
display: block;
width: 100%;
height: 290px;
}
#albumView{
text-align: center;
background-color: #000000;
}
#indexMain{
text-align: center;
}
<body>
<div>
<ul class="grid-wrapper">
<li class="grid-item">
<div class="grid-content">
<a class="grid-image-link" href="triangulation/triangulation.html">
<img class="grid-image" src="http://placehold.it/290x290"/>
</a>
<p>
repository on github
</p>
</div>
</li>
<li class="grid-item">
<div class="grid-content">
<a class="grid-image-link" href="distort-grid/distort-grid.html">
<img class="grid-image" src="http://placehold.it/290x290" alt="manipulated image of president lincoln" />
</a>
<p>
repository on github
</p>
</div>
</li>
<li class="grid-item">
<div class="grid-content">
<a class="grid-image-link" href="contrastdistort/contrastdistort.html">
<img class="grid-image" src="http://placehold.it/290x290" />
</a>
<p>
repository on github
</p>
</div>
</li>
</ul>
</div>
</body>