Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts

    What To Do About User-Side Text Increase?

    Hi, I'm having real trouble with the idea someone might increase their text size whilst browsing my page. Fine at medium/default, but when I alter text size (or magnification in Firefox), the layout is destroyed because text pops out the bottom.

    What I'm looking for is advice on a method of design that can be used to make sure the whole wrapper and all the columns can somehow scale, to accomodate.

    I hear people saying CSS is flexible, but I've never found this to be so. I find it rather rigid and confusing to be honest.

    Sorry, I can't show you any examples at present because I don't have anywhere to upload to but I can post my code here.

    Firstly, I have a lovely little menu that scales beautifully with text-increase. It goes like this:

    Code:
    #column_3 img {
    	margin-left:40px
    }
    
    #column_3 p {
    	font-size:10pt;
    	text-decoration:none;
    	width:325px;
    	text-align:justify;
    	margin:0 auto;
    	margin-top:10px;
    }
    
    #column_4 {
    	width:192px;
    	float:left;
    	background:url(menu-middle_back.gif) repeat-y
    }
    
    #menu-top {
    	width:100%;
    	height:123px;
    	background:url(menu-top_back.gif) no-repeat
    }
    
    #menu-middle {
    	width:100%;
    	background:#000 url(menu-middle_back.gif) repeat-y
    }
    
    #menu-bottom {
    	width:100%;
    	height:43px;
    	background:url(menu-bottom_back.gif) no-repeat
    }
    And the corresponding markup, thus:

    Code:
    			<div id="column_4">
    				<div id="menu-top">
    					&nbsp;
    				</div>
    				<div id="menu-middle">
    					<ul>
    						<li>
    							Option
    						</li>
    						<li>
    							Option
    						</li>
    						<li>
    							Option
    						</li>
    						<li>
    							Option
    						</li>
    						<li>
    							Option
    						</li>
    						<li>
    							Option
    						</li>
    						<li>
    							Option
    						</li>
    						<li>
    							Option
    						</li>
    						<li>
    							Option
    						</li>
    						<li>
    							Option
    						</li>
    						<li>
    							Option
    						</li>
    					</ul>
    				</div>
    				<div id="menu-bottom">
    					&nbsp;
    				</div>
    			</div>
    But this... well, I don't know what to do with it. The text falls out the bottom when the text is increased.

    Code:
    #column_3 { /*Main content area*/
    	width:432px;
    	height:auto;
    	float:left
    }
    
    #col-3_upper {
    	width:100%;
    	height:20px;
    	background:url(col-3_upper-back.gif) repeat-x
    }
    
    #col-3_middle { /*Where the text goes*/
    	width:100%;
    	height:auto;
    	background:#fff
    }
    
    #col-3_bottom { /*a way of making a footer which spans column_3 only*/
    	width:100%;
    	height:100px;
    	background:#fff
    }
    Perhaps I should add that these columns are floated, there being a total of four in the line.

    What I'm stuck on is, I don't quite know how to make a proper wrapper for my page. So far, my wrapper looks like this:

    Code:
    #wrapper {
    	width:762px;
    	height:800px;
    	margin:0 auto;
    	background:url(wrapper_back.gif) right bottom repeat-y;
    }
    Any help and advice will be appreciated.

    Many thanks

    Dr. V
    Last edited by Doctor_Varney; 08-27-2010 at 02:56 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    What I'm looking for is advice on a method of design that can be used to make sure the whole wrapper and all the columns can somehow scale, to accomodate.
    You'd need to make an em based layout, read The Incredible Em & Elastic Layouts with CSS
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Doctor_Varney (08-27-2010)

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Dr Varney,

    I have tried to assemble it here but something is obviously wrong. If you point me to it I'll correct it so that you have an uploaded version to try out. I can leave it there for a few weeks if needed.

    Perhaps you could give the whole of your code in line.

    Frank
    Last edited by effpeetee; 08-27-2010 at 11:08 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Cheers, Frank... Only, the part you've reconstructed is the div system for the menu that works.
    What I am stuck on is the rest of the page. I know this is really difficult to express without me having a server-side example but I've been left high 'n dry without my host.

    Thanks for the link Abdura. I'm reading it at the moment. Plenty to sink my teeth into there. I have a distant memory of em elastic layouts. I think this is probably the way, though calculating pixel widths from a Photoshop layout might prove challenging. Any tips?

    Many thanks

    Dr. V
    Last edited by Doctor_Varney; 08-27-2010 at 05:22 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Didn't you see this page from VIPStephan?

    [CODE]Pixels to Ems Conversion Table for CSS

    A companion reference to the article, The Incredible Em and Elastic Layouts With CSS.

    The em values in the table assume that the generic browser default setting of 16px font size has not being changed. It also assumes that the <body> has font size set to 1em or 100%.
    px font-size em equivalent * Rounded to 3dp 1px in ems Notes
    11 0.689 * 0.091
    12 0.750 0.083
    13 0.814 * 0.077
    14 0.875 0.071
    15 0.938 * 0.067
    16 1.000 0.063 Browser standard default
    17 1.064 * 0.059
    18 1.125 0.056
    19 1.188 * 0.053
    20 1.250 0.050
    21 1.313 * 0.048
    22 1.375 0.046
    23 1.438 * 0.044
    24 1.500 0.042
    25 1.563 * 0.040
    26 1.625 0.039
    27 1.688 * 0.037
    28 1.750 0.036
    29 1.813 * 0.035
    30 1.875 0.033
    Formula to calculate em equivalent for any pixel value required

    1 ÷ parent font size (px) × required pixels = em equivalent[
    /CODE]

    Useful references here *.
    Use the Search facility. Single words are often best.

    Frank
    Last edited by effpeetee; 08-27-2010 at 06:51 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    Doctor_Varney (08-27-2010)

  • #6
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Yes, I eventually found that and the simple formula for converting px to em. I'm liking it so far but for one thing...

    This method now plays havoc with my div background images

    And the inline images won't obey their margin positions, even when finely calculated to em. They seem to pop out of their containers, when I increase the text size.

    Any advice on that?

    Dr. V
    Last edited by Doctor_Varney; 08-27-2010 at 09:10 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #7
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Okay, getting there... slowly, with Abdura's advice there. What I've now done is absolved some of the images and my entire menu block from the em rules, leaving just the text column, it's nested elements & margins to obey them. So (and what the article doesn't state is) it seems okay to mix pixel measurements with the scaleable ems, depending on how we want each element to behave. Make sense? I hope so.

    Now I do still have a minor problem with a div background not being able to scale with the rest of the layout but compared to the mess I was in earlier, I'm still able to count the improvement.

    Dr. V
    Last edited by Doctor_Varney; 08-27-2010 at 10:37 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #8
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Okay look - can anyone please level with me here? I've been hand-coding for nearly 8 hours solid here, pushing stuff around and going in little circles for what seems like forever. I feel sick. Am I THE ONLY one here who is actually worried about user text increase???

    If not, then how do YOU design for it... because quite frankly, (no pun intended, FPT) there doesn't seem many sites out there using the elastic-man layout - and everyone else seems happy.

    But THEIR sites don't fall apart.

    Something is wrong with my way of thinking and I can't seem to settle here. Any advice appreciated now, as I can feel one of my famous coding migraines coming on...

    And maybe even a bunch of tables (if we're lucky)!

    Thanks

    Dr. V
    Last edited by Doctor_Varney; 08-28-2010 at 03:47 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #9
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    It would help if we could see your whole code.

    Have you tried HTMLPad for editing. You can get it on 30 days free trial. I now use it all the time.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #10
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    I use Notepad++ (which is open source) and have both Moz. and IE open for previewing. I can't see an advantage to changing my code editor, unless it provides WYSWYG drag & drop editing. Does HTMLPad have that?

    I used to use Dreamweaver MX to do table layouts but that was no gaurantee the pages would not muff up at some point. Plus, it created horribly bloated code. I'm glad I dumped it.

    Dr. V
    Last edited by Doctor_Varney; 08-28-2010 at 06:20 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.


  •  

    Posting Permissions

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