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>
Related
I believe my understanding of positioning is causing me multiple issues:
'Donate' in the navigation header keeps overflowing and not staying inline. I have experimented with display:inline-block, but it still is not working. I am trying to ensure that the navbar elements are responsive to different-sized pages and stay in the same line.
'Our work' section will not center in the middle of the page, even when I tried margin:auto
Unable to align the elements in the problem section correctly. I would like row2 to be 10% below row1, so it's like a 2x2 table configurement.
I've been struggling with this for a while, so if anyone has any ideas on how to solve any of these and suggestions moving forward - it would be well appreciated!
*{
margin:0;
padding:0;
}
header{
font-family:'Ubuntu';
}
body{
font-family: 'Montserrat';
text-align: left;
}
/* Header */
header{
position: fixed;
width:100%;
height:122px;
background:#FFFFFF;
z-index:1;
}
.wrapper{
width:90%;
margin:0 auto;
}
.logo{
width:30%;
float: left;
text-align:left;
line-height: 122px;
}
nav{
float: center;
line-height: 122px;
}
nav a{
font-family:'Ubuntu';
font-weight: 500;
font-size:calc(50px+1vw);
line-height: calc(23px+1vw);
text-decoration: none;
letter-spacing: 4px;
color:#616161;
padding: 20px 20px;
}
.links:hover {
background:#F3EA65;
}
.CTA{
padding: 15px 100px;
border: none;
background: #F28A31 ;
border-radius: 15px ;
font-family: Ubuntu;
font-style: normal;
font-weight: bold;
line-height: calc(13px+1wv);
font-size: calc(20px+1vw);
color: #FFFFFF;
text-align: center;
letter-spacing: 0.5px;
display: inline-flex;
}
.CTA:hover {
background-color: #F3EA65;
color: #FFFFFF;
cursor: pointer;
}
/*Our work*/
#ourwork{
background:#fff;
position:absolute;
width: 932px;
height: 92px;
top: 700px;
left: 50%;
padding:10px;
}
/*Problem section */
#problembackground{
position: absolute;
width: 100%;
height: 561px;
top:852px;
background: linear-gradient(90.14deg, #DE5135 -20.57%, #6975A7 88.83%);
}
#problemcontent{
position: relative;
top: 25%;
left:5%;
}
.row1{
position: relative;
display: inline-block;
padding-right:10%
}
.row2{
position: relative;
display: inline-block;
top:10%;
}
<body>
<header>
<div class="wrapper">
<div class="logo">
<a href="....">
<img src="Home.png" alt="Logo" width="25%";>
</a>
</div>
<nav>
<a class="links" href="#">about</a>
<a class="links" href="#">our team</a>
<a class="links" href="#">who we help</a>
<a class="links" href="#">get involved</a>
<a href="#">
<button class="CTA">Contact</button>
</a>
<a href="#">
<button class="CTA">Donate</button>
</a>
</nav>
</div>
</header>
<main>
<section>
<div id="ourwork">
<h4>OUR WORK</h4><br>
<p id="largertext">
Youth Housing Project Association Inc. (YHP) provides supported, unsupervised,<br> medium-term accommodation in Brisbane to young people aged from 16-21 years old<br> who are homeless or at risk of homelessness.
</p>
</div>
</section>
<section>
<div id="problembackground">
<div id="problemcontent">
<h2 id="the problem">the problem</h2><br>
<div id="p1" class="row1">
<h3>1 in 5</h3>
<p>young Australians report high levels of<br> psychological distress</p>
</div>
<div id="p2" class="row1">
<h3>28 000</h3>
<p>12 to 24-year olds are homeless on any given<br> night in Australia</p>
</div>
<div id="p3" class="row2">
<h3>1 in 6</h3>
<p>16 to 24-year olds live below the poverty line</p>
</div>
<div id="p4" class="row2">
<h3>35%</h3>
<p>of 16 to 24-year olds have experienced<br> domestic violence at home</p>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
font-family: 'Ubuntu';
}
body {
font-family: 'Montserrat';
text-align: left;
padding-top: 122px;
}
/* Header */
header {
position: fixed;
width: 100%;
height: 122px;
background: #FFFFFF;
z-index: 1;
text-align: center;
top: 0;
}
.wrapper {
max-width: 90%;
margin: 0 auto;
}
.logo {
width: 200px;
float: left;
text-align: left;
line-height: 122px;
}
nav {
float: right;
line-height: 122px;
width: calc(100% - 200px);
text-align: right;
}
nav a {
font-family: 'Ubuntu';
font-weight: 500;
font-size: calc(50px+1vw);
line-height: calc(23px+1vw);
text-decoration: none;
letter-spacing: 4px;
color: #616161;
padding: 20px 20px;
}
.links:hover {
background: #F3EA65;
}
.CTA {
padding: 15px 50px;
border: none;
background: #F28A31;
border-radius: 15px;
font-family: Ubuntu;
font-style: normal;
font-weight: bold;
line-height: calc(13px+1wv);
font-size: calc(20px+1vw);
color: #FFFFFF;
text-align: center;
letter-spacing: 0.5px;
display: inline-flex;
}
.CTA:hover {
background-color: #F3EA65;
color: #FFFFFF;
cursor: pointer;
}
main,
section {
float: left;
width: 100%;
}
/*Our work*/
.ourworksec {
background: #fff;
padding: 100px 25px;
}
#ourwork {
width: 100%;
max-width: 620px;
margin: 0 auto;
text-align: center;
}
/*Problem section */
h2#theproblem {
padding: 20px;
}
#problembackground {
width: 100%;
float: left;
padding: 100px 20px;
background: linear-gradient(90.14deg, #DE5135 -20.57%, #6975A7 88.83%);
}
#problemcontent {
position: relative;
}
.row1 {
position: relative;
display: inline-block;
padding: 20px;
float: left;
width: 50%;
}
.row2 {
position: relative;
float: left;
margin-top: 50px;
padding: 20px;
width: 50%;
}
#media only screen and (max-width: 1200px) {
.logo {
width: 80px;
}
nav {
width: calc(100% - 80px);
}
nav a {
padding: 15px 10px;
}
.CTA {
padding: 15px 30px;
}
}
<header>
<div class="wrapper">
<div class="logo">
<a href="....">
<img src="Home.png" alt="Logo" width="25%" ;>
</a>
</div>
<nav>
<a class="links" href="#">about</a>
<a class="links" href="#">our team</a>
<a class="links" href="#">who we help</a>
<a class="links" href="#">get involved</a>
<a href="#">
<button class="CTA">Contact</button>
</a>
<a href="#">
<button class="CTA">Donate</button>
</a>
</nav>
</div>
</header>
<main>
<section class="ourworksec">
<div id="ourwork">
<h4>OUR WORK</h4><br>
<p id="largertext">
Youth Housing Project Association Inc. (YHP) provides supported, unsupervised,<br> medium-term accommodation in Brisbane to young people aged from 16-21 years old<br> who are homeless or at risk of homelessness.
</p>
</div>
</section>
<section>
<div id="problembackground">
<div id="problemcontent">
<h2 id="theproblem">the problem</h2><br>
<div id="p1" class="row1">
<h3>1 in 5</h3>
<p>young Australians report high levels of<br> psychological distress</p>
</div>
<div id="p2" class="row1">
<h3>28 000</h3>
<p>12 to 24-year olds are homeless on any given<br> night in Australia</p>
</div>
<div id="p3" class="row2">
<h3>1 in 6</h3>
<p>16 to 24-year olds live below the poverty line</p>
</div>
<div id="p4" class="row2">
<h3>35%</h3>
<p>of 16 to 24-year olds have experienced<br> domestic violence at home</p>
</div>
</div>
</div>
</section>
</main>
Regarding this one you simply don't have enough space at certain window widths to display them all, so you need to make their sizes responsive. #media queries at certain widths is one option.
"Our work" is absolutely positioned, which messes with things like margin: 0 auto to center things. In general you use position: absolute WAY too often. Honestly you could avoid it all together looking at your page so far. position: absolute is a pain to work with when you come back to your project at a later stage too.
Here your problem is that the third element is still on the same line because you set display: inline-block. You could wrap both rows each in another div (which are display: block by default). Also work with margin-bottom here in my opinion. You are making it way harder with the way you use several position properties.
Here: I removed the floats and used flexbox and grid
Quick note: This website is not responsive, so pls open it in the full window not hte mini window. If you want a responsive site, dang man, that's a big request
Code:
<body>
<style>
*{
margin:0;
padding:0;
}
header{
font-family:'Ubuntu';
}
body{
font-family: 'Montserrat';
text-align: left;
}
/* Header */
header{
position: fixed;
width:100%;
height:122px;
background:#ffffff;
z-index:1;
}
.wrapper{
width:90%;
margin:0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.logo{
text-align:left;
line-height: 100px;
height: fit-content;
display: inline-block;
width: fit-content;
padding: 30px;
margin: 0px;
}
.logo image {
width: 200px;
height: 200px;
}
.wrapper a{
font-family:'Ubuntu';
font-weight: 500;
font-size:calc(50px+1vw);
line-height: calc(23px+1vw);
text-decoration: none;
letter-spacing: 4px;
color:#616161;
padding: 20px 20px;
}
.links:hover {
background:#F3EA65;
}
.CTA{
padding: 15px 100px;
border: none;
background: #F28A31 ;
border-radius: 15px ;
font-family: Ubuntu;
font-style: normal;
font-weight: bold;
line-height: calc(13px+1wv);
font-size: calc(20px+1vw);
color: #FFFFFF;
text-align: center;
letter-spacing: 0.5px;
display: inline-flex;
}
.CTA:hover {
background-color: #F3EA65;
color: #FFFFFF;
cursor: pointer;
}
/*Our work*/
#ourwork{
background:#fff;
position:absolute;
width: 932px;
height: 92px;
top: 700px;
left: 300px;
padding:10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#work{
display: flex;
justify-content: center;
align-items: center ;
}
/*Problem section */
#problembackground{
position: absolute;
width: 100%;
height: 561px;
top:852px;
background: linear-gradient(90.14deg, #DE5135 -20.57%, #6975A7 88.83%);
}
#problemcontent{
position: relative;
top: 25%;
left:5%;
}
#the-problem{
margin: auto;
width: 300px;
}
.row1{
position: relative;
display: inline-block;
padding-right:10%;
margin: auto;
}
.row2{
position: relative;
display: inline-block;
top:10%;
margin: auto;
}
.problem{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
li{
list-style: none;
}
</style>
<header>
<ul class="wrapper">
<div class="logo">
<a href="....">
<img src="/logo.png" alt="Logo" width="25%";>
</a>
</div>
<li> <a class="links" href="#">about</a> </li>
<li> <a class="links" href="#">our team</a> </li>
<li> <a class="links" href="#">who we help</a> </li>
<li> <a class="links" href="#">get involved</a> </li>
<button class="CTA">Contact</button>
</a>
<a href="#">
<button class="CTA">Donate</button>
</a>
</ul>
</header>
<main>
<section id="work">
<div id="ourwork">
<h4>OUR WORK</h4><br>
<p id="largertext">
Youth Housing Project Association Inc. (YHP) provides supported, unsupervised,<br> medium-term accommodation in Brisbane to young people aged from 16-21 years old<br> who are homeless or at risk of homelessness.
</p>
</div>
</section>
<section>
<div id="problembackground">
<div id="problemcontent">
<h2 id="the-problem">the problem</h2><br>
<div class="problem">
<div id="p1" class="row1">
<h3>1 in 5</h3>
<p>young Australians report high levels of<br> psychological distress</p>
</div>
<div id="p2" class="row1">
<h3>28 000</h3>
<p>12 to 24-year olds are homeless on any given<br> night in Australia</p>
</div>
<div id="p3" class="row2">
<h3>1 in 6</h3>
<p>16 to 24-year olds live below the poverty line</p>
</div>
<div id="p4" class="row2">
<h3>35%</h3>
<p>of 16 to 24-year olds have experienced<br> domestic violence at home</p>
</div>
</div>
</div>
</div>
Thank you again for your help with review my code and give some advice that I can use to move forward.
I am having trouble figuring out how to expand the services section below to inherit the hero section width. The image below display how the website looks right but the next image will show what the concept will look like.
CSS CODE
.navbar {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
border-left: 1px solid #181024;
border-right: 1px solid #181024;
border-bottom: 1px solid #181024;
background-color: #FAFAFA;
}
.nav {
display: flex;
}
.logo {
padding: 2em;
font-size: 1.2rem;
}
.site-nav-list {
padding: 2em;
}
.site-nav-list li {
padding-left: 65px;
}
.site-nav-list li a {
font-size: 1em;
}
.button {
width: 300px;
height: 100%;
background-color: #181024;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
color: white;
font-size: 0.9rem;
padding: 2em;
}
.button a {
color: #FFFFFF;
letter-spacing: 1%;
text-decoration: none;
}
.site-title {
position: fixed;
width: 100%;
}
.site-nav-list {
display: flex;
}
li {
list-style: none;
font-size: 1.2rem;
}
a {
text-decoration: none;
}
section {
display: flex;
}
h1 {
font-size: 5.5vw;
}
button {
border: none;
cursor: pointer;
}
.hero_services {
display: flex;
}
.hero_lists {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center
}
.hero_lists>.hero_content {
flex: 1 1 21%;
}
.hero_content {
padding: 1.4em;
font-size: 1vw;
height: 20vh;
border: 1px solid #181024;
background-color: #FAFAFA;
}
.hero_top-right {
display: flex;
flex-direction: column;
justify-content: center;
border-left: 1px solid #181024;
background-color: #FAFAFA;
padding: 5.16em;
}
.hero_top-left {
background-color: #E7DDF8;
border-left: 1px solid #181024;
height: 90vh;
}
.button_info {
margin-top: 3em;
text-transform: uppercase;
text-decoration: underline;
font-size: 1.3em;
}
.button_info button {
background-color: #181024;
text-transform: uppercase;
font-weight: bold;
font-size: 0.8em;
color: white;
padding: 1.3em 3em;
margin-right: 20px;
}
.hero_email {
background-color: #E7DDF8;
align-items: flex-end;
width: 100%;
}
input {
padding: 24px;
}
<div class="hero">
<section>
<div class="hero_top-right">
<h1>Bring your minority B2B business ideas to life with our services.</h1>
<div class="button_info">
<a href="#">
<button type="button" name="button">
Speak With A Perceptor
</button>
</a>
<a href="#">
Accelerate Program
</a>
</div>
</div>
<div class="hero_top-left">
<img src="{{ site.data.teams.team.ImgWorkHC }}" alt="Hunt For Careers Perview">
</div>
</section>
</div>
<div class="hero_services">
<div class="hero_lists">
<div class="hero_content">
<h3>test words</h3>
<p>test words</p>
<a href="">
<p>Learn More</p>
</a>
</div>
<div class="hero_content">
<h3>test words</h3>
<p>test words</p>
<a href="">
<p>Learn More</p>
</a>
</div>
<div class="hero_content">
<h3>test words</h3>
<p>test words</p>
<a href="">
<p>Learn More</p>
</a>
</div>
<div class="hero_content">
<h3>test words</h3>
<p>test words</p>
<a href="">
<p>Learn More</p>
</a>
</div>
<div class="hero_content">
<h3>test words</h3>
<p>test words</p>
<a href="">
<p>Learn More</p>
</a>
</div>
<div class="hero_content">
<h3>test words</h3>
<p>test words</p>
<a href="">
<p>Learn More</p>
</a>
</div>
</div>
<div class="hero_email">
<form class="" action="" method="">
<input type="email" name="email" placeholder="Email Address">
<button type="button" name="button">Send</button>
</form>
</div>
</div>
Here is one example of how you could structure your HTML for using flexbox.
Note I have stuck with using flex rows as the default, but as #isherwood has mentioned in his comment above, you can also use flex columns or a combination of both. Either way will work.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
color: #222;
}
.container {
height: 100vh;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
height: 10%;
padding: 0 50px;
border: 1px solid black;
}
.nav__list {
display: flex;
gap: 50px;
}
.nav__item {
list-style: none;
}
a:link {
text-decoration: none;
color: inherit;
}
.flex__container-main {
display: flex;
height: 90%;
border: 1px solid black;
}
.flex__container-left {
width: 70%;
height: 50%;
}
.flex__container-right {
width: 30%;
height: 100%;
}
.top__container {
height: 100%;
border: 1px solid black;
}
.bottom__container {
height: 100%;
border: 1px solid black;
}
.top__aside {
border: 1px solid black;
height: 90%;
}
.bottom__aside {
border: 1px solid black;
height: 10%;
}
.top__row {
display: flex;
height: 50%;
}
.bottom__row {
display: flex;
height: 50%;
}
.card {
border: 1px solid black;
width: 33.33%;
/*
4 cards per row would mean using
width: 25%;
*/
}
<body>
<div class="container">
<nav class="nav">
<!-- <img src="" alt=""> -->
<span>LOGO HERE</span>
<ul class="nav__list">
<li class="nav__item">Link 1</li>
<li class="nav__item">Link 2</li>
<li class="nav__item">Link 3</li>
<li class="nav__item">Link 4</li>
</ul>
</nav>
<div class="flex__container-main">
<div class="flex__container-left">
<div class="top__container">
<h1>TOP LEFT</h1>
</div>
<div class="bottom__container">
<div class="top__row">
<div class="card">
<h2>CARD</h2>
</div>
<div class="card">
<h2>CARD</h2>
</div>
<div class="card">
<h2>CARD</h2>
</div>
</div>
<div class="bottom__row">
<div class="card">
<h2>CARD</h2>
</div>
<div class="card">
<h2>CARD</h2>
</div>
<div class="card">
<h2>CARD</h2>
</div>
</div>
</div>
</div>
<div class="flex__container-right">
<div class="top__aside">
<h3>TOP ASIDE</h3>
</div>
<div class="bottom__aside">
<h3>BOTTOM ASIDE</h3>
</div>
</div>
</div>
</div>
</body>
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 these blocks of code that I want to stay center the entire time. But I am not sure how. I am hoping you guys could help me out here.
Here is the code
main {
width: 70%;
float: left;
clear: both;
border-right: 1px solid #331a00;
}
main ul {
margin-top: 1em;
margin: auto;
width: 100%;
margin: auto
}
.index {
float: left;
border: 3px solid #b88f61;
margin-top: 1em;
margin-right: 2em;
list-style: none;
}
main ul {
margin-left: 3em
}
.index:hover {
box-shadow: 1px 2px 3px 4px grey;
border: 3px solid #331a00;
}
.index a div h3 {
background-color: #331a00;
padding: .5em;
color: white;
text-decoration: none;
font-weight: bold;
font-size: 100%;
text-align: center;
text-decoration: underline
}
.index a {
text-decoration: none;
}
.index a div img {
width: 150px;
height: 150px;
margin-bottom: -5px
}
#mobile_index {
display: none;
}
#medusa {
background-color: white;
;
}
#intro {
width: 70%;
margin: auto;
margin-bottom: 4em;
clear: both;
font-size: 120%
}
#intro h4 {
text-align: center;
padding: 1em 0;
font-size: 150%;
}
#intro h1 a {
text-decoration: none;
}
#intro h1 {
text-align: center;
}
/*ASIDE*/
aside figure {
width: 100%
}
aside {
width: 24%;
float: right;
margin-top: 1.5em;
}
aside h3 {
font-family: "Times New Roman", serif;
font-size: 1.5em;
font-weight: bolder;
padding-bottom: .5em;
text-align: center;
}
.popular {
display: block;
background-color: #331a00;
color: white;
padding: .5em;
margin-bottom: .3em;
margin-right: .1em;
margin-left: 0;
font-weight: bold;
}
aside figure figcaption {
margin-bottom: 1em;
width: 100%;
background-color: #331a00;
color: white;
font-weight: bold;
padding: .5em 0;
font-size: 1.2vw
}
form {
width: 100%
}
input[type="submit"] {
margin: auto
}
<main>
<h1 id="page_title">The Compendium of Greek Mythology</h1>
<ul>
<li class="index">
<a href="Compendium Gods.html">
<div>
<img src="images/The Gods.jpg" alt="Gods">
<h3>Gods</h3>
</div>
</a>
</li>
<li class="index">
<a href="#" alt="Heroes">
<div>
<img src="images/The Heroes.JPG">
<h3>Heroes</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Monsters.png" id="medusa" alt="Monsters">
<h3>Beasts</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Titans.jpg" alt="The_Titans">
<h3>Titans</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Titans.jpg" alt="The_Giants">
<h3>Giants</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Gods.jpg" alt="The_Giants">
<h3>Nymphs</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Gods.jpg" alt="The_Giants">
<h3>Constellations</h3>
</div>
</a>
</li>
</ul>
</main>
<aside>
<div>
<form method="get" action="http://www.google.com/search">
<h3>Search the Compendium</h3>
<input type="search" name="q" size="" maxlength="" placeholder="Google Search">
<input type="hidden" name="domains" value="http://christiaanblom.coolpage.biz">
<input type="hidden" name="sitesearch" value="http://christiaanblom.coolpage.biz"><br>
<input type="submit" name="search" value="Search">
</form>
</div>
<div>
<h3>Popular</h3>
<p class="popular">Zeus</p>
<p class="popular">Poseidon</p>
<p class="popular">Hercules</p>
<p class="popular">Dragon</p>
<p class="popular">Cyclops</p>
<p class="popular">Ares</p>
<p class="popular">Kronos</p>
<p class="popular">Perseus</p>
<p class="popular">Giants</p>
<p class="popular">Gaia</p>
<p class="popular">Oranos</p>
</div>
</aside>
Right now, the .index list items are staying on the left hand side of the main element. I've tried various things, but none of them worked out, which is why I am coming to you guys.
Remove padding and margin from <ul>, add text-align:center;
Remove the float:left; from .index and add display:inline-block;
main {
width: 70%;
float: left;
clear: both;
border-right: 1px solid #331a00;
}
main ul {
margin-top: 1em;
margin: auto;
width: 100%;
margin: auto;
}
/* Remove the float: left; from .index and add display: inline-block; */
.index {
display: inline-block;
border: 3px solid #b88f61;
margin-top: 1em;
margin-right: 2em;
list-style: none;
}
/* Remove padding and margin from UL, add text-align:center; */
main ul {
margin-left: 0;
padding-left: 0;
text-align: center;
}
.index:hover {
box-shadow: 1px 2px 3px 4px grey;
border: 3px solid #331a00;
}
.index a div h3 {
background-color: #331a00;
padding: .5em;
color: white;
text-decoration: none;
font-weight: bold;
font-size: 100%;
text-align: center;
text-decoration: underline;
}
.index a {
text-decoration: none;
}
.index a div img {
width: 150px;
height: 150px;
margin-bottom: -5px
}
#mobile_index {
display: none;
}
#medusa {
background-color: white; /* Removed extra ; */
}
#intro {
width: 70%;
margin: auto;
margin-bottom: 4em;
clear: both;
font-size: 120%;
}
#intro h4 {
text-align: center;
padding: 1em 0;
font-size: 150%;
}
#intro h1 a {
text-decoration: none;
}
#intro h1 {
text-align: center;
}
/*ASIDE*/
aside figure {
width: 100%
}
aside {
width: 24%;
float: right;
margin-top: 1.5em;
}
aside h3 {
font-family: "Times New Roman", serif;
font-size: 1.5em;
font-weight: bolder;
padding-bottom: .5em;
text-align: center;
}
.popular {
display: block;
background-color: #331a00;
color: white;
padding: .5em;
margin-bottom: .3em;
margin-right: .1em;
margin-left: 0;
font-weight: bold;
}
aside figure figcaption {
margin-bottom: 1em;
width: 100%;
background-color: #331a00;
color: white;
font-weight: bold;
padding: .5em 0;
font-size: 1.2vw
}
form {
width: 100%
}
input[type="submit"] {
margin: auto
}
<main>
<h1 id="page_title">The Compendium of Greek Mythology</h1>
<ul>
<li class="index">
<a href="Compendium Gods.html">
<div>
<img src="images/The Gods.jpg" alt="Gods">
<h3>Gods</h3>
</div>
</a>
</li>
<li class="index">
<a href="#" alt="Heroes">
<div>
<img src="images/The Heroes.JPG">
<h3>Heroes</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Monsters.png" id="medusa" alt="Monsters">
<h3>Beasts</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Titans.jpg" alt="The_Titans">
<h3>Titans</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Titans.jpg" alt="The_Giants">
<h3>Giants</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Gods.jpg" alt="The_Giants">
<h3>Nymphs</h3>
</div>
</a>
</li>
<li class="index">
<a href="#">
<div>
<img src="images/The Gods.jpg" alt="The_Giants">
<h3>Constellations</h3>
</div>
</a>
</li>
</ul>
</main>
<aside>
<div>
<form method="get" action="http://www.google.com/search">
<h3>Search the Compendium</h3>
<input type="search" name="q" size="" maxlength="" placeholder="Google Search">
<input type="hidden" name="domains" value="http://christiaanblom.coolpage.biz">
<input type="hidden" name="sitesearch" value="http://christiaanblom.coolpage.biz"><br>
<input type="submit" name="search" value="Search">
</form>
</div>
<div>
<h3>Popular</h3>
<p class="popular">Zeus</p>
<p class="popular">Poseidon</p>
<p class="popular">Hercules</p>
<p class="popular">Dragon</p>
<p class="popular">Cyclops</p>
<p class="popular">Ares</p>
<p class="popular">Kronos</p>
<p class="popular">Perseus</p>
<p class="popular">Giants</p>
<p class="popular">Gaia</p>
<p class="popular">Oranos</p>
</div>
</aside>
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;
}