This is what I tried.
CSS:
div#Layer3:hover div#Layer3copy
{
display: inline-block;
}
HTML:
<div id="Layer3"><img src="images/Layer3.png">
<div id="Layer3copy"><img src="images/Layer3copy.png"></div>
</div>
I want this div to be hidden and when hover another div it appear, however, its working OK,
But moved a little bit from it actual place,
is there a solution for it?
Alright, first you need to know display,position and pseudo state properties of CSS
in your snippet #Layer3 is wrapping #Layer3copy so we can invoke it on hover state by using direct child selector i.e
#Layer3:hover > #Layer3copy{
/*Do your things here*/
}
working example: https://jsfiddle.net/ishusupah/eupfr101/
In this example as you wanted i am using #Layer3copy display:none and on hover state i am making it display:block.
you can display and position however you want.
You are not hiding/showing any div. What you are actually doing in the code above is when Layer3 div is hovered on, you are changing Layer3copy div style to be inline block - and that's why it is moving. A div is by default a block element - which means it is taking up a full width of a row. When you change it to an inline-block you are "telling" the div to align next to another element if there is enough width in a row, and not take the full width - that's why the div is moving next to the parent div.
You also need to modify your selectors to achieve your requirement.
To actually achieve what you want (hiding and displaying back the Layer3copy without it being moving), use this CSS code:
#Layer3 #Layer3copy{
display: none;
}
#Layer3:hover #Layer3copy{
border: 3px solid red;
display: block;
}
The first selector is giving the default definition when layer3 - the container div is not hovered - in which the child Layer3copy div is not displayed (display:none).
The second selector is saying when layer3 is hovered apply styling to Layer3copy and turn it to display:block - which is the default display for divs (they are block elements) - this it is getting displayed and staying it its initial position without "movement".
Here is a working example with the above code.
I've additionally added a thin red border to the inner div, so you'll see what i mean in a block element - which is taking the entire width of a row.
try using this
#Layer3:hover > #Layer3Copy {
position: absolute;
display: inline-block;
/** Postion of your div **/
}
Try to adjust the position until it is placed wherever you want it to be in.
I think you want to be like a tooltip or something
Related
Button and div acts differently with the same styles. Actual difference in width: div have 100% of parent width, while button acting like display: inline; with minimal width, no actual inlining. And both have display: block;.
That strange button behavior is what I'm trying to achieve with div. Problem is that 'width: auto;' works in another way. So I'm gave div's same style as button have by default in chrome. As a result there is one property sets differently: -webkit-appearance, but changing it make no sense for width or display property.
Codepen
Also I'm tried to achieve that with display: flex;, but width becomes 100%.
If there's another way do achieve this, it have to deal with parent height: 0px and display: absolute
A button is displayed as inline-block. If you want a div to 'act' the same way
display the div as an inline-block as well. As to why buttons behave this way
see the following post:
button behavior
div{
border:black solid ;
display:inline-block;
}
<button></button>
<div>x</div>
Okay I am a newbie regarding CSS and while during a tutorial I got completely lost.
As far as I know a block element takes up a whole line. And an inline element only takes up the width and height of the element and an inline-block works like an inline element but here you can set width and height.
Okay and now the question. In the tutorial it makes an unordered list:
header nav ul li {
display: inline-block;
padding: 0;
}
There are 5 elements in the list. Now 4 of the elements is text like "Menu", "Contact us" etc. but one element in the list should be the logo image. Now to add the logo I need to do this:
header nav ul li#logo a:link {
display: block;
width: 300px;
height: 260px;
background: url('images/logo.png') center center no-repeat;
}
But what I don't get is that I first make the elements in the list to inline-block elements (which makes sense cause I want them next to each other and one of them is an image.) But why in the world do I have to turn the element in the list that I want to contain the logo image into a block element? First of all I thought it would take up the whole line (but the elements are still next to each other) and second, I already turned the elements in the list into inline-block elements? Anybody who know the answer?
Considering the few points below you should get it why the anchor has display: block
1- The display:block is set to the anchor which is inside the li... not directly to the li itself.
Thats why its still showing all li next to each other because you changed one of the inner elements inside it to block not the li itself.
2- The default display property of anchor is inline ... this means that you don't have control on width and height.
3- To be able to show background-image inside anchor you will have to set a specific width and height and thats why the display is changed from inline to block to be able to control width and height
BTW you can also use inline-block with the anchor and it will work
Here is JS Bin: http://jsbin.com/hetegodovo/edit?html,css,output
The only difference between these two blocks is their display property value.
.output {
display: flex;
}
.output.output--block {
display: block;
}
The first one makes absolute positioned .delete element "focusable" by caret while moving it with keyboard arrows.
And the second one makes lines breaks ugly.
Setting .wrapper element display property to inline-block leads to the first scenario.
What I am supposed to do with html and/or css to make it work properly? All markdown is generated by JS but can be modified easily.
http://216.194.172.101/~culinare/index.php/terms-conditions-and-policies
The problem I'm having is pretty clear. The DIV that shows the gray box with the T&C stretches beyond the parent DIV that contains it. I've tried a number of variations in the CSS, and none of it seems to work. What am I missing?
Floating elements doesn't affect the size of the parent element. You can however make the parent contains the floating elements also, by using the overflow style:
.body_content { overflow: hidden; }
As the parent element doesn't have a specific height, the overflow style won't actually hide anything, it will just have the effect on the floating elements inside it.
The div with the class .body_wrapper has left: right.
So you have to do the next:
.body_content {
/* other styles */
display: table;
}
I have a few problems with my CSS Submenu.
Please check my fiddle here:
http://jsfiddle.net/9XUJD/1
A few problems:
When you hover over A element, it gets pink background, but If you go over submenu, parent A element is losing it's background. How can I tell him that even when user opens submenu, parent A needs background ?
How can I tell my .sub element that It needs to have auto width so that expands to right if there are elements in it? If you check fiddle, I have two columns inside sub element, but it has a fixed width like it's parent.
Can my .sub element be responsive ? So that I have a max width with different breakpoints?
jsFiddle Demo
You need to use the list item hover state, not the link.
This is the new selector:
ul li:hover > a {
background: #E94160;
color: #fff;
text-decoration: none;
}
Just remove the width setting from .column. Block elements get 100% width by default.
Didn't quite understand but I think the fiddle answers your problems.