Welcome to WebmasterWorld Guest from 50.17.114.227

Forum Moderators: not2easy

Message Too Old, No Replies

background and text alignment help please

     
2:00 pm on Apr 13, 2003 (gmt 0)

New User

10+ Year Member

joined:Mar 27, 2003
posts:3
votes: 0


hi, this is my first post but i really hope someone can help....

i have created a background image for my web site that is 800x 600x in photoshop and saved it as a gif.

i created a body background css and alined it in the center of the page..
but i need to be able to type text in the far right of the page and have no idea how to. i used the layout table and cell and entered some text but when i viewd it, it moved to the top of the page. i hope someone can please help me with this question. I want the text to align on the far right of my image and the only way i can do this is by the layout tables but like i said, it then moves.

i hope this made sense to sombody as it is my first post and i dont really know how esle to explain it.

thank you for any help
Benji.

2:14 pm on Apr 13, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 14, 2003
posts:1550
votes: 0


Hi benji01 and Welcome to webasterWold [webmasterworld.com].

I haven't clearly understood what you wanted to achieve can you be a bit more precise?

LEo

2:19 pm on Apr 13, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:Mar 2, 2003
posts:398
votes: 0


Hi benji 01

Le ber I think he wants text inside his background.

Benji01: write text ON your .gif picture inside Photoshop if you want text on that background, it's much simpler and will get the job done in 30 seconds flat

:-)

2:32 pm on Apr 13, 2003 (gmt 0)

New User

10+ Year Member

joined:Mar 27, 2003
posts:3
votes: 0


sorry what i meant is i have created a background image and linked it as a external css file which looks fine but i wanted to add text over the background on the far right using css i have tried using layout tables and cells but the text will still move when i prview in browser.

thank you for the very speedy responses guys.
Benji

3:30 pm on Apr 13, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:Dec 29, 2002
posts:533
votes: 0


Since you are building it for a specific size (800x600), you could use absolute positioning to get the text where you want it.
3:35 pm on Apr 13, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 14, 2003
posts:1550
votes: 0


Is SEO_practioner idea possible or not (ie having the text on the BG).

If not, I think the best way is to create a 100% width table within which you could create another 800px width tabe and attach your bg to it. You then align this new table to the center (which will move according to the screen size hence your 800px table will always be in the middle). Now you just have to divide your 800px table into 2 colums and write your text in the right columns. You should also change the td code for the right column to <td background=""> otherwise in older NN browser your graphic will start again in the right section.

If you don't want the table to be centered in the browser windo, just get rid of the CSS style for the body and remove the 100% table.

Leo

4:30 pm on Apr 13, 2003 (gmt 0)

New User

10+ Year Member

joined:Mar 27, 2003
posts:3
votes: 0


Thankyou all very much for the help.
The last post is exaclty what i wanted centered image and now the text doesnt move when i preview thankyou alot..
i have been up all night trying everything and that is one thing i didnt try haha

2:29am at the mo time for bed (aus time)
god bless and thanks again

5:15 pm on Apr 13, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 14, 2003
posts:1550
votes: 0


Really glad it helped.

See you around.

Leo

11:01 pm on Apr 13, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 8, 2003
posts:1429
votes: 0


irk.. more tables for layout. Doesn't anyone on the CSS board actually use CSS? :)

Anyway, the CSS way to handle this is..

<body style="height:100%;background: #000022 url(yourpic.jpg) center center;">
<div style="position:absolute;top:0px;right:0px;width:50%;height:100%;border:1px solid black;">
Lots of text here.
</div>
</body>

Hope thats what you needed. Bit neater than those nasty old tables.

Obviously you can (and probably should) move the CSS to an external stylesheet instead. I've put a black border around where the text will go. To get rid of it just remove the 'border' settings on the div.

10:36 pm on Apr 14, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 14, 2003
posts:1550
votes: 0


irk.. more tables for layout. Doesn't anyone on the CSS board actually use CSS? :)

Of course, everybody does but me, but as I test my site on NN4.7: layers are not an option ;)

Leo

1:01 am on Apr 16, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:Mar 2, 2003
posts:398
votes: 0


Le_Gber...

I do like you too. I always test all my sites in IE 4.0 and up, then in Netscape 4.79 thru 7.02

That way, if there is a bug, I can see it right away. It's much longer but I find that it prevents us "nasty surprises"...

SEO :-)

1:35 am on Apr 16, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 8, 2003
posts:1429
votes: 0


NN4 only accounts for 2% of the browsers out there. IE4 is about 1%. And those numbers are dropping all the time.
Stats from Browsernews [upsdell.com]

So I'd rather save myself the hassle and just write nice, clean standards-compliant code, rather than spend months tearing my hair out and using dodgy markup to satisfy a broken browser that will be dead soon. :)