Newbie alignment question

Forum Moderators: open

Message Too Old, No Replies

Newbie alignment question

Revolution99

3:35 pm on Sep 5, 2010 (gmt 0)

Each of the three paragraghs in the following code should be aligned left, center, and right respectively, but they're not. What am I doing wrong? For the life of me I cannot figure it out.

<?xml version="1.0" encoding="UTF - 8"?>
<!DOCTYPE html PUBLIC " - //W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
  <title>Omega Watches in Sports</title>
  
 </head>

 
  <body>
  <div style="text-align:center">
   <h1>Omega Watches in Sports</h1>
  </div>
  
  
  <p stlye="text-align:left">
   When you think of Omega and sports generally    
  </p>

  <p stlye="text-align:center">
   Omega watches, timings and qualities are spread    
  </p>

  <p stlye="text-align:right">
   The Beijing Olympics and Paralympics provided Omega 
  </p>

  
  
  </body>
 
</html>

rocknbil

5:04 pm on Sep 5, 2010 (gmt 0)

Typos (it's "style").


When you think of Omega and sports generally



Omega watches, timings and qualities are spread



The Beijing Olympics and Paralympics provided Omega


Did you want those to position left, center, and right? You need to float them, and add a width to the floats.


When you think of Omega and sports generally



Omega watches, timings and qualities are spread



The Beijing Olympics and Paralympics provided Omega

<div style="clear:both"></div>

You will need a clearing div after to avoid subsequent content from creeping up . . . or wrap the three in a left-floated container (floated containers will always shrink-wrap their children.)

Revolution99

5:22 pm on Sep 5, 2010 (gmt 0)

Thanks! I obviously made the mistake and then copies it several times.

To be honest it was just a basic exercise out of the book "Sams Teach Yourself HTML and CSS", and now that you have identified my error - it displays correctly.

I tried adding the float though as an experiment and notice that it displays the text all at the same "level".

Is that what "float" is used for?

rocknbil

4:20 pm on Sep 6, 2010 (gmt 0)

Right, you can see the effect, basically three columns. Wasn't sure if that's what you meant. There are many ways to do that, that's just one common example.

encyclo

4:52 pm on Sep 6, 2010 (gmt 0)

<?xml version="1.0" encoding="UTF - 8"?>
<!DOCTYPE html PUBLIC " - //W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

One issue you may encounter is that older browsers may have difficulty in handling the XML prolog, firstly due to selecting the wrong compatibility mode (affecting CSS positioning), secondly because the encoding as listed above is invalid - there should be no spaces in "UTF-8".

Also, XHTML 1.1 wasn't conceived for general web use. If you want to use XHTML syntax then you can switch to XHTML 1.0 Strict which, despite the version number, is more up to date and complete than 1.1. Then remove the prolog, ensure the doctype is on the very first line and declare the charset via a HTTP header and/or a meta charset element.