Выравнивание текста в блоке

blooom · December 21, 2010

Доброго всем времени суток. Завел себе блог на tumblr.com, хороший ресурс но со своими косяками. Больше всего меня беспокоит отсутствие в редакторе выравнивания текста, поэтому приходится задавать параметры в коде шаблона. Еще одна особенность данного сервиса, постинг разбит на категории (текст, фото, цитата и тп.) и каждый блок имеет свои особенности. Так вот, хочу попросить вашей помощи для выравнивания текста в блоке цитата по правому краю. Сейчас текст всех блоков выравнивается по центру, это мне подходит, но в блоке цитата нужно выравнивать по правому краю, помучался но та не чего и не получилось, все-таки знаний html не хватает. Буду очень благодарен за помощь.

Вот ссылка на блог

Вот актуальный код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--
	 Theme: The Untitled v1. (http://theuntitledtheme.tumblr.com/)
	 Design: The Minimalist (http://minimalist.co)
-->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	 <title>{Title}{block:PostSummary} | {PostSummary}{/block:PostSummary}{block:SearchPage} | {lang:Search results for SearchQuery}{/block:SearchPage}</title>	
	 <meta name="description" content="{MetaDescription}" />
	 <meta name="if:Show description" content="1" />	
	 <meta name="if:Show search" content="1" />
	 <meta name="text:Twitter name" content="" />
	 <meta name="text:Disqus Shortname" content="" />
	 <meta name="text:Google Analytics ID" content="" />	
	 <link rel="shortcut icon" href="{Favicon}" />
	 <link rel="alternate" type="application/rss+xml" title="{Title}" href="{RSS}" />

<!-- Styles -->

<link rel="stylesheet" href="http://static.tumblr.com/f1whv92/Mp9l6ewcg/reset.css" />
<style type="text/css">

/*—-- GENERAL —--*/

	 header, footer, section, article, nav, aside {
		display: block;
	 }

	 body {
		background: #ffffff;
		color: #222;
		font: 12px/20px Georgia, "Times New Roman", Times, serif;
		padding-top: 25px;
		text-align: center;
		width:800px;
		margin: 0 auto;
	 }

.disphoto {
  background-image: url({PortraitURL-64});
  -moz-border-radius: 64px;
  -webkit-border-radius: 64px;  
width: 64px;
  height: 64px;
  margin: 25px;
 }

	 h1, h2, h3, hQ {
		font-family: Cufon;
	 }

	 h1 {
		font-size: 50px;
		line-height: 50px;
	 }

	 h2 {
		font-size: 31px;
		line-height: 37px; 
	 }

	 h3 {
		font-size: 21px;
		line-height: 27px; 
	 }

	 a:link, a:visited {
		color: #222222;
font-style: italic;
		font-weight: normal;
		text-decoration: none;
	 }

	 a:hover, a:active {
		text-decoration: underline;
	 }

	 hr{
		border:0 #ccc solid;
		border-top-width:1px;
		clear:both;
		height:0;
	 }

	 ol{list-style:decimal}

	 ul{list-style:disc}

	 li{margin-left:30px}

	 p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{margin-bottom:15px}

	 #main {
		padding: 0px;
	 }

/*—-- MASTHEAD —--*/

	 .noMeta > div {
		padding: 0px;
	 }

	 #masthead {
		margin-bottom: 0px;
	 }

	 #masthead h1 {
		margin-bottom: 0;
	 }

	 #masthead h1 a:link, #masthead h1 a:visited {
		text-transform: Uppercase;
		color: #222;
		text-decoration: none;
	 }

	 #masthead h1 a:active {
		outline: 0;
	 }

	 #masthead p {
		font-family: Georgia, serif;
		font-size: 20px;
		color: #fff;
		margin-bottom: 0;
	 }

	 #masthead a:link, #masthead a:visited {
		color: #fff;
	 }

	 #siteDescription{
		font-size: 13px;
		color: #222;
		text-transform: Uppercase;
		border-top: 1px solid #222;
		margin-top: 20px;
		margin-bottom: -5px;
		padding: 15px 0 0 0;
		font-family: Cufon;
	 }

/*—-- SEARCH FORM —--*/

	 #frmSearch {
		padding-top: 20px; 
		display: none;
	 }

	 #txtSearch {
		background: url(http://static.tumblr.com/bpryy0m/6lRl6gmys/search.jpg) left no-repeat;
		width: 225px;
		padding: 2px 0 0 20px;
		font: 12px/12px Georgia, "Times New Roman", Times, serif;
		color: #222;
		border: 0px;
	 }

/*—-- MAIN HEADER NAV STRIP —--*/

	 #mainNav {
		border-top: 1px solid #222;
		border-bottom: 2px solid #222;
		margin-top: 20px;
		padding: 15px;
		font-family: Cufon;
	 }

	 #mainNav ul {
		list-style: none;
		margin: 0;
		padding: 0;
	 }

	 #mainNav li {
		margin: 5px;
		display: inline;
		padding: 0;
	 }

	 #mainNav a:link, #mainNav a:visited {
		padding: 0;
		font-size: 12px;
		line-height: 14px;
		margin: 0 2px;
		text-decoration: none;
		color: #222;
		text-transform: Uppercase;
	 }

	 #mainNav a:hover, #mainNav a:active {
		outline: none;
		text-decoration: none;
		border-bottom: 1px solid #222;
	 }

	 #mainNav a.active {
		text-decoration: none;
		border-bottom: 1px solid #222;
	 }

/*—-- ARTICLE META INFO —--*/

	 #designline {
		margin-top: 50px;
	 }

	 h5{
		position: relative;

		top: -35px;
		margin-bottom: 0px;
		font-family: Georgia, serif;
		font-size: 10px;
		color: #bca474;
		text-decoration: none;
		text-transform: Uppercase;
		font-weight: bold;
		border-bottom: 1px solid #bca474;
		background: #fff;
	 }

	 h5 a:link, .line a:visited{
		font-family: Georgia, serif;
		font-size: 10px;
		color: #bca474;
		text-decoration: none;
		text-transform: Uppercase;
		font-weight: bold;
	 }

	 h5 a:hover{
		text-decoration: underline;
	 }

	 h5 abbr{
		display: inline-block;
		position: relative;
		margin: 0 auto;
		padding: 0 8px;
		background: #fff;
		top: 10px;
	 }

	 h5.postDate a{
		color: #bca474;
	 }

/*—-- ARTICLE —--*/

	 article {
		background: #fff;
		margin-bottom: 20px;
		text-align: auto;
	   position: relative;
	  }

	 article img {
		border: none;
margin-bottom: 15px;

		max-width: 800px;
	 }

	 article p img {
		margin: 0;
	 }
	 article > div {
		padding: 0px;
		overflow: hidden;
	 }
	 article .searchPage {
		margin: 35px 0 0 0;
	 }

	 .searchPageText {
		margin: 0 0 30px 0;
	 }

	 article .meta a:link, article .meta a:visited {
		text-decoration: none;
	 }

	 article .meta a:hover, article .meta a:active {
		text-decoration: underline;
	 }

	 article h2 {
		text-align: center;
		color: #222222;
	 }

	 article h2 a:link, article h2 a:visited {
		text-transform: Uppercase;
		color: #222;
		text-decoration: none;
	 }

	 article h2 a:hover, article h2 a:active {
		text-decoration: none;
		border-bottom: 1px solid #222;
	 }

	 blockquote {
		border-right: 2px solid #bca474;
		margin-right: 200px;
		padding-right: 1em;
	 }

	 #quoteSource{
		margin: 0 auto;
		text-align: right;
	 }

	 #quoteText h5 {

	 text-align: right;
	 color: #222222;

	 }

	 article .chat {
		list-style: none;
		padding: 0;
		margin: 0;
	 }

	 article .chat li {
		margin: 0 0 2px;
		padding: 2px 0 2px 0;
	 }

	 .photoCaption {
		text-align: center;
	 }

/*—-- AUDIO PLAYER —--*/

	 .audio {
		height: 28px;
		width: 26px;
		overflow: hidden;
		margin: auto;
		padding-top: 7px;
	 }

	 .audioc {
		background-image:url('http://static.tumblr.com/f1whv92/9iCl6bfgp/audiocircle.png');
		background-repeat: no-repeat; 
		height: 41px;
		width: 41px;
	 }

	 .audioCaption {
		margin-top: 1px;
	 }

	 .audioleft {
		width: 41px;
		float: left;
	  }

	 .audioright {
		width: 760px;
		float: center;
	  }

	 .audioContainer {
		margin-top: 5px;
	 }

	 .audioClear {
		clear:both;
	 }

/*—-- ARTICLE NOTES —--*/

	 .notes {
		border-top: 1px solid #bca474;
		list-style: none;
		padding: 20px 0 5px 0;
		margin: 30px 0 0 0;
	 }
	 .notes li {
		margin: 0;
	 }

	 .notes .avatar {
		margin: 0 5px 0 0;
		position: relative;
		top: 5px;
	 }

	 .notes blockquote {
		margin: 10px 0 0 35px;
		padding-left: 10px;
		border-left: 2px solid #222222;
	 }

	 .media {
		width: 800px;
		margin-bottom: 20px;
	 }

/*—-- PAGE NAVIGATION —--*/

	 #pageNav {
		margin-top: 20px;
		border-top: 1px solid #222;
	 }

	 #pageNav ul {
		list-style: none;
		padding: 10px 15px;
		margin: 10px 0;
	 }

	 #pageNav li {
		margin: 0;
		display: inline;
	 }

	 #pageNav a:link, #pageNav a:visited {
		font: 11px Georgia, "Times New Roman", Times, serif;
		padding: 0;
		margin: 0 2px;
		background: #34hdf5;
		color: #222;
		text-decoration: none;
	 }

	 #pageNav a:hover, #pageNav a:active, #pageNav a.active:link, #pageNav a.active:visited {
		text-decoration: underline;
	 }

	 #pageNavOlder:after {
		content: " »";
		font-size: 10px;
	 }

	 #pageNavNewer:before {
		content: "« ";
	 }

/*—-- FOOTER META —--*/

	 #sitemeta {
		border-top: 2px solid #222;
		color: #222;
		padding: 20px 0 32px 0;
		font-family: Georgia, "Times New Roman", Times, serif;
		font-size: 8px;
	 }

	 #sitemeta p {
		margin: 0;
	 }

	 #sitemeta a:link, #sitemeta a:visited {
		color: #222;
		font-weight: bold;
	 }

{CustomCSS}
</style>

<!-- Scripts -->

<!--[if IE]>
	 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

	 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	 <script src="http://static.tumblr.com/q9z1v7k/dgEkijh8r/cufon-yui.js" type="text/javascript"></script>
	 <script src="http://static.tumblr.com/f1whv92/fgIl65bo1/cufon_300.font.js" type="text/javascript"></script>

	 <script type="text/javascript">
		Cufon.replace('h1',{ fontFamily: "Cufon" });
		Cufon.replace('h2',{ fontFamily: "Cufon" });
		Cufon.replace('h3',{ fontFamily: "Cufon" });
		Cufon.replace('#mainNav',{ fontFamily: "Cufon" });
		Cufon.replace('#siteDescription',{ fontFamily: "Cufon" });
	 </script>

<script>
	 $(function() {
		var search = $("#txtSearch").val();
		var placeholder = "Search...";
		var fadeToOpacity = 0.4;
		$("#txtSearch").fadeTo("normal", fadeToOpacity);
		if (search == "") {
	 $("#txtSearch").val(placeholder);
	 }
	 $("#txtSearch").blur(function() {
		search = $("#txtSearch").val();
		if (!(search != "" && search != placeholder)) {
		$("#txtSearch").val(placeholder);
	 }
	 $("#txtSearch").fadeTo("normal", fadeToOpacity);
	 });
	 $("#txtSearch").focus(function() {
		search = $("#txtSearch").val();
		if (search == placeholder) {
		$("#txtSearch").val("");
	 }
	 $("#txtSearch").fadeTo("normal", 1);
	 });
	 $("#btnSearch").click(function() {
	 $("#frmSearch").slideToggle("normal");
	 $(this).toggleClass("active");
 //  $("#txtSearch").focus();
	 });
	 });
</script>

</head>
<body>

<center><div class="disphoto"></div></center>

	 <header id="masthead" class="clearfix">
		<div id="thehead">		  
			  <h1 class="cufon"><a href="/">{Title}</a></h1>
			  <form action="/search" method="get" id="frmSearch">
			  <input type="text" id="txtSearch" name="q" value="{SearchQuery}" />
			  </form>	

	 {block:Description}
		<div id="siteDescription">{Description}</div>
	 {block:Description}

		   <nav id="mainNav">		
			  {block:HasPages}
			  {block:Pages}<li><a href="{URL}">{Label}</a></li>{block:Pages}
			  {/block:HasPages}
{block:IfTwitterName}
			  <li><a href="http://twitter.com/{text:Twitter name}">Twitter</a></li>
			  {/block:IfTwitterName}
			  {block:AskEnabled}<li><a href="/ask">Ask</a></li>{/block:AskEnabled}
			  {block:SubmissionsEnabled}<li><a href="/submit">Submit</a></li>{/block:SubmissionsEnabled}				 

			  <li><a href="{RSS}">RSS</a></li>
			  <li><a href="java script:;" id="btnSearch">Search</a></li>

		   </nav>		 
		</div>
	 </header>

	 <section id="main" class="clearfix">
	 <div class="layout">		   
	 {block:SearchPage}
		<article>
		   <div>
			  <div class="searchPage">
				 <h2>Search results for <a href="{URLSafeSearchQuery}">{SearchQuery}</a></h2>
			  </div>
					{block:NoSearchResults}
					<div class="searchPageText">
					   <p>I’m sorry, but we couldn't find anything matching "<b>{SearchQuery}</b>". Suggestions:</p>
					   <ul>
						  <li>Make sure all words are spelled correctly.</li>
						  <li>Try different keywords.</li>
						  <li>Try more general keywords.</li>
					   </ul>
					</div>
					{/block:NoSearchResults}
		   </div>
		</article>
	 {/block:SearchPage}

	 {block:TagPage}
	 <article>
		<div>
		   <div class="searchPage">
		   <h2>Posts tagged <a href="{TagURL}">{Tag}</a></h2>
		   </div>
		</div>
	 </article>
	 {/block:TagPage}	  

{block:Posts}
	 <div id="designline">
		<h5 class="postDate">
		   <abbr>{block:Date}<a href="{Permalink}">{DayOfMOnth}{DayOfMonthSuffix} {ShortMonth} {Year}</a>{/block:Date}{block:NoteCount} | <a href="{Permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}
		   </abbr>
		</h5>
	 </div>

	 <article>
		<div>
		   {block:Text}
			  {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
			  {Body}
		   {/block:Text}

		   {block:Photo}
			  {LinkOpenTag}<img src="{Photo-HighRes}" alt="{PhotoAlt}" />{LinkCloseTag}
			  {block:Caption}<div class="photoCaption">{Caption}</div>{/block:Caption}
		   {/block:Photo}

		   {block:Photoset}
			  <div class="media">{Photoset-500}</div>
			  {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
		   {/block:Photoset}

		   {block:Quote}
			  <div id="quoteText"><h7>{Quote}</h7></div>
			  {block:Source}<div id="quoteSource"><p>—{Source}</p></div>{/block:Source}
		   {/block:Quote}

		   {block:Link}
			  <h2><a href="{URL}" {Target}>{Name}</a></h2>
			  {block:Description}
			  <div>{Description}</div>
			  {/block:Description}
		   {/block:Link}	   

		  {block:Chat}
			 {block:Title}<h2>{Title}</h2>{/block:Title}
			 <ul class="chat">
				{block:Lines}
				<li>{block:Label}<strong>{Label}</strong>{/block:Label} {Line}</li>
				{/block:Lines}
			 </ul>
		  {/block:Chat}

		  {block:Audio}
			 <div class="audioleft">
				<div class="audioc">
				<div class="audio">{AudioPlayerBlack}</div>
				</div>
			 </div>
			 <div class="audioright"> 
				<div class="audioCaption">{block:Artist}<b>{Artist}</b>{/block:Artist}
<p>{block:TrackName}{TrackName}{/block:TrackName}</p>
				</div>
			 </div>
			 <div class="audioClear"></div>
			 <div class="audioContainer">
				{block:Caption}{Caption}{/block:Caption}
			 </div>
		  {/block:Audio}

		  {block:Video}
			 <div class="media">{Video-500}</div>
			 {block:Caption}<div>{Caption}</div>{/block:Caption} 
		  {/block:Video}

		  {block:Answer}
			 <h5>{Asker} asked: {Question}</h5>
			 {Answer}
		  {/block:Answer}

		  {block:Date}

					{block:IfDisqusShortname}
  <script type="text/javascript">
  //<![CDATA[
  (function() {
	var links = document.getElementsByTagName('a');
	var query = '?';
	for(var i = 0; i < links.length; i++) {
	  if(links[i].href.indexOf('#disqus_thread') >= 0) {
		query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
	  }
	}
	document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
	})();
	//]]>
	</script>
  {/block:IfDisqusShortname}

		  {block:PostNotes}
			 {PostNotes}
		  {/block:PostNotes}

		  {block:Date}

		</div>
	 </article>
{/block:Posts}

	 {block:PermalinkPagination}
		<nav id="pageNav">
		   <ul class="clearfix">
			  {block:PreviousPost}<li><a href="{PreviousPost}" id="pageNavNewer">Previous</a></li>{/block:PreviousPost}
			  {block:NextPost}<li><a href="{NextPost}" id="pageNavOlder">Next</a></li>{/block:NextPost}  
		   </ul>
		</nav>
	 {/block:PermalinkPagination}

	 {block:Pagination}
		<nav id="pageNav">
		   <ul class="clearfix">
			 {block:PreviousPage}<li><a href="{PreviousPage}" id="pageNavNewer">Newer</a></li>{/block:PreviousPage} 
			 {block:JumpPagination length="5"}
			 {block:CurrentPage}<li><a href="{URL}" class="active">{PageNumber}</a></li>{/block:CurrentPage}
			 {block:JumpPage}<li><a href="{URL}">{PageNumber}</a></li>{/block:JumpPage}
			 {/block:JumpPagination}
			 {block:NextPage}<li><a href="{NextPage}" id="pageNavOlder">Older</a></li>{/block:NextPage} 
		   </ul>
		</nav>
	 {/block:Pagination} 

	 {block:DayPagination}
		<nav id="pageNav">
		   <ul class="clearfix">
			  {block:PreviousDayPage}<li><a href="{PreviousDayPage}">« {DayOfMonth} {ShortMonth}</a></li>{/block:PreviousDayPage}{block:NextDayPage}|<li><a href="{NextDayPage}">{DayOfMonth} {ShortMonth} »</a></li>{block:NextDayPage}
		   </ul>
		</nav>
	 {/block:DayPagination}

	 </div><!-- END layout -->
	 </section>

	 <footer id="sitemeta">
		<div class="clearfix">
		   <div class="thefooter">
			  <p><a href="http://www.tumblr.com/theme/12051">The Minimalist Theme</a> designed by <a href="http://minimalist.co">The Minimalist</a> | Powered by <a href="http://tumblr.com">Tumblr</a></p>
		   </div>
		</div>
	 </footer>

	 {block:IfGoogleAnalyticsID}
		<script type="text/javascript">var gaJsHost=(("https:"==document.location.protocol)?"https://ssl.":"http://www.");document.write(unescape("%3Cscript src='"+gaJsHost+"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript">try{var pageTracker=_gat._getTracker("{text:Google Analytics ID}");pageTracker._trackPageview()}catch(err){}</script>
	 {block:IfGoogleAnalyticsID}

</body>
</html>

eVErl@Sting · December 23, 2010

style="text-align:right;"

Sign In

Выравнивание текста в блоке

Question

blooom

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

eVErl@Sting

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information