Would just like to ask what could possibly go wrong, I'm using wordpress and modified the theme css few years ago, I havent check the site for years and upon looking the hover for each element of circle was staying on hover effect even if it is not hovered. On its normal view, the inner circle which is dark gray together with the post title should not be visble until it is hovered please see the image:
Any thoughts? the site is -- --
Thanks
the h3 in the a tag has colour values
div.caption.boxcaption a.view h3 { color:Transparent; }
div.caption.boxcaption a.view:hover h3 { color:White; }
You need to position the background blocking image on the a.view instead of the div.boxcaption changing its position to off screen on a.view:hover
div.boxcaption {
background: url("images/circle_caption.png") no-repeat scroll center top rgba(0, 0, 0, 0);
height: 112px;
left: 0;
margin-left: 21px;
padding: 65px 10px;
position: absolute;
text-align: center;
top: 21px;
width: 210px;
z-index: 1000;
}
Related
I have a simple page with two offcanvas menus, one in which side, they both work normally when in english, but since I also need to support arabic, I use the dir="rtl" in the html tag, and with it the right offcanvas menu have some weird behaviour on Chrome, looks like a repaint issue, when I resize the window it goes to the right position (sometimes it goes randomly after a few seconds as well).
I'm using transform: translateX(); and transform: translate3d(); in the body to achieve this, and as far as I can see there's nothing wrong.
Here's a codepen example of the bug: http://codepen.io/Ghostavio/pen/WbgXXZ
Its a simple thing I did Hope This is your answer
What I did was made the body position Fixd
in body:
position: fixed
Your New CSS will look like this:
box-sizing: border-box
body
padding: 5%
position: fixed /*Changed Here*/
overflow-x: hidden
transition: .3s ease-in-out transform
&.left-offcanvas-active
transform: translateX(270px)
//transform: translate3d(270px, 0, 0)
&.right-offcanvas-active
transform: translateX(-270px)
//transform: translate3d(-270px, 0, 0)
header
text-align: center
position: relative
img, svg
vertical-align: middle
a
text-decoration: none
.logo img
width: 240px
max-width: 100%
.gc
fill: #8E8E8E
.content
text-align: justify
.hamburger-icon
position: absolute
top: 10px
left: 0
cursor: pointer
.second-icon
left: auto
right: 0
.left-offcanvas, .right-offcanvas
witdh: 270px
min-width: 270px
height: 100%
background-color: #BABACA
position: fixed
display: block
top: 5%
.left-offcanvas
left: -270px
.right-offcanvas
right: -270px
.offcanvas-links
display: block
padding: 20px
color: #117EBF
border-bottom: 1px solid #E1E1E1
font-weight: 800
text-decoration: none
span
background-color: #C80428
color: #FFF
padding: 0 5px
border-radius: 2px
font-weight: 400
float: right
Hope this helps you.
I had a similar issue creating a sticky header on a horizontal scrolling table for RTL. What I found is that in order to get position : sticky to work for RTL without JS, I had to assign z-index to both the sticky column (sticky header) and the scrollable columns.
At first I used JS to position everything and add offset padding to get the sticky header effect. But after a walking away in frustration and returning to it days later did I come up with a CSS only solution.
JSfiddle example
I'm working on the unbounce landing page platform. Overall, it's really awesome and makes A/B testing pretty easy. It's more or less just drag and drop, but you're able to add css, html, javascript, etc.
Anyway, I'm working on creating a fixed signup area on the bottom of the screen (should boost conversions), but I'm having some troubles. The signup box is created within the wysiwyg dashboard, and from what I see it just builds the CSS for you, as you move sliders, change colors and such.
I'm able to make the entire signup area float right to the bottom, but I can't get the signup box to stay centered. I can use margins and positioning, but not the align: center function.
I've tried doing margin-left: auto; margin-right: auto as well as text-align: center; but it does absolutely nothing!
When changing the size of the screen, it just will not stay centered. But here's the kicker; the text has no problem centering with just width: 100%.. The signup box doesn't seem to respect any wrapper and I'm thinking this might be the problem.
This is all the CSS I'm using to create this fixed section:
#lp-pom-box-214 {
top: auto !important;
display:block;
position:fixed;
margin-left: auto;
margin-right: auto;
bottom:0px;
width: 100%;
align: center;
}
#lp-pom-form-51 {
top: auto !important;
display:block;
width: 100%;
position:fixed;
bottom: 25px;
margin-left: 26%;
}
#lp-pom-text-211 {
top: auto !important;
display:block;
position:fixed;
bottom:75px;
width: 100%;
}
Thanks a TON in advance!! This client is really good to me, so I want to do a good job for them. I'm not a great coder, but I'm very good at marketing so feel free to give me a shout if you need help in that arena :) That's the best way I know how to give back to whoever helps me out (or anyone else in the community for that matter).
Thanks again.
You can't adjust the position of a fixed positioned element in this way.
A fixed position element is positioned relative to the viewport, or the browser window. The viewport doesn't change when the window is scrolled, so a fixed positioned element will do exactly as the name implies and remain fixed in it's assigned position. To position a fixed element you use the properties top, right, bottom, and left
If you want to keep it as a fixed positioned element you can vertically and horizontally center it on the page by setting top and left to 50% so as the left-top corner of the container is centered within the page, you can then use margin-top and margin-left with negative values to compensate for half of the width and height of the element to achieve true center within the center of your container.
Something like this?
if yes check this code
css
.fixed-bottom {
position:fixed;
left:0;
bottom:0;
padding:10px 0;
background:#CCC;
width:100%;
}
.fixed-bottom h1 {
text-align:center;
}
#lp-pom-button-52 {
display: block;
z-index: 61;
width: 175px;
height: 54px;
line-height: 54px;
behavior: url(/PIE.htc);
border-radius: 8px;
background-color: #ff0000;
background: -webkit-linear-gradient(#ff0000,#e60000);
background: -moz-linear-gradient(#ff0000,#e60000);
background: -ms-linear-gradient(#ff0000,#e60000);
background: -o-linear-gradient(#ff0000,#e60000);
background: linear-gradient(#ff0000,#e60000);
box-shadow: inset 0px 1px 0px #ff4c4c,inset 0 -1px 2px #b30000;
text-shadow: 1px 1px #5c0000;
-pie-background: linear-gradient(#ff0000,#e60000);
color: #fff;
border-style: solid;
border-width: 3px;
border-color: #333333;
font-size: 24px;
font-weight: bold;
font-family: arial;
text-align: center;
background-repeat: no-repeat;
float:left;
margin:0 0 0 10px;
}
#lp-pom-form-51 .lp-pom-form-field input[type=text] {
border-style: solid;
border-width: 10px;
border-color: #002c77;
}
a {
color: #ff0000;
text-decoration: none;
}
The idea was to make the not valid error tip that comes up when people fail to fill out a required field show up like a speech bubble. So the arrowhead image shows in the center and underneath the text and would point into the field that they missed.
Fiddle here
HTML:
<span class="wpcf7-not-valid-tip">Please fill the required field.</span>
CSS:
.wpcf7-not-valid-tip {
background: red;
color: white;
padding: 10px;
width: 100px;
background-position: 0 0;
background-repeat: no-repeat;
background-image: url('http://s24.postimg.org/qacevkf7l/green_error_arrow.png');
}
As you can see I have a background color and the arrow image that needs to sit in the middle of the element and below it but, of course, if you position it using background-position, the image is hidden as it cannot overflow outside of the element itself. This would be easy if I could easily edit the HTML but I would prefer not to as I am using a plugin and want to be free to update the plugin in the future.
QUESTION:
Is there a pure CSS solution?
If not (and I suspect there isnt) what is the cleanest way to solve this issue? Would I use add_filter to alter the html to put a div around the tooltip that i could then add the bg image to? Something with css "content:", a js solution?
Got the answer elsewhere.Will accept unless someone can think of something better.
http://jsfiddle.net/D2KFX/2/
This works perfectly using CSS (albeit adding content with the content: declaration) by drawing a triangle with borders instead of using an image for it.
CSS
.wpcf7-not-valid-tip {
background: red;
color: white;
padding: 10px;
width: 100px;
}
/* Updated code */
.wpcf7-not-valid-tip {
position: relative;
}
.wpcf7-not-valid-tip:after {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 0, 0, 0);
border-top-color: red;
border-width: 10px;
left: 50%;
margin-left: -10px;
}
I'm really not sure how to pose this question any other way, but I'm trying to load text on top of an image - which appears to be a tricky task in itself, but I've got it going using this tutorial. Unfortunately, the tutorial is slightly out of date and I can't figure out a way to dynamically change both the font size and the span size for mobile and still maintain the text in the correct place on top of the image.
When the window is resized the text and the box doesn't resize properly (it overflows outside of the image).
I've tried percentage sizing as well as other techniques with little luck. The CSS I'm using to display the text over the image with a background can be seen below.
What's the best practice for overlaying text on an image and how would one go about making it responsive? This is what I'm trying to use for desktop browsers right now:
.herotext span {
position: absolute;
top: 80%;
font-family: 'museo_slab500';
font-size: 150%;
color: #fff;
padding-left: 20px;
width: 40%;
line-height: 35px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
}
Does anyone have some advice on how to handle this properly these days? The article I mention above is from 2009 and I suspect it's not the best way to overlay text.
Here are the changes I would make:
Position the span using bottom rather than top, so you always have a specific margin between the span and the bottom of the image.
Use a percentage-based line-height so that it will change proportionally to the font-size
Add some padding to the right of the span, so the text doesn't bump right up on the edge of the span
Updated CSS:
.herotext span {
position: absolute;
bottom: 20px;
font-family: 'museo_slab500';
font-size: 150%;
color: #fff;
padding: 0 20px;
width: 40%;
line-height: 150%;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
}
I'm trying to achieve a hover effect with a background with the menu items, but with the css I have things appear to be out of place. I've tried many different things and still can't figure out how to have the menu items stay in place when on hover, and also not to have the text stick to the bottom on top of background.
http://youvisit.com/creative/FindYourFutureCampaign/html/
The problem is that by adding your left/right images (the ones with the rounded corners), you're changing the width and height of the <li>. Since those images are 19px tall, you need to get the height of the <li> to be 19px. You can do this using line-height and height. After doing that, you'll have to figure out how to vertically align the text in the <a>. Then, you need to adjust for the changes in width. You could do this by using left/right padding on the <a>, and then remove that padding on hover (the padding removed should equal the width of the left/right image).
This should get your pretty close. I didn't test this in IE7/8.
ul.menuItems li {
float: left;
height: 19px;
line-height: 19px;
margin-right: 20px;
}
ul.menuItems li a {
color: #000000;
display: block;
float: left;
height: 19px;
line-height: 19px;
padding: 0 2px;
text-decoration: none;
}
ul.menuItems li:hover a {
background: url("../img/menuHoverCenter.png") repeat-x 0 0;
padding: 0;
}
ul.menuItems li:hover:before {
content: url("../img/menuHoverLeft.png");
float: left;
}
ul.menuItems li:hover:after {
content: url("../img/menuHoverRight.png");
float: right;
}
Really, this is a bad design. You probably don't need to add content on hover. How about using CSS3 border-radius to get your rounded corners. Then use either linear-gradient or a background image for your background. border-radius is not supported by all browsers, but it's fairly well supported if you're not worried about IE8 and lower: http://caniuse.com/#search=border-radius
Fix your css and it will not "jump":
ul.menuItems li:hover:before {
background: url("../img/menuHoverLeft.png") no-repeat 50% 0%;
}
ul.menuItems li:hover:after {
background: url("../img/menuHoverRight.png") no-repeat 50% 100%;
}
And give height with width to work properly.