I think I have a reasonable understanding of how css sprites work, but I am baffled by how JQ Mobile is doing it. As a sample I put together a really basic version:
<style>
#id {
display: block-inline;
width: 16px;
height: 16px;
background-image: url("http://code.jquery.com/mobile/1.0b1/images/icons-18-white.png");
background-position: -576px 50%;
background-color: rgba(0,0,0,0.4);
}
</style>
<div style="border: 1 solid black; padding: 5px">
<span id="id"> </span>
</div>
Which is a stripped down of how jqm is doing it. What I don't get is that if you load that png file into an image editor it is completely white, and I can't see any of the images in there. I am also completely confused as to why the y for background position is 50%.
Can anyone help me understand?
The sprite you're talking about has many white icons on a transparent background. If you use lightweight free tool like IrfanView, you'd see it like this:
background-position: -576px 50%; means the background would be placed at the position of -576 from left and 50% from top, which I think is where the home icon is. Although perhaps the 50% bit won't matter in this case as the height is set to 16px but maybe it matters for some other weird mobile browsers.
Related
I am programming a simple movieDB app with Ionic. A part of it is listing actors, who play in a movie as a scrollable vertical card list. I am using good ol' divs and custom CSS.
This is how it looks like in a browser (Firefox 38 on Mac): this is the DESIRED behavior
however when I emulate it on iOS (iOS 7.1.1 on iPad) I get this:
It is scrollable, but the divs overlap. They are collapsed.
You can find my CSS code below. I believe that I have tried a combination of every -webkit tag out there and I still can't get it to work.
Any help greatly appreciated :)
#actorsBox{
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-justify-content: space-between;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
align-items: center;
#actor {
height: 30vh;
width: 15vw;
margin-left: 2vw;
padding-top: 12vh;
border-radius: 5px;
text-align: center;
background-color: cornflowerblue;
}}
UPDATE 7:45 GMT 25.6.2015
Thanks to COOOL's answer I am able to track the origin of this behavior, so I am updating the question:
In browsers, overflow-scroll extends the flexbox to accomodate all items with their original widths. However with the current code, iOS just squeezes them all in the original dimensions of the flexbox. If I were to put anything more than 100px they would overlap again (see the code below).
#actorsBox{
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-justify-content: space-between;
overflow-y: scroll;
overflow-scrolling: auto;
-webkit-overflow-scrolling: touch;
align-items: center;
.actor {
height: 30vh;
width: 100px;
min-width: 100px;
However if I set width of #actorsBox to something big (say 2000px) the items are spaced out nicely again.
It seems to me that -webkit-overflow-scrolling is the cause of the issue. Does anyone have some experience with this?
Well, firstly your using a div #id for an area you should be using a .class
a .class is for selecting multiple instances as an #id is for one unique instance.
It looks like you have #actor as the selector of the problematic content. And it looks like your width is being ignored.
You can firstly try using px or % (instead of vw) where you have this: width: 15vw;
Or define a min-width for the actor boxes.
.actor { // firstly change to a class
height: 30vh;
width: 15vw; // mobile browser could dislike this, if below doesn't work try using % or px
min-width: 20px; // or whatever is relevant, may require some testing
/// the rest of your cool styles
}
Update: (re: your comment)
If 2000px on #actorsBox responded well, then you may need to add a min-width there as well. (or at-least define a width)
#actorsBox{
// all your previous styles
width: 1000px; // hows it gonna know when to overflow, bro?
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
// I would add min-width in px then width 100% and a max-width in px
// but declaring a width here is all you need
align-items: center;
}
In any case you need a width defined where you have an overflow-scroll defined. This is likely your issue; if the above still doesn't work try also adding this position:relative; to assure .actor is relative to this as a wrapper
I'm using the border-image property on elements with an image file set as the border background. The border image file has transparency and it works as I want it in Chrome and Firefox.
However, in IE11, the transparent area "overwrites" the background image under the border. Is there a way to fix it? I'm using the same border image on elements with various background images so I'd rather not create separate non-transparent border images for each one.
This is what I have so far:
body {
background: #000;
}
div {
background-image: url(http://i.stack.imgur.com/7dzt1.jpg);
border-image: url(http://i.stack.imgur.com/Zf544.png) 14 round;
width: 300px;
height: 80px;
border-style: solid;
border-width: 14px;
border-radius: 5px;
}
<div></div>
Rendering comparison
border-image file:
background-image file:
Defining a border-image-width instead of border-width solves the issue in IE11. If you want to set a fallback, border-style: dashed seems to offer more consistent behaviour.
This seems like buggy behaviour but is maybe a simple difference in browser behaviour:
In Chrome, the border-width: 14px adds 14px each side and occurs without a border-style. The border-style has no affect when border-image-width is set.
In IE11, the border-width: 14px does not add 14px each side unless a border-style is set. The border-style does affect the positioning of the border-image, but only when set to solid.
Screenshot from IE11
Working Example
div {
background-image: url(http://i.stack.imgur.com/7dzt1.jpg);
border-image: url(http://i.stack.imgur.com/Zf544.png) 14 round;
border-image-width: 14px;
width: 300px;
height: 80px;
border-radius: 5px;
}
<div></div>
Okay so I have these divs called "latestWorkTitle" which are positioned absolute and are placed on top of the corresponding image to show its title.
However, I can't get this properly to work. The titles don't show at the corresponding image and when I resize my browser window everything shifts and so on.
I tried creating this jsbin http://jsbin.com/uhoxef/1 with a part of my code to illustrate how it should look like and what is going wrong. Even all the titles go on top of each other in the code while they should be on top of the corresponding images... I'm just basically totally lost at this.
I think the HTML was confusing itself. I also made the thumbnail class the relative layer. HTML renders as we read, from left to right. So putting the title before the image causes the image to show on top and cover the text.
HTML:
<div class="thumbnail">
<a href="portfoliodetail.php?id=10">
<img src="http://www.hlnarchitects.com/img/plain_red.png" />
<div class="latestWorkTitle">title1</div>
</a>
</div>
CSS:
.thumbnail {
position: relative;
overflow: hidden;
float: left;}
.portfolioOverview img {
width: auto;
height: auto;}
.latestWorkTitle {
text-align: right;
font-size: 11px;
text-transform: uppercase;
background: yellow;
position: absolute;
padding: 6px;
top: 0;
left: 0;}
For this to work, each thumbnail class needs to be the relative start for each individual layer. So the thumbnail class is set to relative.
Any object set to absolute (.latestWorkTitle) within this layer will start from the top and left position of the relative object.
You'll need to adjust some details to taste but I hope this helps.
ULTIMATE GOAL: Make a formed transparency where images can show through but are shaped by the form itself. The images are rollover buttons and turn from grayscale to color with hover
So the picture below (link) shows what I want to happen in Dreamweaver CS6. I used PS to create this image. I simply took the "person portion" and deleted it so the picture turned out as a white box with a transparent inside. My plan was to simply plant this image into DW and then place the rest of the color images beneath it by placement of the IMG tag.
I figured it would turn out like what you see below but it has not. I simply get a full white page (tested offline, not uploaded to the server). If I add a picture, there is no hint that the PNG with the transparency is even existent.
So now, what would be your suggestions? Would it be easier to just use FW and make slices of the work as seen below? In that case I would just have to match all the pieces of the body up like Tetris when working in DW. It just seems there is a MUCH easier way of doing this and somehow I am making it extremely hard.
Please ask if you need further information. Thank you so much.
http://i1195.photobucket.com/albums/aa400/SteffaneTimm/MeFirstSuccess_zps146c6716.jpg
You could save the outline as a .PNG with alpha transparency as you have. To get the seperate images with the rollover effect you could try something like the below. (not using any canvas trickery). Create an image thats double the height of the strip you want, put the black and white version in the top half, and the colour version of the same image in the bottom half.
If you are having difficulty seeing the white outline you could try setting the page background to black temporarily.
To double check you have linked to your image files correctly you could also try pressing f12 in chrome and looking at the Resources tab in Frames > Images.
.container {
width: 500px; height: 800px;
}
.image-strip {
height: 200px; width: 500px; float: left;
overflow: hidden;
}
.image-strip img:hover {
margin-top: -200px;
}
.woman-outline {
position: relative; top: 0px; left: 0px;
height: 800px; width: 500px;
background: url('woman.png') no-repeat;
z-index: 1000;
}
<div id="container">
<div class="image-strip"><img src="1.jpg" /></div>
<div class="image-strip"><img src="2.jpg" /></div>
<div class="image-strip"><img src="3.jpg" /></div>
<div class="image-strip"><img src="4.jpg" /></div>
<div id="woman-outline"></div>
</div>
The logo on my friends website is working properly in all browsers yet when I open up my iPhone or iPad (actual devices) it's all wonky.
<img class="averylogo" src="<?php bloginfo('template_directory') ?>/img/HEADER-AveryLawOffice-LOGO.png" alt="Avery Law Office">
It's not placed in any containing div. Just on it's own.
CSS
.averylogo { position: absolute; width:360px; left: 50%; margin-left: -180px; z-index: 2; }
I'm not quite sure why it works everywhere else but doesn't center on my iPad or iPhone properly.
This is what it's looking like, but only on the iOS.
What am I doing wrong?
Give #main-navigation position:relative; otherwise the logo is positioned relative to the body, which is resized on your smaller device.
Chris Coyier has an article about it.
Use margin-left: auto and remove left: 50%.
You may want to add text-align: center to #main-navigation for IE.