http://exrx.net/concrete5/store/low-volume-progressive-intensity-weight-training
http://exrx.net/concrete5/store/low-volume-progressive-intensity-weight-training-1
Here are my website link. I have translate this button on pages. When I hover on translate this button, the language section is shown 50 pixels below.
How can I add css dynamically that add top position to language section. Right now I am using below css
.ttb-panel { top: 235px !important; }
This only works when one div with class .ccm-custom-style-adstop (Advertise after page title ) is not there.
I have given both page link.
What CSS rule will work?
$("# TRANSLATE BUTTON ID").mouseover(function(){
$("# TRANSLATE DIV ID").addClass("ttb-panel");
});
Related
So, i made a website using Wordpress and elementor, I would like to change the image on the right when you hover on the label 'Carrello'. Basically when I hover on different drop-down menu labels, the ima should change accordingly on which link I'm hovering. That's the link of the website (don't look at anything else, I'm just doing some practice on Mega Menu).
That's my code (in this example I've just used display:none just to see if I can affect the other div but the goal should be change it) :
.megamenu22 .elementor-nav-menu li:nth-child(2):hover ~ .elementor-element-d0f1e73 img {display:none !important}
Thank you!
https://www.archless.it/
I have a CSS conflict problem when incorporating Slick Carousel in my personal webpage. Below is a link to the page where you can see that there are no visible navigation arrows.
http://matutor2012.scuola.zanichelli.it/animazionibienniowc/drag_and_drop_insiemi/DDM-004-BN/index.php
Can this be due to CSS in my page colliding with Slick's CSS?
Here how it looks before incorporating the carousel on my page:
http://matutor2012.scuola.zanichelli.it/animazionibienniowc/drag_and_drop_insiemi/DDM-003-BN/index.php
Remove height form the .esempio class and add color in .slick-prev::before, .slick-next::before and it's work perfectly
.slick-prev::before, .slick-next::before {
color:red;
}
Arrows are white. Change:
.slick-prev:before, .slick-next:before
{
color:black;
}
you need to remove the color style from slick.css under (slick-prev:before, .slick-next:before) css styles
That is setting the arrows to white which is why they can not bee seen on the page.
Or set these as new styles in your style sheet with the !important tag that way these should be the ones which are used.
I have 03 frame (Header, Left_Menu and Content). In header frame I set a search input box. If anyone click on search input box then a blue color div show under the search input box but above content frame. But When I click search input box then blue color div box don’t show above content frame.
I want to create search input box as following example:
But my search input box result show as following example:
Please, anyone can help to solve this problem.
Nowadays <frame> is not recommended. You want to overflow your header onto the content.
This is only feasible, if you don't use frames. You should use for example a simple <div> HTML tag instead of the frames.
After that, you should add some CSS property, which results the desired effect. For example:
#header{
position: relative;
z-index: 2;
heigth: 100px;
}
You should add the z-index property.
You can read more about z-index here: Z-index - CSS
Take a look at my site -> mangtolo. When you click at the big comment button's image (exactly on the image), it doesn't take you anywhere. But when you click the surrounding a tag background, the link works.
How do I make it clickable(img tag) so that it takes me to the comment page? Is it supposed to be clickable but the structure of my html or CSS doesn't permit it?
<div id="fblikebutton"> is positioned relative and is rendered on top of your comment button. Add a background-color and you'll see that it's blocking the comment button.
if you'll change the CSS for #fblikebutton from
/* line 344 in home.css (according to Firebug) */
padding-left: 100px;
to:
margin-left: 100px;
it will fix your problem (which was that the Facebook like button was on top of that comment)
I implemented a simple tab navigation by using <ul><li><a> , the problem is that there are several "layers" on each tab still needed. what I mean is, In my current implementation I have:
-tab text which is <a>text</a>
-on each tab I have a tab icon image, which I put on <li> as background-image of <li>,
But I still need:
-tab seperator image (A vertical bar image) which I intend to put on <a>,and position it on the left side background-position: left , it is working but this implementation is not in my code which I showed below on jsfiddle site because I did not find a suitable image on internet
-tab background image which occupy the whole tab, I have no idea where I should put this image?
Please check & run my implementation here on jsfiddle, in the css code, I used background-color instead of background-image just to express what I want to achieve, but I need to use background-image as the tab background.
What I tried:
I tried to put the tab background image on <li> but it will hide the
icon image which has already on <li>,
I tried to put the tab background image on <a> but it will also hide the tab seperator image when mouse hover
How to get rid of this layer probelm on tab implementation then? (Please do not suggest me to use less image, since it is one requirement of this app to use those images.)
(By the way, all images I mentioned have mouse "hover" counterpart)
If you don't want to change the HTML, you can use pseudo-elements:
Fiddle: http://jsfiddle.net/Pq7LC/39/
li:before{
content: "";
background: pink;
width: 20px;
height: 61px;
display: block;
position:absolute;
}
li:first-child:before{ /* Don't add image border before first li */
content:none;
}
You can do it with css, no need of images.
http://jsfiddle.net/Pq7LC/40/
Hope it helped you :)