SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 50 of 50
  1. #26
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Correction to above:

    In fact, when I narrow the width of the page on the Desktop computer the Globe stays the same size, unlike what happens in your demonstration!

    I believe I copied your code faithfully, and changed the location of the image. The only thing that I ended up not doing was adding the 640x400 at the end of the img src as it did not work.

    I've also deleted the overflow:hidden; so that my extra destinations show below the globe.

  2. #27
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Slowly, slowly...

    Right, I got the image to work. There was a conflict with the old code.

    However, the main problems now are that the in the big screen the destinations appear beneath the text of Part2, and in the small screen the globe only shows up AFTER the space used for Part2.

  3. #28
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and in the small screen the globe only shows up AFTER the space used for Part2
    .

    That's been sorted out too, but now the empty space under the globe should not be there. Seems to be connected with overflow:hidden;

    (sorry about so many updates. It's to avoid your wasting time over things taht have been sorted out)

  4. #29
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm around today but just to clarify is the page here http://pintoxxxxx(dot).net/Pinto/try.html (xxxx=tours) the version that we are still testing with ?

    If so I'll have a look this afternoon and see what's going on?

  5. #30
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the page I'm working on is http://pintoxxxxx(dot).net/Pinto/try.html[/url]

    All I need now is to get the current basic page working. After that I can strat adding the bells and whistles.

    3 problems:
    how do I get rid of the destination names when part2 opens?
    what is happening below the globe with different widths and empty space?
    why is the footer under #boxNew ?

    But, please, leave it until you have time. There is no urgency, other than I am losing my hair...

    Regards

  6. #31
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    All your issues are still related to the point I have been making all along about your fixed heights

    You cannot resolve this until you remove all those heights.
    Code:
    #right,#content #box1,#content,#left,#boxNew{height:auto}
    #content0{height:auto!important;position:static}

    If you add that code at the end of the css then you will see that everything starts working properly and you get no overlaps. Of course that means that your layout is no longer in equal height columns but as I said in my earlier demo you can't use heights to force columns to be equal you have to use the approach shown in my demo. Anything else you do along those lines is doomed to failure so you need to address those issues now.

    Either forego the equal column effect or switch the structure to the one provided in my demo.

    Regarding the globe then when you make the switch to the small column you should think about reducing the font-size of the country tags so that they still fit on the screen or perhaps if you have too many words then replace them with numbers and use a legend underneath the menu to show which countries they are. You can do this in the media query quite easily by hiding and showing content as already explained in this thread.

    To be honest the red background around your columns looks awkward anyway and I would have used a solid white background to encompass al three columns for a crisp and clean look but of course that is more of a design issue than a css one.

    I realise its hard for you to go back on the design at this stage but unless you start addressing the height issues you will run into issues at every turn.

  7. #32
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul

    many thanks. The question of equal columns does not seem to be an issue now as I an not including the side bar (for the time being, anyway).

    I am about to go out and will not be back until around 10 pm.

    I will change things tonight and i hope you will keep an eye on this thread.

    many thanks

  8. #33
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul

    Sorry. Got back too late last night.

    I've applied the code and as you said it solved the paddings and empty areas. The only main problems anow are the destination names in the globe appearing below the expanded text of Part2; and the footer which is hidden under the image of the sea, at the bottom.

    many thank for your help. It's getting there...

  9. #34
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I can't see that you have added any of my fixes to the page? Are we still on the same page as in post #29?

    Adding the fixes I gave fixes all those issues as I have it working on my view of your live site using Firebug to inject the css.

    Why are you putting those country links below the globe? You have some of them at over:100% from the top which will place them below the globe. Or is that what you wanted?

  10. #35
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul

    Yes, I did apply the code you gave me first thing this morning around 6.30 am. Maybe you are looking at the http://pintotours.net published page. I have not touched that yet. I am working on a test page http://pintotours.net/Pinto/try.html

    After applying your fixes the widths and empty spaces successfully disappeared.

    Why are you putting those country links below the globe?
    Have a look at http://pintotours.net The country links do not show when the text expands into Part2. The position of the links in the full Desktop page are correct (at least they work as I hoped) and in the mobile they will have to be adjusted but that is a simple job that I can do later. The problem is that when you expand the text in both the mobile version and full versions of the try.html page the links are still visible.

    Regards

  11. #36
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It's still the same problems that I have been mentioning all along and already provided fixes for

    You haven't removed the height from box1 so the content overlaps the read more link and cuts in half. You need to remove the height. I've given you this code about 4 times now lol.

    Code:
    #content #box1{height:auto}
    Regarding the country links showing when you click the read more link then again I have given you a fix for that. You have made the expanded part position:absolute and it therefore just overlaps anything in the way and you really shouldn't be doing it like that. You should make it expand but stay in the flow of the document so that it pushes the globe down and not cover it up. I gave you code to do that in my previous post to turn it into a static element and push the other content down when it is revealed (this is the usual way to do a hide and show like that).

    If you still want to keep the behaviour you have now (which is a very awkward approach as it hides other content) then just raise the z-index on the revealed element.

    e.g.
    Code:
    #content0{z-index:4}
    Hope that helps

  12. #37
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul

    Thanks

    You need to remove the height. I've given you this code about 4 times now lol.
    I had removed the height by adding the code that you gave me at the very end of the css. In fact, I had there already in a more amateurish way.

    Code:
    #content #box1,#content,#left,#boxNew{height:auto}
    #content0{height:auto!important;position:static}
    All the paddings/margins, empty spaces have been sorted, and especially the destination names have disappeared when the text expands.

    As always, new problems have come up:

    a) the footer is not behaving as it should. In the full width (Desktop style) it should be identical to the footer in http://pintotours(dot) net, but now the height has shrunk and all the text gone. Of course, I got rid of the text for the @media code, but it should not have affected the main code.

    My other new problem, which I kept for last is the sidebar. To make things easier as I was learning how @media works I deleted it from the try.html. In the published version there is a line in the <head> , which I don't know how to deal with.

    Code:
    <style type="text/css">@import url("/Pinto/menubar1.css");</style>

    many thanks for your help

  13. #38
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul

    I am very sorry but I must have done something drastically wrong since my last post, as #box9 has gone hay-wire! box9 was not coming down enough and i gave it a height to correct it and it looked good. Now I've taken it out but still something has gone wrong in th @media code

    sorry...

  14. #39
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry Paul

    I've recovered from my messing around and things are back in shape. I'm going to vackup these files before I do it again!

    Main problem is the sidebar.

    Thanks

  15. #40
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    What is the problem with the sidebar exactly? You didn't say as you seemed to change the subject to talk about some imported css instead .

  16. #41
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry Paul

    I meant navbar and not sidebar!

    When I started playing with the @media on this page I did not know how to deal with the sidebar, so I decide to delete it from the copy html and leave it until I got everything sorted out. The page try.html in the Desktop width must look identical to the published index page, which has a navigation bar.

    Sorry...

  17. #42
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Fort the navigation on smaller pages you just want to remove the float from the list and let the width be auto.

    e.g.

    In the media query you would do something like this:

    Code:
    #navbar ul{height:auto;width:auto}
    #navbar ul li, #navbar ul li a{display:block;float:none}
    That will allow each item to spread full width on small screens so that they can easily be clicked. The usual approach is also to hide the nav on smaller devices but add the infamous "hamburger icon" so that the menu can be opened when required and then tucked out of the way when not needed. Of course this needs a little bit of js to accomplish the hide and show.

    http://webdesignerwall.com/tutorials...esign-tutorial
    http://www.ymc.ch/en/how-to-make-a-h...obile-websites

  18. #43
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey qim,
    There are three type of responsive
    1 - phone portrait / Landscape
    2 - Tablet
    3 - desktop

    after using this code in HTML file
    Code:
    <meta name=viewport content="width=device-width, initial-scale=0.5">
    you will edit css file and insert these media query

    For any Kind of Tablet
    Code:
        @media screen and (min-width:768px) and (max-width:1024px) {
          Code Here
       }
    For any Kind of Phone Landscape
    Code:
        @media screen and (min-width:480px) and (max-width:768px) {
          Code Here
       }
    For any Kind of Phone Portrait
    Code:
        @media screen and (min-width:320px) and (max-width:480px) {
          Code Here
       }
    if you need more help then let SP member know

  19. #44
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by webmasterplay786 View Post
    Hey qim,
    There are three type of responsive
    That's a little bit too simplistic and not really related to the way this topic has evolved.

  20. #45
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much. Paul

    I spent weeks trying to understand @media queries and now aftet this very instructive thread I feel as if I can sort many things out myself.

    By the way, you may recall that the thread started with a puzzle regarding the Samsung mobile phone. In the last couple of days, when I had the max-width set to 500, the Samsunf did not respond. As sson as I icreased it to 550, it did. That is surprising because surely yh width of a Samsung Galaxy Mini is not more than 500!!!

    I still have a couple of problems with the page we have been working on: the footer is still mixed up with the sea image, although I can solve it, hopefully, by simply deletinbg the image for the mobile version. And in the fuller Desktop width the Box9/sea image are short of the necessary height. I suppose I can playaround witht the main css without affecting the @media.

    What I am rather stuck on, on ideas, is how to get the header, which at the moment only shows the clock to minimize it and get some text to appear also "Travel Advice".

    You have spent a lot of time with this and I am happy to end the thread here and thank you once again for your very kind help.

    Regards

  21. #46
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul

    Sorry to reopen the thread.

    I've sorted out most things in the @media but I cannot understand what is happening with the footer. I used the same code for the bottom image and gave a height to the footer, but as I narrow the width the footer koves aup and down...

    http://pintotours(dot)net/Pinto/try.html

    Help...

  22. #47
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You are adding too much padding for the smaller footer image and you also need to remove the negative top margin from the footer/

    e.g.
    Code:
    .img-container2{padding-top:22%}
    footer{margin-top:0}

  23. #48
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great! Thanks

    How do you decide on the percentage (in this case 22%)?

    May I take the opportunity to ask what can be done to reduce in size the clock, so that some of the header text shows in smaller dimensions? I want the clock to remain this size in the large Desktop css.

    Thanks again

  24. #49
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by qim View Post
    Great! Thanks

    How do you decide on the percentage (in this case 22%)?
    It depends on the ratio of the image width to image height. The ratio commonly used for videos (where this technique came from) is usually 16 :9 which equates to 56.25% of padding being added. However if the ratio to image true width and image true height is different then the padding needs to be adjusted. To be honest we don't really need this technique here as you could simply have set the image to width:100% and height auto and non positioned for a similar effect..

    May I take the opportunity to ask what can be done to reduce in size the clock, so that some of the header text shows in smaller dimensions? I want the clock to remain this size in the large Desktop css.
    As you are using an external resource then it is not under your control to restyle it.

    I suppose you could go to the 'time now' site and make yourself another widget in a smaller size and then in the media query for the smaller display you hide the original widget code and show the new smaller widget code.

    e.g.
    Normal css:
    #clock1{display:block}
    #clock2{display:none}

    Then in the media query:

    Code:
     #clock1{display:none}
     #clock2{display:block}

  25. #50
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    many thanks, Paul

    I'll work on that !

    Regards


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
  •