I am using the autocomplete plugin in one of my applications the Autocomplete div that is being created by the autocomplete plugin has property Position: Absolute;. I have a drop down div in my navigation menu where i have an input field which triggers the auto complete function. Everything works fine except for when i hover over the autocomplete div. As soon as i hover on the autocomplete div the dropdown div dissappears cuz it is being shown by the following css :
#nav li:hover > .subnav{
display: block;
}
#nav .subnav {
position:absolute;
background:#fff;
padding:10px;
padding-right:15px;
text-align:left;
width:180px;
border:1px solid #ccc;
border-top:none;
z-index:1200;
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
display:none;
margin:6px -1px;
}
Here #nav is the ul that contains the navigation links and .subnav is the dropdown div.
i dont want .subnav div to dissappear once a user hovers over the autocomplete div to select an entry.
Related
I am having a problem using fixed positioning with my top navigation bar. I have taken off the code that I have tried and just put it back to normal so maybe someone can see why I am having these problems of formatting when I try to fix the position.
#main-header {
/*background:url(images/house.jpg) no-repeat center top;*/
height:734px;
border-bottom:10px solid #162b4b;
}
.epicFullscreen {max-height:735px !important}
.epicFullscreen img {min-height:735px !important}
#top-bar {background: #162b4b; height:60px; margin-top:-98px; margin-bottom:70px}
#top-bar nav {padding-left:260px; padding-top:10px; color:#9297a2; width:75%; float:left}
#top-bar nav a {color:#9297a2; margin-right:30px; text-decoration:none}
#phone {float:right; color:white; padding-top:5px; position:relative; right:90px; top:-15px}
#phone a span {font-size:30px; font-weight:bold; color:#93da04; !important; cursor: default}
#phone > span {font-size:18px; font-weight:bold; color:#white; !important; cursor: default}
a[href^=tell] {color:inherit}
#logo {
width:233px;
height:98px;
background:white;
position:relative;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
display:block;
cursor:pointer;
}
#logo img {position:absolute; top:10px; left:30px}
When fixing the position, it will take away my top blue bar that sits under the nav text, and fix the nav text to the top and screw up the formatting I have with my phone number (which is a dynamic phone number for split testing purposes with call tracking metrics and analytic's).
I can get it to scroll with the page, but besides the formatting being wrong, while I scroll, it goes underneath some objects and text on the page, not all, while I am scrolling.
Any insight would be greatly appreciated, I have read through some of the questions around this issue others have had and the answers are close, but I have not found a solution that works 100% for my website yet.
This works for me, I have assumed your main header div contains your navigation bar.
#main-header{
height:734px;
top: 0px;
position: fixed;
border-bottom:10px solid #162b4b;
}
I'm trying to position an element (a button) relative to the element 2 elements before it (a picture). There is a varying amount of text between the picture and the button. Take a look at my site:
http://gorilla-gym.com/product-category/fitness-attachments/
What I'm trying to achieve is having the "Shop Now" buttons align horizontally for each product listing regardless of how much text is underneath the picture.
It seemed to me the most logical way to do this way to position the button relative to the picture, but I can't figure out how to do this. Let me know if you guys have an idea of how to do this, or if there's a better way to achieve what I want to do.
Thanks in advance.
check this one i think you want something like this
http://jsfiddle.net/FWzzR/1/
css
ul.products {
display:table;
width:100%;
table-layout:fixed;
border-collapse:separate;
border-spacing:10px;
}
.products > li {
background-color: #4F81BD;
border:2px solid #385D8A;
position: relative;
width: 22.05%;
display: table-cell;
padding:10px;
padding-bottom:50px;
text-align:center;
vertical-align:top;
}
.products > li >a {
display:block;
}
.products a.button {
position:absolute;
bottom:10px;
left:50%;
margin-left:-40px;
font-size: 100%;
line-height: 1em;
cursor: pointer;
text-decoration: none;
padding: 6px 10px;
font-family: inherit;
font-weight: bold;
color: #FFF;
text-shadow: 0 1px 0 #FF6311;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
border: 1px solid #973100;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #FD5200;
background: -webkit-gradient(linear, left top, left bottom, from(#FD5200), to(#CA4100));
background: -webkit-linear-gradient(#FD5200, #CA4100);
background: -moz-linear-gradient(center top, #FD5200 0%, #CA4100 100%);
background: -moz-gradient(center top, #FD5200 0%, #CA4100 100%);
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.075), inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
}
If all you want is to center align the "Shop Now" button at the bottom, then
.shopnow_button{
display: block;
margin: 0 auto; //something was overriding so I had to do !important here
width: 57px; // can be any value < the width of the parent container(Ofcourse !)
}
If there is a varying amount of text underneath the picture, then the elements will all be of varying height and you cannot align the "Shop Now" button horizontally beneath the picture. The only way to accomplish this is by making sure that all the divs are the same height, then you just position the shop now button as follows:
<div class="shop-now-div">
<img src="yourimage.jpg">
Lorem ipsum....
<a class="button" href="#">Shop Now</a>
</div>
.button { position: absolute; bottom: 5px; right: 5px; }
.shop-now-div { position: relative; }
There are two ways to make your div's the same height
1) JavaScript (not recommended, it's a pain)
2) A table (do it in CSS so you aren't messing with semantics)
UNFORTUNATELY, some modern browsers (Firefox, I believe) will not support position: relative on table-cell's (which you will need), so you are stuck with having to use JS to make your div's the same height....
Easiest solution:
Stick your shop now button on top of the image - that way you can easily align them horizontally. :)
This question is better answered here How to set relative position with Grandfather! element? simply setting position: relative on the grandfather element and position: absolute on the subject element.
That solution does rely on there being no positioning set on intermediate elements.
i was wondering if it is possible to use a hover with a nth-child like so
#gallery a img:hover {
display: block;
height:300px;
width:450px;
position:absolute;
z-index:99;
margin-left:-112.5px;
margin-top:-75px;
-webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
}
From this up here to some thing like this down here, only its not working
#gallery a img:hover:nth-child(1n+4) {
display: block;
height:300px;
width:450px;
position:absolute;
z-index:99;
margin-left:-112.5px;
margin-top:-75px;
-webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
}
#gallery a:hover:nth-child(1n+4)
Will work correctly but style the A tags instead of the IMG inside.
When you have markup like...
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
You cannot select the inner IMG and then try to apply an nth-child on it because there is only 1 IMG inside of the A tag.
Refer to the JSFIDDLE I created http://jsfiddle.net/fXS93/2/
Any change in how the IMG markup is wrapped will reset the CSS matching and NTH-CHILD calculation. This applies even if you are matching on a CLASS that all of the IMG share.
This is true for the latest FF, Chrome, and IE9.
in which browser did you tried this?
and on how many elements did you run the formula?
it will run from the third element in your parent element AND
you should add :hover
after the nth-child like this::nth-child(1n+4):hover
although it wont work in IE8 or earlier
EDIT:
i tried and the order did not affect the result you can put :hover before the :nthchild()
I have a site that will have a column of images and divs (a mix of both) that will always be the same size.
On all of these I want to add a certain kind of drop shadow (as seen here):
I've worked with CSS drop shadows but I've never seen one like this in CSS. Can this be done in CSS? Assuming it cannot then I'm guessing I would use just a drop shadow slice as a graphic, possibly a background. If that is the only route to go, how do I apply this to every image or div?
Right now what I'm doing is putting a div under each image or div:
<div class="rightimgdropshadow"> </div>
...and doing this in CSS:
.rightimgdropshadow
{
background-image: url(../images/site-structure/right-col-image-shadow.jpg);
background-repeat: no-repeat;
background-position: center top;
width 100%
height: 20px;
}
Is there a better way to do this? Thanks!
If you prefere to use CSS to create that type of shadows, you can use CSS3 as seen here!
CSS
/* Lifted corners */
.lifted {
-moz-border-radius:4px;
border-radius:4px;
}
.lifted:before,
.lifted:after {
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.lifted:after {
right:10px;
left:auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-ms-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}
Made a Fiddle!
Something along the lines of
border: 1px solid #333;
border-bottom: none;
padding: 10px 10px 20px;
background: url('insert_image') no-repeat;
background-position: left bottom;
The extra padding at the bottom allows the background to sit in the correct place.
Does that help?
You can use box-shadow:
.rightimgdropshadow {
box-shadow: 0px 2px 3px rgba(0,0,0,.3);
}
This will create a similar effect, but it won't look just the same.
Some info on that.
I have a menu with tiled images w/text under them. See Fiddle:
http://jsfiddle.net/techydude/GF8tS/
Is there a way I can rollover the box and have the text also activate its hover state, and vice versa?
Yes.
Instead of using :hover on the actual elements, apply it through their common parent, the li.
So use
li:hover .rounded instead of .rounded:hover
and
li:hover .tileText instead of .tileText:hover
demo at http://jsfiddle.net/gaby/DwT8K/1/
Yup http://jsfiddle.net/GF8tS/1/
I modified the CSS, so when the user hovers over the list-item, it would modify the CSS of the .tileText and the .rounded
li:hover .rounded {
-webkit-box-shadow: 0px 0px 0px 3px rgba(193, 232, 0, .75);
-moz-box-shadow: 0px 0px 0px 3px rgba(193, 232, 0, .75);
box-shadow: 0px 0px 0px 3px rgba(193, 232, 0, .75);
}
li:hover .tileText {
color:#C3EA00;
font-weight:bold;
text-decoration:none;
}