Re-sizing text elements

[onelife]

Hi all,

Please bear with me as I used to be a Frontpage wizzywig person up until about a week ago and have just learnt how to code by hand, but need some advice from those in the know.

I recently rewrote the homepage for www.thehealthzone.co.uk by hand to improve it accessibility and remove bad 'frontpage' code. Now I have grasped the resizing of the text, but need help with the divs.

The problem is that when you resize the text the surrounding elements don't move with the text. This is because I have used position: absolute - is there any other way to achieve accurate positioning that will adjust with the text size?

Many thanks in advance

[That1Guy]

You could use a "float". Position all of your elements inside a main div with a fixed width. Then position each of your smaller divs next to each other with fixed widths. As long as the smaller divs have the "float:left;" property in there, they should just line right now. If you need help with this, email me at That1Animator@yahoo.com and ill try to walk you through it, or help you set it up.

[ADAM Web Design]

You could also use the following to help you out:

height: 100px; (adjust accordingly)
overflow: auto;

The latter will create scrollbars within your divs as your text gets too large.

[TrafficProducer]

frontpage to hand

One idea is to use FrontPage to get the layout then tidy up the HTML code by hand.

~~~

It sound like Cascading Style Sheets would be helpful to you.

[onelife]

Thanks for all your replies guys,

I'm trying my best to get away from the frontpage way of doing things and trying the hand-coded approach as much as possible. The majority of it is easy enough and the page in question www.thehealthzone.co.uk took around an hour to write which considering I have only just learnt how to do this stuff I'm really quite pleased with myself.

Some of the fancier stuff, just doesn't want to work with accessibility aspects too well, but accessibility is something that we all need to work towards. Especially when you get a disability agency threaten to take me court, because there member are not well catered for.

In the meantime I shall keep plugging away until I learn that little bit more.

Many thanks

[onelife]

Finally got to where I wanted to be. After all the messing around I was doing, I simply tried using an em instead of px. Guess what, the result that I wanted.

I'm sure there will be some draw back to using em over px but at present it suits a little better. Try visiting www.thehealthzone.co.uk and using ctrl and the mouse wheel to see how it all expands and compresses.

Cheers all!

[bj]

Absolute positioning can be problematical across browserland, and is best used only for a small occasional element inside another div, since overlapping and other undesirable behavior can result with absolute positioning from the client resizing the browser window. It's best to eventually get a handle on using floats, which are better cross-browser. I offer you my online web development bookmarks, where lots of info can be found on layouts, bug busting, css tricks, and other things of interest for those learning how to hand code.

One hint I'll give you- ems are great but do NOT use them to set font size on body or you'll trigger font sizing bugs in more than one browser! Set the font size on body to be 100.01% and then adjust using either percentage or em for your inside elements (I usually use the main wrapper for this.)

I love developing with xhtml/css! Feel free to contact me if you have a specific question.

[onelife]

bj, thanks for that cool link and the advice.

As a complete novice to the hand-coding thing I find it heart warming to know there are professionals out there, who don't mind sharing a few tricks and tips to help us wizzywig people convert to a better way of working.

many thanks for your support.

[bj]

No problem, Dave! I'm glad we're converting you over from "the dark side" (FrontPage) and that there will be one more technically sound website on the web . . .

FYI, the browser bugs page is my fifth most popular page on the whole dang site (out of hundreds of pages) and I'm sure you'll be visiting it!

[onelife]

Hi bj,

I like the look of floats so I'm going to give them a try, saw this nice tutorial here http://css.maxdesign.com.au/index.htm

Very easy to follow and seems to work in most browsers.

[bj]

The Max tutorials are fabulous- do the listutorial as well, you'll get lots of use from it. You're also going to need to learn to clear floats, which can be a challenge at first, but once you get the hang of it is easy. Hint- easiest way to clear a float is to wrap it in another float. Oh, and due to the IE margin doubling bug, display: inline; is your friend . . .

You'll want to read about faux column layouts. Since floats only extend down as far as their content, you put a background on the layer BENEATH the float so it appears to continue down, an optical illusion.

If you get hooked, the way I did, you might consider joining the CSS-discuss mail list which is not for the faint of heart, but these people are the best bunch of mentors any hand coder could possibly want. Most of the links in my bookmarks are to sites developed by the members of the list as they break new ground with css/xhtml. This list is very high powered, populated by names any good webdev is familiar with- Eric Meyers, Holly Bergevin, and many other top css coders. Even if you don't join, bookmark the css-d wiki, since many solutions to common css problems are listed there.

Happy coding!

[davebarnes]

wizzywig ?

Surely you meant to write: WYSIWYG ?

[onelife]

Yeah that's what I meant, I just couldn't be bothered to type it in correctly, and lazily broke it down to wizzywig.