I am working on a Responsive grid site for a client (a modified version of WP responsive theme), and they have a slideshow on the homepage with a main page that has a background that they want to extend the full width of the page/viewport overtop of the main background.
Currently I have this
#slideshow{
position: relative;
}
#slideshow:before {
content:"";
width:8000px;
height:100%;
position:absolute;
background-image:url('images/bground-tiled.jpg');
background-repeat: repeat-x;
left:-3530px;
z-index:-1;
box-shadow:
inset 0px 15px 8px -10px #222,
inset 0px -15px 8px -10px #222;
}
which works fine on a desktop but on mobile/tablet it shows the screen as 8000px wide with extending out to the right due to the margin. I need a solution that does not "ruin" mobile views in this manner
I also just want to know the proper way to accomplish this for future reference. The content is in a 960px container and I cannot rework the entire design of the site to have an outside 100% div on the slider section with an inner div that is 960px (unfortunately).
here is a crudely drawn example
EDIT: Fiddle: http://jsfiddle.net/7s44S/14/
In the end I could not find an answer so I had to redo the base structure of the theme, and do it the "right" way
Related
As a wrote in the subject I'm going crazy for remove the disc from the custom icon on my JQM APP.
I've tried some solution found on the web but nothing is working.
This is a demo where on the left I got my home custom icon with disc and on the right the native home icon without disc:
http://jsfiddle.net/5nBVa/
This is the code I use:
.ui-icon-myhome:after {
background-image: url("http://www.mywine.info/images/theme/home.png");
/* Make your icon fit */
background-size: 24px 24px;
background-color: transparent;
-moz-border-radius: 0px;
-webkit-border-radius:0px;
border-radius:0px;
}
Anyone can show me the way to remove it?
Thanks
If I understand what you want, you just need to set the background-color of the link to transparent:
.ui-icon-myhome{
background-color: transparent !important;
}
Here is your updated FIDDLE
UPDATE: OP wants image to fill the circular button and be the same size as a standard icon button with disc.
The icon is actually on the anchor tag's :after. Making the background-size, the width and height the same size as the button will cause the image to take up the whole button space. Adjust the margin-top and margin-left to keep the image centered within the button:
.ui-icon-myhome:after {
background-image: url("http://www.mywine.info/images/theme/home.png");
/* Make your icon fit */
background-size: 32px 32px;
background-color: transparent;
-moz-border-radius: 0px;
-webkit-border-radius:0px;
border-radius:0px;
width: 32px !important;
height: 32px !important;
margin-top: -15px !important;
margin-left: -15px !important;
}
Updated DEMO
Not sure what you're trying to do, but have you tried adding class="ui-nodisc-icon" ?
Check Removing the disc in the following page : http://demos.jquerymobile.com/1.4.0/icons/index.html
I am actually making a website where the main browser is Internet Explorer 10.
They set the website so the Navigation Mode is set to compatibility IE10. (you can see this when you press F12, the info are on the bottom)
So I don't want to switch to the Navigator mode IE10, because they made an interface already, and if I change it, it just goes weird.
So Im going to explain you what I tried to get my rounded border to work ... They work half of the time.
So first I tried border-radius, but no succes with it.
So I then look for a plugin on the internet to find a way to make some rounded border and I found CSS3PIE.
This is like a JS plugin that can make the rounded border.
Like I said, it work half of the time.
So my css with this pluggin look likes this:
width:100px;
padding:20px;
top:0px;
position:relative;
vertical-align:top;
border:1px solid black;
-webkit-border-radius: 4px 4px 4px 4px;
-moz-border-radius:4px 4px 4px 4px;
border-radius:4px 4px 4px 4px;
-webkit-box-shadow: 0px 0px 2px rgb(0, 0, 0);
-moz-box-shadow: 0px 0px 2px rgb(0, 0, 0);
box-shadow: 0px 0px 2px rgb(0, 0, 0);
behavior: url(http://blablabla/Pie2/PIE.htc) ;
So as you can see, I just need to add up the file to the css and it do everything automaticly.
The probleme I have right now, is when I load the page for the first times, everything loads correctly(the borders), but when I switch between tabs on the website, sometimes the borders appears, and some other time they just wont appear.
When they are not appeard, I need to mouse over the element to make them appear.
(I guess that's a function that they have in their JS)
That thing is really annoying and that's what I want to fix :)
I want my border to always be there when I switch tabs!
If you have any other solution, feel free to inform me about them!
Thanks for any help!
__________>
Thanks, they want to stay with IE10. Do you know any other apps like CSS3PIE that I could try to see if I get any difference?
You can put this on the <head> section of your website:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
This will disable the Compatibility mode and stop messing your site.
I'm trying to figure out a way to have a certain amount of space between the top of my footer and a div.
Right now each page is of a different size and I'm adjusting this manually. The biggest issues I'm having is across different formats of web browsers my manual space is changing. and on a couple pages I have a js questionnaire, when the questionnaire is completed my div slides down over top of my back and next buttons. I corrected this by creating a new CSS style for it.
Is there a way I can set my div (Which is a box with text) to align on every page the same distance from the footer and on every browser. Right now my code is only working correctly in IE9.
Here is the CSS I'm using:
#mainInfoBox
{
margin-bottom:-35px; !important;
clear:both;
min-height:2em;
height: auto !important;
height:32px;
padding: 2px 3px 0 3px;
border: 1px solid #4c6352;
background-color:#f2f684;
color:#000;
font-family:Tahoma, Geneva, sans-serif;
text-align:center;
display:block;
position: relative;
}
And this is what I'm using in the html, though that values change on every page:
<div id="mainInfoBox" style="margin-top:193px; clear:both">Blah Blah Blah</div>
Assuming your footer is the same on every page, you can set a fixed height, or at least calculate the height of it. Then absolutely position the div you want on top of it using the bottom property like so:
footer { height: 250px; }
#mainInfoBox {
position: absolute;
bottom: 260px; /* so it is 10px on top of the footer */
}
So what I need is simple: user presses something, user sees a shadow effect on new div (div centered window) on top of all page (with 1/4 size for example) alike
Is it possible with some pure web-kit css art? Or javascript+images combination is needed? And how to do such thing?
What you are looking for can be called a modal window. It can be done using CSS3 properties, but it is supported only in IE9+, Firefox 4, Chrome, and Opera.
For a cross-browser solution, you should look at javascript scripts which can render the same effect. There are many popular packages like Lightbox, ShadowBox, ThickBox, FaceBox, etc.
If you are using ASP.NET, there is the ModalPopupExtender in the AJAXToolkit, which will give you the effect.
You need two things a div for your dialog box with box-shadow and another div that lies behind your dialog box with an opacity of 50% or so. This can be done with some css in most every browser including ie. Read this article on how to get box-shadow work in all browser: http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/
so your html will look like this:
<div class="overlay"/>
<div class="dialogbox">someContent</div>
and your css:
.overlay {
position:absolute;
height: 100%;
width: 100%;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
opacity: 0.5;
}
.dialogbox{
width: 200px;
height: 150px;
margin: auto;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
From this quote:
Web-kit css div shadow: is it possible
to put it onto div with pure css
and this one:
user sees a shadow effect on new div
It seems as though you're asking if it's possible to create the "shadow" effect around the inner div using CSS.
Chrome's settings page is using CSS3's box-shadow to do this:
-webkit-box-shadow: 0 5px 80px #505050;
box-shadow works in these browsers: http://caniuse.com/css-boxshadow
and the cross-browser CSS is:
-webkit-box-shadow: 0 5px 80px #505050;
-moz-box-shadow: 0 5px 80px #505050;
box-shadow: 0 5px 80px #505050;
http://jsfiddle.net/XHAbV/
If you need it to work in older versions of IE, you can use CSS3 PIE to emulate the box-shadow in those browsers.
If you're after the JavaScript side of how to do this (a modal window), the other answer covers it quite thoroughly.
I'm trying to find a jQuery scrollbar that looks like the one of the iPhone: a simple black bar without the up or down buttons. I've found a few scripts but most tend to do so much more than I need. I basically have a div with a fixed height that is set on overflow:auto to which I would like to apply this scrollbar. Help would greatly be appreciated!
Matteo Spinelli has an iPhone-like scrollbar inside of his iScroll library. You should try looking into whether or not you can adopt it to your needs.
What are your browser requirements?
You should try to avoid javascript solutions since they will increase the complexity of your page. If a third-party scrollbar javascript library breaks, you will have to debug it yourself (been there, done that).
Chrome has full support for CSS3 scrollbars, something like this should make an iPhone like scrollbar
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
IE allows styling scrollbars with vendor specific tags, but its very limited. e.g.:
scrollbar-base-color: #663366;
scrollbar-face-color: #99CCCC;
scrollbar-track-color: #996699;
scrollbar-arrow-color: #330033;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #CCCCCC;
scrollbar-shadow-color: #663366;
scrollbar-darkshadow-color: #000000;
Here is a jsFiddle with the styled scrollbars:
http://jsfiddle.net/APmLZ/3/