Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 12-03-2002, 12:22 PM   PM User | #1
Buzz
New Coder

 
Join Date: Nov 2002
Location: Africa
Posts: 69
Thanks: 0
Thanked 0 Times in 0 Posts
Buzz is an unknown quantity at this point
aligning-centering images/text

Hi

How does one align and centre both images(jpgs/gifs etc) and text (in document.write("") method) in javascript in an html doc?
So for example an image is centred at the top of the browser and text is centred or aligned right or left?

Also what fonts are supported by javascript and how to change font and size please.

Many Thanks
Buzz
Buzz is offline   Reply With Quote
Old 12-03-2002, 12:55 PM   PM User | #2
bacterozoid
Regular Coder

 
bacterozoid's Avatar
 
Join Date: Jun 2002
Location: USA
Posts: 486
Thanks: 23
Thanked 35 Times in 35 Posts
bacterozoid is an unknown quantity at this point
Using the document.write() command, you can input any valid HTML and it will write to the page. Here is an example for a center aligned image:

<script language="javascript">
document.write("<p align='center'><img border='0' src='http://www.wherever.com/wherever.gif' width='200' height='200'><br><br></p>TEXT");
</script>

The height and width tags are, of course, optional.

Anyways, notice that it is just normal HTML inside the tags. The JS reads the HTML, and writes it to the page, simple.

Font color, size, face, and all that is the same way. You just stick it in, and JS can write it to the page. Hope that helps!
bacterozoid is offline   Reply With Quote
Old 12-03-2002, 01:02 PM   PM User | #3
Kiwi
Regular Coder

 
Join Date: Oct 2002
Posts: 380
Thanks: 0
Thanked 0 Times in 0 Posts
Kiwi is an unknown quantity at this point
javascript does not perform any formatting. this is done by the html that surrounds the javascript. to center an element, you sould use the text-align style for the parent elemtent eg
Code:
<div style="text-align:center">
Your text in here
</div>
will center the text within that div. You can access the style properties of an element using javascript, but that's only necessary if you want that style property to be dynamic.

Similarly, fonts are not supported by javascript, but by html telling the browser what fonts to use. The actual fonts available are generally determined by the user's browser (again, it is possible to embed fonts in a document. This is html and generally not worth the effort and bandwidth it requires).
__________________
Strategy Conscious
Kiwi is offline   Reply With Quote
Old 12-04-2002, 07:53 AM   PM User | #4
Buzz
New Coder

 
Join Date: Nov 2002
Location: Africa
Posts: 69
Thanks: 0
Thanked 0 Times in 0 Posts
Buzz is an unknown quantity at this point
ok this is what im trying to do

Thanks to everyone who posted a reply!

below is an idea of what im trying to do.
----------------------------------------------------------------------------------

image.jpg(top center)

(<p> or <br> for space btw image and text

Text will go here in this format in the middle and
center of the browser each line underneath itself
neatly!


//Then a Name in the left and right corner of the browser//
Name of person Name of Person




Then the name of a company here
and below their moto

------------------------------------------------------------------------------------
im busy learning hmtl and javascript .not having a problem with the image file its just getting text etc where the boss wants it!


thanks in advance for help
Buzz is offline   Reply With Quote
Old 12-04-2002, 10:57 AM   PM User | #5
Kiwi
Regular Coder

 
Join Date: Oct 2002
Posts: 380
Thanks: 0
Thanked 0 Times in 0 Posts
Kiwi is an unknown quantity at this point
OK. Firstly, you don't need to put in a blank line. Something like this should work:
Code:
<div style="text-align: center">
<img src="...">
<p style="margin-top:12px">
Your content here
</p>
</div>
__________________
Strategy Conscious
Kiwi is offline   Reply With Quote
Old 12-04-2002, 11:35 AM   PM User | #6
Buzz
New Coder

 
Join Date: Nov 2002
Location: Africa
Posts: 69
Thanks: 0
Thanked 0 Times in 0 Posts
Buzz is an unknown quantity at this point
fonts!

ok got that bit with no problems.

now the name in the left hand corner and the name in the right hand corner of the browser below the image and text.

also fonts! what fonts are supported by html? i know its
<font face ="arial"></font> to change but ive tried some other fonts such as old english etc and its not supported.

another more complex question(if u know about it) how about repeating an image in a strip on a page.I know about <body background = "... .jpg"> to make the background an image but is it possible to alter it so you can write text over the image and make the text visible.So that the image is repeated in a strip and not the entire background.

thanks
Buzz is offline   Reply With Quote
Old 12-04-2002, 12:42 PM   PM User | #7
bacterozoid
Regular Coder

 
bacterozoid's Avatar
 
Join Date: Jun 2002
Location: USA
Posts: 486
Thanks: 23
Thanked 35 Times in 35 Posts
bacterozoid is an unknown quantity at this point
Wellp, first of all, any font you can think of works with HTML. The thing is, the user has to have that font saved onto their computer for them to be able to view it, so you want to try to stay simple. Times New Roman and Arial are sure bets, but there are plenty of others.

Your background image tiling vertically, you use CSS for. Simple, really.

<body background="image.jpg" style="background-repeat:'repeat-y'">

You add the style tag into your body tag right after you specify the location of your image. It makes the background image tile vertically down the page.
bacterozoid is offline   Reply With Quote
Old 12-04-2002, 03:21 PM   PM User | #8
Buzz
New Coder

 
Join Date: Nov 2002
Location: Africa
Posts: 69
Thanks: 0
Thanked 0 Times in 0 Posts
Buzz is an unknown quantity at this point
thanks

thanks bac.

got a book on javascript with 3 pages on CSS so ill check that out while I use your example.

Im learning javascript pretty fast..i think its a cool script...then I need to master server side scripts like asp,perl etc.

do u know anything about xml? is it a server side script or can it be used as one?

where do you think I should start and what do you think I should start with learning server side scripts?

I know ADO ,vb and a tiny bit of java , so I know abit about coding.

thanks
buzz
Buzz is offline   Reply With Quote
Old 12-04-2002, 03:35 PM   PM User | #9
cg9com
Senior Coder

 
Join Date: Jul 2002
Posts: 1,628
Thanks: 0
Thanked 0 Times in 0 Posts
cg9com is an unknown quantity at this point
Re: thanks

Quote:
Originally posted by Buzz
... I need to master server side scripts like asp,perl etc. ...
where do you think I should start and what do you think I should start with learning server side scripts? ...
3 letters one programming language.
PHP - its just the best

Last edited by cg9com; 12-04-2002 at 03:38 PM..
cg9com is offline   Reply With Quote
Old 12-04-2002, 03:47 PM   PM User | #10
Buzz
New Coder

 
Join Date: Nov 2002
Location: Africa
Posts: 69
Thanks: 0
Thanked 0 Times in 0 Posts
Buzz is an unknown quantity at this point
thanks

thanks

can u give me some more info on PHP.
go ways to get into it etc..decent books that dont cost my left little finger?

thanx
Buzz is offline   Reply With Quote
Old 12-04-2002, 07:49 PM   PM User | #11
bacterozoid
Regular Coder

 
bacterozoid's Avatar
 
Join Date: Jun 2002
Location: USA
Posts: 486
Thanks: 23
Thanked 35 Times in 35 Posts
bacterozoid is an unknown quantity at this point
Check right here:

http://www.codingforums.com/showthre...?threadid=9957

I was interested a bit ago, and have yet to find time to learn it, but I got some help.
bacterozoid is offline   Reply With Quote
Old 12-05-2002, 04:19 AM   PM User | #12
cg9com
Senior Coder

 
Join Date: Jul 2002
Posts: 1,628
Thanks: 0
Thanked 0 Times in 0 Posts
cg9com is an unknown quantity at this point
i went to a book store near me and bought a PHP book, its a little overwhelming because its so big, but its not actually very bad.
the language is really awsome, cost me 50 dollars
cg9com is offline   Reply With Quote
Old 12-05-2002, 09:13 AM   PM User | #13
Buzz
New Coder

 
Join Date: Nov 2002
Location: Africa
Posts: 69
Thanks: 0
Thanked 0 Times in 0 Posts
Buzz is an unknown quantity at this point
thanks

thanks everyone for your input.

i went to amazon to start looking for books.they have a few good ones...but first i will check out tutorials online at the sites you mentioned bac.

im going to get some resources on xml and asp aswell but im still very new to web dev so i guess i should get the client side mastered first.

back to my first post on this thread....how can i align text on a page in html so that its on the far left or far right of the page such as:


Text1 Text2

60px to move it down etc...but how about across the page???
<Center + something ?> <Align=right?>
thanks
buzz
Buzz is offline   Reply With Quote
Old 12-05-2002, 02:42 PM   PM User | #14
bacterozoid
Regular Coder

 
bacterozoid's Avatar
 
Join Date: Jun 2002
Location: USA
Posts: 486
Thanks: 23
Thanked 35 Times in 35 Posts
bacterozoid is an unknown quantity at this point
Well, here are two methods for aligning text, first, the HTML attributes.

<p align="right">Whatever here...</p>

Then there is the CSS alignment...

<p style="text-align:'right'">Whatever here...</p>

Take your pick.

*Note: Where you see right, know that that can be changed to left or center to change where it is aligned horizontally.

Also, if you do not specify text to be aligned to the center or right, it is automatically put on the left.
bacterozoid is offline   Reply With Quote
Old 12-05-2002, 02:49 PM   PM User | #15
Buzz
New Coder

 
Join Date: Nov 2002
Location: Africa
Posts: 69
Thanks: 0
Thanked 0 Times in 0 Posts
Buzz is an unknown quantity at this point
8 0 )

Thanks Bac!
Buzz is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 02:44 PM.


Advertisement
Log in to turn off these ads.