 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
specter
Joined: 07 Oct 2009
Posts: 4
|
 Posted: Thu Oct 08, 2009 12:39 pm how to make texts in same line |
 |
|
|
<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: 2308
|
| Posted: Thu Oct 08, 2009 1:36 pm |
|
|
|
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
|
| Posted: Thu Oct 08, 2009 2:24 pm |
|
|
|
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: 2308
|
| Posted: Thu Oct 08, 2009 2:41 pm |
|
|
|
| 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
|
| Posted: Thu Oct 08, 2009 2:44 pm |
|
|
|
<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: 2308
|
| Posted: Thu Oct 08, 2009 4:40 pm |
|
|
|
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
|
| Posted: Fri Oct 09, 2009 12:55 am |
|
|
|
| got what i needed thank you so much sticks464 seems best learn css lessons ) ill try that and thanks again.. |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
 |
|
|
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
