# Frustrated with tumblr alignment/coding somebody please help?



## martezj (Apr 12, 2012)

I have two icons that I'm trying to position one is a facebook icon and the other is a twitter icon. How can I position them to the right side of my layout?
	

	
	
		
		

		
			






My question is what code will allow me to position those icons to my likings on my layout?

My coding is 
	
	



```
<html><head><title>{Title}</title><pnk rel="shortcut icon" href="{Favicon}"><pnk rel="alternate" type="application/rss+xml" href="/rss"> <meta name="color:Background Color" content="#000000"/><meta name="color:Box Color" content="TRANSPARENT"/><meta name="color:Box Background" content="000000"/><meta name="color:Text Color" content="#7A7A7A"/><meta name="color:Tumblr Title" content="#B9B9B9"/><meta name="color:Post Title" content="#B9B9B9"/><meta name="color:Type of Post" content="#B9B9B9"/><meta name="color:Quote/chat Accent" content="#ffffff"/><style type="text/css">body {margin: 30px;background-color: {color:Background Color};background-color: {color:Background Color}; background-image:url(http://img220.imageshack.us/img220/9315/redcloudsbackgroundfixe.png); background-attachment:fixed; background-position:center; background-repeat: repeat; }.chat{list-style: none;padding: 4px;margin: 10px;border: 1px solid {color:Quote/chat Accent};}.even {background-color: {color:Quote/chat Accent};padding: 4px;}.odd {padding: 4px}#table {width: 671px;background-color: {color:Box Background};background-image: url('http://img692.imageshack.us/img692/8481/longfontbackgroundtumbl.png');padding-top: 20px;padding-right: 20px;table-layout: fixed;padding-left: 20px;padding-bottom: 5px;font-family: GEORGIA, Helvetica, sans-serif;color: {color:Text Color};border: 0;font-size: 11px;}a:link,a:active,a:visited {text-decoration: underline;color: {color:Text Color};font-weight: normal;}a:verdana  {text-decoration: none;color: {color:Type of Post};}#left {width: 400px;padding: 0px;text-align: left;}.qcontainer {padding: 10px;border-left: 0px dotted {color:Text Color};border-top: 1px solid {color:Text Color};border-bottom: 1px solid {color:Text Color};border-right: 0px dotted {color:Text Color};background-color: {color:Quote/chat Accent};}.source {padding-top: 2px;}.quote {font-size: 15px;font-family: verdana, helvetica, sans-serif; line-height: 22px;background:url("") no-repeat;padding:50px 0px 5px 5px;}}#middle {width: 30px;}#right {text-align: left;width: 200px;padding: 0px;text-align: left;}#title, #title a {font-size: 25px;text-transform: uppercase;text-decoration: none;font-weight: normal; color: {color:Tumblr Title};margin-top: 0px;margin-bottom: 0px;font-family: sans-serif, sans-serif, sans-serif; }#posttitle, #posttitle a{font-size: 15px;font-weight: normal; color: {color:Post Title}; font-family: verdana, verdana , verdana; text-decoration: none;}#postlink, #postlink a{font-size: 15px;font-weight: normal; color: {color:Post Title}; font-family: verdana, verdana, verdana; text-decoration: underline;}#posts {list-style: none;padding: 0;margin: 0;}#each {padding-top: 10px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;}img {border: 0px;}#box, #box a {text-transform: uppercase;font-size: 11px;color: {color:Tumblr Title};width: 400;padding-top: 6px;padding-bottom: 3px;padding-right: 0px;padding-left: 0px;text-align: center;background-color: {color:Box Color};margin-top: 0px;margin-bottom: 0px;text-decoration: none;font-family: verdana, verdana, verdana; }#sidebox {text-transform: uppercase;font-size: 11px;color: {color:Tumblr Title};width: 200;padding-top: 6px;padding-bottom: 3px;padding-right: 0px;padding-left: 0px;text-align: center;background-color: {color:Box Color};margin-top: 0px;margin-bottom: 0px;font-family: verdana, verdana, verdana; }#sideboxF {text-transform: uppercase;font-size: 11px;color: {color:Tumblr Title};width: 200;padding-top: 6px;padding-bottom: 3px;padding-right: 0px;padding-left: 0px;text-align: center;background-color: {color:Box Color};margin-top: 0px;margin-bottom: 2px;font-family: verdana, verdana, verdana; }#box b, #box b a {color: {color:Type of Post};text-decoration: none;}.footer{font-family: GEORGIA, Helvetica, sans-serif;font-size: 12px;color: {color:Post Title};margin: 5px;}.footer a {text-decoration: none;}.label {font-size: 11px;text-transform: uppercase;color: {color:Post Title};}#sidebox b {color: {color:Tumblr Title};}p {margin: 10px;}</style></head><center><a href="/"><img src="toplayoutimage" border="0" alt=""></a></center><body><div align="center"><table id="table" cellpadding="0" cellspacing="0"><tr><td id="left" valign="top"><p id="title"><a href="/">{Title}</a></p><ol id="posts">{block:Posts}{block:Text}<li id="each"><div id="box"><a href="{Permalink}"><b>text post</b> {ShortDayOfWeek}, {ShortMonth}. {DayOfMonthWithZero}, {Year}</a></div>{block:Title}<p id="posttitle"><a href="{Permalink}">{Title}</a></p>{/block:Title}<p>{Body}</p></li>{/block:Text}{block:Photo}<li id="each"><div id="box"><a href="{Permalink}"><b>photo post</b> {ShortDayOfWeek}, {ShortMonth}. {DayOfMonthWithZero}, {Year}</a></div>{LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag} {block:Caption}<p>{Caption}</p>{/block:Caption}</li>{/block:Photo}{block:Quote}<li id="each"><div id="box"><a href="{Permalink}"><b>quote post</b> {ShortDayOfWeek}, {ShortMonth}. {DayOfMonthWithZero}, {Year}</a></div><p class="qcontainer"><span class="quote">{Quote}</span>{block:Source}<span class="source"><br><i>{Source}</i></span>{/block:Source}</p></li>{/block:Quote}{block:Link}<li id="each"><div id="box"><a href="{Permalink}"><b>link post</b> {ShortDayOfWeek}, {ShortMonth}. {DayOfMonthWithZero}, {Year}</a></div><p><a href="{URL}" id="postlink" {Target}>{Name}</a></p>{block:Description}<p>{Description}</p>{/block:Description}</li>{/block:Link}{block:Chat}<li id="each"><div id="box"><a href="{Permalink}"><b>chat post</b> {ShortDayOfWeek}, {ShortMonth}. {DayOfMonthWithZero}, {Year}</a></div>{block:Title}<p id="posttitle"><a href="{Permalink}">{Title}</a></p>{/block:Title}<ul class="chat">{block:Lines}<li class="{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label}{Line}</li>{/block:Lines}</ul></li>{/block:Chat}{block:Video}<li id="each"><div id="box"><a href="{Permalink}"><b>video post</b> {ShortDayOfWeek}, {ShortMonth}. {DayOfMonthWithZero}, {Year}</a></div>{Video-400}{block:Caption}<p>{Caption}</p>{/block:Caption}</li>{/block:Video}{block:Audio}<li id="each"><div id="box"><a href="{Permalink}"><b>audio post</b> {ShortDayOfWeek}, {ShortMonth}. {DayOfMonthWithZero}, {Year}</a></div><p align="center">{AudioPlayerBlack}</p>{block:Caption}<p>{Caption}</p>{/block:Caption}</li>{/block:Audio}{/block:Posts}</ol></td><td id="middle"></td><td id="right" valign="top"><div id="sidebox"><center><img src="http://img52.imageshack.us/img52/1297/navicrownofthorness.png"></center></div></div><div id="pagination"> {block:PreviousPage} <a class="pagination" href="{PreviousPage}">Previous<br />Page</a> {/block:PreviousPage} {block:NextPage} <a class="pagination" href="{NextPage}">Next<br />Page</a> {/block:NextPage} {block:DayPagination} {block:PreviousDayPage} <a class="pagination" href="{PreviousDayPage}">Previous<br />Day</a> {/block:PreviousDayPage} {block:NextDayPage} <a class="pagination" href="{NextDayPage}">Next<br />Day</a>  {/block:NextDayPage} {/block:DayPagination} </div><a href="/archive">ARCHIVE</a><br><a href="/random">RANDOM</a><br><a href="{RSS}">RSS</a></p><div id="sidebox"><center><img src="idk"></center></div></div><p>{Description}</p>{block:Following}<div id="sideboxF"><center><img src="http://img515.imageshack.us/img515/9176/coolpeoplepng.png"></center></div></div><div align="center">{block:Followed}<a href="{FollowedURL}"><img src="{FollowedPortraitURL-16}" style="border: 1px solid {color:Quote/chat Accent}; padding:2px;"></a>{/block:Followed}</div>{/block:Following}</td></tr></table><img src="http://hotlayouts2u.com/tumblr-layouts/pre_img/12697119271zgrvoi.jpg" border="0" alt=""><div class="footer">Coding by <a href="http://www.vintagesoullayouts.com/"> Vintage Soul , Graphic design by Martez J.</a>, powered by <a href="http://www.tumblr.com">tumblr</a></div><div align="center"><div class="footer"></div></div></body></html>

<script type="text/javascript" src="http://o.aolcdn.com/os_merge/?file=/streampad/sp-player.js&file=/streampad/sp-player-tumblr.js&expsec=86400&ver=11&bgcolor=#000000&trackcolor=#5c5c5c&autoplay=true"></script>
```


----------



## digibucc (Apr 12, 2012)

put them in their own div, with text-align:right set, 
or change their margins. 
you could also set the position to absolute and pull it all the way right:
position:absolute;right:0px;


----------



## martezj (Apr 12, 2012)

digibucc said:


> put them in their own div, with text-align:right set,
> or change their margins.
> you could also set the position to absolute and pull it all the way right:
> position:absolute;right:0px;



Can you help me form the code because I'm not good with coding at all. By putting them in their own D.I.V is and setting the position to absolute and right it won't be aligned perfectly right? I just need to know what code to use..I'm not good at html.


EDIT: Also for the Navigation how do I align that more?


----------



## martezj (Apr 15, 2012)

I need help coding the actual layout, can someone help me?


----------



## Aquinus (Apr 15, 2012)

martezj said:


> Can you help me form the code because I'm not good with coding at all.



This is your chance to learn if you really want to learn how to do it right. First I would start with what HTML is and how it works. Then continue on to CSS to style it.

http://w3schools.com/html/default.asp

Also could you clean up your code a little bit? One long line isn't ideal for viewing.


----------



## yecliz (Apr 20, 2012)

set margin. use html and css to position them right.

________________
Death will Conquer You.


----------

