I have set scrollbars to auto, but still they do appear, although the website's content is minimal. I just can not see, what is wrong here.
CSS code:
html {height: 100%; overflow: auto; margin: 0;}
body {background: url(random_img.php) no-repeat top left fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; margin: 0; height: 100%; font-size: 1rem; font-family: Cabin, Helvetica, Roboto, Arial, sans-serif;}
#stage {margin: 2% auto 0 auto; padding: 0; min-height: 100%; width: 58.75rem;}
Example website: ivanschneider.com
Thank you for your help.
I just had to remove height: 100% from html.
Related
I'd like to change my sub-menu from horizontal to vertical, please let me know how this is possible...
My li is:
position: relative;
text-align: center;
display: table-cell;
and ul is:
position: absolute;
top: 95%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
Try changing:
display: table-cell;
to
display: block
This should do it. Make sure you clear your Joomla and browser cache once you do this.
How can i set to a div a background image with a full height (as a cover)?
.index-image-content{
background: ##00aa77;
background-image: url("../images/zenbg-1.png"), url("../images/zenbg-2.png");
background-repeat: repeat-x, repeat;
width:100%;
height:auto;
padding-top:20px;
padding-bottom: 20px;
color:#fff;
}
Thanks in advance !!
Just add those to your class
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
source
This should work normally
.index-image-content{
background-image: url("../images/zenbg-1.png"), url("../images/zenbg-2.png");
background-repeat: no-repeat;
background-size: cover;
}
If I put my extension in menu bar, after closing extension some CSS properties doesn't work. (In the add-on toolbar it works perfectly)
Video: http://www.youtube.com/watch?v=iM9EVFe8M4U
github: https://github.com/Exclumice/firex/tree/master/content
CSS: https://github.com/Exclumice/firex/blob/master/skin/overlay.css
CSS properties which become inoperable:
.proxy-help {
background: url("icon-help.png");
background-position: 97% 50%;
background-repeat: no-repeat;
background-color: #e5e5e5;
border-radius: 10px;
padding: 5px;
text-align: center;
width: 100%;
}
.proxy-help-text > label {
width: 80%;
}
.proxy-list hbox > label.proxy-country {
padding: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
background: url("planet.png");
background-position: 5px center;
background-repeat: no-repeat;
width: 180px;
text-indent: 25px;
}
.proxy-list .proxy-type {
padding: 5px;
width: 50px;
}
How to fix it? Why is this happening?
Thanks in advance.
Ok after testing we find this.
When it is in toolbar, the elements are black in DOM Inspector, so they are NOT anonymous:
But when we move them to PanelUI-popup they become anonymous, notice how they are red in the inspector:
maybe #nmaier can advise here.
I'm thinking a box loses its box'ness so then the % widths you used are taking the % of osme different box once placed in panelui-poup.
I have problem with Sass and this is connected with creating sprites and then reusing compiled class later.
This my styles.scss:
#import 'buttons/*.png';
#include all-buttons-sprites;
#import 'partial/buttons';
And this is buttons.scss:
.buttons {
#extend .buttons-blue-button;
background-repeat: no-repeat;
background-size: cover;
color: #ffffff;
cursor: pointer;
border: none;
font-size: 18px;
width: 242px;
height: 45px;
font: sky-text-med;
padding-bottom: 5px;
margin: 24px 4px 14px;
opacity: 0;
}
Compass not saying any errors but compile css is showing:
.buttons-sprite, .buttons-blue-button, .buttons, .buttons-blue-hover-button, .buttons-yellow-button, .buttons .yellow, .buttons-yellow-hover-button {
background: url('/welcome/assets/img/buttons-s5afcdf1a60.png') no-repeat; }
.buttons-blue-button, .buttons {
background-position: 0 0; }
.buttons {
background-repeat: no-repeat;
background-size: cover;
color: #ffffff;
cursor: pointer;
border: none;
font-size: 18px;
width: 242px;
height: 45px;
font: sky-text-med;
padding-bottom: 5px;
margin: 24px 4px 14px;
opacity: 0; }
But there is missing background with should be set by #extend .buttons-blue-button;
Why this isn't happening ?
.buttons {
#extend .buttons-blue-button;
...
}
You are telling the .button class to extend the .button-blue-button class.
.buttons-sprite, .buttons-blue-button, .buttons, .. {
background: url('/welcome/assets/img/buttons-s5afcdf1a60.png') no-repeat;
}
.buttons-blue-button, .buttons {
background-position: 0 0;
}
Compass is not making mistakes here, the background-image was set, the background-position was set too. Your expectations/assumptions & css-properties are Simply wrong.
So i have a popup window with a scroller. For scroller i used basic css element overflow: scroll. But the problem is scroller appears on the side and on the bottom. Now i want to know if there is anyway to remove the bottom scroller, because even though its locked its useless to me and it would look better without it. Ive googled it and havent found anything so if you have a solution please share it. If you need any of the code tell me and i will post it.
This is "my" css for popup (i got the code from http://www.zurb.com/playground/reveal-modal-plugin):
.reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: #000;
background: rgba(0,0,0,.8);
z-index: 100;
display: none;
top: 0;
left: 0;
}
.reveal-modal {
visibility: hidden;
top: 100px;
left: 50%;
margin-left: -300px;
width: 520px;
height: 400px;
background: #eee url(modal-gloss.png) no-repeat -200px -80px;
position: absolute;
z-index: 101;
padding: 30px 40px 34px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
-box-shadow: 0 0 10px rgba(0,0,0,.4);
overflow:scroll;
}
.reveal-modal h1{
color: green;
font-size: 40px;
}
.reveal-modal strong{
font-style: inherit;
}
.reveal-modal.small { width: 200px; margin-left: -140px;}
.reveal-modal.medium { width: 400px; margin-left: -240px;}
.reveal-modal.large { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge { width: 800px; margin-left: -440px;}
.reveal-modal .close-reveal-modal {
font-size: 22px;
line-height: .5;
position: absolute;
top: 8px;
right: 11px;
color: #aaa;
text-shadow: 0 -1px 1px rbga(0,0,0,.6);
font-weight: bold;
cursor: pointer;
}
a better way of doing it would be
overflow-x:hidden;
overflow-y:auto;
That way it means that if a page gets bigger with jquery and then you need to scroll the view won't get smaller and affect your measurements
This should work:
overflow-x:hidden;
overflow-y:auto;