Div elements won't use whole space

Div elements won't use whole space - javascript

I want to place 12 cards (2 rows -> 6 cards in one row). My code needs to be responsive so I used width/height %. Problem is that there is a lot of whitespace/empty space and cards are tiny. Here is code that I used:
JSFIDDLE: http://jsfiddle.net/A2bU7/
CSS:
#pagewrap
{
display:flex;
display: -webkit-flex;
display: -moz-flex;
width:100%;
}
#board{
//padding: 5px;
background-color:#cccccc;
width:100%;
height:70%;
}
#board > div {
background-color: grey;
border:#000 1px solid;
width:10%;
height:20%;
float:left;
margin:15px;
padding:15px;
font-size:64px;
cursor:pointer;
box-shadow: 0px 5px 14px grey;
border-radius: 5px;
transition: 0.2s;
}
#board > div:nth-child(6n+1) {
clear: both;
}
#board > div:hover {
box-shadow: 0px 0px 25px black;
transition-timing-function: all ease-in-out;
}
HTML:
<html>
<div id="pagewrap">
<div id="board">
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
<div id="card">
</div>
</div>
<div>
</html>

Margin stretches the outside of your div that's why you getting whitespace/empty space and padding stretches on the inside. So you should tune in/out your margin/padding of your card and choose what you like.
#board > div {
margin: 5px;
padding: 25px 20px;
}
fiddle with margin/padding change.
fiddle with percentile width/height.

Reduce your margin and maybe increase your padding.

Related

Trace div on hover?

Right now I have six floated divs, each with an image as a background. There is a 4.5px margin on each div so it looks like there is a border.
I want to make it so that on hover, the div's "border" is traced/filled up in a different color. How do I do that?
<div id="one" >
</div>
<div id="two" >
</div>
<div id="three" >
</div>
<div id="four" >
</div>
<div id="five" >
</div>
<div id="six" >
</div>
Here's the css:
#one,#two,#three,#four,#five,#six{
max-height:400px;
background-color: grey;
margin:4.5px;
height:60vh;
width:417px;
max-width:417px;
float:left;
background-size: cover;
opacity:.9;
text-align:center;
}
#one{
background-image:url('../images/1.jpg');
}
#two{
background-image:url('../images/2.jpg');
}
#three{
background-image:url('../images/3.jpg');
}
#four{
background-image:url('../images/4.jpg');
}
#five{
background-image:url('../images/5.jpg');
}
#six{
background-image:url('../images/6.jpg');
}
#one:hover,#two:hover,#three:hover,#four:hover,#five:hover,#six:hover{
opacity:1;
box-shadow: 0 0 0 8px white;
}

One approach is to use an svg element instead of a div to animate the border (stroke) using stroke-dashoffset and stroke-dasharray.
http://jsfiddle.net/zLuercaa/

Make
margin:0;
and then add a real border to each div
border: 4px solid blue;
and then on :hover you can change the border color.

Simply add transition-duration: 0.4s; or whatever time you want to your divelements.
body {
background-color: black;
}
#one,
#two,
#three,
#four,
#five,
#six {
background-image: url('http://lorempixel.com/400/300');
max-height: 400px;
background-color: grey;
margin: 4.5px;
height: 60vh;
width: 417px;
max-width: 417px;
float: left;
background-size: cover;
opacity: .9;
text-align: center;
transition-duration: 0.4s;
}
#one:hover,
#two:hover,
#three:hover,
#four:hover,
#five:hover,
#six:hover {
opacity: 1;
box-shadow: 0 0 0 8px white;
}
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>

responsive grid using display table and float

DEMO : http://jsfiddle.net/5adjhd1x/2/
How can I make below dialpad responsive? I tried to use width 33% and some JS in demo 1 : http://jsfiddle.net/5adjhd1x/, but I couldn't have margin for them.
.key {
width:40px;
height:40px;
background:red;
float:left;
border-radius:50%;
cursor:pointer;
text-align: center;
display:table;
margin:1%;
}
.key > span {
display:table-cell;
vertical-align:middle;
}
.clearFloat {
clear:both;
}
<div class="keyWrap">
<div class="key"><span>1</span>
</div>
<div class="key"><span>2</span>
</div>
<div class="key"><span>3</span>
</div>
<div class="clearFloat"></div>
<div class="key"><span>4</span>
</div>
<div class="key"><span>5</span>
</div>
<div class="key"><span>6</span>
</div>
<div class="clearFloat"></div>
<div class="key"><span>7</span>
</div>
<div class="key"><span>8</span>
</div>
<div class="key"><span>9</span>
</div>
<div class="clearFloat"></div>
<div class="key"><span>0</span>
</div>
<div class="key dlt"><span>Del</span>
</div>
</div>
<br> <br>
How can I make them to have margin in percentage and responsive?

Answer at here dude:
http://jsfiddle.net/5adjhd1x/6/
Give me a like !
.key {overflow: hidden; display: block; background: grey; padding: 0;}
.key li {width: 32%; margin-right: 2%; margin-bottom: 10px; float: left; display: inline-block; background: red;}
.key li:nth-child(3n) {margin-right: 0%;}

CSS3 Divs side by side, arrangement

I have problem with divs arrangement.
Here is my code:
#container{
}
#block1{
vertical-align: top;
display: inline-block;
width:49%;
height:50px;
background-color:red;
}
#block2{
vertical-align: top;
display: inline-block;
width:49%;
height:100px;
background-color:blue;
}
<div id="container">
<div id="block1"></div>
<div id="block2"></div>
<div id="block1"></div>
<div id="block1"></div>
</div>
And issue is arrangement, it looks like this:
But i need to look like this. Arrange divs up without white spaces.
Any ideas here? Thanks :).
Here is JSFiddle, so you can play with it: http://jsfiddle.net/cn2r3tga/

css
#container{
}
#block1{
background-color: #FF0000;
display: inline-block;
float: left;
height: 50px;
margin: 2px 0;
vertical-align: top;
width: 100%;
}
#block2{
background-color: #0000FF;
display: inline-block;
float: left;
height: 100px;
margin: 2px 0;
vertical-align: top;
width: 100%;
}
.alignment{
float: left;
width: 50%;
}
HTML
<div id="container">
<div class="alignment">
<div id="block1"></div>
<div id="block1"></div>
</div>
<div class="alignment">
<div id="block2"></div>
<div id="block1"></div>
</div>
</div>
Note: ID of any HTML control should be unique

Reorder your div's like this (also changed the id to class):
<div id="container">
<div class="block2"></div>
<div class="block1"></div>
<div class="block1"></div>
<div class="block1"></div>
</div>
Then use float instead of inline-block:
.block1{
vertical-align: top;
float: right;
width:49%;
height:50px;
background-color: red;
}
.block2{
float: right;
width:49%;
height:100px;
background-color: blue;
}
Updated Fiddle

You can group them into two divs and then get the desired result. As shown below:
#container{
}
.left{
float:left;
width:49%;
margin-right:2%
}
.right{
float:right;
width:49%;
}
.block1{
vertical-align: top;
display: inline-block;
width:100%;
height:50px;
margin-bottom: 10px;
background-color:red;
}
.block2{
vertical-align: top;
display: inline-block;
width:100%;
height:100px;
background-color:blue;
}
<div id="container">
<div class="left">
<div class="block1"></div>
<div class="block1"></div>
</div>
<div class="right">
<div class="block2"></div>
<div class="block1"></div>
</div>
</div>

https://jsfiddle.net/cn2r3tga/3/
Updated fiddle.
"float:right"
should be used for those going to the right.

first you use id which should be used only once so use classes instead which you can re-use as many times as you want.
Secondly I would add another 2 div within your .container to make the result you want and add the css to keep the shape your want:
<div class="container">
<div calss="left">
<div class="block1"></div>
<div class="block1"></div>
</div>
<div class="right">
<div class="block2"></div>
</div>
</div>

HTML: Why is Div is not in Top Corner?

I got 2 div in-line to each other.
If the second div is 2 lines long, the first div is no longer in the top corner...
Why is that?
EDIT: Why does div1 automatically vertical-align when the second div has 1 line but doesn't when it has 2 or more lines?
Check http://jsfiddle.net/d5Z6V/354/
<div id="wrapper">
<div id="div1">Not in top corner</div>
<div id="div2">
<div>asd</div>
<div>asd</div>
</div>
</div>
<br>
<div id="wrapper">
<div id="div1">In top corner</div>
<div id="div2">
<div>asd</div>
</div>
</div>
#wrapper {
border: 1px solid blue;
}
#div1 {
display: inline-block;
width:120px;
height:120px;
border: 1px solid red;
}
#div2 {
display: inline-block;
width:160px;
height:160px;
border: 1px solid green;
}

You need to vertically align it to top like this:
#wrapper {
border: 1px solid blue;
}
#div1 {
display: inline-block;
width:120px;
height:120px;
border: 1px solid red;
vertical-align: top;
}
#div2 {
display: inline-block;
width:160px;
height:160px;
border: 1px solid green;
vertical-align: top;
}
<div id="wrapper">
<div id="div1">Not in top corner</div>
<div id="div2">
<div>asd</div>
<div>asd</div>
</div>
</div>
<br>
<div id="wrapper">
<div id="div1">In top corner</div>
<div id="div2">
<div>asd</div>
</div>
</div>

add vertical-align:top; to #div1

How to change css on multiple elements

I want to make so that each 3 elements (top, middle and bottom) of my polygon changes color when you hover over it. I would normally do it with css: xxx:hover but since it involves 3 different elements that need to change at the same time, I can only assume that I need take a different approach. I assume some sort of javascript? Ideas?
CODEPEN: http://codepen.io/anon/pen/shfge
HTML
<div class="hex-row even">
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
</div>
<div class="hex-row">
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div class="hex">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
</div>
CSS:
.hex {
float: left;
margin-left: 3px;
margin-bottom: -26px;
}
.hex:hover {
cursor: pointer;
}
.hex .top {
width: 0;
border-bottom: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
.hex .middle {
width: 104px;
height: 60px;
background: #6C6;
}
.hex .bottom {
width: 0;
border-top: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
.hex-row {
clear: left;
}
.hex-row.even {
margin-left: 53px;
}

Not too hard, just target the .hex container and it's children like so:
.hex:hover .top {
border-bottom-color: red;
}
.hex:hover .middle {
background: Red;
}
.hex:hover .bottom {
border-top-color: red;
}
http://codepen.io/anon/pen/GboDw

Develop Reference

JavaScript is the programming language of the Web.

Div elements won't use whole space - javascript

Reduce your margin and maybe increase your padding.

Related

Trace div on hover?

responsive grid using display table and float

CSS3 Divs side by side, arrangement

HTML: Why is Div is not in Top Corner?

How to change css on multiple elements

Categories

Resources