9 Replies - 1022 Views - Last Post: 12 September 2011 - 05:47 PM

#1 swim_fan08  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 238
  • Joined: 19-February 09

Text align to the right

Posted 11 September 2011 - 12:51 PM

I have one of my paragraphs justified, but I would like my other paragraph to be justified as well, but with the header to the right. I've included my html and css. I've tried <p align="justify"> for the paragraph and nothing.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Index</title>
<link href="style.css" rel="stylesheet" type="text/css" />

</head>
<body>

<div id="templatemo_wrapper"> 

	<div id="templatemo_header">

  <ul id="social_box">
            <li><a href="http://www.facebook.com/"><img 

src="images/facebook.png" alt="facebook" /></a></li>
            <li><a href="http://www.twitter.com/"><img src="images/twitter.png" 

alt="twitter" /></a></li>
                        
        </ul>
        

    	<div id="site_title">
            <h1><a href="index.htm"><img src="images/logo2.png" alt="logo" 

/><span></span></a></h1>
        </div> <!-- end of site_title -->
        
      
    </div> <!-- end of templatemo_header -->
    

<!-- end of templatemo_menu -->
    
    <div id="templatemo_content_wrapper">
    	<div id="templatemo_content_top"></div>
        <div id="templatemo_content">
        
            <h2>Welcome!</h2>
            
          <div class="image_wrapper image_fl"><img src="images/test.jpg" width="370" 

height="210" alt="image" /></a></div>
 
   
          <p align="justify"><h3>Header 1</h3>
This text is just like I want it.<br/><br/></p>

<HR width="50%" align="center">


<div align="right">
<p align="justify">
<h3>Want my header like this.</h3>
Want this paragraph aligned just like the one above the hr.
</p>
</div>
        	
        	<div class="cleaner"></div>
         
         
            
        </div>
        <div id="templatemo_content_bottom"></div>
	</div>
    
   
        
    <div id="templatemo_footer" >



        Copyright  2011 <a href="www.twitter.com/">Starr</a> 
        <a href="http://www.iwebsitetemplate.com" target="_parent">Website Templates</a> 
        by <a href="http://www.templatemo.com" target="_parent">Free CSS Templates</a>
    
    </div> <!-- end of templatemo_footer -->
    
</div> <!-- end of templatemo_wrapper -->    

</body>
</html>





body {
	margin: 0px;
	padding: 0px;
	color: #333;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 13px;
	line-height: 1.5em; 
	background-color: #0097d6;
	background-image: url(images/templatemo_body.jpg);
	background-repeat: repeat-y;
	background-position: center;
	
}

a, a:link, a:visited { color: #0066CC; text-decoration: none; }
a:hover { color: #CC3300; text-decoration: underline; }

p { margin: 0px; padding: 0; }
img { border: none; }

h1, h2, h3, h4, h5, h6 { color: #FFFFFF; }
h1 { font-size: 40px; font-weight: normal; margin: 0 0 30px 0; padding: 5px 0; }
h2 { font-size: 28px; font-weight: normal; margin: 0 0 20px 0; padding: 0; }
h3 { font-size: 21px; margin: 0 0 15px 0; padding: 0; padding: 0; color: #000; font-weight: 

normal; }
h4 { font-size: 18px; margin: 0 0 20px 0; padding: 0; color: #333; }
h5 { font-size: 16px; margin: 0 0 10px 0; padding: 0; color: #333; }
h6 { font-size: 14px; margin: 0 0 5px 0; padding: 0; color: #333; }

.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  }
.cleaner_h10 { clear: both; width:100%; height: 10px; }
.cleaner_h20 { clear: both; width:100%; height: 20px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }
.cleaner_h50 { clear: both; width:100%; height: 50px; }
.cleaner_h60 { clear: both; width:100%; height: 60px; }


.float_l { float: left; }
.float_r { float: right; }

.image_wrapper { display: inline-block; padding: 4px; border: 1px solid #fff; background: 

none; margin-bottom: 10px; }
.image_fl { float: left; margin: 3px 15px 0 0; }
.image_fr { float: right; margin: 3px 0 0 15px; }

blockquote { font-style: italic; margin-left: 10px;}
cite { font-weight: bold; color:#3b3823; }
cite span { color: #696443; }
em { color: #000; }

.tmo_list { margin: 20px 0; padding: 0; list-style: none; }
.tmo_list li { background: transparent url(images/templatemo_list.png) no-repeat scroll 0 

0px; margin:0 0 20px; padding:0 0 0 25px; 	line-height: 1em; }
.tmo_list li a { color: #fff; }
.tmo_list li a:hover { color: #ff4301; }


.button a { color: #333; font-weight: bold; }

.button a span { color: #de3f00; font-size: 18px; }

.button a:hover { color: #de3f00; text-decoration: none; }

#templatemo_wrapper { 
	width: 970px;
	margin: 0 auto;
}

#templatemo_header {
	width: 740px;
	height: 66px;
	padding: 0 100px 0 130px;
	background: url(images/templatemo_header.png) top no-repeat ;
}

#templatemo_header  #site_title {
	float: left;
	margin: 60px 0 0 60px;
}

#templatemo_header  #site_title a {
	margin: 0px;
	padding: 0px;
	font-size: 40px;
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
}

#templatemo_header  #site_title a span {
	display: block;
	text-align: right;
	font-size: 14px;
	color: #fff;
	font-weight: normal;
	margin-left: 5px;
}

#social_box {
	float: right;
	display: inline-block;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

#social_box li {
	display: block;
	float: left;
	padding: 0;
	margin: 0;
}

#social_box li a {
	width: 46px;
	height: 46px;
	margin-right: 5px;
}


/* menu */

#templatemo_menu {
	clear: both;
	width: 950px;
	height: 122px;
	padding: 0 10px;
	margin-bottom: 20px;
	background: url(images/templatemo_menu.png) no-repeat top;
}

#templatemo_menu .home a {
	float: left;
	width: 52px;
	height: 52px;
	margin: 9px 19px;
	background: url(images/templatemo_home.png) no-repeat center;
}

#templatemo_menu .home a:hover {
	background: url(images/templatemo_home_hover.png) no-repeat center;
}


#templatemo_menu ul {
	float: left;
	display: inline-block;
	height: 50px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
}

#templatemo_menu ul li {
	padding: 0;
	margin: 0;
	display: inline-block;
}

#templatemo_menu ul li a {
	float: left;
	display: block;
	height: 45px;
	width: 140px;
	padding: 5px 0 0 0;
	font-size: 11px;
	color: #666;	

	text-align: center;
	text-decoration: none;
	font-weight: normal;
	outline: none;
	border: none;
	background: url(images/templatemo_menu_divider.gif) repeat-y right;
}

#templatemo_menu ul li a span {
	display: block;
	font-size: 20px;
	font-weight: normal;
	color: #333;
}

#templatemo_menu ul li .last {
	background: none;
}

#templatemo_menu ul li a:hover, #templatemo_menu ul .current {
	color: #a13c03;
}

 #templatemo_menu ul li a:hover span, #templatemo_menu ul .current span {
	 color: #a13c03;
 }

#templatemo_menu ul li a span:hover {
	color: #a13c03;
}
/* end of menu */

/* content */

#templatemo_content_wrapper {
	width: 802px;
	padding: 0 68px 0 100px;
}

#templatemo_content_top {
	width: 802px;
	height: 10px;
	background: url(images/templatemo_content_top.png) no-repeat;
}

#templatemo_content_bottom {
	width: 802px;
	height: 10px;
	background: url(images/templatemo_content_bottom.png) no-repeat;
}
	
#templatemo_content {
	padding: 20px 30px;
	background: url(images/templatemo_content.png) repeat-y;
}


#templatemo_content p {
	margin-bottom: 10px;
}

#templatemo_content h2 {
	margin-left: -46px;
	height: 36px;
	padding: 12px 0 0 46px;
	text-shadow: 1px 1px 1px #555;
	margin-bottom: 10px;
	font-weight: bold;
	background: url(images/templatemo_h2.png) no-repeat;
}

.col_w340 {
	width: 340px;
}

.col_w220 {
	width: 220px;
}

.news_box {
	clear: both;
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: 1px dashed #fff;
}

.news_box .news_meta {
	margin-bottom: 10px;
}

.news_box img {
	float: left;
	width: 240px;
	height: 180px;
	margin-right: 30px;
	border: 1px solid #fff;
	padding: 4px;
}

.news_box_last {
	margin: 0;
	padding: 0;
	border: none;
}


.service_box {
	width: 340px;
	margin-bottom: 40px;
}

.service_box img {
	float: left;
	width: 48px;
	height: 48px;
}

.service_box .sb_right {
	float: right;
	width: 260px;
}

.comment{
	font-weight: bold;
}

/* end of content */

/* sp_box */

#templatemo_sp_box {
	width: 740px;
	height: 140px;
	margin: 20px 70px 0 100px;
	padding: 30px;
	color: #eac5b8;
	background: url(images/templatemo_sp_box.png) no-repeat;
}


#templatemo_sp_box h4 {
	color: #fff;
}

#templatemo_sp_box img {
	float: left;
	width: 80px;
	height: 80px;
}

#templatemo_sp_box .right {
	float: right;
	width: 240px;
}

#templatemo_sp_box p {
	margin-bottom: 15px;
}

#templatemo_sp_box .button a span { color: #fff; }
#templatemo_sp_box .button a { color: #000;	 }
#templatemo_sp_box .button a:hover { color: #fff; }

/* end of sp_box */


#contact_form {
	float: left;
	padding: 0;
}

#contact_form form {
	margin: 0px;
	padding: 0px;
}

#contact_form form .input_field {
	width: 300px;
	padding: 5px 0;
	background: #FFFFFF;
	border: 1px solid #CCCCCC;
}

#contact_form form label {
	display: block;
	width: 100px;
	margin-bottom: 5px;
	font-size: 14px;	
}

#contact_form form textarea {
	width: 335px;
	height: 200px;
	background: #FFFFFF;
	border: 1px solid #CCCCCC;
}

.submit_btn {
	margin: 0px;
	padding: 5px 10px;
	color: #FFFFFF;
	background: #0099FF;
	border: 1px solid #FFFFFF;
}

/* footer */

#templatemo_footer {
	width: 770px;
	padding: 20px 100px;;
	text-align: center;
	color: #12526d;
}


#templatemo_footer a {
	color: #000;
}

/* end of footer */

/* gallery */
	.row img {
	    margin: 2px;
	    border: 1px solid #0000ff;
	    clear: both;
	    width: 110px;
	    height: 90px;
	}
	 
	.first
	{
	    float: left;
	    text-align: center;
	} 
	     
	.last {
	    border: 1px solid #ffffff;
	    float: right;
	}
	 
	.desc
	{
	    text-align: center;
	    font-weight: normal;
	    width: 120px;
	    margin: 2px;
	}






Is This A Good Question/Topic? 0
  • +

Replies To: Text align to the right

#2 swim_fan08  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 238
  • Joined: 19-February 09

Re: Text align to the right

Posted 11 September 2011 - 03:12 PM

I've just tried using <p align="right"> and nothing. As well as the text align.
Was This Post Helpful? 0
  • +
  • -

#3 Moshambi  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 8
  • View blog
  • Posts: 280
  • Joined: 20-November 07

Re: Text align to the right

Posted 11 September 2011 - 03:16 PM

What you need to do is take the header out of the paragraph first. Then you will need to use CSS to align the text how you want:

<div id="container">
<h3>Right Aligned</h3>
<p>Justified Text</p>
</div>



Something like that with this CSS:

div#container h3 { text-align: right; }
div#container p { text-align: justify; }



Should yield what you are looking for. This code is untested.

Hope that helps!
Was This Post Helpful? 0
  • +
  • -

#4 swim_fan08  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 238
  • Joined: 19-February 09

Re: Text align to the right

Posted 11 September 2011 - 03:40 PM

View PostMoshambi, on 11 September 2011 - 04:16 PM, said:

What you need to do is take the header out of the paragraph first. Then you will need to use CSS to align the text how you want:

<div id="container">
<h3>Right Aligned</h3>
<p>Justified Text</p>
</div>



Something like that with this CSS:

div#container h3 { text-align: right; }
div#container p { text-align: justify; }



Should yield what you are looking for. This code is untested.

Hope that helps!


Thanks for the help! It didnt work out. I'll keep trying.
Was This Post Helpful? 0
  • +
  • -

#5 Moshambi  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 8
  • View blog
  • Posts: 280
  • Joined: 20-November 07

Re: Text align to the right

Posted 11 September 2011 - 03:45 PM

Ok I just tested that code out to be sure and it does work. When you were trying to add this in, where were you adding it into your code? Do you have an updated version of your code I can look at?

Here is the test I just ran:

<!DOCTYPE html>
<html>
	<head>
		<title>Testing</title>
		
		<style type="text/css">
			
			div#container h3 { text-align: right; }
			div#container p { text-align: justify; }
			
		</style>
	</head>
	
<body>
	<div id="container">
		<h3>Right Aligned Text</h3>
		<p>
			This text will be justified.
		</p>
	</div>
</body>
</html>


Was This Post Helpful? 0
  • +
  • -

#6 swim_fan08  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 238
  • Joined: 19-February 09

Re: Text align to the right

Posted 11 September 2011 - 06:03 PM

I just ran it, and its about half way there. Is it possible that I can have the paragraph in a block as well or justified? Here is sample code with an actual paragraph. The top paragraph is justified, but the second paragraph all the way to the right and goes all the way to the left, its not in a block form.


          <p class="justify"><h3>Header</h3>
Once upon a time there were three little pigs and the time came for them to leave home and 

seek their fortunes.Before they left, their mother told them " Whatever you do , do it the 

best that you can because that's the way to get along in the world.The first little pig 

built his house out of straw because it was the easiest thing to do.
The second little pig built his house out of sticks. This was a little bit stronger than a 

straw house.The third little pig built his house out of bricks.<br/><br/></p>

<HR width="50%" align="center">


<br/>

<div id="container">
<h3>Header</h3>


<p>One night the big bad wolf, who dearly loved to eat fat little piggies, came along and 

saw the first little pig in his house of straw. He said "Let me in, Let me in, little pig or 

I'll huff and I'll puff and I'll blow your house in!"
"Not by the hair of my chinny chin chin", said the little pig.
But of course the wolf did blow the house in and ate the first little pig.
</p>
</div>







body {
	margin: 0px;
	padding: 0px;
	color: #333;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 13px;
	line-height: 1.5em; 
	background-color: #0097d6;
	background-image: url(images/templatemo_body.jpg);
	background-repeat: repeat-y;
	background-position: center;
	
}

a, a:link, a:visited { color: #0066CC; text-decoration: none; }
a:hover { color: #CC3300; text-decoration: underline; }

p { margin: 0px; padding:0; }
img { border: none; }



h1, h2, h3, h4, h5, h6 { color: #FFFFFF; }
h1 { font-size: 40px; font-weight: normal; margin: 0 0 30px 0; padding: 5px 0; }
h2 { font-size: 28px; font-weight: normal; margin: 0 0 20px 0; padding: 0; }
h3 { font-size: 21px; margin: 0 0 15px 0; padding: 0; padding: 0; color: #000; font-weight: 

normal; }
h4 { font-size: 18px; margin: 0 0 20px 0; padding: 0; color: #333; }
h5 { font-size: 16px; margin: 0 0 10px 0; padding: 0; color: #333; }
h6 { font-size: 14px; margin: 0 0 5px 0; padding: 0; color: #333; }

.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  }
.cleaner_h10 { clear: both; width:100%; height: 10px; }
.cleaner_h20 { clear: both; width:100%; height: 20px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }
.cleaner_h50 { clear: both; width:100%; height: 50px; }
.cleaner_h60 { clear: both; width:100%; height: 60px; }


.float_l { float: left; }
.float_r { float: right; }

.image_wrapper { display: inline-block; padding: 4px; border: 1px solid #fff; background: 

none; margin-bottom: 10px; }
.image_fl { float: left; margin: 3px 15px 0 0; }
.image_fr { float: right; margin: 3px 0 0 15px; }

blockquote { font-style: italic; margin-left: 10px;}
cite { font-weight: bold; color:#3b3823; }
cite span { color: #696443; }
em { color: #000; }

.tmo_list { margin: 20px 0; padding: 0; list-style: none; }
.tmo_list li { background: transparent url(images/templatemo_list.png) no-repeat scroll 0 

0px; margin:0 0 20px; padding:0 0 0 25px; 	line-height: 1em; }
.tmo_list li a { color: #fff; }
.tmo_list li a:hover { color: #ff4301; }


.button a { color: #333; font-weight: bold; }

.button a span { color: #de3f00; font-size: 18px; }

.button a:hover { color: #de3f00; text-decoration: none; }

#templatemo_wrapper { 
	width: 970px;
	margin: 0 auto;
}

#templatemo_header {
	width: 740px;
	height: 66px;
	padding: 0 100px 0 130px;
	background: url(images/templatemo_header.png) top no-repeat ;
}

#templatemo_header  #site_title {
	float: left;
	margin: 60px 0 0 60px;
}

#templatemo_header  #site_title a {
	margin: 0px;
	padding: 0px;
	font-size: 40px;
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
}

#templatemo_header  #site_title a span {
	display: block;
	text-align: right;
	font-size: 14px;
	color: #fff;
	font-weight: normal;
	margin-left: 5px;
}

#social_box {
	float: right;
	display: inline-block;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

#social_box li {
	display: block;
	float: left;
	padding: 0;
	margin: 0;
}

#social_box li a {
	width: 46px;
	height: 46px;
	margin-right: 5px;
}


/* menu */

#templatemo_menu {
	clear: both;
	width: 950px;
	height: 122px;
	padding: 0 10px;
	margin-bottom: 20px;
	background: url(images/templatemo_menu.png) no-repeat top;
}

#templatemo_menu .home a {
	float: left;
	width: 52px;
	height: 52px;
	margin: 9px 19px;
	background: url(images/templatemo_home.png) no-repeat center;
}

#templatemo_menu .home a:hover {
	background: url(images/templatemo_home_hover.png) no-repeat center;
}


#templatemo_menu ul {
	float: left;
	display: inline-block;
	height: 50px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
}

#templatemo_menu ul li {
	padding: 0;
	margin: 0;
	display: inline-block;
}

#templatemo_menu ul li a {
	float: left;
	display: block;
	height: 45px;
	width: 140px;
	padding: 5px 0 0 0;
	font-size: 11px;
	color: #666;	

	text-align: center;
	text-decoration: none;
	font-weight: normal;
	outline: none;
	border: none;
	background: url(images/templatemo_menu_divider.gif) repeat-y right;
}

#templatemo_menu ul li a span {
	display: block;
	font-size: 20px;
	font-weight: normal;
	color: #333;
}

#templatemo_menu ul li .last {
	background: none;
}

#templatemo_menu ul li a:hover, #templatemo_menu ul .current {
	color: #a13c03;
}

 #templatemo_menu ul li a:hover span, #templatemo_menu ul .current span {
	 color: #a13c03;
 }

#templatemo_menu ul li a span:hover {
	color: #a13c03;
}
/* end of menu */

/* content */

#templatemo_content_wrapper {
	width: 802px;
	padding: 0 68px 0 100px;
}

#templatemo_content_top {
	width: 802px;
	height: 10px;
	background: url(images/templatemo_content_top.png) no-repeat;
}

#templatemo_content_bottom {
	width: 802px;
	height: 10px;
	background: url(images/templatemo_content_bottom.png) no-repeat;
}
	
#templatemo_content {
	padding: 20px 30px;
	background: url(images/templatemo_content.png) repeat-y;
}


#templatemo_content p {
	margin-bottom: 10px;
}

#templatemo_content h2 {
	margin-left: -46px;
	height: 36px;
	padding: 12px 0 0 46px;
	text-shadow: 1px 1px 1px #555;
	margin-bottom: 10px;
	font-weight: bold;
	background: url(images/templatemo_h2.png) no-repeat;
}

.col_w340 {
	width: 340px;
}

.col_w220 {
	width: 220px;
}

.news_box {
	clear: both;
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: 1px dashed #fff;
}

.news_box .news_meta {
	margin-bottom: 10px;
}

.news_box img {
	float: left;
	width: 240px;
	height: 180px;
	margin-right: 30px;
	border: 1px solid #fff;
	padding: 4px;
}

.news_box_last {
	margin: 0;
	padding: 0;
	border: none;
}


.service_box {
	width: 340px;
	margin-bottom: 40px;
}

.service_box img {
	float: left;
	width: 48px;
	height: 48px;
}

.service_box .sb_right {
	float: right;
	width: 260px;
}

.comment{
	font-weight: bold;
}

/* end of content */

/* sp_box */

#templatemo_sp_box {
	width: 740px;
	height: 140px;
	margin: 20px 70px 0 100px;
	padding: 30px;
	color: #eac5b8;
	background: url(images/templatemo_sp_box.png) no-repeat;
}


#templatemo_sp_box h4 {
	color: #fff;
}

#templatemo_sp_box img {
	float: left;
	width: 80px;
	height: 80px;
}

#templatemo_sp_box .right {
	float: right;
	width: 240px;
}

#templatemo_sp_box p {
	margin-bottom: 15px;
}

#templatemo_sp_box .button a span { color: #fff; }
#templatemo_sp_box .button a { color: #000;	 }
#templatemo_sp_box .button a:hover { color: #fff; }

/* end of sp_box */


#contact_form {
	float: left;
	padding: 0;
}

#contact_form form {
	margin: 0px;
	padding: 0px;
}

#contact_form form .input_field {
	width: 300px;
	padding: 5px 0;
	background: #FFFFFF;
	border: 1px solid #CCCCCC;
}

#contact_form form label {
	display: block;
	width: 100px;
	margin-bottom: 5px;
	font-size: 14px;	
}

#contact_form form textarea {
	width: 335px;
	height: 200px;
	background: #FFFFFF;
	border: 1px solid #CCCCCC;
}

.submit_btn {
	margin: 0px;
	padding: 5px 10px;
	color: #FFFFFF;
	background: #0099FF;
	border: 1px solid #FFFFFF;
}

/* footer */

#templatemo_footer {
	width: 770px;
	padding: 20px 100px;;
	text-align: center;
	color: #12526d;
}


#templatemo_footer a {
	color: #000;
}

/* end of footer */

/* gallery */
	.row img {
	    margin: 2px;
	    border: 1px solid #0000ff;
	    clear: both;
	    width: 110px;
	    height: 90px;
	}
	 
	.first
	{
	    float: left;
	    text-align: center;
	} 
	     
	.last {
	    border: 1px solid #ffffff;
	    float: right;
	}
	 
	.desc
	{
	    text-align: center;
	    font-weight: normal;
	    width: 120px;
	    margin: 2px;
	}

			
			div#container h3 { text-align: right; }
			div#container p { text-align: justify; }



Was This Post Helpful? 0
  • +
  • -

#7 Moshambi  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 8
  • View blog
  • Posts: 280
  • Joined: 20-November 07

Re: Text align to the right

Posted 11 September 2011 - 06:13 PM

Well I'm not sure if I follow exactly but what it seems like you are asking about is the width of the paragraph. If it is just an issue with width you can easily add some CSS to adjust that:

Example:
div#container p { width: 500px; }



That would make all of the paragraphs 500 pixels wide so that they aren't too long/short. You could also (and this is how I would do it) just set the width of the container.

Hope I followed ok and this is what you were trying to get at. If not I'll try again :)
Was This Post Helpful? 0
  • +
  • -

#8 swim_fan08  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 238
  • Joined: 19-February 09

Re: Text align to the right

Posted 11 September 2011 - 06:26 PM

View PostMoshambi, on 11 September 2011 - 07:13 PM, said:

Well I'm not sure if I follow exactly but what it seems like you are asking about is the width of the paragraph. If it is just an issue with width you can easily add some CSS to adjust that:

Example:
div#container p { width: 500px; }



That would make all of the paragraphs 500 pixels wide so that they aren't too long/short. You could also (and this is how I would do it) just set the width of the container.

Hope I followed ok and this is what you were trying to get at. If not I'll try again :)


div#container p { width:300px; }
This is the perfect width, but I would like the paragraph to be under the header as well on the right side. Not sure if I would have adjust something in my html or not to make that happen.
Was This Post Helpful? 0
  • +
  • -

#9 Moshambi  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 8
  • View blog
  • Posts: 280
  • Joined: 20-November 07

Re: Text align to the right

Posted 11 September 2011 - 08:09 PM

Oh I see. I would just give it a class along the lines of this:

<h3>Text Here</h3>
<p class="align-right">
Paragraph text here.
</p>



and then make your CSS class style like so:

.align-right { text-align: right; }


Was This Post Helpful? 1
  • +
  • -

#10 swim_fan08  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 238
  • Joined: 19-February 09

Re: Text align to the right

Posted 12 September 2011 - 05:47 PM

Thanks! It worked.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1