Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Designing a responsive website but...

Discussion in 'Website Design Forum:' started by bungle1977, Dec 4, 2012.

  1. bungle1977

    bungle1977 Member

    Hello
    I am in the process of designing my website but want to make it responsive, the only problem I have is I haven't got Dreamweaver CS5. Is CSS3 and HTML5 supported in CS4?
    Is there a way round this if it isn't?
    Thanking you's :icon_smile:
     
  2. Katedesign

    Katedesign Well-Known Member

    What do you mean by responsive?
     
  3. ]

    You're a web design company how can you not know this?
     
  4. bungle1977

    bungle1977 Member

    Website that can adapt itself to any screen width. Struggling with how to scale fonts and images. Do I use percentages?
     
  5. Katedesign

    Katedesign Well-Known Member

    I was trying to establish what bungle1977 meant!
     
  6. NUGFX

    NUGFX Member

    You work with em sizes not px or %
     
    bungle1977 and Corrosive like this.
  7. and for the images just use: max-width:100%; max-height:100%; in the css of course :) As long as your div's have been constructed with %'s the whole page should stretch along with the images if this is set... And as NugFX said above - just work with em's for the text and they'll resize according to each device's default font size, or even a user's specific preference; which is good practice in web design.
     
  8. bungle1977

    bungle1977 Member

    Thanks for this

    Untitled-1.jpg Have attached what I had in mind. How would be the best way to do this? If I used percentages (ie each box has a width of 25%) would that mean even on the smaller screen it would be 25%?
    The thought was that the boxes would fill the available space both on the largest and smallest screens but still retain the proportions. I don't quite know how to solve this.
     
  9. Ok so basically each of the boxes, which I assume are divs housing the images - should have a width of lets say 17%, because don't forget you will need to allow for your margins as shown in the diagram you provided... You must make sure all elements within the wrapper add up to 100% width. I would keep the height unspecified where possible, so that the height will stay fluid to accommodate your text and images.

    So just to reiterate ; have the wrapper width set to "auto", this will stretch the entire page to always fill the screen width. Have elements inside the wrapper made up of %'s so they add up to a total of 100%, not forgetting margins. Then use max-width:100%; max-height:100% for the images. The only thing left to do now would be to create some I.E 6 & 7 specific css to combat the double margin bug you'll encounter... but you can google that, it's a topic all of it's own!

    Hope this helps
     
  10. bungle1977

    bungle1977 Member

    I think that worked but the boxes don't snap to fill the screen width, they just seem to resize to fit the screen. Not sure how to resolve it.

    Untitled Document
     
  11. Tony Hardy

    Tony Hardy Well-Known Member

    I'm busy trying responsive web design for the first time too. Using a premade Wordpress template but have things like Contact Forms to consider. It's a barrel of laughs isn't it?

    You can check my progress on; Home | Gee Gees On Board
     
  12. Tony Hardy

    Tony Hardy Well-Known Member

    Also, if by snap to the screen size you mean you want them to centrally align, have you tried "margin: 0 auto" ?
     
  13. bungle1977

    bungle1977 Member

    tried that but didn't work. It just seem to scale everything down.:icon_confused:
     
  14. bungle1977

    bungle1977 Member

    Seem to be making progress and it works on all screen sizes. Only problem I have is the green bar covers up part of the image.
    My website
     
  15. thingstodo

    thingstodo Member

    One way to fix that is to add the following to your styles.

    Code:
    #nav {
       height:42px;
    }
    Mike
     

Share This Page