HTML Help

specter · Joined: 07 Oct 2009 Posts: 4

<HTML>

<P ALIGN=left>
hello1 </P>
<P ALIGN=middle>
hello2 </P>
<P ALIGN=RIGHT>
hello3 </P>

</HTML>

im not that good with html but can someone pls explain or make a simple code how can i make this 3 diff text in same line they go down and down.. :?:
any help appreciated

sticks464 · Joined: 31 Dec 2006 Posts: 2309

The paragraphs have to be contained and floated to work.

example:
Code: <div id="middle">
<p class="left">Left text</p>
<p class="right">Right text</p>
<p class="center">Center text</p>
</div>

Then need some css to get them into position.
Embedded css in head section.
Code: <style type="text/css">
#middle {
background:white; /*color for testing */
padding:10px; /* for testing, can be removed */
text-align:center;
}
.left {float:left;}
.right {float:right;}
</style>

specter · Joined: 07 Oct 2009 Posts: 4

thanks alot kinda how i wanted it :)
i tried change somethings to take them top
padding:10px; to padding-top:0px;
but didnt work as i thought any idea ?

sticks464 · Joined: 31 Dec 2006 Posts: 2309

Post the entire code your using. IE has built in margins and padding and that may be where your running into problems.

specter · Joined: 07 Oct 2009 Posts: 4

<HTML>
<head>
<style type="text/css">
#middle {
background:white; /*color for testing */
padding-top:0px; /* for testing, can be removed */
text-align:center;
}
.left {float:left;}
.right {float:right;}
</style>
</head>
<div id="middle">
<p class="left"> testing here Left text</p>
<p class="right"> testing here Right text</p>
<p class="center"> testing here Center text</p>
</div>
</HTML>

im using firefox.. dunno it doesnt seems top to me here..

sticks464 · Joined: 31 Dec 2006 Posts: 2309

By removing default margins and padding (yes, even for FF) will line up the text.
Code: <style type="text/css">
* {
padding:0;
margin:0;
}
#middle {
background:white;
text-align:center;
}
.left {float:left;}
.right {float:right;}
</style>

If you want to move it off the edges of the viewport, give the main container a margin.
Code: #middle {
background:white;
text-align:center;
margin:10px;
}

If you want to see what it is actuall doing, put a border around it.
Code: #middle {
background:white;
text-align:center;
margin:10px;
border:1px solid #000;
}

And another way to get visual effects.
Code: <style type="text/css">
* {
padding:0;
margin:0;
}
#middle {
background:white;
text-align:center;
margin:10px;
border:1px solid #000;
background:#FFC;
}
.left {float:left; color:#F00; background:#000; padding:0 5px;}
.right {float:right; color:#00C; background: #CCC; padding:0 5px; font-style:italic;}
.center {font-weight:bold; letter-spacing:3px; word-spacing:5px;}
</style>

specter · Joined: 07 Oct 2009 Posts: 4

got what i needed thank you so much sticks464 seems best learn css lessons :)) ill try that and thanks again..