RSS Forums RSS
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 1692 | Replies: 2
Reply
Join Date: Jul 2006
Location: Middle America
Posts: 173
Reputation: tefflox is an unknown quantity at this point 
Rep Power: 3
Solved Threads: 1
tefflox's Avatar
tefflox tefflox is offline Offline
Junior Poster

Question vertical alignment question

  #1  
Jul 27th, 2006
I have no experience with javascript, so I would like to know if it is possible to align a paragraph of text so it is placed in the middle of any browser window, using only html and css. Can this be done without js?

If not, how much javascript will I need to know in order to do that?

thank you
AddThis Social Bookmark Button
Reply With Quote  
Join Date: Dec 2004
Location: London or Slovakia
Posts: 2,656
Reputation: peter_budo is just really nice peter_budo is just really nice peter_budo is just really nice peter_budo is just really nice 
Rep Power: 12
Solved Threads: 311
Moderator
Featured Poster
peter_budo's Avatar
peter_budo peter_budo is online now Online
Code tags enforcer

Re: vertical alignment question

  #2  
Jul 27th, 2006
here is someting to get you going

www.w3.org
Learn to see in another's calamity the ills which you should avoid.
Publilius Syrus
(~100 BC)

LJC - London Java Community, JAVAWUG (Java Web User Group), Coding the Architecture
Reply With Quote  
Join Date: Jun 2004
Location: Hemet, CA
Posts: 429
Reputation: FC Jamison is on a distinguished road 
Rep Power: 5
Solved Threads: 18
Colleague
FC Jamison's Avatar
FC Jamison FC Jamison is offline Offline
Posting Pro in Training

Solution Re: vertical alignment question

  #3  
Aug 3rd, 2006
To my knowledge, there is no valid way to do this using only html and css.

Try using the following script, where paragraphID is the id tag name of the paragraph.
(i.e. <p id="paragraphID">

window.onload   = initPage;
window.onresize = initPage;

function initPage() {
	
  // Get paragraph height
  var paragraph =  document.getElementById('paragraphID');
  var paragraphHeight   = paragraph.offsetHeight;
  
  // Get browser window height
  var windowHeight = getWindowHeight();

  // Set paragraph area on page
  paragraph.style.position = 'absolute';
  paragraph.style.top = ((windowHeight - paragraphHeight) / 2) + 'px';
}

function getWindowHeight() {
  var windowHeight = 0;
	
  if (typeof(window.innerHeight) == 'number')
    windowHeight = window.innerHeight;
  else {
    if (document.documentElement && document.documentElement.clientHeight)
      windowHeight = document.documentElement.clientHeight;
    else {
      if (document.body && document.body.clientHeight)
        windowHeight = document.body.clientHeight; }; };
	
  return windowHeight;
};
Reply With Quote  
Reply

Only community members can participate in forum threads. You must register or log in to contribute.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

Thread Tools Display Modes
Forums | Blogs | Tutorials | Code Snippets | Whitepapers | RSS Feeds | Advertising
All times are GMT -4. The time now is 6:11 am.
Newsletter Archive - Sitemap - Privacy Statement - Contact Us
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC