My product image gallery uses a fancy box script and since i installed a plugin, i am having a small problem with the images popping up, then immediately jumping to the upper left corner.
i have tried adding stying to recenter it but its not working.
here is a product page:
http://a1decals.com/products-page/tribal-symbols-decals/flags-decals/america-american-flag-decal-sticker/
if you click on an image in the gallery you can see it popup.
i inspect the image element with firebug and get:
<div id="fancybox-wrap" style="width: 695px; height: auto; top: 0px; left: 0px; display: block; opacity: 1; transition: all 0s ease; -webkit-transition: all 0s ease;">
and i tried adding:
.fancybox-wrap {
top: 50% !important;
left: 50% !important;
}
and
#fancybox-wrap {
position: absolute;
top: 50% !important;
left: 50% !important;
}
i cant seem to override whatever is restyling that popup. any help is greatly appreciated
Related
I am trying to make a header for my reveal.js presentation that sticks to the top of the screen. The content in the header is dynamic on a per-slide basis, so I have to place the markup within the section tag.
Apparently position:fixed does not really provide satisfying results in reveal.js if the markup is within the section tag. I can't really make out why that is exactly, but I found some info in the github repo suggesting setting the presentation size to fit the viewport size with:
Reveal.initialize {
...
width: '100%',
height: '100%',
...
}
But it still doesn't work for me - it seems the presentation is not really affected by the above. Here is a demo:
https://dl.dropboxusercontent.com/u/706446/_linked%20stuff/reveal.js/index.html
Any ideas how to solve this?
Add this to css:
.reveal.slide .slides > section, .reveal.slide .slides > section > section {
min-height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
position: absolute !important;
top: 0 !important;
align-items: center !important;
}
section > h1, section > h2 {
position: absolute !important;
top: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
left: 0 !important;
right: 0 !important;
text-align: center !important;
}
.print-pdf .reveal.slide .slides > section, .print-pdf .reveal.slide .slides > section > section {
min-height: 770px !important;
position: relative !important;
}
Demo https://rawgit.com/rofrol/reveal.js/fixed_header/
Code https://github.com/rofrol/reveal.js/blob/fixed_header/index.html#L411
Discussion https://github.com/hakimel/reveal.js/issues/1312 https://github.com/hakimel/reveal.js/issues/180
At the end of your main.html add:
Reveal.initialize({
center: false,
})
I'm trying to center my content div. It's set to 100%, and the div is contained in body, which is also set to 100%. I have a max-width: 1400px because I don't want my content to stretch more than that if the screen resolution is higher. The thing is, it doesn't work using margin: auto. My content stands on the left, uncentered on screen wider than 1400px.
If I delete the max-width, everything is perfectly centered on wide screens, but the content is stretched to the the whole screen...
#content {
width: 100%;
height: auto;
position: absolute;
top: 400px;
margin: 0 auto;
margin-top: 50px;
display: none;
max-width: 1400px;
}
Easiest way to achieve this, is to set the width property to the max width you need, and add max-width: 100%;. This will prevent it from being bigger than 100% but still go up to the max width. Also, you should remove the absolute positioning:
JS Fiddle
You can use the transform technique, which doesn't require extra mark-up or media queries.
#content {
position: relative; /* 'fixed' will work also. */
max-width: 500px; /* Your required width here. */
width: 100%;
left: 50%;
transform: translateX(-50%);
}
Here's a demo https://jsfiddle.net/matharden/6uduf7av/
Use Flexbox...
Put this classes in the parent element (the body):
The HTML
<body class="p-flexbox flex-hcc">
<!-- The content -->
</body>
Where:
p-flexbox means parent-flexbox
flex-hcc means flexbox-horizontal-center-center
The CSS
.p-flexbox {
display: -webkit-box;
display: -moz-box;
display: box;
}
.flex-hcc {
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
Cheers,
Leonardo
Using the emenu Yii extension for a menu. The underlying project for this extension is http://lwis.net/free-css-drop-down-menu/ .
Right now the sub menus display in a row (which does eventually wrap to a 2nd row). I'm using the "nvidia" theme.
How do I make submenus vertical? I want the items in the sub menu to stack vertically on top of one another.
This is a css issue. The inner <ul> should have the style: width : 100% which comes from dropdown.css, but it is being overridden by themes/nvidia.com/default.css where it is specified as: width: 170px. So you can change that value back to 100% by adding it in your own custom css file.
dropdown.css:
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
themes/nvidia.com/default.css:
ul.dropdown ul {
width: 170px;
background-color: #333;
color: #fff;
font-size: 11px;
text-transform: none;
filter: alpha(opacity=90);
-moz-opacity: .9;
KhtmlOpacity: .9;
opacity: .9;
}
mystyle.css:
ul.dropdown ul{
width:100% !important;
}
I have a common css for all the pages in my application called growl.css...
I have
.ui-growl{
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
How do I change the background color of the growl message. Inserting color and background-color didn't change a thing. Thanks
.ui-growl-item-container { background-image: url('./imgs/background.jpg'); }
this is to set image , try using color or background-color
Ok so I've been through answers like "background-clip: padding-box;" and while it makes the end product look a little better, it still doesn't completely solve the problem of the background color bleeding outside of the border. Does anyone have a real solution to this issue?
Here's a screenshot of the issue:
CSS Used For Buttons
#footer #pager li a {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
display: block;
float: left;
color: #444 !important;
text-decoration: none !important;
background-clip: padding-box !important;
padding: 8px 12px;
background-color: #ccc;
border: 1px solid #000;
}
It's not what you're waiting for, I know, but I have to say this: use an image. This is not only due to the possibility to eliminate the bleed on all browsers. Your bleed problem on Firefox is nothing compared to how Chrome mercilessly slaughters the look of your buttons... Check it and start crying :(.
In case you're wondering what's wrong: Chrome is utterly helpless when you use border-radius and box-shadow:inset on the same element. It's a known bug and you can't eliminate it until they fix it in the browser (and judging by how "fast" they are to respond to some bug reports - some have been reported two years ago and still are unsolved, even when the users offer a ready solution - I think we shouldn't expect Chrome to work properly in the near future).
[EDIT]
Also, note this:
Firefox produces the bleed effect
Opera doesn't render CSS3 gradients
IE doesn't render box shadow
Chrome fails in the worst manner possible
So... there isn't a single browser which renders your button correctly. Does it make sense to keep using CSS3 in this case?
The solution would be to use an image instead of the background for the link, with overflow: hidden:
.button{
margin: 45px 0;
width: 222px;
height: 40px;
display: block;
border: 1px solid #ebebeb;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
overflow: hidden !important;
}
.button img {
width: 222px;
height: 40px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff799), to(#fdc689));
background: -webkit-linear-gradient(top, #fff799, #fdc689);
background: -moz-linear-gradient(top, #fff799, #fdc689);
background: -o-linear-gradient(top, #fff799, #fdc689);
background: -ms-linear-gradient(top, #fff799, #fdc689);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fff799', EndColorStr='#fdc689');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fff799', EndColorStr='#fdc689', GradientType=0)";
}