I've just written my first css with media queries. I validated it and it's ok, on a laptop or normal screen you can see it without any problem. The layout is designed to be elastic, with photos taking height: 100% and width: auto and videos taking height: 100% and width: 100%. :
The problem is that Ipad shows both pages badly. The page with the photo hasn't the div centered, also if #content is set to {display: block; position: absolute; margin: 0 auto;} ) but it's on the left while on the right you can find a black space that is the background ( body {background: #000;} ).
The page with video really doesn't make any sense. The video appears really small in the top-left corner of the page, also if it is wrapped in #video, set to { display: block; position: absolute; margin: 0 auto; padding: 0; bottom: 0; }
Galaxy Tab 7 moreover has big problems with the photo, because setting #content img with min-width oe width : 1024px (its native resolution) an horizontal scrollbar appears. If I set width: 100% obviously a vertical scrollbar appears while the photo correctly fixes the whole page. The problem is that if I set height: 100%; e width: auto; the photo shows exactly like if it was set to width: 100%.
The page with video displays well instead.
One thing I might suggest is not using position absolute unless there is a specific need for using it. So on your elements like #content and #content img position absolute should be removed; they should stay in the page flow. They may clear up some of the issues.
Later on today I'll take a more in depth look, but as I'm on clock at the moment that's all I can do to help for now.
Yeah I'm not getting why you're using absolute, or really any positioning.
The only time I use relative/absolute positioning is for visual tweaks, like :before/:after or icons for example. In responsive design learn to use floats & margins as well as padding to achieve the spacing and layouts you want.
@andy I use absolute to have the content centered, otherwise it doesn't center :( i've read that if you want a content to fit and to have a precise position from top and bottom you have to use absolute. i'm a selftaught and i am a photographer in life, not a programmer, that's why i take for true things i read around the web and things resulting good from my experience. i know i'm not 100% pro :D sorry. i would like to read some good book about responsive design, could you suggest one? i've just finished a css3 guide by p. gasston.
anyway i changed and changed things but actually i changed few, removing some details in media queries, leaving only
. for video i wrote width and height inline in < i f r a m e > and then styled in media queries again and i really don't know why but it worked O___O
Anyway yesterday i was going crazy trying everything obscurely and desperately... so i don't know why but now it's working, also the images. ._. on all devices.
@chrisburton THANKS!!! I don't know js and I'm reading a S. Suehring's book about it but for now I'm not able to program it of course... I always try to make only css websites but this can be useful for example for my personal website.
Hi all!
I've just written my first css with media queries. I validated it and it's ok, on a laptop or normal screen you can see it without any problem. The layout is designed to be elastic, with photos taking height: 100% and width: auto and videos taking height: 100% and width: 100%. :
http://www.noisefuel.net/prova/index.htm Sample page with photo http://www.noisefuel.net/prova/after.htm Sample page with video
The problem is that Ipad shows both pages badly. The page with the photo hasn't the div centered, also if #content is set to {display: block; position: absolute; margin: 0 auto;} ) but it's on the left while on the right you can find a black space that is the background ( body {background: #000;} ). The page with video really doesn't make any sense. The video appears really small in the top-left corner of the page, also if it is wrapped in #video, set to { display: block; position: absolute; margin: 0 auto; padding: 0; bottom: 0; }
Galaxy Tab 7 moreover has big problems with the photo, because setting #content img with min-width oe width : 1024px (its native resolution) an horizontal scrollbar appears. If I set width: 100% obviously a vertical scrollbar appears while the photo correctly fixes the whole page. The problem is that if I set height: 100%; e width: auto; the photo shows exactly like if it was set to width: 100%. The page with video displays well instead.
Any idea? I've tried so many things -_-
One thing I might suggest is not using position absolute unless there is a specific need for using it. So on your elements like #content and #content img position absolute should be removed; they should stay in the page flow. They may clear up some of the issues.
Later on today I'll take a more in depth look, but as I'm on clock at the moment that's all I can do to help for now.
@unprocione @TheDark12 is correct.
On #content, remove
On #content img, add
However, you might want to use full page backgrounds for this.
For the video, check out FitVids.js (http://fitvidsjs.com)
Yeah I'm not getting why you're using absolute, or really any positioning.
The only time I use relative/absolute positioning is for visual tweaks, like :before/:after or icons for example. In responsive design learn to use floats & margins as well as padding to achieve the spacing and layouts you want.
@andy I use absolute to have the content centered, otherwise it doesn't center :( i've read that if you want a content to fit and to have a precise position from top and bottom you have to use absolute. i'm a selftaught and i am a photographer in life, not a programmer, that's why i take for true things i read around the web and things resulting good from my experience. i know i'm not 100% pro :D sorry. i would like to read some good book about responsive design, could you suggest one? i've just finished a css3 guide by p. gasston.
anyway i changed and changed things but actually i changed few, removing some details in media queries, leaving only
and
. for video i wrote width and height inline in < i f r a m e > and then styled in media queries again and i really don't know why but it worked O___O Anyway yesterday i was going crazy trying everything obscurely and desperately... so i don't know why but now it's working, also the images. ._. on all devices.
@chrisburton THANKS!!! I don't know js and I'm reading a S. Suehring's book about it but for now I'm not able to program it of course... I always try to make only css websites but this can be useful for example for my personal website.
@unprocione Well, we can help you with FitVids.js if you'd like.
@chrisburton , now i'm starting using fitvids! but i have one problem: background is green like it was in the tests.html and i really don't know what to change! http://www.relifeservizi.com/cma-video.htm