CSS Hover 1 Div Affects Other non-Child Divs - html

Here is some mock code. Basically I have no control over the table elements ONLY the div's inside the td's. I need to be able to hover over any of the div's in the row and they all hover to the same state. Can this be done?
Fiddle
HTML and CSS:
.one {
background-color: #0000FF;
width: 200px;
height: 30px;
}
.two {
background-color: #ff0000;
width: 200px;
height: 30px;
}
.three {
background-color: #00FF00;
width: 200px;
height: 30px;
}
/*.one:hover, .two:hover, .three:hover {
background-color: #000;
}*/
.row1:hover {
background-color: #000;
}
<table>
<tr>
<td>
<div class="row1 one">
</div>
</td>
<td>
<div class="row1 two">
</div>
</td>
<td>
<div class="row1 three">
</div>
</td>
</tr>
</table>

In CSS there is no parent selector yet. Therefore, you can't do this directly.
However, you can try using :hover on the nearest common ancestor:
tr:hover .row1 {
background-color: #000;
}
.one {
background-color: #0000FF;
width: 200px;
height: 30px;
}
.two {
background-color: #ff0000;
width: 200px;
height: 30px;
}
.three {
background-color: #00FF00;
width: 200px;
height: 30px;
}
tr:hover .row1 {
background-color: #000;
}
<table>
<tr>
<td>
<div class="row1 one"></div>
</td>
<td>
<div class="row1 two"></div>
</td>
<td>
<div class="row1 three"></div>
</td>
</tr>
</table>
Note it's not exactly the same: if you hover the border between two cells, they will change color even if you aren't hovering any .row1.

I don't think that's possible using just CSS, given that you have no control / access whatsoever to the table or tr above. If you do have some access (or can say for sure that the divs will be wrapped in a tr, try this code:
(basically, put a rule on the grandfather tr)
tr:hover > td > div {
background-color: black;
}
https://jsfiddle.net/zbqzu21r/
Weird idea:
You have the parent tr which you cannot control. Try making a table and nesting it inside the td. I'm assuming you can easily control anything done on this table. So, put your selectors on this table, and be done with it.
.mytable:hover tr > td > .row1 {
background-color: black;
}
<tr>
<td>
<table class="mytable">
<tr>
<td>
<div class="row1 one">
</div>
</td>
</tr>
<tr>
<td>
<div class="row1 two">
</div>
</td>
</tr>
<tr>
<td>
<div class="row1 three">
</div>
</td>
</tr>
</table>
</td>
</tr>

Related

Vertically centering div in table cell with divs below it

I have a table with one column having image and other columns having text. For one of the columns I wish to show additional information below main text but I wish for the main text to remain vertically centered.
This is the code I currently have:
.table {
width: 100%;
}
.thumbnail {
height: 150px;
}
.bigtext {
font-size: 2em;
}
.smalltext {
font-size: 0.65em;
}
table,
th,
td {
border: 1px solid black;
}
<table class="table">
<tr>
<td><img src="https://via.placeholder.com/180x320" class="thumbnail"/></td>
<td>
<div class="bigtext">Should be vertically centered</div>
<div class="smalltext">Should be below big text</div>
<div class="smalltext">Should be below big text</div>
<div class="smalltext">Should be below big text</div>
</td>
<td>Third cell</td>
<td>Forth cell</td>
</tr>
</table>
JSFiddle: https://jsfiddle.net/rxhz1v2f/18/
Goal:
I know it can be done with margins etc set in pixels but I would like it to be dynamic, meaning even working if there are, for example, two rows of text with class bigtext.
Edit:
I would like the solution to be HTML&CSS only. I can change the HTML structure within table cell, if necessary.
You can do it with JavaScript by finding the size of the sibling elements like this:
document.querySelectorAll(".bigtext:first-child").forEach(element=>{
// Find the size of all the non-big siblings
let siblingSize = 0
let nextSibling = element.nextElementSibling
while (nextSibling) {
if (!nextSibling.classList.contains("bigtext")) {
siblingSize += nextSibling.getBoundingClientRect().height
}
nextSibling = nextSibling.nextElementSibling
}
// Add a margin to the first .bigtext
element.style.marginTop = siblingSize + "px"
})
.table {
width: 100%;
}
.thumbnail {
height: 150px;
}
.bigtext {
font-size: 2em;
}
.smalltext {
font-size: 0.65em;
}
table,
th,
td {
border: 1px solid black;
}
<table class="table">
<tr>
<td><img src="https://via.placeholder.com/180x320" class="thumbnail"/></td>
<td>
<div class="bigtext">Should be vertically centered</div>
<div class="smalltext">Should be below big text</div>
<div class="smalltext">Should be below big text</div>
<div class="smalltext">Should be below big text</div>
</td>
<td>
<div class="bigtext">Should be vertically centered</div>
<div class="bigtext">Should be vertically centered</div>
<div class="smalltext">Should be below big text</div>
<div class="smalltext">Should be below big text</div>
</td>
<td>Third cell</td>
<td>Forth cell</td>
</tr>
</table>
Getting height of the small texts by sText.clientHeight multiplying that with 3 number of small texts and adding that px value to padding top of BtextContainer
let sText = document.querySelector(".smalltext");
let BtextContainer = document.querySelector(".bTextContainer");
BtextContainer.style.paddingTop=sText.clientHeight*3+"px";
.table {
width: 100%;
}
.thumbnail {
height: 150px;
}
.bigtext {
font-size: 2em;
}
.smalltext {
font-size: 0.65em;
}
table,
th,
td {
border: 1px solid black;
}
<table class="table">
<tr>
<td><img src="https://via.placeholder.com/180x320" class="thumbnail" /></td>
<td class="bTextContainer">
<div class="bigtext">Should be vertically centered</div>
<div class="smalltext">Should be below big text</div>
<div class="smalltext">Should be below big text</div>
<div class="smalltext">Should be below big text</div>
</td>
<td>Third cell</td>
<td>Forth cell</td>
</tr>
</table>

Align elements in a line but in different positons

I am learning HTML and I am trying to align different icons in a line but in a different positions. The first element should be aligned to the left and the others aligned to the right.
E1| |E2|E3|E4
I am not sure how to implement that. Should I use a table? Or a div with <li> elements?
I tried to use a table with a blank column but it's not working
td {
background-color: yellow;
border: 1px solid black;
}
<table>
<tr>
<td width="60%"> test </td>
<td> blank </td>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</table>
You mean this?
Flex ratio
.box {
display: flex;
}
.box div {
background-color: yellow;
border: 1px solid black;
}
.e1{
flex: .1 0 0;
}
<div class="box">
<div class="e1">E1</div>
<div>E2</div>
<div>E3</div>
<div>E4</div>
</div>
or using table
td {
background-color: yellow;
border: 1px solid black;
}
<table>
<tr>
<td>E1</td>
<td width="60%"> </td>
<td>E2</td>
<td>E3</td>
<td>E4</td>
</table>
A common method for this is to use display: flex for the container and apply margin-left: auto to the first of the child elements that should be moved to the right. That way that left margin will grow as wide as possible within the given container and with the given settings:
.container {
width: 100%;
display: flex;
background: #ccc;
}
.container>div {
padding: 5px 10px;
}
.container>div:nth-child(2) {
margin-left: auto;
}
<div class="container">
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
<div> 4 </div>
</div>

100% nested div height within table row

I would like to have the inner divs within the bottom row of this table fill the bottom half of the table in height. Any help would be appreciated.
http://jsfiddle.net/6QGDn/1/
This is what I see in Firefox 28.0
EDIT: This was fixed by using the .relative class on the td in the bottom row. Problem solved, thanks for your help.
HTML
<table>
<tr>
<td>
Top Row 1
</td>
<td>
Top Row 2
</td>
<td>
Top Row 3
</td>
<td>
Top Row 4
</td>
<td>
Top Row 5
</td>
</tr>
<tr>
<td class="no-border relative" colspan="5">
<div class="left-half">
<div class="div-td">
Bottom Row 1
</div>
</div>
<div class="right-half">
<div class="div-td">
Bottom Row 2
</div>
</div>
</td>
</tr>
</table>
CSS
table {
width: 400px;
height: 240px;
}
table, td, tr, .div-td {
border: 1px solid #000;
}
.no-border {
border: none;
}
.relative {
position: relative;
height: 50%;
}
.left-half {
float: left;
height: 100%;
width: 50%;
}
.right-half {
float: right;
height: 100%;
width: 50%;
}
.div-td {
height: 100%;
}

HTML table with special layout

How can I make a table in css/html like this:
I want to use only div, not <table> tags.
Code, yet:
<style>
.tab_in {
display: table-cell;
border: 1px dotted red;
padding: 4px 6px;
}
</style>
<div style="text-align:center;">
<div class="tab_in">
<div>a</div>
<div>b</div>
</div>
<div class="tab_in" style="vertical-align:middle;">c</div>
<div class="tab_in" style="vertical-align:middle;">d</div>
<div class="tab_in" style="vertical-align:middle;">e</div>
</div>
Use fluid grid system which uses percents instead of pixels for column widths. and handle the external width of it using a external container.
You can do something like:
JSFiddle Demo
HTML:
<div class="box">
<div class="row-fluid show-grid">
<div class="span4">
<div class="rowspan2">
<span class="valign-helper"></span>
a
</div>
<div class="rowspan2">
<span class="valign-helper"></span>
b
</div>
</div>
<div class="span4">
<div>c</div>
<div>d</div>
<div>e</div>
<div>f</div>
</div>
<div class="span4">
<div>g</div>
<div>h</div>
<div>i</div>
<div>j</div>
</div>
</div>
</div>
Note: to vertically align text you can also do using "display: table-cell" css property to the class 'rowspan2'. and remove the tag with class "valign-helper"
CSS:
body {
margin: 50px;
}
.box {
width:500px;
padding: 0 10px;
background-color: #000;
}
.show-grid [class*="span"] div {
background-color: #fff;
text-align: center;
min-height: 40px;
line-height: 40px;
margin-left: 0;
margin-top: 10px;
margin-bottom: 10px;
}
.show-grid [class*="span"] .rowspan2 {
height: 90px;
margin-bottom: 0;
}
.valign-helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
Here's an example of one way you might accomplish this:
http://jsfiddle.net/mori57/cDEGw/1/
html:
<table class="tab_out">
<tr>
<td rowspan="0" class="col">
<div class="tab_in">a</div>
<div class="tab_in">b</div>
</td>
<td><div class="tab_in">c</div></td>
<td><div class="tab_in">g</div></td>
</tr>
<tr>
<td><div class="tab_in">d</div></td>
<td><div class="tab_in">h</div></td>
</tr>
<tr>
<td><div class="tab_in">e</div></td>
<td><div class="tab_in">i</div></td>
</tr>
<tr>
<td><div class="tab_in">f</div></td>
<td><div class="tab_in">j</div></td>
</tr>
</table>
CSS:
.tab_out {
width: 800px;
margin-bottom: 20px;
text-align:center;
}
.tab_out td {
border:1px dotted red;
padding: 4px 6px;
margin-bottom: 0;
vertical-align:middle;
}
.tab_in {
display: block;
border: 1px dotted green;
}
Is this any closer to what you're looking for? I really don't see an efficient way to accomplish your layout without using a table, at this point. Mind you, the div inside each TD is optional, I just used it to show you where the element actually appears inside the table.

How to make this (table) using divs and css

I need to know how to make this table using divs, css and right xhtml
<table width="100%" border="1">
<tr>
<td style="width: 130px">1</td>
<td align="center">2</td>
<td style="width: 130px">3</td>
</tr>
</table>
Like so?
<div class="table">
<div class="row">
<span class="cell width130">1</span>
<span class="cell">2</span>
<span class="cell width130">3</span>
</div>
</div>
.table {
display: table;
width: 100%;
border: 1px solid black;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
.width130 {
width: 130px;
}
here is a good examples i found
[1] http://www.c-sharpcorner.com/uploadfile/satisharveti/introduction-to-page-layout-using-div-element/
[2] http://www.ezineasp.net/post/Div-3-Columns-Layout-using-CSS-Styles-Div-layout-1.aspx