SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 44
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)

    CSS - Test Your CSS Skills Number 31 - iphone

    CSS - Test Your CSS Skills Number 31 : Quiz now ended - Solution in post#33

    I know it's going to be quiet around here on Christmas Week but I thought I'd leave you with a nice little quiz anyway to while away some time.

    This quiz is very simple so all levels can have a go. (The last few quizzes have been quite difficult and in fact no one really got the last one perfectly until some clues were dropped.)

    The quiz:

    Imagine its Christmas Day and you've just unwrapped a brand new Iphone and you rush to see how your website displays on this small screen device.

    You may be dismayed to find that a 1200px wide layout doesn't look so good on a 320px width screen.

    Therefore your mission (should you accept) is to take a 3 column layout that stretches to full screen on large monitors but when you view it in portrait mode on your iphone there is no horizontal scrolling.

    If you didn't get an iphone for Christmas then don't worry because I don't have one either . The challenge is basically to take 3 column layout and make it display vertically when the screen is reduced to 320px wide and the content is aligned nicely in one column without the need to scroll sideways.

    To clarify further this is basically a test to make 3 columns display vertically as per the screenshots but just in a normal Safari browser (forget about the iphone itself for the quiz).


    Rules:
    In case you are thinking that this is too easy then of course there are a couple of rules as usual.

    The main rule is that the left and right columns are a fixed width of 316px (approx) and that the centre column must stretch to fill the available space but never be smaller than 316px wide (approx).

    As always pictures are worth a 1000 words so look at the three attachments which show a 3 column layout at full width, half width and lastly at 320px width.

    You can use your own html and css but it must be valid and must work in Safari of course (and should also work in IE7 - 8, Firefox 3+ and Opera 10 but don't worry about IE6.)

    The same CSS should work for all screen widths so no device dependent media styles to be used.

    No scripting to be used either. It's just valid css and html.

    As usual with these quizzes don't give the answer away in this thread but PM the answer once you have thoroughly checked your code.

    If you think you have a solution then PM it to me as I don't believe anyone who says they can do it but doesn't provide proof

    However don't give anything away in this thread although you can ask questions if you are not sure of the rules or what is required.

    Remember this is just for fun and there are no prizes.

    Edit:


    For those of you who find this task quite easy you may want to try and copy the screenshots I posted and keep the left middle and right columns in the same order as shown (header,left,middle,right,footer) when the screen is squeezed and also to have the html source order the same (i.e. header followed by left followed by middle followed by right and followed by footer - although you can add an extra wrapping element if needed.)






    Have fun and have a good Christmas.



    PS. : In case you missed the other tests you can find them all listed here:
    Attached Images Attached Images

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Fun quiz . Have fun with it everyone and Merry Christmas .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i don't have any iphone either,
    all i have is a small phone, and all its able to do is to call people and be called, nothing else really.
    I will probably never get one, and i will probably never get this either:
    http://www.youtube.com/watch?v=QwnsQ...eature=related

    anyway, im taking part.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I have a solution for Gary Turner already so well done Gary and thanks for taking part.
    Edit:


    Just noticed that Safari isn't dropping the column so it needs a fix


    For those of you who find this task quite easy you may want to try and copy the screenshots I posted and keep the left middle and right columns in the same order as shown when the screen is squeezed and also to have the html source order of left followed by middle followed by right (although you can add an extra wrapping element if needed.)

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    I don't have an iPhone either, but having played with those of friends, I've learned that Safari on the iPhone doesn't seem to behave like Safari on the desktop. I designed a site that allowed columns to drop beneath each other if a desktop browser was narrowed to around 320px, but on the iPhone, the columns just scaled down proportionately and never dropped. Does the quiz account for this? I'm not sure we can test our layouts for this quiz simply by narrowing desktop Safari to 320px...

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Paul, I'm a bit confused by your half-width screenshot. The green middle div does not seem to be full width. Have I missed something in the instructions? I would have expected it to fill the available space to the right, according to the instructions.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Does the quiz account for this? I'm not sure we can test our layouts for this quiz simply by narrowing desktop Safari to 320px...
    No the quiz is basically just for normal browsers as I don't have an iphone either so I can't test (unless you want to buy me one for Christmas ) .

    It's just an exercise in making three columns align vertical at about 320px.

    The green middle div does not seem to be full width.
    It's full width on windows greater than 960px but on 800px each block will be 320px wide and therefore the green cant expand to the edge. That's why I gave the screenshots to show what happens.

    Of course you can make variations if you want as long as they are interesting

    I also added a second part to the quiz so that source order and the order in which the columns drop is the same as the image etc.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I have an entry from Kravvitz that works in all but Safari but is very close

    I also notice that Gary's version above suffers from a similar problem in Safari so I am still waiting for the definitive answer

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I don't have an iPhone either, but having played with those of friends, I've learned that Safari on the iPhone doesn't seem to behave like Safari on the desktop. I designed a site that allowed columns to drop beneath each other if a desktop browser was narrowed to around 320px, but on the iPhone, the columns just scaled down proportionately and never dropped. Does the quiz account for this? I'm not sure we can test our layouts for this quiz simply by narrowing desktop Safari to 320px...
    Hi Ralph,

    I just did some tests on my sons iphone and you would need to set the meta tag and device stylesheet as follows.

    Code:
    <meta name="viewport" content="width = 320" />
    <style type="text/css">
    @media only screen and (max-device-width: 480px) {
      body {
        width:320px
      }
    }
    </style>
    That will stop the full screen browsing and the columns will stack vertically in the full width of the iphone.

  10. #10
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sound's intresting! I'm going to try this quiz out. I have the Google Phone, so i'll be able to test my code out before I show you my example.


    Merry Christmas Everyone!
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I just did some tests on my sons iphone and you would need to set the meta tag and device stylesheet as follows...
    Wow, that's amazing. Thanks Paul. How did you work that out? Is there anything you can't do?!

  12. #12
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,279
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Wow, that's amazing. Thanks Paul. How did you work that out? Is there anything you can't do?!
    A List Apart mentions that the iPhone's Safari (along with Opera Mini and Mobile) is one of the few phone browsers who actually bother with the @media queries, and the ability to set a width is mostly for those "full web" browsers who don't fully accept the handheld.css because they can do zoomz.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    How are we getting on with this ?

    Anyone struggling?

    Do you want clues yet?

    Or have we all gone for Christmas early.

  14. #14
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I still can't figure out how to get all 3 columns to sit next to each other when there's enough room, but still drop below each other when there isn't. One column or another refuses to drop in Safari.

    It seems to be the negative margins that prevent it from working right in Safari, but I don't see an alternative.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    This isn't much of a clue but here's the html from my version



    <div id="outer">
    <div class="header"><h1>Header</h1></div>
    <div class="col1">
    <p>Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : </p>
    <p>Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : </p>
    <p>Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 </p>
    </div>
    <div class="col2">
    <div class="inner">
    <p>This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : </p>
    </div>
    </div>
    <div class="col3">
    <p>This is column 3 (right column) : This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) /p>
    </div>
    <div class="footer">
    <p>This is the footer This is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footer </p>
    </div>
    </div>



    It may jog you in the right direction

  16. #16
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    well in therms of HTML I'm already at that point, so no help there.
    but i only manage to replicate one of the images at a time, but not all of them together.

    still thinking though.

  17. #17
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    not thinking anymore.
    can't believe it took me more than 2 hours to solve something that i had already solved.
    xD

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I have the first all correct solution (that is working in Safari) from Timo (Yurikolovsky).

    Well done Timo and thanks for taking the time to have a go

    Any more takers yet ?

  19. #19
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    How are we getting on with this ? Anyone struggling?
    Depressed and losing sleep over it. Will have a look at your code, though.

    Quote Originally Posted by Paul O'B View Post
    This quiz is very simple so all levels can have a go.
    Grrrrr.

  20. #20
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i will test it,and merry christmas

  21. #21
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well done, Timo.

    Does Gary know that his version needs fixing in Safari?

    Quote Originally Posted by ralph.m View Post
    Quote Originally Posted by Paul O'B
    This quiz is very simple so all levels can have a go.
    Grrrrr.
    That comment was referring to the quiz before he added the source order restriction:

    Quote Originally Posted by Paul O'B in PM
    Quote Originally Posted by Kravvitz in PM
    Also I'm curious why you consider this to be easy?
    If you don't copy the source order or column order that I set then it is quite easy as you just float one column left and then one column right and the third column is overflow hidden. However that ends up with the content right at the bottom and out of order.

    Trying to get the source order as col1,col2,col3 and then make them drop in that order is a little tricky I agree.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  22. #22
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    Does Gary know that his version needs fixing in Safari?
    Yeah, Paul PM'd me about that, and I think he mentioned it above. I don't have Win installed right now, as I broke my boot-loader and have reinstalled my OS, but not Vista in its vbox. So no IE or Safari at the moment. I tested only in Firefox and Opera.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  23. #23
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gary.turner View Post
    Yeah, Paul PM'd me about that, and I think he mentioned it above. I don't have Win installed right now, as I broke my boot-loader and have reinstalled my OS, but not Vista in its vbox. So no IE or Safari at the moment. I tested only in Firefox and Opera.
    Yeah, he did mention it above. I just wasn't sure how much you were paying attention to the comments. (And that was an indirect way of asking if Paul had told you otherwise.)

    So Linux only for now? That's a shame.

    Google Chrome seems to be available for Linux now: http://www.google.com/chrome?platform=linux
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  24. #24
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,279
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:

    I got Chrome a while back. It's not exactly the same as Chrome on Windows, and it's also not exactly the same as Safari, but maybe it has this same little bug? Also, you can't turn JS off : (

  25. #25
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    <snip>
    So Linux only for now? That's a shame.
    It would be a whole lot worse if it were Windows only.

    Google Chrome seems to be available for Linux now: http://www.google.com/chrome?platform=linux
    I hadn't seen. Will check it out. Thanks.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •