- This topic is empty.
-
AuthorPosts
-
January 2, 2013 at 10:57 am #41717unprocioneMember
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 videoThe 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 -_-
January 3, 2013 at 10:25 am #119715AnonymousInactiveOne 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.
January 3, 2013 at 10:36 am #119716chrisburtonParticipant@unprocione @TheDark12 is correct.
On #content, remove
position: absolute;
top: 0;
bottom: 0;
height: 100%;On #content img, add
width: 100%;
height: auto !important;However, you might want to use full page backgrounds for this.
For the video, check out FitVids.js (http://fitvidsjs.com)
January 3, 2013 at 10:48 am #119720Andy HowellsParticipantYeah 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.
January 3, 2013 at 1:39 pm #119745unprocioneMember@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
#content img {height: 100%;} and writing #content {position: absolute; display:block; margin: 0 auto; bottom: 0; top: 0; width: 100%; height: 100%;}
and
#content img {display: block; margin: 0 auto;}
. 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.January 3, 2013 at 2:02 pm #119748chrisburtonParticipant@unprocione Well, we can help you with FitVids.js if you’d like.
January 27, 2013 at 6:28 am #122467unprocioneMember@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
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.