You can look here:
http://jsfiddle.net/vsjwww/n7kk3/17/
It all works fine, but as you see, the div, which will slide down, starts slide above the other div.
It looks like a CSS problem, how can we solve it?
Thanks..
Demo
You need the dropdown div to have the following css:
#will_slideDown
{
position:absolute;
top:100%;
left:0px;
}
and #has_hover_function needs position:relative;
Absolutely position the inner element at the bottom border of the outer element:
#has_hover_function, #will_slideDown
{
position:relative;
width:150px;
height:25px;
font-family:Arial;
text-align:center;
padding-top:3px;
border:1px solid gray;
background-color:#e7e7e7;
}
#will_slideDown {
position:absolute;
top:29px; /* 1px + 3px + 25px; */
left:0;
}
Related
I was working on the below code:
HTML:
<ul id="Generate">
<li>Home1</li>
<li>Home2</li>
<li>Home3</li>
<li>Home4</li>
</ul>
CSS:
#Generate {
list-style-type:none;
padding:0px;
border:1px solid red;
}
#Generate > li {
float:left;
width:100px;
text-align:center;
background-color:red;
color:white;
border:1px solid blue;
height:20px;
}
The UL border is coming on the top as one solid line. And below that I am seeing one row having the LI elements. I was expecting the UL border to encompass all the li elements. Since it's the parent. Why is the browser shrinking the ul?
It's because you are floating all the li's within the UL. If a container contains only floated elements and nothing is explicitly setting the containers height the resulting height of the container will be zero.
Try adding overflow: auto to your UL:
#Generate {
list-style-type:none;
overflow: auto;
padding:0px;
border:1px solid red;
}
This URL is a great resource for all things "Float".
Check out the section titled "The Great Collapse".
https://css-tricks.com/all-about-floats/
you did actualy put the border there by urself :).
#Generate {
list-style-type:none;
padding:0px;
border:1px solid red; <---------border
}
so this will do:
<style>
#Generate {
list-style-type:none;
padding:0px;
border:0px solid red;
}
#Generate > li {
align:left;
width:9%;
text-align:center;
background-color:red;
color:white;
border:1px solid blue;
height:20px;
}
</style>
<ul id="Generate">
<li>Home1</li>
<li>Home2</li>
<li>Home3</li>
<li>Home4</li>
</ul>
or you just delete that line... but i think you get the idea
Instead of doing float:left, make it display:inline
#Generate > li {
display:inline;
width:100px;
text-align:center;
background-color:red;
color:white;
border:1px solid blue;
height:20px;
}
IMHO browser shrinks ul because the UL is a flow content category object and as we know from w3c specifications the width of this kind of objects in normal flow calculates as ''margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block' (W3C site). So, if you want to ul's border to encompass only the "li" elements, you may add 'display:inline-block;' in your css rule for #General as mentioned below:
#Generate {
list-style-type:none;
padding:0px;
border:1px solid red;
display:inline-block;
}
https://jsfiddle.net/uw4krhL1/
I have a div that I want to pop up when I hover over the link before it. The hover works great, but there is a link inside the div that appears that I want people to be able to click but it disappears when I try to go to it.
Here is the jsfiddle
I am trying to use just CSS here but if I need any jquery or anything then cool.
#soldoutinfo a {
padding:4px 2px;
font-size:10px;
}
#soldoutinfo, .soldout {
display:inline;
}
#soldoutinfo a {
color:#cc0000;
}
#soldoutinfo a:visited {
color:#cc0000;
}
#soldoutinfo + div {
display:none;
width:0;
height:0;
position:absolute;
}
#soldoutinfo:hover + div {
display:block;
height:60px;
width:250px;
background:#ffffff;
box-shadow: 0 0 4px #888888;
position: absolute;
padding: 8px;
top: 19px;
left:12px;
z-index:1000;
}
#soldoutinfo + div p {
font-size:12px;
}
<p id="soldoutinfo">
<sup><a>?</a></sup>
</p>
<div>
<p>Hope is not lost! Send us a message and we will see if our stores have any in stock to ship to you.
</p>
</div>
The problem is that the hover effect is on the element after the anchor. So when you leave the anchor, your hover effect will end to.
You could fix it like this, although it's not the cleanest solution:
Set your tooltip inside your anchor, using a span
<p id="soldoutinfo">
<sup><a>?</a></sup>
<span>Hope is not lost! Send us a message and we will see if our stores have any in stock to ship to you.</span>
</p>
#soldoutinfo span {
display:none;
width:0;
height:0;
position:absolute;
}
#soldoutinfo:hover span {
display:block;
height:60px;
width:250px;
background:#ffffff;
box-shadow: 0 0 4px #888888;
position: absolute;
padding: 8px;
top: 19px;
left:12px;
z-index:1000;
}
JSFiddle DEMO
Edited your fiddle:
http://jsfiddle.net/s8QWY/6/
See if this works for you. Basically what I did was this:
Make the hidden div be inside the div that you have to hover over to get it to show.
Make the position of the parent div relative
Make the position of the shown div be over where the hovered element so that the div still shows when you hover over the div itself.
<div id="soldoutinfo"><sup><a>?</a><div><p>Hope is not lost! Send us a message and we will see if our stores have any in stock to ship to you.</p></div></sup></div>
#soldoutinfo a {
padding:4px 2px;
font-size:10px;
}
#soldoutinfo, .soldout {
display:inline;
position: relative;
}
#soldoutinfo a {
color:#cc0000;
}
#soldoutinfo a:visited {
color:#cc0000;
}
#soldoutinfo div {
display:none;
width:0;
height:0;
position:absolute;
}
#soldoutinfo:hover div,
#soldoutinfo div:hover {
display:block;
height:60px;
width:250px;
background:#ffffff;
box-shadow: 0 0 4px #888888;
position: absolute;
padding: 8px;
top: 3px;
left:3px;
z-index:1000;
}
#soldoutinfo + div p {
font-size:12px;
}
Here a approach point:
When you hover the ?
$("#id").hover(function(){
$(this).find("#toShow").show();
}
and when he leaves the #toShow
$('#toShow').mouseout(function() {
$('#toShow').hide();
});
I see no JS code in this fiddle I don't know why. But solution to you would be to use setTimeout(); in this function you can specify after what period of time after hover the box should be hidden. You can also add to hide() param 'slow'.
You can also use ready solution which is Jquery UI ToolTip
Ive set up a testing FIDDLE with all the tools we need for tabs working horizontally.
The classes also exist to allow the tabs to work vertically on either the left hand or right hands side using different CSS classes. The problem is they are not then positioned correctly. This I imagine is due to the transform origin attribute but I am struggling.
http://jsfiddle.net/H7gG8/19/
.tabs {
width:400px; height:400px;
}
.tab {
position:relative;
}
.tab li {
border-radius:10px 10px 0 0; height:40px; width:110px; background:#DDD; float:left; cursor:pointer;
}
.tab.v {
-webkit-transform:rotate(90deg);
}
.tab li.l {
width:180px;
}
.tab.r {
-webkit-transform:rotate(-90deg);
}
.tab.r li {
float:right;
}
.tabs .conts {
height:100%; position:relative; clear:both;
}
.tabs .cont {
background:#EEE; height:300px; position:absolute; width:100%;
}
Reset the height attribute of the tab container to that of the entire tab framework ie. height:100%; add a top:-40px to the container and then for vertical tabs add right:0 and top:0;
http://jsfiddle.net/H7gG8/71/
Simples..
How can I make a background like the attached image in css? I have experimented with border so that I can give it a shape like the black part, but in that case I cannot write text so I guess border shapes of parallelogram will not work any other ideas?
You can write like this:
CSS
.tab{
width:200px;
height:40px;
position:relative;
background:#000;
}
.tab:after{
content:'';
right:-40px;
top:0;
position:absolute;
width:0;
height:0;
border-width:20px;
border-color: transparent transparent #000 #000;
border-style:solid;
}
Check this http://jsfiddle.net/696Sb/
Y0u can also use css3 transform for this. Write like this:
.tab:after{
content:'';
right:-30px;
top:10px;
position:absolute;
width:60px;
height:60px;
background:#000;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
Check this http://jsfiddle.net/696Sb/1/
Here are 2 tutorials to make diagonal/triangle in CSS:
How to Create Diagonal Lines with CSS
CSS triangle
Do you want to be able to write under the uppermost black horizontal line (on left, left of the diagonal)?
Hey now you can do this use after and before properties in css as like this
HTML
<div class="shape"></div>
Css
.shape{
background:#000;
margin:40px 20px;
height:100px;
width:700px;
position:relative;
}
.shape:after{
content:'';
position:absolute;
top:-20px;
right:0;
height:20px;
border-left:solid 30px #000;
border-right:transparent 30px solid;
border-top:transparent 20px solid;
}
.shape:before{
content:'';
position:absolute;
top:-20px;
left:0;
right:60px;
height:20px;
background:#000;
}
Live demo http://jsfiddle.net/uuxd8/
Updated
Live demo two http://jsfiddle.net/uuxd8/1/
I want to create a keyboard as seen on image:
The keys should be span objects. I have this CSS:
span{
height:25px;
width:25px;
float:left;
margin:0 5px 5px 0;
line-height:25px;
background-color:WhiteSmoke;
text-align:center;
font-size:14px;
border-style:solid;
border-width:1px;
border-color:silver;
}
... and I get this result:
It's almost OK but I don't know how to position the spans properly?
You need to set a width and a text-align:center on the parent element, and ditch the float