I would like to change the background color of the grid boxes based on what's selected in the dropdown, but I'm at a loss. If A/3 is selected, boxes 1-3 would change. If C/10 is selected, boxes 1-10 would change. This is my first web-development project, so I may be approaching this wrong. If so, please let me know. Thanks for any help!
.menu
{
overflow: hidden;
background-color: #29648A;
margin:0 auto;
}
.dropdown
{
float: left;
overflow: hidden;
width: 25%;
}
.button
{
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 10px 10px;
background-color: inherit;
width: 100%;
text-align: center;
}
.dropdown:hover
{
background-color: #2E9CCA;
}
.list
{
display: none;
position: absolute;
background-color: #F9F9F9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
width: 24.65%;
}
.list a
{
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}
.list a:hover
{
background-color: #ddd;
}
.dropdown:hover .list
{
display: block;
}
.wrapper
{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 100px);
grid-gap: 10px;
max-width: 400px;
margin: 50px auto;
}
.box
{
background-color: #AAABB8;
color: white;
text-align: left;
font-size: 20px;
padding: 10px 10px;
border-radius: 5px;
max-width: 100px;
}
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
</head>
<body>
<div class="menu">
<div class="dropdown">
<button class="button">A</button>
<div class="list">
1
2
3
4
</div>
</div>
<div class="dropdown">
<button class="button">B</button>
<div class="list">
5
6
7
8
</div>
</div>
<div class="dropdown">
<button class="button">C</button>
<div class="list">
9
10
11
12
</div>
</div>
<div class="dropdown">
<button class="button">D</button>
<div class="list">
13
14
15
16
</div>
</div>
</div>
<section>
<div class="wrapper">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
<div class="box">14</div>
<div class="box">15</div>
<div class="box">16</div>
</div>
</section>
</body>
</html>
You can use addClass() & removeClass() using jquery
Add some if statements with different id to each box and use that as a selector to connect each column to its own box!
Give it a try and I can help if needed.
Related
As you can see from the title I want to know how to position this menu that I will show to you like on this UI design that I have made.
Here is the examples:
And here is how I tried to do it.
This is the code so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#300&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div class="root flexbox">
<div class="navbar flexbox">
<div class="container flexbox align-center">
<img src="Slike/logo-avion.png" alt="">
<div class="right-column flexbox align-center">
<div class="navbar__navigation">
Početna
Destinacija
O nama
Partner
</div>
<div class="order-btn flexbox align-center">
Prijavi se!
</div>
<div class="konj flexbox align-center">
Registriraj se!
</div>
</div>
</div>
</div>
<div class="content">
<div class="container flexbox">
<div class="content__left_column">
<h2>Ostvarite svoje
putovanje iz snova!</h2>
<p>Potraži svoj odmor na pravom mjestu!</p>
<div class="linija">
<span class="linija crna-linija"></span>
</div>
<div class="kvadrati">
<div class="kvadrati prvi flexbox align-center ">
<p>Lokacija</p>
<img src="Slike/Vector.png" alt="">
</div>
<div class="kvadrati drugi flexbox align-center ">
<p>Aktivnost</p>
<img src="Slike/Vector.png" alt="">
</div>
<div class="kvadrati treci flexbox align-center ">
<p>Ocjena</p>
<img src="Slike/Vector.png" alt="">
</div>
<div class="kvadrati cetvrti flexbox align-center">
<p>Datum</p>
<img src="Slike/Vector.png" alt="">
</div>
</div>
</div>
<div class="content__right_column">
<img src="Slike/template_3_-_copy_dribble1dribble_1.png" alt="">
</div>
</div>
</div>
</div>
</body>
</html>
The div class kvadrati is used to make this menu. I know this may seem complicated to describe but I hope you know what I meant by asking this question. I tried using flexbox display and grid still failed. I am not a beginner in CSS but clearly this is something that I have a problem with.
Here is the CSS code:
.prvi {
width: 22rem;
height: 5.2rem;
border-radius: 0.6rem;
border: 0.1rem solid #afb0b9;
}
EDIT: Here is all of the styles.css
html {
font-size: 10px;
}
* {
margin: 0;
padding: 0;
font-family: Inter;
}
.right-column {
margin-left: auto;
}
body {
background-color: #ffffff;
line-height: 3rem;
}
.container {
width: 1300px;
margin: auto;
}
.root {
font-size: 1.2rem;
flex-direction: column;
min-height: 100%;
}
.flexbox {
display: flex;
}
.align-center {
align-items: center;
}
a {
text-decoration: none;
}
html, body {
height: 100%;
}
.navbar {
margin-top: 20px;
}
.navbar__navigation a {
color: #b8becd;
display: inline-flex;
font-size: 1.5rem;
font-weight: 400;
margin-right: 20px;
}
.order-btn {
height: 4.4rem;
margin-left: 50px;
border-radius: 0.8rem;
border: 0.1rem solid #57d2a3;
margin-right: 15px;
}
.order-btn a {
padding: 21px 24px;
}
.navbar__navigation .active {
color: #202336;
}
.konj {
height: 4.4rem;
border-radius: 0.8rem;
background-color: #57d2a3;
}
.konj a {
color: #ffffff;
padding: 21px 24px;
}
.content__left_column {
margin-left: 20px;
margin-top: 200px;
}
.content__right_column {
margin-top: 90px;
margin-left: auto;
}
.content__left_column h2 {
width: 55.9rem;
color: #202336;
font-family: "Playfair Display";
font-size: 6.4rem;
font-weight: 700;
line-height: 8rem;
}
.content__left_column p {
margin-top: 69px;
width: 40rem;
color: #202336;
font-size: 2.2rem;
font-weight: 400;
}
.linija {
margin-top: 21px;
width: 3.2rem;
height: 0.3rem;
border-radius: 0.4rem;
background-color: #202336;
}
.kvadrati {
margin-top: 20px;
display: grid;
grid-template: 70px 70px / 226px 226px;
width: 226px;
height: 52px;
grid-gap: 20px;
padding: 16px;
}
.kvadrati div {
border-radius: 10px;
border: 1px solid gray;
}
A couple issues with your code
<div class="kvadrati">
<div class="kvadrati prvi flexbox align-center ">
<p>Lokacija</p>
<img src="Slike/Vector.png" alt="">
</div>
<div class="kvadrati drugi flexbox align-center ">
<p>Aktivnost</p>
<img src="Slike/Vector.png" alt="">
</div>
<div class="kvadrati treci flexbox align-center ">
<p>Ocjena</p>
<img src="Slike/Vector.png" alt="">
</div>
<div class="kvadrati cetvrti flexbox align-center">
<p>Datum</p>
<img src="Slike/Vector.png" alt="">
</div>
</div>
As you can see both the grid div <div class="kvadrati"> and the items <div class="kvadrati drugi flexbox align-center "> share the same class kvadrati. As a result they both create a 2x2 grid. You should remove the kvadrati class on the 4 grid items.
.content__left_column p {
margin-top: 69px;
width: 40rem;
color: #202336;
font-size: 2.2rem;
font-weight: 400;
}
And in this part of the code you give the <p> elements a margin-top: 69px;. This causes the <p> Items in your grid to move down 69 pixels. You could change <p>Potraži svoj odmor na pravom mjestu!</p> to a <h3> style it using a class so it doesn't affect the other <p> elements.
Alternatively, since you probably want a dropdown list, you can avoid this by using <select> tags instead. See here for a guide on creating a custom select.
-----------
Here is a simple example on how to use a grid to create a 2x2.
If you need more information on how to use css grid, read on w3schools or MDN
body {
margin: 0;
height: 80vh;
width: 80vw;
}
.grid {
display: grid;
grid-template: 1fr 1fr / 1fr 1fr;
width: 100%;
height: 100%;
grid-gap: 16px;
padding: 16px;
}
.grid div {
border-radius: 10px;
border: 1px solid gray;
}
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
I am attempting to recreate buttons that I have already created for my desktop site by using the same css styling on the mobile buttons. i have tried deleting the css one line at time and it doesn't seem to be the css (after all the same css works for the desktop buttons.
The problem: I want the buttons to be completely styled but instead it is leaving the stock button and adding the style as a border
#clients-title {
background: #f4f4f4;
padding: 1rem 0;
}
#clients-grid {
display: grid;
background: #f4f4f4;
text-align: center;
padding: 1rem 0;
margin: 0 10%;
grid-template-columns: 33.3% 33.3% 33.3%;
}
#clients-btn-grid {
display: grid;
background: #f4f4f4;
text-align: center;
padding: 1rem 0;
margin: 0 10%;
grid-template-columns: 33.3% 33.3% 33.3%;
}
#clients-btn-grid .cr-btn {
background-color: #4C9FCF;
margin-left: auto;
margin-right: auto;
margin-top: -40px;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
#clients-btn-grid .cr-btn:hover {
cursor: pointer;
background-color: #333;
}
#media(max-width: 800px) {
#clients-btn-grid {
display: none;
}
}
.mobile-grid {
background-color: #4C9FCF;
margin-left: auto;
margin-right: auto;
margin-top: -40px;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
#media(min-width: 800px) {
.mobile-grid {
display: none;
}
}
<section id="clients-title">
<div class="grid-items">
<h2 class="m-heading text-center">
<span id="client-r" class="text-primary">Client</span> Resources
</h2>
</div>
<div id="clients-grid">
<div class="grid-items">
<h2>
TD Ameritrade Access
<p></p>
</h2>
<div class="mobile-grid">
<button onclick="location.href='https://www.advisorclient.com/login'">LOGIN</button>
</div>
</div>
<div class="grid-items">
<h2>
American Equity
<p></p>
</h2>
<div class="mobile-grid">
<button onclick="location.href='https://client.american-equity.com/Login/login?ReturnUrl=%2F'">LOGIN</button>
</div>
</div>
<div class="grid-items">
<h2>
IRS-Where's My Refund?
<p></p>
</h2>
<div class="mobile-grid">
<button onclick="location.href='https://sa.www4.irs.gov/irfof/lang/en/irfofgetstatus.jsp'">LOGIN</button>
</div>
</div>
</div>
<div id="clients-btn-grid">
<div class="grid-items">
<button onclick="location.href='https://www.advisorclient.com/login'"class="cr-btn">LOGIN</button>
</div>
<div class="grid-items">
<button onclick="location.href='https://client.american-equity.com/Login/login?ReturnUrl=%2F'"class="cr-btn">LOGIN</button>
</div>
<div class="grid-items">
<button onclick="location.href='https://sa.www4.irs.gov/irfof/lang/en/irfofgetstatus.jsp'"class="cr-btn">LOGIN</button>
</div>
</div>
</section>
If you click full screen after running the code you can see the buttons displaying correct.
SOLUTION: Instead of targeting the div that the button is in I just needed target the parent div with buttons e.g
#clients-grid button {
background-color: #4C9FCF;
margin-left: auto;
margin-right: auto;
margin-top: -40px;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
You did not style buttons inside #clients-grid. I also recommend you to use the same button tags for desktop and mobile view, because it would be a desaster if you have to change a link for example.
Just delete the .mobile-grid div around the button tags and style the buttons like in the desktop view.
added
button {
background-color: #4C9FCF;
color: white;
border: none;
}
button:focus{
outline:none}
#clients-title {
background: #f4f4f4;
padding: 1rem 0;
}
#clients-grid {
display: grid;
background: #f4f4f4;
text-align: center;
padding: 1rem 0;
margin: 0 10%;
grid-template-columns: 33.3% 33.3% 33.3%;
}
#clients-btn-grid {
display: grid;
background: #f4f4f4;
text-align: center;
padding: 1rem 0;
margin: 0 10%;
grid-template-columns: 33.3% 33.3% 33.3%;
}
#clients-btn-grid .cr-btn {
background-color: #4C9FCF;
margin-left: auto;
margin-right: auto;
margin-top: -40px;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
#clients-btn-grid .cr-btn:hover {
cursor: pointer;
background-color: #333;
}
#media(max-width: 800px) {
#clients-btn-grid {
display: none;
}
}
.mobile-grid {
background-color: #4C9FCF;
margin-left: auto;
margin-right: auto;
margin-top: -40px;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
button {
background-color: #4C9FCF;
color: white;
border: navajowhite;
}
button:focus{
outline:none}
#media(min-width: 800px) {
.mobile-grid {
display: none;
}
}
<section id="clients-title">
<div class="grid-items">
<h2 class="m-heading text-center">
<span id="client-r" class="text-primary">Client</span> Resources
</h2>
</div>
<div id="clients-grid">
<div class="grid-items">
<h2>
TD Ameritrade Access
<p></p>
</h2>
<div class="mobile-grid">
<button onclick="location.href='https://www.advisorclient.com/login'">LOGIN</button>
</div>
</div>
<div class="grid-items">
<h2>
American Equity
<p></p>
</h2>
<div class="mobile-grid">
<button onclick="location.href='https://client.american-equity.com/Login/login?ReturnUrl=%2F'">LOGIN</button>
</div>
</div>
<div class="grid-items">
<h2>
IRS-Where's My Refund?
<p></p>
</h2>
<div class="mobile-grid">
<button onclick="location.href='https://sa.www4.irs.gov/irfof/lang/en/irfofgetstatus.jsp'">LOGIN</button>
</div>
</div>
</div>
<div id="clients-btn-grid">
<div class="grid-items">
<button onclick="location.href='https://www.advisorclient.com/login'"class="cr-btn">LOGIN</button>
</div>
<div class="grid-items">
<button onclick="location.href='https://client.american-equity.com/Login/login?ReturnUrl=%2F'"class="cr-btn">LOGIN</button>
</div>
<div class="grid-items">
<button onclick="location.href='https://sa.www4.irs.gov/irfof/lang/en/irfofgetstatus.jsp'"class="cr-btn">LOGIN</button>
</div>
</div>
</section>
I currently have an event tracker made using html and css. My issue is that I would like to get ride of display: flex; due to browser-compatibility issues. Is there an alternative to achieve the same result? I tried using display:inline-block because without flex all steps were coming in different lines.
HTML:
<div class="container">
<div class="row event">
<div class="col-xs-3 event-step">
<p class="event-stepnum">Step 1</p>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
<div class="col-xs-3 event-step complete">
<p class="event-stepnum">Step 2</p>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
<div class="col-xs-3 event-step">
<p class="event-stepnum">Step 3</p>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
</div>
</div>
CSS:
.event > .event-step {
padding: 0;
position: relative;
}
.event > .event-step .event-stepnum {
color: #595959;
font-size: 16px;
margin-bottom: 5px;
}
.steps .step-on,
.steps .step-done {
background-color: #1b7e28;
color: #1b7e28;
border: 1px solid transparent;
}
.progress {
position: relative;
border-radius: 0px;
height: 5px;
box-shadow: none;
margin: 20px 0;
}
.progress > .progress-bar {
width: 0px;
box-shadow: none;
background: #fbe8aa;
}
.event-step.complete > .progress > .progress-bar {
width: 100%;
}
.row {
display:flex;
}
JSFiddle Demo
Just replace the display:flex by display:inline-block and give your step divs a fixed width:
.event > .event-step {
padding: 0;
position: relative;
width: 200px;
}
.row {
display: inline-block;
}
https://jsfiddle.net/onk2cqhg/
I saw in a previous post that the solution to prevent those annoying bullets to show up in our beautifull HTML was adding this: list-style-type: none; in our CSS.
It looks this way right now
Okay, but the problem is the following: I am using: display: list-item; and if I add that css code it changes to this
As you can see it gets all messed up.
Any possible way to prevent all that mess or removing bullets without that happening? And keeping the same structure, 5 columns in a row with the same size, and allowing some of those to be "double data" (left floated and right floated)
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="plantilla.css">
<script src="plantilla.js"></script>
<head>
<title>Plantilla</title>
</head>
<body>
<input type="text" id="input" class="input" value="" autofocus />
<div id="main" class="main">
<div id="header">Main</div>
<div id="global1" class="global">
Global1
<div id="small11" class="small">
<div class="izq">asdfasdf asdfasdfasdf</div>
<div class="der">1234</div>
</div>
<div id="small12" class="small">aaaa</div>
<div id="small13" class="small">ssss</div>
<div id="small14" class="small">ddd</div>
<div id="small15" class="small">ffff</div>
</div>
<div id="global2" class="global">
Global2
<div id="small21" class="small">abcdef</div>
<div id="small22" class="small">fedcba</div>
<div id="small23" class="small">facbde</div>
<div id="small24" class="small">decfab</div>
<div id="small25" class="small">bacfed</div>
</div>
<div id="global3" class="global">
Global3
<div id="small31" class="small">eeeeee</div>
<div id="small32" class="small">eabdc</div>
<div id="small33" class="small">bcdae</div>
<div id="small34" class="small">dcbea</div>
<div id="small35" class="small">eadcb</div>
</div>
<div id="global4" class="global">
Global4
<div id="small41" class="small">decab</div>
<div id="small42" class="small">baced</div>
<div id="small43" class="small">becad</div>
<div id="small44" class="small">daceb</div>
<div id="small45" class="small">cedab</div>
</div>
<div id="global5" class="global">
Global5
<div id="small51" class="small">cadeb</div>
<div id="small52" class="small">cadeb</div>
<div id="small53" class="small">cedab</div>
<div id="small54" class="small">eadcb</div>
<div id="small55" class="small">aebdc</div>
</div>
</div>
</body>
</html>
body{
text-align: center;
font-family: helvetica;
}
div {
margin: 1px;
}
#main {
}
#input {
width: 10%;
padding: 1px;
margin: auto;
}
.global{
width: 18%;
float: left;
border: 1px solid #a1a1a1;
border-radius: 5px;
}
.small{
border: 1px solid #AA0000;
border-radius: 0px;
margin: 2px;
display: list-item;
}
#header {
text-align:left;
clear: both;
font-size: 22px;
}
ul
{
list-style-type: none;
}
.izq { float: left; }
.der { float: right; }
This issue has nothing to do with the the bullets or display:list-item and the "messed up" layout is caused the the #small11 element collapsing as it only contains floated elements.
All that is required is a "clearfix" of which there are several.
body {
text-align: center;
font-family: helvetica;
}
div {
margin: 1px;
}
#main {} #input {
width: 10%;
padding: 1px;
margin: auto;
}
.global {
width: 50%;
/* for this demo */
float: left;
border: 1px solid #a1a1a1;
border-radius: 5px;
}
.small {
border: 1px solid #AA0000;
border-radius: 0px;
margin: 2px;
display: list-item;
list-style-type: none;
overflow: hidden;
/* cleafix */
}
#header {
text-align: left;
clear: both;
font-size: 22px;
}
.izq {
float: left;
}
.der {
float: right;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="main" class="main">
<div id="global1" class="global">
Global1
<div id="small11" class="small">
<div class="izq">asdfasdf asdfasdfasdf</div>
<div class="der">1234</div>
</div>
<div id="small12" class="small">aaaa</div>
<div id="small13" class="small">ssss</div>
<div id="small14" class="small">ddd</div>
<div id="small15" class="small">ffff</div>
</div>
</div>
I don't really know how to put it in words but I do have pictures which will quite give you an idea of my problem. Seems like float is giving me the problem/
This is what I am trying to accomplish:
This is my problem:
Here's the code:
body {
background: #C52C2C;
}
.images div {
width: 300px;
height: 300px;
background-color: white;
margin: 0 auto;
float: left;
margin: 2px;
}
#portfolio {
overflow: auto;
clear: both;
heigth: 400px;
background-color: #c62828;
}
<div class="images">
<!-- Top Boxes -->
<div class="box-1 left"></div>
<div class="box-2 left"></div>
<div class="box-3 left"></div>
<!-- Bottom Boxes -->
<div class="box-4 left"></div>
<div class="box-5 left"></div>
<div class="box-6 left"></div>
</div>
What I would like to do is change the height of the portfolio section but when I change the height, nothing changes. If I remove the boxes then I can change the height. How would I fix this?
Thank you if you well understood this.
That is because of impropper value of the display property for View More element. You should set it to be:
view_more{ display: block; } // Please replace **view_more** with the correct value to select the element
Also do that for the downward arrow.
Do you mean something like this?
https://jsfiddle.net/xsjjo654/1/
Code Sample:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: sans-serif;
}
h1.title {
text-align: center;
color: white;
font-size: 40pt;
margin: 5px auto;
}
#portfolio {
overflow: auto;
clear: both;
min-height: 400px;
width: 100%;
background-color: #c62828;
text-align: center;
}
#portfolio > .wrapper {
display: table;
width: 100%;
}
#portfolio > .wrapper > section {
display: table-cell;
vertical-align: middle;
}
section.side-left {
text-align: right;
}
section.side-right {
text-align: left;
}
section.side-center {
width: 930px;
}
.images {
display: inline-block;
}
.images .box {
width: 300px;
height: 300px;
background-color: white;
display: inline-block;
float: left;
margin: 1px;
}
.button {
cursor: pointer;
background: transparent;
outline: 0;
border: none;
}
.button.round, .button.round-alt {
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 30px;
}
.button.round {
background-color: white;
color: #c62828;
}
.button.round-alt {
border: 2px solid white;
color: white;
margin: 30px;
}
.button.square {
border: 2px solid white;
color: white;
font-size: 14pt;
padding: 12px 30px;
margin: 40px auto;
}
/* (c) 2016 David#Refoua.me, www.Refoua.me */
</style>
</head>
<body>
<div id="portfolio">
<h1 class="title">
Portfolio
</h1>
<div class="wrapper">
<section class="side-left">
<button class="button round prev">
←
</button>
</section>
<section class="side-center">
<div class="images">
<!-- Top Boxes -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br>
<!-- Bottom Boxes -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</section>
<section class="side-right">
<button class="button round prev">
→
</button>
</section>
</div>
<button class="button square more">
View More...
</button>
<br>
<button class="button round-alt down">
↓
</button>
</div>
</body>
Try Bootstrap. It let's you play around with some cool grid functionality AND it's RESPONSIVE!
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet">
<style>
.inner {
height:350px;
background-color:white;
margin-top:5px;
margin-left:-25px;}
body {background-color:red;}
</style>
<body>
<div class='container'>
<div class='row'>
<div class='col-md-4'>
<div class='inner'></div>
<div class='inner'></div>
</div>
<div class='row'>
<div class='col-md-4'>
<div class='inner'></div>
<div class='inner'></div>
</div>
<div class='row'>
<div class='col-md-4'>
<div class='inner'></div>
<div class='inner'></div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/
3.3.6/js/bootstrap.min.js"> </script>
Output: http://s28.postimg.org/9y69346tp/test.png You can add more rows later if you're going to refresh your pictures from database automatically.
Hope that helps! Cheers!
if you give a width to images and margin:auto it should center much easier :)
body {
background: #C52C2C;
}
.images {
width:912px;
margin:auto;
}
.images div {
width: 300px;
height: 300px;
background-color: white;
margin: 0 auto;
float: left;
margin: 2px;
}
#portfolio {
overflow: auto;
clear: both;
heigth: 400px;
background-color: #c62828;
}
<div class="images">
<!-- Top Boxes -->
<div class="box-1 left"></div>
<div class="box-2 left"></div>
<div class="box-3 left"></div>
<!-- Bottom Boxes -->
<div class="box-4 left"></div>
<div class="box-5 left"></div>
<div class="box-6 left"></div>
</div>
use this: clearfix
The problem here is that your container doesn't take the height of the inner boxes in consideration, so if you add the clearfix to it that will do the trick