• Welcome to TechPowerUp Forums, Guest! Please check out our forum guidelines for info related to our community.
  • The forums have been upgraded with support for dark mode. By default it will follow the setting on your system/browser. You may override it by scrolling to the end of the page and clicking the gears icon.

Frustrated with tumblr alignment/coding somebody please help?

M

martezj

New Member
Joined
Apr 10, 2012
Messages
3 (0.00/day)
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?
facebookandtwit.png



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

My coding is
Code: 
<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>
 
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;
 
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;
Click to expand...

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 said:
Can you help me form the code because I'm not good with coding at all.
Click to expand...

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.
 
set margin. use html and css to position them right.

________________
Death will Conquer You.
 
You must log in or register to reply here.
Back
Top