Now that I've decided to use CSS and divs to hold my content, how do I make my page expand if a reader enlargens font size through his or her browser (especially if they use Firefox which can keep enlargening the font many sizes)?
After enlargening the font size two steps in FF, the text expands so much it covers up other text in other divs, hides to the left and right, etc.
Is liquid design what I want? Is liquid design what keeps divs expanding to accommodate enlargened font size? If so, where can I best learn liquid design online?A liquid design might work, but I'm not sure. If you want to make a liquid layout, all you have to do is use % instead of px.Another alternative is to use em as your column width unit of measure: <!-- w --><a class="postlink" href="http://www.cm-life.com">www.cm-life.com</a><!-- w --> -- Increase and decrease the text size.I'm not sure what needs to be expressed in %.
Here's what I'm trying to do:
I have a div called "top" that has been positioned absolutely to the right side of my page. It looks like this:
<div id="top">
<p align="left" class="class" style="position: absolute; top: 247px; left: 391px; z-index: 1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem.
<br />
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. .<br />
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem<a href=http://www.webdeveloper.com/forum/archive/index.php/"./contactpage.html">here</a>.<br />
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<img style="z-index: 0" src=http://www.webdeveloper.com/forum/archive/index.php/"images/image.png" /><img style="position: absolute; top: 594px; left: 0" src="images/image2.gif" />
</div>
What happens is, the text will expand alot in Firefox until it expands the div over the divs that appear below it. The page is then unreadable.
What values need to be expressed in %? Can I build a page without tables that will expand every time the text size is increased so that the page will also expand and be readable?
Thanks!If I use ems for column width, how do I convert from px?
How many ems equal 100px?
After enlargening the font size two steps in FF, the text expands so much it covers up other text in other divs, hides to the left and right, etc.
Is liquid design what I want? Is liquid design what keeps divs expanding to accommodate enlargened font size? If so, where can I best learn liquid design online?A liquid design might work, but I'm not sure. If you want to make a liquid layout, all you have to do is use % instead of px.Another alternative is to use em as your column width unit of measure: <!-- w --><a class="postlink" href="http://www.cm-life.com">www.cm-life.com</a><!-- w --> -- Increase and decrease the text size.I'm not sure what needs to be expressed in %.
Here's what I'm trying to do:
I have a div called "top" that has been positioned absolutely to the right side of my page. It looks like this:
<div id="top">
<p align="left" class="class" style="position: absolute; top: 247px; left: 391px; z-index: 1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem.
<br />
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. .<br />
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem<a href=http://www.webdeveloper.com/forum/archive/index.php/"./contactpage.html">here</a>.<br />
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<img style="z-index: 0" src=http://www.webdeveloper.com/forum/archive/index.php/"images/image.png" /><img style="position: absolute; top: 594px; left: 0" src="images/image2.gif" />
</div>
What happens is, the text will expand alot in Firefox until it expands the div over the divs that appear below it. The page is then unreadable.
What values need to be expressed in %? Can I build a page without tables that will expand every time the text size is increased so that the page will also expand and be readable?
Thanks!If I use ems for column width, how do I convert from px?
How many ems equal 100px?