homepage Welcome to WebmasterWorld Guest from 54.234.0.85
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Newbie alignment question
Revolution99




msg:4196809
 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




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

Typos (it's "style").

<p style="text-align:left">
When you think of Omega and sports generally
</p>

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

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

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


<p style="text-align:left;width: 33%; float: left;">
When you think of Omega and sports generally
</p>

<p style="text-align:center;width: 32%; float: left;">
Omega watches, timings and qualities are spread
</p>

<p style="text-align:right;width: 32%; float: left;">
The Beijing Olympics and Paralympics provided Omega
</p>
<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




msg:4196839
 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




msg:4197196
 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




msg:4197206
 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
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