text position

hello, i have used the pagekit 'washed' and have done all the editing but im having trouble with the position of the text on the page. if you take a look at the page here : www.freewebs.com/blascanto/home.html
you can see the page is all lined up but if i keep writing in the news section for instance then the page ends up looking like this :

http://i291.photobucket.com/albums/ll295/blascanto/prtscr1.png

how can i set 'borders' for the text ?

and one little thing, the links at the top of the page 'home, biography gallery etc.' how can i change the look of them in the css or a different way, because no matter what i do they look 'pixlated'.ive tried changing them in sea monkey but each font i use looks like that. how can i get them to look like the 'links' (link here) ??

thanks for help in advance, and thanks to elated (your pagekits are great!!!)

[Edited by dubenko_33 on 23-May-08 02:20]

I think that's because you have one long string of letters with no spaces: 'newsnewsnewsnewsnews'...

That means it can't wrap, so the browser forces the table cell out to match the width of the text.

Try putting spaces in and it should work OK. (eg 'news news news news news'...)

Your aliasing (pixelating) font issue is browser-dependent. Some browsers and/or operating systems render small fonts without anti-aliasing; some don't. For example, I'm looking at your site on Firefox/Mac and the menu options are anti-aliased (smooth). But if I look on a PC, they're not anti-aliased.

In other words, there's not much you can do about it!

Hope that helps,
Matt


--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Thanks that seems to have done the trick Something so simple !!

About the links, I was wondering how the 'link here' links look completely fine but the ones at the top of the page dont ??? Can I put some extra information in the css ? and they dont seem to be 'rollover' anymore but when you view the 'wasted' pagekit on this site they are 'rollover' do I need to put something in the HTML code or css or can I do it using SeaMonkey ??

Thanks again for your help Matt !!!

Not sure what editor you're editing your page with, but it's added 'span' elements inside your 'a' elements in the menu:

<a style="font-weight: bold;"
href="/blascanto/biography.html"><span style="color: rgb(255, 255, 255);">biography</span></a>

etc.

The 'color' on the 'span' element will override any colors specified for the 'a' element (including any hover effect).

Remove the 'span' elements and put your styling in the 'a' elements instead:

<a style="font-weight: bold; color: #fff;"
href="/blascanto/biography.html">biography</a>

etc.

Matt

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

I noticed the 'span' tags and wondered what they were, but didn't want to play around with them just incase something went wrong. By the way I am using SeaMonkey to edit my pages. I was on the Morzilla FireFox website, and when I couldn't find 'Composer' on FireFox I downloaded SeaMonkey.

Anyway thanks AGAIN for your help Matt.

Caroline.

No problem. Feel free to ask if you have any other questions on the PageKit.

Cheers,
Matt

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Me too had the same problem for my website and thanks Matt for the solution.