Welcome to WebmasterWorld Guest from 23.22.46.195

Forum Moderators: incrediBILL

Newbie alignment question

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

5+ Year Member



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>
5:04 pm on Sep 5, 2010 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.)
5:22 pm on Sep 5, 2010 (gmt 0)

5+ Year Member



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?
4:20 pm on Sep 6, 2010 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.
4:52 pm on Sep 6, 2010 (gmt 0)

WebmasterWorld Senior Member encyclo is a WebmasterWorld Top Contributor of All Time 10+ Year Member



<?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.
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month