1. Welcome to TechPowerUp Forums, Guest! Please check out our forum guidelines for info related to our community.

Frustrated with tumblr alignment/coding somebody please help?

Discussion in 'Programming & Webmastering' started by martezj, Apr 12, 2012.

  1. martezj New Member

    Joined:
    Apr 10, 2012
    Messages:
    3 (0.00/day)
    Thanks Received:
    0
    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?[​IMG]


    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>
  2. digibucc

    digibucc

    Joined:
    May 21, 2009
    Messages:
    4,863 (2.59/day)
    Thanks Received:
    1,465
    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;
  3. martezj New Member

    Joined:
    Apr 10, 2012
    Messages:
    3 (0.00/day)
    Thanks Received:
    0
    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?
  4. martezj New Member

    Joined:
    Apr 10, 2012
    Messages:
    3 (0.00/day)
    Thanks Received:
    0
    I need help coding the actual layout, can someone help me?
  5. Aquinus

    Aquinus Resident Wat-man

    Joined:
    Jan 28, 2012
    Messages:
    5,887 (6.58/day)
    Thanks Received:
    1,888
    Location:
    Concord, NH
    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.
  6. yecliz New Member

    Joined:
    Apr 20, 2012
    Messages:
    4 (0.00/day)
    Thanks Received:
    0
    set margin. use html and css to position them right.

    ________________
    Death will Conquer You.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guest)

Share This Page