I have an absolutely positioned container that holds tag labels. These tags partially cover an image below them. When the user hovers over this container, I'd like for the tag labels inside the container to disappear.
The below almost works but the effect is inconsistent and very jittery when hovering over the container:
.main-container{
height:200px;
width:100%;
background-color:#ccc;
position:relative;
}
.slider-tag-container{
z-index: 10;
position: absolute;
bottom: 22px;
left: 20px;
padding-top:30px;
padding-right:30px;
}
.slider-tag-container .label{
border: 2px solid #fff;
margin-right:5px;
}
.slider-tag-container:hover .label{
display:none;
}
<div class="main-container">
<div class="slider-tag-container">
<div class="label label-primary">Some tag</div>
</div>
</div>
Here is a jsFiddle
Why does this "jittery-ness" occur?
How can I achieve the desired effect smoothly?
Give the wrapper element a min-width or width. The inner element going display:none is probably collapsing the wrapper to 0px by 0px.
Additionally, there may be an issue with :hover bubbling if you manage to get the cursor over the inside element before it triggers. I think a JS solution might be best here for more control over how it behaves.
Related
Greetings
I have serius problem, I need to move div in div in a div, but it doesn't work.
My question is if there couldn't be some problems with negative margins or child element of element with margin problem.
It seems negative margin is collapsing with positive margin in child element.
The margin of child element is moving parrent element.
here is fiddle
of my problem.
What I want to achieve is that:
a. Article div is overlaping main heading, I tried to avoid using absolute position, so I went for negative margin.
b. Text is margined inside of an article div. From top.
<div class="container">
<div class="main-heading"><h1>Main Heading</h1></div>
<div class="wraper">
<div class="article">
<div class="text"><p>Text</p></div>
</div>
</div>
</div>
Also here is some of problem in css:
div {
width: 100%;
}
.container {
}
.heading {
}
.wraper {
margin-top: -100px;
height: 500px;
}
.article {
margin-top: 0;
height: 200px;
}
.text {
margin-top: 120px;
height: 50px;
}
As I said, margin of text element seems to move article element from top as well. It's me or where is the problem, and what's the solution or workaraund? Preferably even without absolute position, but if you really need to use them, don't worry, but clear it somehow so it can be used as part of column and wont interact with upper/bottom content.
Thank you verry much for your time
edit: picture of what I want to achieve
That black rectangle is wrapper,
cat is article
text is text, but the margins move whole article now.
I found a related toppic on this, it happens in all mayor browsers, and there is a simple solution on that. There is a must to use overflow attribute in CSS...
I used
overflow: auto;
On parrent element, and it worked.
Based on your comment and what I think you're asking:
<div class="image">
<p>PRESTO</p>
</div>
.image {
display:block;
position:relative;
background-color:grey;
width:300px;
height:200px;
}
p {
display:none;
position:absolute;
top:0;
width:100%;
text-align:center;
color:orange;
font-size:2em;
}
.image:hover > p {
display:block;
}
FIDDLE:
https://jsfiddle.net/su5aqs3p/2/
I have a CSS
.nav {
width: 200px;
line-height: 50px;
float: left;
}
.content {
margin: 0px 0px 0px 230px;
}
.container {
border: 1px solid red;
}
And here is the HTML
<body>
<div class="container">
<div class="nav">Some text
<br>more text
<br>even more text
</div>
<div class="content">
<h1>Home</h1>
<p>Text paragraph</p>
</div>
</div>
</body>
This gives me menu on the left and the content on the right. And a red box around the content on the right, but only the half menu on the left.
But I would like to have the red box also around the complete nav-div Can anyone help?
Thanks
Teddy
Add overflow:auto to your container div's CSS:
.container {
border: 1px solid red;
overflow:auto;
}
jsFiddle example
Floating the child div removes it from the flow of the document and the container essentially collapses as if it didn't exist. Adding the overflow restores the behavior you're after.
I think this is a quick fix if you float your container it should solve the problem your having. See here http://jsfiddle.net/1540sscj/
.container {
border: 1px solid red;
float:left;
width:100%;
}
Floating an element removes it from the normal flow of the page with one side effect being that its parent's dimensions won't expand to fit it.
So, what you need to do is clear the floated item. The best way to do this, without using additional markup or using the overflow property, which may cause other issues, depending on your layout, is to use the :after pseudo class on the parent element, like so:
.nav{
width:200px;
line-height:50px;
float:left;
}
.content{
margin:0px 0px 0px 230px;
}
.container{
border:1px solid red;
}
.container::after{
clear:both;
content:"";
display:block;
height:0;
width:0;
}
<body>
<div class="container">
<div class="nav">Xalsdk fjaskldfj alskdfj asädf<br>asdf<br>asdf</div>
<div class="content">
<h1>Home</h1>
<p>Bla bla.</p>
</div>
</div>
</body>
More information on clear
More information on pseudo elements
Best way imho would be to add a div like:
<div style="clear:both;"></div>
Under your floating elements: FIDDLE
This way you don't need to use oveflow:hidden on your container that may give you problems once you have more stuff in your project.
Also you shoudn't use a margin-left for your content as the previous element is already floating left. The best practise if you want to add some margin between nav and content would be to make your content float left as well and then use margin left (the exact size you want) with respect of the nav and not with the left of the window.
Finally, if you don't want to add the clear:both div to the html you could add somethign like
.content:after {
content:'';
display:block;
clear: both;
}
it's a bit less browser (old ones) compatible but cleaner
You have to add overflow:auto to .container in your css
Check my js fiddle
Also the css that modified.
.container {
border: 1px solid red;
overflow:auto;
}
Description of property overflow from MDN
The overflow property specifies whether to clip content, render
scrollbars or just display content when it overflows its block level
container.
This is my CSS code:
#outer {
width:580px;
padding:10px;
float:left;
}
.inner {
width:560px;
padding: 10px;
background-color:#fff;
color:#666666;
}
And the HTML:
<div id="outer">
<div class="inner">
... a lot of content
</div>
</div>
My problem is the background-color for the inner div doesn't extend to fill the entire div alongside its content. I've had this problem quite often, and my solution has usually been to specify a height for #inner, which makes the background fill #inner accordingly. However, I don't want to specify a height explicitly because it's dynamic content. What should I do to make the background-color fill the div as it extends?
Set the position of each element, with the inner element needing to be absolute, and then just tell the inner div to always fill the outer one with height: 100%. The only care that you have to take with this is that setting the position of inner to absolute will then make it ignore floats, but presumably you are taking care of that with outer.
(I changed the background color to red in this answer to make it more obvious what is going on.)
This is my CSS code:
#outer {
position: relative;
width:960px;
height: 500px;
}
.inner {
position:absolute;
height:100%;
width:400px;
background-color: red;
}
And the HTML:
<div id="outer">
<div class="inner">
... a lot of content
</div>
</div>
I couldn't replicate your issue. If you don't specify a height for '.inner', the background color should extend dynamically as '.inner' fills with content.
You might be having an issue due to a lack of a CSS reset. Each browser has a set of standard css rules it applies to all pages, unless you override these rules.
I recommend adding a CSS reset in your above all your current css.
A very basic but popular reset is by Eric Meyer, found here: http://meyerweb.com/eric/tools/css/reset/
Let me know if that helps, and if not try posting an image of what you are experiencing.
Btw, this is how your code renders for me:
The padding of the outer element will always show the background color of the outer element...
Just remove the padding there.
#outer {
width:580px;
/* padding: 10px;*/
background:red;
border:1px solid green;
}
.inner {
width:560px;
padding: 10px;
background-color:lightblue;
color:#666666;
}
In the following code for image gallery:
http://alpatriott.ru/works/album/
The following styles were used:
.gallery{
margin:0 auto;
width:800px;
height:640px;
background:#333;
box-shadow:0px 0px 15px 1px #333;
-webkit-box-shadow:0px 0px 15px 1px #333;
-moz-box-shadow:0px 0px 15px 1px #333;
position:relative;
}
a{
float:left;
width:25%;
height:25%;
position:relative;
border:1px solid #333;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
a img{
display:block;
width:100%;
height:100%;
-webkit-transition-property:width, height;
-webkit-transition-duration:300ms;
-moz-transition-property:width, height;
-moz-transition-duration:300ms;
-o-transition-property:width, height;
-o-transition-duration:300ms;
position:absolute;
z-index:1;
opacity:0.3;
cursor:pointer;
}
<div class="gallery">
<a tabindex="1"><img src="images/smile.jpg"></a>
<a tabindex="1"><img src="images/smile.jpg"></a>
</div>
I am not able to figure out why they used relative here.
There are other image galleries which don't seem to use position: relative for instance in the following code:
http://www.w3schools.com/css/css_image_gallery.asp
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="klematis_small.jpg" alt="Klematis" width="110" height="90">
</a>
<div class="desc">Add a description of the image here</div>
</div>
div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
According to the definition:
The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position. (http://www.w3schools.com/cssref/pr_class_position.asp)
For my code above (first instance), there was no relative distance like left:20px mentioned. I would like to know why and when to use relative. and why we needed in this example one above.
Thanks
They have used position: relative; there because they have a nested absolutely positioned element, so when you have an element positioned absolute you need to wrap the element with a position: relative; container, else it will flow out in the wild..
I will share 2 demos with you, one with positioned relative container and other without the position relative container
Demo 1 (Position Relative container)
Demo 2 (Without Position Relative container)
Note: Elements which use position: relative; doesn't mean that it will always hold absolute positioned elements, it may not contain absolute elements, because if the designer wants to use top and left properties, he need to use position: relative; there as top and left won't work on static position.
Demo 3 (Relative Position)
Demo 4 (Static Position)
Also, this logic doesn't apply ONLY to CSS Gallery, it's a positioning
concept in CSS. You can read some detailed tutorials on CSS
Positioning
A child element is always positioned absolute or relative to his parent. so it is important to make child and parent elements, except you want a div as a placeholder to load the data in another way...
may play arround with the code (why is position:absolute 5px top and left only 5px from the orange...) it may helps to understand
http://jsfiddle.net/ZKP6q/
<div class="app-header">xxx
<div class="main-app-area"> <!-- app contains four pages -->
yyy
<div class="app-page active">zzz</div>
<div class="app-page"></div>
<div class="app-page"></div>
<div class="app-page"></div>
<div class="app-page"></div>
</div>
</div>
<style type="text/css">
.app-header
{
background-color:green;
position: fixed;
top: 10px;
left: 10px;
width: 100%;
}
.main-app-area
{
background-color:orange;
width: 100%;
height: 100%;
position:relative;
top:20px;
left:20px;
}
.app-page
{
background-color:fuchsia;
opacity:0.5;
position: absolute;
width: 100%;
height: 100%;
top: 5px;
left: 5px;
visibility: hidden;
}
.app-page.active {
visibility:visible;
}
</style>
"Position: relative" in a container element not only makes other positions within the element relative to the container; it also starts a new stacking context for z-index. The new stacking context means that the img elements will appear above anything that came before them, even if they had a higher z-index. You can find this explained with graphics in http://css-tricks.com/almanac/properties/z/z-index/
Well there may be plenty of reasons for that, but personally I loved it when I had to overlap something.
Its mostly used-in the element when I know the inner element of that element is going to be positioned absolutely.
For example If I have two divs and outside div is a static block and elements inside the outer div is going to be positioned absolute relative to the outer div. Then use position:relative for the outer div and inner div should use position:absolute. Now the inner div elements can be placed anywhere using top, bottom, left and right attributes of CSS.
Read More about positioning elements here http://www.w3schools.com/Css/css_positioning.asp
Also look at http://www.alistapart.com/articles/css-positioning-101/
(there're lots of examples) CSS positioning can be especially useful when you need to position something that cannot be positioned within normal flow.
I want to place an absolute popup box at the end of text link.
HTML
<div style="float:left;">Hello World</div><div class="box">BOX</div>
CSS
.box
{
float:left;
border-color:#000;
border-style:solid;
border-width:1px;
width:80px;
height:80px;
text-align:center;
}
http://jsfiddle.net/7N6ye/1/
It works fine only when a box is relative. When I set position:absolute on the box, it looks like
http://jsfiddle.net/7N6ye/3/
Any ideas? Eventually, I'll have a list of links each of which has different text length. (And each box will popup at the end of text).
This might work:
<div class="box">Hello World<div>BOX</div></div>
with the CSS:
.box {
position: relative;
border: 1px solid red;
float: left;
}
.box div
{
position:absolute;
top: 0;
left: 100%;
border-color:#000;
border-style:solid;
border-width:1px;
width:80px;
height:80px;
text-align:center;
display: inline-box;
}
Fiddle Reference: http://jsfiddle.net/audetwebdesign/DWe8B/
Notes
(1) I nested the popup box within the text line. I can work around that.
the problem is that the popup inherits the width of the parent, so the box
can be quite narrow unless you specify a width.
If you set the position to relative, the div is put relative to its original position.
e.g. 100px to the left from where you are
If you set the position to absolute, the div is put relative to its parent (the next parent with relative or absolute positioning).
e.g. 100px from the left corner of the parent
on top of that the div is no longer part of the document flow. So other elements can overlap with it.
The same is true for floating elements. Here the next available position is used.
In general it makes no sense to set absolute positioning as well as a float.