www.webdeveloper.com
Results 1 to 10 of 10

Thread: Web Site Layout

Hybrid View

  1. #1
    Join Date
    May 2013
    Posts
    55

    Web Site Layout

    Which is the best way to layout a website, which fits automatically in all screen resolution?

  2. #2
    Join Date
    Mar 2013
    Location
    Iasi, Romania
    Posts
    53
    use divs and set all dimensions in percent, in the css file...like
    [CSS]
    #div_id
    {
    width:75%;
    }
    [/CSS]

  3. #3
    Join Date
    May 2013
    Posts
    55
    thanks will this also work with the phone screen?

  4. #4
    Join Date
    Mar 2013
    Location
    Iasi, Romania
    Posts
    53
    for phones you have to create a special css file, where you should hide all those divs that cannot be displayed or won't work well on a phone screen

  5. #5
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,207
    Should help...

    In Search of the Holy Grail: http://www.alistapart.com/articles/holygrail/
    Choosing Dimensions for Your Web Page Layout: http://www.elated.com/articles/choos...b-page-layout/
    How to create flexible sites quickly using standards like CSS and XHTML: http://www.ibm.com/developerworks/web/library/wa-rapid/
    Designing for the Web: Resolution and Size: http://sitepointcom.createsend4.com/...yd/birtthtw/h/
    Care With Font Size: http://www.w3.org/QA/Tips/font-size
    What are the best programming fonts?: http://slant.co/topics/67/~what-are-...gramming-fonts

    Websites Shouldn’t Look The Same Across Different Browsers: http://www.noupe.com/design/websites...re-is-why.html
    Cross-Browser CSS in Seconds with Prefixr: http://net.tutsplus.com/articles/new...-with-prefixr/
    Responsive Web Design Demystified: http://www.elated.com/articles/respo...n-demystified/
    Responsive Web Design: 5 Handy Tips: http://www.elated.com/articles/respo...-5-handy-tips/
    It’s Not Responsive Web Building, It’s Responsive Web Design: http://www.getfinch.com/finch/entry/...ve-web-design/

    Beginner’s Guide to Responsive Web Design: http://thinkvitamin.com/design/begin...ve-web-design/
    What The Heck Is Responsive Web Design? (A super-impressive CSS3 presentation built on impress.js, demonstrating the basics of Responsive Web Design): http://johnpolacek.github.com/WhatTh...ressjs/#/title
    Creating Responsive HTML5 Touch Interfaces: http://www.youtube.com/watch?v=lcD9CF0bxyk
    Responsive Images: How they Almost Worked and What We Need: http://www.alistapart.com/articles/r...-what-we-need/
    Responsive Tables: http://www.zurb.com/playground/responsive-tables

    responsivepx – screen-size testing tool: http://responsivepx.com/

    FitText.js plugin (FitText is a jQuery plugin that makes your font-sizes flexible, allowing headlines to automatically-expand to fit the available space): http://fittextjs.com/
    Adapt.js - Adaptive CSS: http://adapt.960.gs/

  6. #6
    Join Date
    May 2013
    Posts
    55
    thanks guys!!

  7. #7
    Join Date
    Jun 2013
    Posts
    3
    One of the most variable aspects of web design is the way in which we approach width and height in terms of measurements and flexibility.

  8. #8
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    look up liquid layouts for your web page and then for mobile phones you need to add media queries to your css.

    look up a tutorial on media queries on you tube.

    media queries look like this in your css file

    Code:
    @media only screen and ( max-width: 767px) { 
    	body { min-width: 320px;} 
    	.shell { max-width: 320px; }
    	.header .shell { padding: 21px 32px 0; width: 767px; background: url(images/header-shell.png) no-repeat center 0; box-shadow: 0px -10px 9px rgba(0,0,0,0.7); -moz-box-shadow: 0px -10px 9px rgba(0,0,0,0.7); -webkit-box-shadow: 0px -10px 9px rgba(0,0,0,0.7); -o-box-shadow: 0px -3px 10px 9rgba(0,0,0,0.7) }
    .header-top { height-min: 300px;  }

  9. #9
    Join Date
    Jun 2013
    Posts
    17
    -Use the body tag.
    -Adapt it if you use a div # body or another.
    -To adjust the page size, use this CSS code:
    body{width:100%;}

    With this code the page will take 100% of the window, regardless of its size.
    Or you can set the width you want - e.g. 90% or 80%
    If you define a smaller width, you can focus with "margin: auto".

    Example:-

    A page width of 90%, centred, with a minimum width of 600 pixels and a maximum width of 2000 pixels:

    body{width:90%;margin:auto;min-width:600px;max-width:2000p

  10. #10
    Join Date
    Jun 2013
    Posts
    1
    You can set site width to 100% then set all DIV width and font-size in % basics.
    For Mobile you can write your css in between this code

    @media screen and (min-width: 960px) {
    }


    you can change the width as per mobile screen size.

    You need to write default css first then last only you need to write css for mobile size

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles