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
Related
I'm struggling to get my table data to be directly underneath my table headers it's currently looking like this on inspection:
enter image description here
this is what it looks like with a space around
, but how can I make it more centered?
I give you an example for your reference:
/* DivTable.com */
.divTable {
display: table;
width: 100%;
}
.divTableRow {
display: table-row;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
}
.divTableCell,
.divTableHead {
border: 1px solid #999999;
display: table-cell;
padding: 3px 10px;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell"> cxvv</div>
<div class="divTableCell"> xcvxcv</div>
<div class="divTableCell"> xcvx</div>
</div>
<div class="divTableRow">
<div class="divTableCell"> vxvx</div>
<div class="divTableCell"> wewrwe</div>
<div class="divTableCell"> xcvxv</div>
</div>
<div class="divTableRow">
<div class="divTableCell"> xxcvxcv</div>
<div class="divTableCell"> dsf</div>
<div class="divTableCell"> sdf</div>
</div>
<div class="divTableRow">
<div class="divTableCell"> vfsdf</div>
<div class="divTableCell"> sdfsf</div>
<div class="divTableCell"> dsfsdf</div>
</div>
<div class="divTableRow">
<div class="divTableCell"> cxvxcv</div>
<div class="divTableCell"> sdfsf</div>
<div class="divTableCell"> sdf</div>
</div>
</div>
</div>
You can browse the web site to generate the div table.
This is a pure flexbox example:
.cell,
.cellEnd,
.cellTail,
.container,
.headerRow,
.row {
display: flex;
flex-grow: 1;
}
.cell,
.cellEnd,
.cellTail {
border-top: 1px solid black;
border-left: 1px solid black;
}
.cellBottom {
border-bottom: 1px solid black;
}
.cellEnd {
border-bottom: 1px solid black;
}
.cellEnd,
.cellTail {
border-right: 1px solid black;
}
.container {
flex-direction: column;
}
.headerRow .cell,
.headerRow .cellTail {
font-weight: bold;
justify-content: center;
}
.row .cell,
.row .cellEnd {
padding: 3px;
}
<div class="container">
<div class="headerRow">
<div class="cell">
1
</div>
<div class="cell">
2
</div>
<div class="cellTail">
3
</div>
</div>
<div class="row">
<div class="cell cellBottom">
1000
</div>
<div class="cell cellBottom">
2000
</div>
<div class="cellEnd">
3000
</div>
</div>
</div>
I am trying to make a responsive webpage. I tried with height,style.height, style.OffsetHeight, etc. but I am not able to make a square table dynamically.
The below code changes the height but the table height and width do not match.
var width = table.offsetWidth;
table.setAttribute("style","height:"+ width + "px;");
Should I apply the logic on cells or on table?
How do I make the text(font-size) and other elements responsive?
How to find 60% of screen height so that I calculate the minimum of width and height to set them as table parameters?
Design Pattern : Design
Code : jsfiddle
Many Thanks.
1.You can apply the logic on table. The below code will work for dynamic resizing:
window.addEventListener('resize',handlersize);
function handlersize(){
width = table.offsetWidth;
table.setAttribute("style", "height:" + width + "px;")
}
To change the font size, use css style font-size:3vw; or so depending upon requirement.
3.To get the 60% of screen height:
var element = document.getElementsByTagName("BODY")[0];
height = element.offsetHeight;
height = height * 0.6;
Check this JSFiddle link
You need to add resize event listener on window.
When window is resized, the function , handlersize will be called.
This will updated your tables height, everytime your window resizes
window.addEventListener('resize',handlersize);
function handlersize(){
width = table.offsetWidth;
table.setAttribute("style", "height:" + width + "px;")
}
I might be thinking that you need to implement a separate div based HTML structure for the mobile views.
As tables can't be that much responsive and you can display div based HTML structure using media queries.
Here's the Example of it.
https://codepen.io/amwill04/pen/QNPpqx
Code example:
HTML:
<div class="table" id="results">
<div class='theader'>
<div class='table_header'>Header One</div>
<div class='table_header'>Header Two</div>
<div class='table_header'>Header Three</div>
<div class='table_header'>Header Four</div>
</div>
<div class='table_row'>
<div class='table_small'>
<div class='table_cell'>Header One</div>
<div class='table_cell'>-1.2726</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Two</div>
<div class='table_cell'>0.1311</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Three</div>
<div class='table_cell'>-0.4782</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Four</div>
<div class='table_cell'>-0.9919</div>
</div>
</div>
<div class='table_row'>
<div class='table_small'>
<div class='table_cell'>Header One</div>
<div class='table_cell'>-0.89</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Two</div>
<div class='table_cell'>0.7986</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Three</div>
<div class='table_cell'>0.876</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Four</div>
<div class='table_cell'>0.498</div>
</div>
</div>
<div class='table_row'>
<div class='table_small'>
<div class='table_cell'>Header One</div>
<div class='table_cell'>-1.1669</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Two</div>
<div class='table_cell'>0.4949</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Three</div>
<div class='table_cell'>-0.7113</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Four</div>
<div class='table_cell'>0.434</div>
</div>
</div>
<div class='table_row'>
<div class='table_small'>
<div class='table_cell'>Header One</div>
<div class='table_cell'>0.1996</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Two</div>
<div class='table_cell'>-0.7693</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Three</div>
<div class='table_cell'>1.974</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Four</div>
<div class='table_cell'>-0.959</div>
</div>
</div>
<div class='table_row'>
<div class='table_small'>
<div class='table_cell'>Header One</div>
<div class='table_cell'>-1.5998</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Two</div>
<div class='table_cell'>-0.1149</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Three</div>
<div class='table_cell'>1.3888</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Four</div>
<div class='table_cell'>-0.0689</div>
</div>
</div>
</div>
CSS :
.table {
display: table;
text-align: center;
width: 60%;
margin: 10% auto 0;
border-collapse: separate;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
.table_row {
display: table-row;
}
.theader {
display: table-row;
}
.table_header {
display: table-cell;
border-bottom: #ccc 1px solid;
border-top: #ccc 1px solid;
background: #bdbdbd;
color: #e5e5e5;
padding-top: 10px;
padding-bottom: 10px;
font-weight: 700;
}
.table_header:first-child {
border-left: #ccc 1px solid;
border-top-left-radius: 5px;
}
.table_header:last-child {
border-right: #ccc 1px solid;
border-top-right-radius: 5px;
}
.table_small {
display: table-cell;
}
.table_row > .table_small > .table_cell:nth-child(odd) {
display: none;
background: #bdbdbd;
color: #e5e5e5;
padding-top: 10px;
padding-bottom: 10px;
}
.table_row > .table_small > .table_cell {
padding-top: 3px;
padding-bottom: 3px;
color: #5b5b5b;
border-bottom: #ccc 1px solid;
}
.table_row > .table_small:first-child > .table_cell {
border-left: #ccc 1px solid;
}
.table_row > .table_small:last-child > .table_cell {
border-right: #ccc 1px solid;
}
.table_row:last-child > .table_small:last-child > .table_cell:last-child {
border-bottom-right-radius: 5px;
}
.table_row:last-child > .table_small:first-child > .table_cell:last-child {
border-bottom-left-radius: 5px;
}
.table_row:nth-child(2n+3) {
background: #e9e9e9;
}
#media screen and (max-width: 900px) {
.table {
width: 90%
}
}
#media screen and (max-width: 650px) {
.table {
display: block;
}
.table_row:nth-child(2n+3) {
background: none;
}
.theader {
display: none;
}
.table_row > .table_small > .table_cell:nth-child(odd) {
display: table-cell;
width: 50%;
}
.table_cell {
display: table-cell;
width: 50%;
}
.table_row {
display: table;
width: 100%;
border-collapse: separate;
padding-bottom: 20px;
margin: 5% auto 0;
text-align: center;
}
.table_small {
display: table-row;
}
.table_row > .table_small:first-child > .table_cell:last-child {
border-left: none;
}
.table_row > .table_small > .table_cell:first-child {
border-left: #ccc 1px solid;
}
.table_row > .table_small:first-child > .table_cell:first-child {
border-top-left-radius: 5px;
border-top: #ccc 1px solid;
}
.table_row > .table_small:first-child > .table_cell:last-child {
border-top-right-radius: 5px;
border-top: #ccc 1px solid;
}
.table_row > .table_small:last-child > .table_cell:first-child {
border-right: none;
}
.table_row > .table_small > .table_cell:last-child {
border-right: #ccc 1px solid;
}
.table_row > .table_small:last-child > .table_cell:first-child {
border-bottom-left-radius: 5px;
}
.table_row > .table_small:last-child > .table_cell:last-child {
border-bottom-right-radius: 5px;
}
}
Hope you got the point.
I'm looking for a way to align divs on the left, though, keep them divided into groups, without a group breaking the line. The code below comes close but I would like to get the result of the image.
.group {
border-width: 1px;
border-style: solid;
border-color: #008040;
overflow: inherit;
padding:5px;
float:left;
margin-left: 5px;
margin-top:5px;
}
.machine {
float: left;
border-color: red;
height: 75px;
width: 50px;
border-width: 1px;
border-style: solid;
box-sizing:border-box;
}
<div id="group1" class="group">
<div id="subDiv1" class="machine">1</div>
<div id="subDiv2" class="machine">2</div>
<div id="subDiv3" class="machine">3</div>
<div id="subDiv4" class="machine">4</div>
</div>
<div id="group2" class="group">
<div id="subDiv1" class="machine">1</div>
<div id="subDiv2" class="machine">2</div>
<div id="subDiv3" class="machine">3</div>
<div id="subDiv4" class="machine">4</div>
</div>
<div id="group3" class="group">
<div id="subDiv1" class="machine">1</div>
<div id="subDiv2" class="machine">2</div>
<div id="subDiv3" class="machine">3</div>
<div id="subDiv4" class="machine">4</div>
</div>
The above code gives me this result (CURRENT):
But I would like to get this other result (DESIRED):
It's possible?
If showed borders are for reference only you could try setting the outer div to display: inline;. If you need borders they can be set to the first and the last children with selectors: .group:first-child and .group:last-child.
Using float overrides inline but as long as inline are aligned like a text, you don't need float.
.group {
border-width: 1px;
border-style: solid;
border-color: #008040;
overflow: auto;
padding:5px;
/*float:left;*/
margin-left: 5px;
margin-top:5px;
display: inline;
}
/*
.group:first-child {
margin-left: 5px;
border-left: 1px solid green;
}
.group:last-child {
margin-right: 5px;
border-right: 1px solid green;
}*/
.machine {
/*float: left;*/
border-color: red;
height: 75px;
width: 50px;
border-width: 1px;
border-style: solid;
box-sizing:border-box;
display: inline-block;
}
<div id="group1" class="group">
<div id="subDiv1" class="machine">1</div>
<div id="subDiv2" class="machine">2</div>
<div id="subDiv3" class="machine">3</div>
<div id="subDiv4" class="machine">4</div>
</div>
<div id="group2" class="group">
<div id="subDiv1" class="machine">1</div>
<div id="subDiv2" class="machine">2</div>
<div id="subDiv3" class="machine">3</div>
<div id="subDiv4" class="machine">4</div>
</div>
<div id="group3" class="group">
<div id="subDiv1" class="machine">1</div>
<div id="subDiv2" class="machine">2</div>
<div id="subDiv3" class="machine">3</div>
<div id="subDiv4" class="machine">4</div>
</div>
<div id="group3" class="group">
<div id="subDiv1" class="machine">1</div>
<div id="subDiv2" class="machine">2</div>
<div id="subDiv3" class="machine">3</div>
<div id="subDiv4" class="machine">4</div>
</div>
I have a flexbox container where the items on each row overflow, and go onto the next line. Each item is aligned to a baseline; hence, the rows can be of varying sizes depending on which items are on which row and how they align to their baseline.
The items are pictured below being centered at a baseline:
I was wondering if there was a way to dynamically get the row height? Or get the distance from each item's baseline to the top/bottom of the row?
I would like to do this so i can set a hover state around the items that allow the hover to stretch over the item and have the height go all the way to the top of each row, hence the hover for each items will look as follows:
my attempt:
codepen
/* on hover i want this to be a box around the item, and to have the top and the bottom of the border be touching the top/bottom of the row it is on */
.flex-item:hover {
border: 1px solid darkred;
}
/* so item doesn't move when not hovering */
.flex-item {
border: 1px solid lightblue;
}
.flex-container {
overflow: hidden; position: relative;
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items: baseline;
width: 400px;
height: 350px;
background-color: lightblue;
flex-wrap: wrap;
padding: 10px;
}
.inner-wrapper {
display: inline-block;
text-align: center;
width: 100px;
margin: 10px;
background-color: cornflowerblue;
}
.flex-body {
border-bottom: 1px solid #fff;
}
.flex-body-more {
float: left;
clear: left;
width: 100%;
}
.flex-img {
justify-content: center;
align-items: center;
}
<div class="flex-container">
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1 longer title</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x90/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text more text more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x50/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
</div>
I was able to make the hover effect same height on all items by changing
.flex-container {
align-items: baseline
}
to
.flex-container {
align-items: strech
}
then I added the following lines to make items align vertically:
.flex-item {
display: flex;
align-items: center;
}
However, your original code is aligning these items "baseline" instead of "center".. I didn't figure out how to do that.
Hope this helps.
codepen: https://codepen.io/bottlecap/pen/pEgbNx
Try plugging this into codepen.
html
<div class="flex-container">
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1 longer title</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x90/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text more text more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x50/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
</div>
css
/* on hover i want this to be a box around the item, and to have the top and the bottom of the border be touching the top/bottom of the row it is on */
.flex-item:hover {
border: 1px solid darkred;
}
/* so item doesn't move when not hovering */
.flex-item {
border: 1px solid lightblue;
outline:1px solid red;
height:62vh;
}
.flex-container {
overflow: hidden; position: relative;
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items: baseline;
width: 400px;
height: 400px;
background-color: lightblue;
flex-wrap: wrap;
padding: 10px;
flex-direction:column;
}
.inner-wrapper {
display: inline-block;
text-align: center;
width: 100px;
margin: 10px;
background-color: cornflowerblue;
}
.flex-body {
border-bottom: 1px solid #fff;
}
.flex-body-more {
float: left;
clear: left;
width: 100%;
}
.flex-img {
justify-content: center;
align-items: center;
}
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.