Is there elegant solution to hover only for top element, not for underlying; or i should to do this using javascript?
<div class="WithHover1">
<div class="WithHover2">
I am Top and I want to be the only div hightlighted
</div>
I want to be hightlighted too, but I dont want to be hightlighted when the nested one is
</div>
You can't do this in just CSS, yet. The has selector is in draft for level 4/5 (I forget) CSS selectors, which will be awesome.
For now, javascript/jquery would be the easiest and most practical method.
$(".WithHover2").mouseover(function() {
$(".WithHover1").removeClass("highlight");
$(this).addClass("highlight");
});
Here's a CSS3 solution, using the ::after pseudo-element, with a bottom border that overrides the background color of the bottom text.
The negative z-index prevents the border from covering up the text, and overflow: hidden prevents WithHover1 from expanding due to the large border.
It works in IE11 (at least), Chrome, Firefox, Safari, and Opera:
div.WithHover1 {
font: 14px verdana;
position: relative;
overflow: hidden;
}
div.WithHover1:hover {
background: yellow;
position: relative;
z-index: 1;
}
div.WithHover2:hover {
background: orange;
}
div.WithHover2:hover::after {
content: '';
display: block;
position: absolute;
border-bottom: 1000px solid white;
width: 100%;
z-index: -1;
}
<div class="WithHover1">
<div class="WithHover2">
I am Top and I want to be the only div highlighted
</div>
I want to be highlighted too, but I dont want to be highlighted when the nested one is.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
This isn't what you want? Your post wasn't that clear to me what you needed when hovering over each.
.WithHover2:hover, .WithHover3:hover {
background-color: yellow;
}
<div class="WithHover1">
<div class="WithHover2">
I want to be the only div hightlighted
</div>
<div class="WithHover3">
I dont want to be hightlighted when the nested one is
</div>
</div>
Related
It is not entirely clear to me how CSS transforms affect the flow layout of the document and the positioning of an element. According to the documentation on MDN and W3C, CSS transforms do not interfere with the flow layout:
From MDN on CSS transforms (emphasis mine):
By modifying the coordinate space, CSS transforms change the shape and position of the affected content without disrupting the normal document flow.
Thus, if we translate an element, the original flow layout should remain intact and the result of the transformation should be purely visual.
A trivial example of this is demonstrated below:
.container {
background: white;
margin: 0 auto;
border: 1px solid grey;
}
.block {
width: 100%;
height: 100px;
}
.blue {
background: blue;
}
.red {
background: yellow;
}
.transform {
transform: translateY(-200%);
}
<div class="container">
<div class="block red transform"></div>
<div class="block blue"></div>
</div>
In this example, there are two div elements and the upper element was translated vertically so that it is not visible anymore. However, the flow layout remains unchanged and there is no overflow in the document. That is, the result of the transformation is purely visual.
Now, consider a page layout with a wrapper of fixed width, such that the width of the child elements is bounded by the wrapper element. Now add a positioned element that is wider than the wrapper and add an offset (e.g. left). In "narrow enough" windows, the body overflows and we are able to scroll horizontally. However, if we translate the same element and re-center it, the overflow disappears, implying that the transformation is not purely visual.
A demonstration of this effect is shown in the example below. Initially, the offset element is not transformed. You may try resizing your window to see the overflow and then toggle the transformation with the button in the center.
document.getElementById('toggle').addEventListener('click', function(event) {
const blocks = document.querySelectorAll('.block.wide');
for(let i=0;i<blocks.length;i++) {
const block = blocks[i];
block.classList.toggle('transform');
}
});
html, body {
background: #ddd;
}
.container {
background: white;
max-width: 1152px;
margin: 0 auto;
}
.content {
border: 1px solid grey;
}
.block.wide {
background: yellow;
max-width: 1380px;
width: 100vw;
position: relative;
left: 50%;
}
.block.wide.transform {
transform: translateX(-50%);
}
<div class="container">
<div class="content">
<div class="block">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><strong>Click the button below to toggle the transform and see the overflow vanish</strong></p>
<button id="toggle">Toggle Transform</button>
</div>
<div class="block wide">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
Is this the intended behavior according to the specifications? How do offsets and transformations interact?
In all my test cases, the CSS transform achieves the desired result. However, I feel that I am relying on luck rather than a technical specification.
There's several points to cover here.
From the CSS Transforms spec, Section 3. The Transform Rendering Model says:
For elements whose layout is governed by the CSS box model, the transform property does not affect the flow of the content surrounding the transformed element. However, the extent of the overflow area takes into account transformed elements. This behavior is similar to what happens when elements are offset via relative positioning. Therefore, if the value of the overflow property is scroll or auto, scrollbars will appear as needed to see content that is transformed outside the visible area. Specifically, transforms can extend (but do not shrink) the size of the overflow area, which is computed as the union of the bounds of the elements before and after the application of transforms.
Which means transforms are supposed to affect the overflow and scrolling. However, in your first example, the overflow is to a negative coordinate space, and that overflow is always clipped, so it doesn't generate any new scrollbars.
But your second example, on a direct reading, seems to be in contradiction to the specification, with the transform shrinking the overflow area. What I think is happening here is that position relative shifts, and transforms are, as acknowledged by the quote above, very similar operations, and the transform is undoing the effect of the relative positioning.
In other words, the overflow area is being computed as the union of the bounds of the elements before and after the application of relative positioning and transforms.
I have two divs side by side inside a wrapper div. In the left column, there is an image with a title above. In the right column, there is a number of links. The links div has some top padding to align text of first link with image in left column. But when screen size changes, the image title over the image inside left column breaks into two lines. When this happens the text on right div is not aligned with the image anymore. I'm lost here as I'm trying to solve this with css. Any ideas?
What I want is to align text in right div with image in left div no matter how many lines it takes to print the tile.
.wrapper
{
width: 90%;
margin: auto;
background: #fff;
display:flex;
}
.col1
{
width: 48%;
background: #ccc;
float: left;
overflow: hidden;
}
img.col1 {
width: 100%;
height: auto;
}
.col2
{
width: 49%;
margin-left: 1em;
background: #000;
float: right;
color:white;
}
.text
{
padding-top: 59px;
}
.yellow {
color: #ccc;
font-weight: 600;
clear:both;
font-family: arial;
}
<div class="main">
<div class="wrapper">
<div class="col1"><h4>Lorem ipsum dolor sit amet consect</h4><img src="https://www.elnuevocojo.com/modules/mod_news_pro_gk4/cache/k2.items.cache.633464537f5b069fc4760ed3327b136c_Lnewspro1.jpg">
</div>
<div class="col2">
<div class="text">
<span class="yellow">This text is aligned with image, but when viewport gets smaller and image title takes two lines, text is not aligned anymore.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>
Well if you cannot change the HTML structure one solution would be:
Add a <h4> with the same content to the col2 with the same content as the one from col1. I don;t know if that is feasible for you. Let me know and i can find another solution ( hopefully )
Also, do not use float just take advantage of flexbox
See below
.wrapper {
width: 90%;
margin: auto;
background: #fff;
display: flex;
}
.col1 {
background: #ccc;
overflow: hidden;
}
img.col1 {
width: 100%;
height: auto;
}
.col {
flex: 0 0 calc(50% - 0.5em);
}
.col2 {
background: #000;
color: white;
margin-left: 1em;
}
.col2 h4 {
visibility:hidden;
}
.text {
}
.yellow {
color: #ccc;
font-weight: 600;
clear: both;
font-family: arial;
}
<div class="main">
<div class="wrapper">
<div class="col1 col">
<h4>Lorem ipsum dolor sit amet consect</h4><img src="https://www.elnuevocojo.com/modules/mod_news_pro_gk4/cache/k2.items.cache.633464537f5b069fc4760ed3327b136c_Lnewspro1.jpg">
</div>
<div class="col2 col">
<div class="text">
<h4>Lorem ipsum dolor sit amet consect</h4>
<span class="yellow">This text is aligned with image, but when viewport gets smaller and image title takes two lines, text is not aligned anymore.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>
I have a display: table-cell div inside a display: table div. Is there any way to limit the height? I've tried setting height, max-height, and overflow: hidden, but it has no effect. (height does set the minimum height, but the others seem to do nothing.
See example at http://jsbin.com/gajaka/1/edit
<div class='table'>
<div class='cell'>This should be maximum 100px. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
css
.table {
display: table;
background: green;
width: 100px;
height: 100px;
max-height: 100px; /* ignored */
overflow: hidden; /* ignored */
}
.cell {
display: table-cell;
vertical-align: middle;
max-height: 100px; /* ignored */
text-align: center; /* doesn't work */
}
As far as I can see with this code, it appears you are using the table cell display in order to vertically align the text. However, table-cell comes with the inherent tradeoff that you lose control of the y-dimension; that is, the table-cell will ignore all height parameters, as you've seen.
The way to fix this would be to change the display sub-attribute from table-cell to inline-block. Then, in order to get the vertical centering, we can do the following: Place a pseudo-element inside the .table element and vertically align this. Vertical align needs to be relative to another inline element, so this pseudo-element gives a reference for the .cell to vertically align itself against. This should vertically align your text.
New output: http://jsbin.com/faqadumasado/1/edit?html,css,output
Article on "Centering in the Unknown" that describes the vertical centering technique above: http://css-tricks.com/centering-in-the-unknown/
I have the page as the showed picture
When something is clicked on the right column, the DIV on the left column will appear with generated content. This Div has a fixed height but its position may vary depending on the clicked position on the right column. As you can see when the Div appears, the footer is not pushed down.
I have tried many solutions on SO to re-position the footer as in How to keep footer at the bottom even with dynamic height website
but none of them works for me. Maybe I have done something wrong?
My footer's css:
#footer{ color: #666666; background: #D3D3D3; border-top: 1px solid #AAA;
padding: 1em; margin-top: 0; position:absolute; width:100%; }
DEMO : http://jsfiddle.net/WTUPn/
<div id="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div class="push"></div>
</div>
<div id="footer">
</div>
<style type="text/css">
body, html { height: 100%; }
#wrapper {
min-height: 100%;
margin-bottom: -90px;
position: relative;
}
#footer, .push { height: 90px; }
#footer {
background: #000; color: #FFF;
}
</style>
apparently you'll need to insert more code but your footer cannot be positioned absolutely as it takes a specific position irrespective of other divs
Code is here: http://lasers.org.ru/vs/example.html
How to remove an empty space under main block (#page)?
Another trick which worked fine for me is to use a negative margin-bottom in the relative element that you have moved. No need to go with absolute positioning.
Something like:
position: relative;
top: -200px;
left: 100px;
margin-bottom: -200px;
Similar (if not identical) to the solution I see now, from green.
Well, don't use relative positioning then. The element still takes up space where it originally was when using relative positioning, and you can't get rid of that. You can for example use absolute positioning instead, or make the elements float beside each other.
I played around with the layout a bit, and I suggest that you change these three rules to:
#layout { width: 636px; margin: 0 auto; }
#menu { position: absolute; width: 160px; margin-left: 160px; }
#page { width: 600px; padding: 8px 16px; border: 2px solid #404241; }
#page
{
overflow:hidden;
}
Try this rule:
#page {
border: 2px solid #404241;
bottom: 0;
padding: 8px 16px;
position: absolute;
top: 70px;
width: 600px;
}
I changed position to absolute, this allows you to use the bottom: 0 property.
#page {
padding-bottom: 0;
}
I was able to get rid of the whitespaces using the following framework:
And here is the markup
<div id="the-force-moved-element>I've been moved</div>
<div id="the-hack-part-1">
<div id="the-hack-part-2>The quick brown fox jumps over the lazy dog</div>
</div>
<p>Lorem ipsum dolor sit amet...</p>
My answer is late but it may help others with a similar issue that I had.
I had a <div> with position: relative; where all the child elements have the position: absolute; style. This caused around 20px of white space to appear on my page.
To get around this I added margin-top: -20px; to the next sibling element after the <div> with position: relative;.
If you have a sibling element before, you can use margin-bottom: -20px;
section {
height: 200px;
}
<h2>Extra Whitespace</h2>
<section>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div style="position:relative;">
<div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
</div>
<div>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</section>
<h2>No Whitespace margin-top</h2>
<section>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div style="position:relative;">
<div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
</div>
<div style="margin-top:-20px;">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</section>
<h2>No Whitespace margin-bottom</h2>
<section>
<div style="margin-bottom:-20px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div style="position:relative;">
<div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
</div>
<div>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</section>
The best solution if you don't want to leave spaces below (relative)
Is to use margin-top and position: sticky
#page {
margin-top: -280px;
position: sticky;
}
A negative margin value usually does the trick.
container {
position: relative;
top: -100px;
marginBottom: -100px;
}
Wherever the space appears (top, bottom, left, right)
Just give a negative margin value on the element that was positioned relatively.
I had a similar problem. The easiest way is to replace top on margin-top for #page.
I had the same issue. Negative margin didn't work for me as it left a massive white area where it used to be. I solved this problem in my case by manually entering height.
.maincontent {
height: 675px;
}
This question seems to be well answered - however all the answers above had bad side effects in my layout. This is what really worked for me:
.moveUp {
position: relative;
}
.moveUp > * {
position: absolute;
width: 100%;
top: -75px;
}
/** This part is just design - ignore it ... ****/
.box1, .box2, .box3 {
height: 100px;
color: white;
}
.box1 {
background: red;
}
.box2 {
background: blue;
height: 50px;
}
.box3 {
background: green;
}
<div class="box1">Box 1</div>
<div class="moveUp"><div class="box2">Box 2 - 75px up</div></div>
<div class="box3">Box 3</div>
just add the marginBottom to the element equal to space that you moved relatively.
// you moved top:-120px
// then add marginBottom:-120px