• 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?

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?



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>
 
Joined
May 21, 2009
Messages
4,966 (0.91/day)
System Name i7-PC / HTPC / iMac
Processor i7 3820 / Phenom II 940
Motherboard GIGABYTE G1.ASSASSIN2 / M3A79-T Deluxe
Cooling Corsair Hydro H100i / Scythe II (HS only)
Memory G.SKILL Trident X Series 8GB (2 x 4GB) DDR3 1600mhz / 4GB DDR2 1066 (@800) Corsair Dominator
Video Card(s) GB Radeon HD 7950s 3GB / GB Radeon HD 7950s 3GB
Storage 2x 80GB Intel X-25, 2x600gb SATA, 1x1tb 5400RPM storage /1x600GB, 3x500GB,1x160,1x120 SATA
Display(s) 1x 27" Yamakasi / Vizio 42" HDTV
Case Lian Li Lancool PC-K58 / Antec 900
Audio Device(s) HT Omega Striker 7.1 / Onboard and HDMI from ATi Card
Power Supply PC Power & Cooling 750W / 610W
Software Ubuntu / Windows 8.1 Pro / OS X / PHPStorm / Gaming
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

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

Aquinus

Resident Wat-man
Joined
Jan 28, 2012
Messages
13,147 (2.95/day)
Location
Concord, NH, USA
System Name Apollo
Processor Intel Core i9 9880H
Motherboard Some proprietary Apple thing.
Memory 64GB DDR4-2667
Video Card(s) AMD Radeon Pro 5600M, 8GB HBM2
Storage 1TB Apple NVMe, 4TB External
Display(s) Laptop @ 3072x1920 + 2x LG 5k Ultrafine TB3 displays
Case MacBook Pro (16", 2019)
Audio Device(s) AirPods Pro, Sennheiser HD 380s w/ FIIO Alpen 2, or Logitech 2.1 Speakers
Power Supply 96w Power Adapter
Mouse Logitech MX Master 3
Keyboard Logitech G915, GL Clicky
Software MacOS 12.1
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

New Member
Joined
Apr 20, 2012
Messages
4 (0.00/day)
set margin. use html and css to position them right.

________________
Death will Conquer You.
 
Top