SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Post The size of div in any monitor screen problem

    Hi,
    I need some help regarding the size of my div that i made in the bigger screen monitor,when i tried to look at in the smaller monitor my div is overlapping in the screen some buttons are not visible i need to resize the browser into smaller in order to see all the buttons..what is the correct way in using the units for div, % or px ? so that it will not overlap in the small screen monitor.can you help me please.

    Thank you in advance.

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2012
    Location
    Scarborough, North Yorkshire, United Kingdom
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to use % so it scales but you may need to do some work on the child elements. Using px will mean that the div remains at the same width/height regardless of monitor size.
    Richard
    Resell SSL Certificates - API / WHMCS / HostBill / ClientExec
    ServerTastic - RapidSSL, Geotrust, Thawte, Symantec, SmarterTools and more

  3. #3
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RichardAskew View Post
    You need to use % so it scales but you may need to do some work on the child elements. Using px will mean that the div remains at the same width/height regardless of monitor size.
    Hi RichardAskew,Thank you for the reply...okay i will try this and i will write back to you if i have problem.thank you.

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

    If you are making your page a fixed px width then obviously on devices smaller than that width you will have to scroll to see the content.

    Converting a layout from fixed to fluid is more than just changing the main container from px to percent as you need to make sure all the inner elements will re-position accordingly (as already mentioned in the post above). A fluid site needs to be planned carefully and to take into account that a screen size will change and elements reorganised as a result.

    These days responsive is the buzzword but requires a lot of work to make a site become fully responsive.

    You may need to post some code if you get stuck again so we can see what needs to be done.

  5. #5
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    If you are making your page a fixed px width then obviously on devices smaller than that width you will have to scroll to see the content.

    Converting a layout from fixed to fluid is more than just changing the main container from px to percent as you need to make sure all the inner elements will re-position accordingly (as already mentioned in the post above). A fluid site needs to be planned carefully and to take into account that a screen size will change and elements reorganised as a result.

    These days responsive is the buzzword but requires a lot of work to make a site become fully responsive.

    You may need to post some code if you get stuck again so we can see what needs to be done.

    hi paul,thank you for the reply...can i ask what is fluid?

    thank you in advance.

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

    Fluid is when you use percentages to size the container and allow the content inside to reorganise to fit.
    At is simplest level its just this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #outer {
    	width:80%;
    	margin:20px auto;
    	background:#f9f9f9;
    	border:5px solid red;
    	padding:10px;
    }
    </style>
    </head>
    
    <body>
    <div id="outer">
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nibh ante, posuere at pretium vel, laoreet ut orci. Integer sodales, dolor id sagittis volutpat, dui justo pharetra massa, id mollis massa magna eu nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum faucibus tempor enim et vulputate. Nunc ultrices orci eget risus elementum fermentum. Donec in lorem libero, ut auctor orci. Ut sed tortor nunc, lacinia porttitor sapien. Aenean sagittis, metus ac porttitor tincidunt, neque ante dictum arcu, pulvinar fermentum tortor lectus in mi. Etiam id aliquam diam. Ut vel ipsum et dui aliquet scelerisque. Proin enim diam, vehicula vitae volutpat sed, varius ut urna. Morbi felis arcu, tempor quis volutpat nec, ultrices in metus. Vestibulum id ante neque. </p>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nibh ante, posuere at pretium vel, laoreet ut orci. Integer sodales, dolor id sagittis volutpat, dui justo pharetra massa, id mollis massa magna eu nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum faucibus tempor enim et vulputate. Nunc ultrices orci eget risus elementum fermentum. Donec in lorem libero, ut auctor orci. Ut sed tortor nunc, lacinia porttitor sapien. Aenean sagittis, metus ac porttitor tincidunt, neque ante dictum arcu, pulvinar fermentum tortor lectus in mi. Etiam id aliquam diam. Ut vel ipsum et dui aliquet scelerisque. Proin enim diam, vehicula vitae volutpat sed, varius ut urna. Morbi felis arcu, tempor quis volutpat nec, ultrices in metus. Vestibulum id ante neque. </p>
    </div>
    </body>
    </html>
    However most sites are not just text so its not just as simple as that. You have to allow elements to wrap to the next line or to shrink as much as possible. It gets more complicated when you have images and certain layout structures because they will also need to be fluid or at least small enough not to poke out at smaller sizes.

    You can read more info here.

  7. #7
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    Fluid is when you use percentages to size the container and allow the content inside to reorganise to fir.
    At is simplest level its just this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #outer {
    	width:80%;
    	margin:20px auto;
    	background:#f9f9f9;
    	border:5px solid red;
    	padding:10px;
    }
    </style>
    </head>
    
    <body>
    <div id="outer">
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nibh ante, posuere at pretium vel, laoreet ut orci. Integer sodales, dolor id sagittis volutpat, dui justo pharetra massa, id mollis massa magna eu nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum faucibus tempor enim et vulputate. Nunc ultrices orci eget risus elementum fermentum. Donec in lorem libero, ut auctor orci. Ut sed tortor nunc, lacinia porttitor sapien. Aenean sagittis, metus ac porttitor tincidunt, neque ante dictum arcu, pulvinar fermentum tortor lectus in mi. Etiam id aliquam diam. Ut vel ipsum et dui aliquet scelerisque. Proin enim diam, vehicula vitae volutpat sed, varius ut urna. Morbi felis arcu, tempor quis volutpat nec, ultrices in metus. Vestibulum id ante neque. </p>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nibh ante, posuere at pretium vel, laoreet ut orci. Integer sodales, dolor id sagittis volutpat, dui justo pharetra massa, id mollis massa magna eu nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum faucibus tempor enim et vulputate. Nunc ultrices orci eget risus elementum fermentum. Donec in lorem libero, ut auctor orci. Ut sed tortor nunc, lacinia porttitor sapien. Aenean sagittis, metus ac porttitor tincidunt, neque ante dictum arcu, pulvinar fermentum tortor lectus in mi. Etiam id aliquam diam. Ut vel ipsum et dui aliquet scelerisque. Proin enim diam, vehicula vitae volutpat sed, varius ut urna. Morbi felis arcu, tempor quis volutpat nec, ultrices in metus. Vestibulum id ante neque. </p>
    </div>
    </body>
    </html>
    However most sites are not just text so its not just as simple as that. You have to allow elements to wrap to the next line or to shrink as much as possible. It gets more complicated when you have images and certain layout structures because they will also need to be fluid or at least small enough not to poke out at smaller sizes.

    You can read more info here.

    Thank you paul for the quick reply...okay i will read this and i will write back to you if i have some doubt.more power to you always.


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
  •