homepage Welcome to WebmasterWorld Guest from 23.22.59.252
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
background and text alignment help please
benji01

10+ Year Member



 
Msg#: 873 posted 2:00 pm on Apr 13, 2003 (gmt 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.

 

le_gber

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 873 posted 2:14 pm on Apr 13, 2003 (gmt 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

SEO practioner

10+ Year Member



 
Msg#: 873 posted 2:19 pm on Apr 13, 2003 (gmt 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

:-)

benji01

10+ Year Member



 
Msg#: 873 posted 2:32 pm on Apr 13, 2003 (gmt 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

MWpro

10+ Year Member



 
Msg#: 873 posted 3:30 pm on Apr 13, 2003 (gmt 0)

Since you are building it for a specific size (800x600), you could use absolute positioning to get the text where you want it.

le_gber

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 873 posted 3:35 pm on Apr 13, 2003 (gmt 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

benji01

10+ Year Member



 
Msg#: 873 posted 4:30 pm on Apr 13, 2003 (gmt 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

le_gber

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 873 posted 5:15 pm on Apr 13, 2003 (gmt 0)

Really glad it helped.

See you around.

Leo

grahamstewart

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 873 posted 11:01 pm on Apr 13, 2003 (gmt 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.

le_gber

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 873 posted 10:36 pm on Apr 14, 2003 (gmt 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

SEO practioner

10+ Year Member



 
Msg#: 873 posted 1:01 am on Apr 16, 2003 (gmt 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 :-)

grahamstewart

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 873 posted 1:35 am on Apr 16, 2003 (gmt 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. :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved