This code will output some blinks on divs when we do the mouse over. What i want is show the content of the hidden div when the mouse is over the red div. But with the "flashes" the effect didn't works properly.
Any idea about that?
<div class="content">
<div class="absolute"></div>
<div class="new_l">---links</div>
</div>
.content {
width: 195px;
margin-top: 15px;
border:1px solid red;
}
.content>.new_l {
width: 195px;
height: 20px;
z-index: 0;
position: relative;
display: inline-block;
}
.content>.absolute {
width: 195px;
height: 20px;
position: absolute;
z-index: 1;
background-color: red;
display: inline-block;
}
.content>.absolute:hover {
display: none;
}
demo
Not sure if this is what you're looking for, but here it goes. The trick is to put the hidden div inside the other one.
HTML
<div class="content">
<div class="absolute">
<div class="new_l">---links</div>
</div>
</div>
CSS
.content {
width: 195px;
margin-top: 15px;
border:1px solid red;
}
.new_l {
width: 195px;
height: 20px;
background-color: #ccc;
display:none;
}
.absolute {
width: 195px;
height: 20px;
background-color: red;
}
.absolute:hover .new_l {
display: block;
}
http://jsfiddle.net/uFsUa/1/
Related
please i have a problem making an absolute positioned tag stay inside its parent element, i tried making the height of the parent element same as the total height of the child element it worked but is their a better way i can solve it?I added a snippet of the result below
.team__members {
width: 80%;
display: flex;
border: 2px solid #000;
}
.item__member {
width: 24%;
}
.img {
width: 100%;
height: 100px;
background-color: #000;
}
.item__member-info {
position: relative;
}
.team__member-name {
position: absolute;
}
a {
position: absolute;
display: block;
text-decoration: none;
color: #fff;
background-color: #000;
}
<div class="team__members">
<div class="team__member">
<div class="img"></div>
<div class="team__member-info">
<div class="team_member-name">
<h3>Katherine Wong</h3>
<p>Facial & breast surgery</p>
</div>
view full profile
</div>
</div>
</div>
&__member{
width: 24%;
img{
width:100%;
}
&-info{
position: relative;
a{
position: absolute;
display: block;
}
}
&-name{
position: absolute;
h3{
}
p{
}
}
}
As the title says: I need the 'info-box' to not be fixed while the head-box and head-in-block are fixed.
I know it is possible. I have a live example: http://www.marktplaats.nl/.
The orange box is fixed (head-box) then the white part (my info-box) is not fixed. And the Title block is fixed again (head-in-block).
This is the css and html I'm using right now. What adjustment needs to be made to make the middle (white) box not fixed?
#head-block{
width: 100%;
height: auto;
background: rgb(245,245,245);
border: 1px solid grey;
z-index: 1000;
margin-top: 0px;
}
#head-box{
height: 5px;
background: #37326a;
}
#info-box{
height: 50px;
background: white;
position: static;
}
#head-in-block{
width: 1100px;
height: 60px;
color: #37326a;
text-align: left;
margin: auto;
padding: 10px;
}
.fixed{
position: fixed;
}
<div id='head-block' class='fixed'>
<div id='head-box'></div>
<div id='info-box'></div>
<div id='head-in-block'>
</div>
</div>
<div style='height: 1500px;' id='content'>
</div>
Test
Do you guys see the website the same I do?
The website you linked to hides the white box when the header is sticky. So to do that here, you would hide #info-box when #head-block has class .fixed
.fixed #info-box {
display: none;
}
#head-block{
width: 100%;
height: auto;
background: rgb(245,245,245);
border: 1px solid grey;
z-index: 1000;
margin-top: 0px;
}
#head-box{
height: 5px;
background: #37326a;
}
#info-box{
height: 50px;
background: white;
position: static;
}
#head-in-block{
width: 1100px;
height: 60px;
color: #37326a;
text-align: left;
margin: auto;
padding: 10px;
}
.fixed{
position: fixed;
}
.fixed #info-box {
display: none;
}
<div id='head-block' class='fixed'>
<div id='head-box'></div>
<div id='info-box'></div>
<div id='head-in-block'>
</div>
</div>
<div style='height: 1500px;' id='content'>
</div>
Test
Please see the below code and screenshot. Can anyone please explain why there are white gaps between the divs and how to remove them? I would like the divs sit next to one another without any margin between them
![
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #b3b3b3;
font-family: arial;
font-size: 14pt;
}
#containerdiv {
width: 1184px;
height: 626px;
position: absolute;
margin-top: -338px;
margin-left: -552px;
top: 50%;
left: 50%;
}
#centerdiv {
display: inline-block;
width: 1024px;
height: 576px;
background-color: #fff;
}
#lowercenterdiv {
background-color: #ff00ff;
width: 1024px;
height: 50px;
text-align: center;
line-height: 50px;
display: inline-block;
}
#lowerleftdiv {
background-color: #00ff00;
width: 80px;
height: 50px;
line-height: 50px;
position: absolute;
}
#leftdiv {
position: absolute;
background-color: #ff000f;
width: 80px;
height: 576px;
display: inline-block;
line-height: 576px;
}
#rightdiv {
position: absolute;
background-color: #000fff;
width: 80px;
height: 576px;
display: inline-block;
line-height: 576px;
text-align: right;
}
#lowerrightdiv {
position: absolute;
background-color: #fff000;
width: 80px;
height: 50px;
text-align: right;
display: inline-block;
line-height: 50px;
}
.arrowimg img {
vertical-align: middle;
}
</style>
</head>
<body>
<div id="containerdiv">
<div id="leftdiv"><img class="arrowimg" src="leftarrow.png"></div>
<div id="centerdiv">
</div>
<div id="rightdiv"><img class="arrowimg" src="rightarrow.png"></div>
<div id="lowerleftdiv">?</div>
<div id="lowercenterdiv">?</div>
<div id="lowerrightdiv">?</div>
</div>
</body>
</html>
You could try to remove all your position: absolutes, as they make things complicated. What you want is: three boxes next to each other, then three boxes next to each other below it. If you float them to the left, you solve this problem. I have amended your CSS, just copy and paste and you can see the gaps disappear because floating elements don't care about whitespaces. There are other difficulties involved with floating, but it does solve your problem.
I have also removed everything I didn't need to get my point across.
#containerdiv {
width: 1184px;
height: 626px;
position: absolute;
margin-top:-338px;
margin-left:-552px;
top:50%;
left:50%;
}
// I added this to float all the divs inside your container to float
#containerdiv div {
float: left;
}
#centerdiv {
// I removed position: absolute from every box, as well as line-heights, align and display
width: 1024px;
height: 576px;
background-color: #fff;
}
#lowercenterdiv {
background-color: #ff00ff;
width: 1024px;
height: 50px;
text-align:center;
}
#lowerleftdiv {
background-color: #00ff00;
width: 80px;
height: 50px;
}
#leftdiv {
background-color: #ff000f;
width: 80px;
height: 576px;
}
#rightdiv {
background-color: #000fff;
width: 80px;
height: 576px;
}
#lowerrightdiv {
background-color: #fff000;
width: 80px;
height: 50px;
}
Add this to your css:
* {
margin: 0;
padding: 0;
}
This is a weird thing in how html is interpreted. The whitespace between the divs is rendered as a space. There are many ways to solve this, and none of them are very pretty.
One way is like this:
<div id="leftdiv">
<img class="arrowimg" src="leftarrow.png">
</div>
<div id="centerdiv">
</div>
<div id="rightdiv">
<img class="arrowimg" src="rightarrow.png">
</div>
<div id="lowerleftdiv">
?
</div>
<div id="lowercenterdiv">
?
</div>
<div id="lowerrightdiv">
?
</div>
Hope its fix
{
margin: 0;
padding: 0;
border-sizing: border-box;
}
im new to css and html i wanna cr8 a product box value like this
http://i.imgur.com/kMogtMz.png
I tried with these but didn't get any result.
I want .fill class to be dynamically modifiable.
Anyone can help me ?
.box {
width: 250px;
height: 30px;
background: grey;
color: white
}
.box .fill {
float: left;
width: 78%;
background: orange;
height: 100%;
}
.box .empty {
position: absolute;
white-space: nowrap;
right: 10px
}
.box .fill-badge {
position: absolute;
padding-left: 10px;
line-height: 30px
}
.box .empty-badge {
padding-right: 10px;
line-height: 30px;
}
<div class="box">
<div class="fill"><div class="fill-badge">Radeon 7870</div></div>
<div class="empty"><div class="empty-badge">125.6 GB/S</div></div>
</div>
You just need to look at your absolute and relative positioning. Make sure that all elements that are absolutely positioned are inside an element with relative defined as a position. So in this case you just need to add position: relative; to the .box.
.box {
width: 250px;
height: 30px;
background: grey;
color: white;
position: relative;
}
.box .fill {
float: left;
background: orange;
height: 100%;
}
.box .empty {
float: right;
white-space: nowrap;
right: 10px
}
.box .fill-badge {
position: absolute;
left: 0;
padding-left: 10px;
line-height: 30px
}
.box .empty-badge {
position: absolute;
right: 0;
padding-right: 10px;
line-height: 30px;
}
<div class="box">
<div class="fill" style="width:60%;">
<div class="fill-badge">Radeon 7870</div>
</div>
<div class="empty">
<div class="empty-badge">125.6 GB/S</div>
</div>
</div>
Edited to show inline style.
You must set the .box position to relative. http://jsfiddle.net/Lzmop76a/
.box {
width: 250px;
height: 30px;
background: grey;
color: white
position: relative;
}
I would do it using a background color and a background image for the same element like:
.box {
width: 240px;
padding: 0 5px;
height: 30px;
line-height: 30px;
background: #fa0 url(http://placehold.it/250x300/aaa) 200px 0 no-repeat;
color: white;
}
.box span{
float:right;
}
<div class="box">
Radeon 7870 <span>125.6 GB/S</span>
</div>
I have two divs within a container. One floats left and one floats right. Both are about 60% as wide as the container and are designed such that they overlap in the middle (right div takes priority).
How do I get them to overlap rather than stack vertically like floating elements usually do? If I absoultely position the right element the containing div doesn't expand to fit the content.
Code (unfortunately I cannot jsfiddle this as their servers are read only atm):
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
}
#left {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: left;
}
#right {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: right;
}
Use a negative margin-right on the left box so that the right box is allowed to overlap:
#left {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: left;
margin-right:-104px;
}
The 104 pixels is the overlap amount plus 4px for borders.
Here's a jsfiddle.
You can only do that with positioning.
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
position: relative;
}
#left {
width: 250px;
border: 1px solid #ccc;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
#right {
width: 250px;
border: 1px solid #ccc;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
You could create the divs with absolute position and add a positive z-index to the one you want to be in front.
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
position: relative;
}
#left {
width: 250px;
border: 1px solid #ccc;
display: block;
position: absolute;
top: 0px;
left: 0px;
}
#right {
width: 250px;
border: 1px solid #ccc;
display: inline;
position: absolute;
top: 0px;
right: 0px;
z-index: 1;
}
Can you add an extra div in there?
<div id="container">
<div id="left">
<div id="left-inner">left</div>
</div>
<div id="right">right</div>
</div>
<style>
#container {
width: 400px;
}
#left {
float: left;
width: 0px;
overflow:visible;
}
#left-inner {
float: right;
width: 250px;
}
#right {
width: 250px;
}
</style>
Make container bigger so both fit. Then use position relative and left: -100px or whatever on the one on the right.
Excellent Solution: http://jsfiddle.net/A9Ap7/237/
So, dont use:
MARGIN-LEFT:100px...
==
or similar commands.
The problem is that, if the left elements size is changed, if window is resized or etc,,, then it will make you problems!
so, dont use such custom dirty "tricks", but make a normal structure inside html, so they should be naturally ordered.
Try this one:
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
<style>
#container {
width: 400px;
background-color: #eee;
}
#left {
width: 250px;
border: 1px solid #ccc;
float: left;
}
#right {
width: 250px;
border: 1px solid #ccc;
margin-left: 150px;
position: absolute;
}
</style>
How about pulling the right div with negative margin. Something like this?
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
position: relative;
width: 400px;
height: 110px;
background-color: #eee;
}
#left {
width: 250px;
height: 100px;
border: 1px solid green;
float: left;
}
#right {
position: relative;
float: right;
width: 250px;
height: 100px;
top: -100px;
border: 1px solid red;
}