I got one div containing an animation(.animation) and another div just containing an background image(.image).Now i want to trigger the both div's using another div(.start) . But somehow im confused how to do it.
html
<div class="start">
< /div">
CSS
.start{
width:87px;
height:189px;
position:absolute;
float: left;
margin-top: 477px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 20px;
background-color: green;
}
.start:hover~.animation,.start:hover~.name
.animation
{
width:200px;
height:200px;
position:absolute;
float: left;
margin-top: 100px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 20px;
background-color: red;
....
}
.image
{
width:30px;
height:300px;
position:absolute;
float: left;
margin-top: 100px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 20px;
background-color: green;
}
Make .animation and .image invisible by default:
.animation, .image {
display: none;
}
Then, you'll have to show them whenever .start is hovered.
CSS way
Using your own technique:
.start:hover~.animation, .start:hover~.image {
display: initial;
}
JSFiddle Demo: http://jsfiddle.net/vas4hyrj/
Though this will work only if .animation and .image are placed after .start
JQuery way
$(".start").hover(function() {
//Show the divs when mouse hovers
$(".animation, .image").css("display", "initial");
}, function() {
//Hide divs when mouse stops to hover
$(".animation, .image").css("display", "none");
});
JSFiddle Demo: http://jsfiddle.net/cw0fgxnt/
And that one will always work, no matter what; but it uses JQuery
If your element is a first sibling of .start, you can use the + selector, otherwise you'll have to use jQuery.
Related
There is a div container #filters that holds all DOM components. Each DOM components is assigned with class 'form-field-in-a-row'. Here is the css definition:
div#filters { border: solid 0px #ccc; }
div#filters .dijitTextBox { width: 150px; }
div#filters input.submit { width: 60px; float: left; margin-top: 25px; margin-right: 3px;}
div#filters input.reset { width: 60px; float: left; margin-top: 25px; margin-left: 3px;}
.form-field-in-a-row { margin: 10px 0px; min-height: 22px; width: 200px; float: left;}
Now I can see each DOM object does deploy from left to right but still on a stack, like this:
Then how can I actually put everything in a row without the height difference?
display:inline-block; should be applied to your divs. The inline makes them go on the same line and the block lets you assign a width + height to them through CSS.
If you were to put a display:inline; on them they should move inline with one another.
In my navigation I have a protruding red box. I want that red box to overlap all Divs bellow it. I set a margin for it so it would space it out among the other elements I put in the black box. The problem is that it's margin is also effecting the layout of separate elements' children bellow it. When I add a negative margin to the child elements of the section bellow it does overlap but I want the red box to be on-top. I use z-index and it doesn't seem to work.
Here's my example on Jsfiddle:
http://jsfiddle.net/1qsuvhnd/29/
HTML
<nav>
<div id="ribbon"></div>
</nav>
<div id="context">
<div class="link"></div>
</div>
CSS
#context {
width: auto;
padding: 20px;
height: 300px;
background-color: blue;
z-index: 1;
}
#context .link {
float: Left;
height: 260px;
width: 300px;
margin-left: -140px;
background-color: White;
z-index:1 !important;
}
nav {
width: auto;
height: 65px;
background-color: black;
z-index:99 !important;
clear:both;
}
nav #ribbon {
float: left;
margin: 0px 50px;
Width: 65px;
height: 130px;
background-color: red;
z-index= 99;
}
To use z-index, you need to specify a position (like absolute, fixed, or relative).
And the last line written is wrong:
z-index = 99;
The correct way to write it is:
z-index: 99;
How about: http://jsfiddle.net/1qsuvhnd/30/
change the ribbon to position: absolute; and fix the z-index = typo :D
Now you don't need that margin hack!!
nav #ribbon {
float: left;
margin: 0px 50px;
Width: 65px;
height: 130px;
background-color: red;
z-index: 99; /* take that equal out and make it a colon */
position: absolute; /* position: absolute to the rescue!!!! */
}
You need to specify a position CSS rule for the nav div for the z-index to work correctly, like this:
nav #ribbon {
float: left;
margin: 0px 50px;
Width: 65px;
height: 130px;
background-color: red;
z-index:99;
position: relative;
}
Here is the new jsFiddle link:
http://jsfiddle.net/1qsuvhnd/54/
i am trying to put text over image it works but is there a better way to do it. should i use a different html tag for the text.
any suggestions
http://jsfiddle.net/8rDda/
body{
background-color:#F0F0F0 ;
color:#000305;
font-size: 87.5%;
font-family: Arial,'Lucida Sans Unicode';
line-height: 1.5;
text-align: left;
width:80%;
margin:2% auto;
}
.main {
width:45%;
height:300px;
background-color: #20b2aa;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.main img{
width:80%;
height:auto;
margin: 6% 10%;
float: left;
}
.main h2 {
color:white;
position: absolute;
margin:50px;
margin-left: 50px;
width: 100%;
}
Maybe one solution could be, that you set the image as background-image for your div. And edit the test in it. So you jut have a single div, which you must edit.
http://jsfiddle.net/QX36R/1/
http://jsfiddle.net/8rDda/1/
I would use absolute positioning instead of float.
.main {
width:45%;
height:300px;
background-color: #20b2aa;
border-radius: 5px;
position: relative; //keep children absolutely position constrained to this element.
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.main h2 {
color:white;
position: absolute;
margin: 6% 10%;
top: 0;
left: 0;
}
You could also use z-index and different divs. But at last you need position:absolute; with different positions or margin-top: -whatever with position:relative;. There is not really a right or wrong approach to do this. As long as it works on your site, it is all fine.
You can use <div> tag means creating one div and put it on the top of image or set any position or else link it with another div which will be your image. There are plenty of things you can do with <div> tag.
Example.
<div style="abcd">
top: 99;
left: 99;
position: absolute;
z-index: 1;
visibility: show;">
<!-- content will go here -->
</div>
I have problem with css. How to add text My option under every image?
Here is jsfiddle DEMO: http://jsfiddle.net/Leq3R/
My css code is here:
.product_des1 {
width: 375px;
float: left;
height: auto;
overflow: hidden;
font-size: 13px;
line-height: 22px;
margin-bottom: 72px;
margin-left: 100px;
}
.product_des1:nth-child(2n+1) {
margin-right: 0;
}
.product_des1 img {
float: left;
margin-right: 10px;
}
.product_des1 span {
color: #44a6e0;
}
#all {
width: 1034px;
height: auto;
overflow: hidden;
margin: 0 auto;
}
If I understand correctly, you need to add the same text under every image. You can achieve this only with css by using the following code:
.product_des1:after {
content: "My option";
display: block;
clear: both;
}
Here's the updated fiddle http://jsfiddle.net/Leq3R/4/
So i'm practically adding some text after the container, witch will be displayed bellow the image.
Like this:
Change:
.product_des1 img {
float: left;
margin-right: 10px;
}
To:
.product_des1 img {
display:block;
}
You can use :before/:after pseudo selector to solve your problem.
I added the following css code to your code.
#all>div:before {
content:"myOption";
position:absolute; /* to show the content on the image */
top:0; /* pinning the content to top of this container */
left:0; /* keeping the content to left at the place of image */
}
#all>div {
position:relative;
}
Working Fiddle
I would like to have two divs sit next to each other. Both divs have their width set to a certain percentage. Between the two divs I want a fixed width margin of 20px. The width of div1 and div2 and the 20px margin should add up to 100% of the available space. (See screenshot below)
Heres a basic jsfiddle to get started: jsfiddle
code for jsfiddle link to work
Is this possible without javascript?
Easiest, safest way I know to do something like this is a nested <div>, using the outside div as a container for layout purposes. See here: http://jsfiddle.net/u7VzB/1/
HTML
<div id="container">
<div id="div1">div#1</div>
<div id="div2">
<div>div#2 inner</div>
</div>
</div>
CSS:
#container
{
color: white;
margin-top: 50px;
}
#div1
{
float: left;
width: 30%;
background-color: black;
}
#div2
{
float: left;
width: 70%;
}
#div2 > div {
margin-left: 20px;
background-color: blue;
}
You can also do something like this without disturbing HTML code:
#container {
color: white;
margin-top: 50px;
position: relative;
}
#div1 {
float: left;
width: 30%;
background-color: black;
}
#div2 {
float: left;
position:absolute;
left: 30%;
margin-left: 20px;
right: 0px;
background-color: blue;
}
Working Fiddle
try by setting float left, right and reduce the width
#container
{
color: white;
margin-top: 50px;
}
#div1
{
float: left;
width: 29%;
background-color: black;
}
#div2
{
float: right;
width: 69%;
background-color: blue;
}