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).
Related
I have tried to re-produce an example. I have a button when it is hovered it displays UL element. But the problem I have is If you were to try to add more li elements to UL it jumps up or if deleted any li element from existing list it jumps down. I can't figure out what's causing this. Any help appreciated.
.icon-box {
display: inline-block;
top: 50%;
left: 50%;
transform: translate(-50%, -170%);
position: relative;
text-align: center;
font-size: 24px;
margin-top: 100px;
}
.btn {
text-decoration: none;
color: black;
background-color: #a05344;
padding: 15px;
}
.container {
display: flex;
}
#nav-like {
position: absolute;
top: 51.5%;
left: 50%;
transform: translate(-82%, -40%);
width: 250px;
background-color: #C05555;
margin-top: 20px;
padding: 10px 30px;
visibility: hidden;
}
.movie-img {
height: 100px;
margin-right: 30px;
}
.like-name,
.like-release-date {
color: #BBBFCA;
font: 14px Arial, sans-serif font-weight:400;
}
.like-release-date {
margin-left: 5px;
}
.icon-box:hover+#nav-like {
visibility: visible;
}
<div class="icon-box">
click me
</div>
<ul id="nav-like">
<li class="container">
<div class="like-img">
<img src="https://github.com/saedsq/MovieLibrary/blob/master/src/img/nat-1.jpg?raw=true" class="movie-img" alt="rambo">
</div>
<div class="like-name">
<h3>Rambo</h3>
</div>
<div class="like-release-date">
<h3>( 2006 )</h3>
</div>
</li>
<li class="container">
<div class="like-img">
<img src="https://github.com/saedsq/MovieLibrary/blob/master/src/img/nat-1.jpg?raw=true" class="movie-img" alt="rambo">
</div>
<div class="like-name">
<h3>Rambo</h3>
</div>
<div class="like-release-date">
<h3>( 2006 )</h3>
</div>
</li>
<li class="container">
<div class="like-img">
<img src="https://github.com/saedsq/MovieLibrary/blob/master/src/img/nat-1.jpg?raw=true" class="movie-img" alt="rambo">
</div>
<div class="like-name">
<h3>Rambo</h3>
</div>
<div class="like-release-date">
<h3>( 2006 )</h3>
</div>
</li>
<li class="container">
<div class="like-img">
<img src="https://github.com/saedsq/MovieLibrary/blob/master/src/img/nat-1.jpg?raw=true" class="movie-img" alt="rambo">
</div>
<div class="like-name">
<h3>Rambo</h3>
</div>
<div class="like-release-date">
<h3>( 2006 )</h3>
</div>
</li>
</ul>
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
Could someone explain me how do I center my text on bottom of the div container?
<div class="container-fluid">
<header id="welcome-header" class="row">
<div id="welcome-div">
<img src="img/logo.png" alt="logo">
<h1 class="welcome-text">
<span>Hi, I'm Robert. I design & build</span>
<br>
<span class="welcome-text-animation"></span>
</h1>
<div class="hire-button">
Yes, I'm available for hire
</div>
<div class="page-scroll ">
<a href="#welcome-div">
Learn more about what i do
<br>
<i class="fa fa-chevron-down"></i>
</a>
</div>
</div>
</header>
Im trying to get "Learn more about what i do" at the bottom of "welcome-header" row.
CSS :
#welcome-div {
min-height: 100%;
position: relative;
}
.page-scroll {
}
.page-scroll a {
font-family: Sansita;
text-decoration: none;
font-size: 20px;
color: aliceblue;
}
Sorry guys u get me wrong. I want the string to stick to bottom like bottom: 0px;
http://codepen.io/anon/pen/jBLaBX
Add position: relative to #welcome-header then position: absolute; bottom: 0; left: 0; right: 0 to .page-scroll to position the element at the bottom of #welcome-header, and your text-align: center rule will center the text horizontally.
#import url('https://fonts.googleapis.com/css?family=Sansita');
#welcome-header {
width: 100%;
height: 100vh;
background-image: url(img/background.jpg);
position: relative;
}
.welcome-text,
.welcome-text-animation {
font-family: Sansita;
text-align: center;
color: aliceblue;
font-size: 50px;
padding-top: 90px;
}
.home-logo {
display: block;
text-align: center;
}
.home-logo img {
display: inline-block;
padding: 2.5%;
width: 120px;
height: 120px;
margin-left: auto;
margin-right: auto;
display: block;
}
.hire-button {
text-align: center;
padding-top: 90px;
}
.hire-button a {
font-family: Sansita;
text-decoration: none;
color: aliceblue;
font-size: 25px;
border: 2px solid #FDCD3B;
border-radius: 50px;
padding: 1.2%;
transition: all 0.2s linear;
}
.hire-button a:hover {
background-color: #FDCD3B;
color: #2A3A3F;
padding-left: 3%;
padding-right: 3%;
}
#welcome-div {}
.page-scroll {
text-align: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.page-scroll a {
font-family: Sansita;
text-decoration: none;
font-size: 20px;
color: black;
}
<body>
<div class="container-fluid">
<header id="welcome-header" class="row">
<div id="welcome-div">
<img src="img/logo.png" alt="logo">
<h1 class="welcome-text">
<span>Hi, I'm Robert. I design & build</span>
<br>
<span class="welcome-text-animation"></span>
</h1>
<div class="hire-button">
Yes, I'm available for hire
</div>
<div class="page-scroll ">
<a href="#welcome-div">
Learn more about what i do
<br>
<i class="fa fa-chevron-down"></i>
</a>
</div>
</div>
</header>
<section id="about" class="row">
ABOUT CONTENT
</section>
<section id="skills" class="row">
SKILLS CONTENT
</section>
<section id="portfolio" class="row">
PORTFOLIO CONTENT
</section>
<section id="contact" class="row">
CONTACT CONTENT HERE
</section>
</div>
</body>
.page-scroll {
text-align:center;
}
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>
What in my css is making the big empty space at the bottom of my page under my content. as far as I know none of the content is tall enough to go down that far. its not happening to any of my other pages on the site I'm making.
HTML
<body>
<div id="wrapper">
<div id="header">
<a href="index.html"><div id="leftHeader">
<img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
<h1>Amanda Farrington</h1>
</div>
<div id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li>Notes</li>
</ul>
</div>
</div>
<div id="hero">
<div id="heroImage">
<img src="assets/trees.jpg" alt="trees" style="width:100%;height:10%">
</div>
<div id="overlay">
<h2>Amanda Farrington</h2>
<h3>Graphic Artist | Web Designer</h3>
View Resume
</div>
</div>
<a name="workJump"></a>
<div id="work">
<div id="label">
<h4>Work</h4>
</div>
<div id="leftColumn">
<div id= "p2article">
<a href="work1.html">
<img src="assets/work1p.jpg" alt="work one" style="width:100%;height:100%">
<div id= "articleinfo2">
<div id= "articleText2">
<span class="title3">Cut Paper Portrait</span>
</div>
</div>
</div>
<div id= "p2article">
<a href="work3.html">
<img src="assets/work3p.jpg" alt="Work 3" style="width:100%;height:100%">
<div id= "articleinfo2">
<div id= "articleText2">
<span class="title3">3D Christmas Eve Scene</span>
</div>
</div>
</div>
<div id= "p2article">
<a href="work5.html">
<img src="assets/work5p.jpg" alt="work 5" style="width:100%;height:100%">
<div id= "articleinfo2">
<div id= "articleText2">
<span class="title3">3D Clock Ad</span>
</div>
</div>
</div>
<div id= "p2article">
<a href="work7.html">
<img src="assets/work7p.jpg" alt="work 7" style="width:100%;height:100%">
<div id= "articleinfo2">
<div id= "articleText2">
<span class="title3">RIT Event Calendar Redesign</span>
</div>
</div>
</div>
</div>
<div id="rightColumn">
<div id= "p2article2">
<a href="work2.html">
<img src="assets/work2p.jpg" alt="work two" style="width:100%;height:100%">
<div id= "articleinfo2">
<div id= "articleText2">
<span class="title3">Charcoal Self-Portrait</span>
</div>
</div>
</div>
<div id= "p2article2">
<a href="work4.html">
<img src="assets/work4p.jpg" alt="Work 4" style="width:100%;height:100%">
<div id= "articleinfo2">
<div id= "articleText2">
<span class="title3">VH1 3D Bumper Animation</span>
</div>
</div>
</div>
<div id= "p2article2">
<a href="work6.html">
<img src="assets/work6p.jpg" alt="work 6" style="width:100%;height:100%">
<div id= "articleinfo2">
<div id= "articleText2">
<span class="title3">Beauty Is</span>
</div>
</div>
</div>
<div id= "p2article2">
<a href="work8.html">
<img src="assets/work8p.jpg" alt="work 8" style="width:100%;height:100%">
<div id= "articleinfo2">
<div id= "articleText2">
<span class="title3">Reporter Site Redesign</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0px;
padding: 0px;
background: white;
}
/*----------header styles-------------*/
#header {
color: #D7DADB;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size : 15px;
text-align: left;
width: 100%;
padding-left: 3em;
position: relative;
height: 15%;
box-sizing: border-box;
padding-top: 1em;
}
h1:hover
{
color: #2C3E50;
}
#header img
{
float: left;
padding-left: 3em;
}
h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}
#nav {
width: 50%;
margin:0;
padding:0;
text-align: right;
color: red;
font-size:20px;
float: right;
padding-right: 2em;
z-index: 98;
position: relative;
}
#nav ul {
padding: 1px;
}
#nav li {
display: inline;
padding: 38px;
}
#nav li a {
color: #2C3E50;
text-decoration: none;
}
#nav li a:hover {
color: #45CCCC;
}
/*----------hero image styles-------------*/
#hero{
padding-top: 25em;
width: 100%;
height: 30em;
position: relative;
z-index: 0;
}
#heroImage
{
top: 9%;
width: 100%;
z-index: 1;
position: absolute;
}
#overlay{
width: 34em;
top: -15%;
margin-left: 30%;
z-index: 2;
position: relative;
clear: left;
}
h2{
width: 100%;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 60px;
float: center;
color: white;
opacity: 1.0;
text-shadow: 2px 2px 3px #000000;
text-align: center;
}
h3{
width: 100%;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 30px;
color: #e5e5e5;
opacity: 1.0;
text-shadow: 2px 3px 2px #000000;
text-align: center;
}
a.down{
z-index: 99;
font-family: 'Roboto', sans-serif;
font-weight: 400;
text-decoration: none;
color: #181b1e;
background: #45CCCC;
position: relative;
padding: 0.6em 0.2em;
font-size: 1.2em;
-webkit-border-radius: 6px;
width: 30%;
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
a.down:hover{
text-decoration: underline;
color: white;
}
/*----------work main styles-------------*/
#leftColumn
{
width: 50%;
float: left;
height: 80em;
}
#rightColumn
{
width: 50%;
height: 80em;
float: right;
}
#label{
width: 100%;
height: 2em;
top: 10em;
}
#work{
width: 100%;
height: 10em;
position: relative;
top: -11em;
}
h4{
width: 100%;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 40px;
color: #45CCCC;
opacity: 1.0;
text-align: center;
}
#p2article2
{
width: 70%;
height:20em;
float: center;
display: block;
margin-left: auto;
margin-left: 60px;
margin-bottom: 10em;
margin-top: 5em;
border: 1px solid #cccccc;
}
#p2article2 img
{
border: 1px solid #cccccc;
}
a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
color: #45CCCC;
}
#p2article
{
width: 70%;
height:20em;
float: center;
display: block;
margin-left: auto;
margin-right: 60px;
margin-bottom: 10em;
margin-top: 5em;
border: 1px solid #cccccc;
}
#articleinfo2
{
width:100%;
height:10em;
display: block;
margin-bottom: 5em;
}
#articleText2{
width: 90%;
height:70%;
margin: 5%;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 30px;
color: black;
}
The titles at the bottom of the boxes have a large height set and a large margin-bottom on them like so
#articleinfo2 {
margin-bottom: 5em;
height: 10em
}
Removing that 10em height doesn't seem to affect much in this mockup state except it does make that gap much smaller
#work{
width: 100%;
height: 10em;
position: relative; /*TRY REMOVING THIS*/
top: -11em;
}