No replies
spacerocker
Offline
newbie
Last seen: 4 years 9 weeks ago
Timezone: GMT-7
Joined: 2010-06-16
Posts: 1
Points: 2

Hi,

I'm modifying a theme I didn't create, and trying to add a floating tab (similar to the "Uservoice" tab, seen on the left here:
http://lazygrid.tumblr.com/

I added the tab, but am not sure how to make it float on the left, a bit from the top, without altering the spacing of the layout (as it currently does). My site is www.dirtyglitter.tumblr.com

I have some experience with HTML but am pretty new to CSS. Any input would be much appreciated! Thank you!

The code of the theme (with my tab added) is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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" />
	<meta http-equiv="Content-Language" content="en-US" />
 
	<title>dirtyglitter photography</title>
 
	<script type="text/javascript">// <![CDATA[
 
		document.documentElement.className = 'js';
 
	// ]]></script>
 
	<meta name="robots" content="noodp" />
	<meta name="robots" content="noydir" />
 
	<meta name="description" content="{MetaDescription}" />
	<meta name="keywords" content="" />
 
	<link rel="shortcut icon" href="http://dirtyglitter.com/newsite/wp-content/themes/shapeshifter/library/img/favicon.gif" />
	<link rel="alternate" type="application/rss+xml" href="{RSS}">
 
	<style type="text/css">
 
		/* reset */
		body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;}.clear{clear:both;}.left{float:left;}.right{float:right}img{border:0}.lower{text-transform:lowercase;}.upper{text-transform:uppercase;}br.clear{height:0;overflow:hidden;}/* Fonts.css */body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
		textarea { overflow: auto; }
		html, body { height: 100%; }
		a { text-decoration: none; outline: none; }
		img { font-style: italic; }
		strong { font-weight: bold; }
		em { font-style: italic; }
		*:focus { outline: 0; }
 
		body {
		    background-color: #000;
			font-family: 'Times New Roman', Times, serif;
		}
			a {
				text-decoration: underline;
				color: #fff;
			}
			a:hover {
				text-decoration: none;
			}
 
			.template-lazygrid {
 
			}
 
				.template-lazygrid .description-container {
					display: none;
					width: 991px;
					padding: 110px 0; margin: 0 auto;
					color: #fff;
				}
					.template-lazygrid .description-container h1 {
						margin-bottom: 55px;
						font-size: 200px;
					}
					.template-lazygrid .description-container p {
						font-size: 36px;
					}
 
				.template-lazygrid .lazygrid-container {
				    position: relative;
				    width: 991px; height: 100%; overflow: hidden;
				    margin: 0 auto;
				}
				    .template-lazygrid .post-set {
				        position: absolute; left: 0; top: 0;
				    }
				        .template-lazygrid .post {
				            position: absolute; left: -999em;
				            width: 109px; height: 109px; overflow: hidden;
							background-color: #000; color: #fff;
							cursor: pointer;
				        }
				        .js .template-lazygrid .post {
				            display: none;
				        }
				            .template-lazygrid .post .post-icon {
				                display: none;
				            }
				            .template-lazygrid .post .post-link {
				                position: absolute; left: 0; top: 0;
				                display: block;
				                width: 200%; height: 0; overflow: hidden;
				                padding-top: 200%;
				            }
				            .template-lazygrid .post .post-link:hover {
 
				            }
							.template-lazygrid .post .post-screen {
								position: absolute; left: 0; top: 0;
								width: 0; height: 100%; overflow: hidden;
								background-color: black;
				            }
						/* video */
						.template-lazygrid .post-video {
							background-color: #fff;
			            }
							.template-lazygrid .post-video .post-icon {
 
				            }
							.template-lazygrid .post-video .video-source {
								display: none;
				            }
							.template-lazygrid .post-video .video-caption {
								padding: 30px;
								color: #000;
								font-size: 197%; line-height: 30px;
				            }
								.template-lazygrid .post-video .video-caption a {
									color: #000;
					            }
						/* photo */
						.template-lazygrid .post-photo {
 
			            }
							.template-lazygrid .post-photo .photo-image {
				                position: absolute; left: 0; top: 0;
				                display: block;
				            }
							.template-lazygrid .post-photo .photo-link {
				                display: none;
				            }
						/* quote */
						.template-lazygrid .post-quote {
				            cursor: default;
				        }
							.template-lazygrid .post-quote .quote-text {
					            padding: 30px;
								color: #fff;
								font-size: 197%; line-height: 30px; font-style: italic;
					        }
							.template-lazygrid .post-quote .quote-source {
					            padding: 0 30px;
								color: #fff;
								font-size: 93%; line-height: 15px;
					        }
								.template-lazygrid .post-quote .quote-source a {
									color: #fff;
						        }
						/* audio */
						.template-lazygrid .post-audio {
 
				        }
						/* link */
						.template-lazygrid .post-link {
 
				        }
						/* conversation */
						.template-lazygrid .post-conversation {
 
				        }
 
					.detail {
					    position: fixed;
						display: none;
						overflow: hidden;
					}
						.detail .detail-container {
							position: absolute; left: 0; top: 0;
							width: 100%; height: 100%;
							background-color: #000;
						}
							.detail .post {
								display: none;
								width: 100%; height: 100%;
							}
							/* photo */
							.detail .post-photo {
 
							}
									.detail .post-photo .photo-image {
										display: block;
										margin: 0 auto;
									}
									.detail .post-photo .photo-caption {
										position: absolute; left: 50%; bottom: 24px;
										width: 400px;
										margin-left: -200px;
										color: #fff;
										font-size: 20px; line-height: 24px; text-align: center;
									}
							/* video */
							.detail .post-video {
 
							}
									.detail .post-video .video-source {
										display: block;
										width: 400px;
										margin: 0 auto;
									}
									.detail .post-video .video-caption {
										position: absolute; left: 50%; bottom: 24px;
										width: 400px;
										margin-left: -200px;
										color: #fff;
										font-size: 20px; line-height: 24px; text-align: center;
									}
							/* audio */
							.detail .post-audio {
 
							}
							/* quote */
							.detail .post-quote {
 
							}
							/* link */
							.detail .post-link {
 
							}
							/* conversation */
							.detail .post-conversation {
 
							}
 
					.loader {
						position: absolute; left: 50%; top: 50%;
						display: none;
						width: 32px; height: 32px;
						margin: -16px 0 0 -16px;
					}
 
					.overlay {
						position: fixed; left: 0; top: 0;
						display: none;
						width: 100%; height: 100%;
						background-color: #000;
						cursor: pointer;
					}
 
	</style>
 
	{CustomCSS}
 
	<script type="text/javascript" src="http://static.tumblr.com/aedattc/esXktwfwy/lazygrid.closure.js"></script>
 
 
</head>
<body>
 
 <p><a href="http://dirtyglitter.com/newsite"><img src="http://dirtyglitter.com/newsite/wp-content/themes/shapeshifter/pix/dg_tab.png" width="37" height="173" /></a></p>
{ position: fixed; top: 35px; left: 0px; _position: static; _margin: 0px; z-index: 1337; }
 
 
 
		<div class="template-lazygrid template">
 
 
			{block:Description}
				<div class="description-container">
					<h1>{Title}</h1>
					<p>{Description}</p>
				</div>
			{/block:Description}
 
			<div class="lazygrid-container">
 
				<ol class="post-set">
					{block:Posts}
						{block:Text}
		                    <li class="post post-text">
		                        {block:Title}
		                            <div>{Title}</div>
		                        {/block:Title}
		                        {Body}
		                    </li>
		                {/block:Text}
		                {block:Photo}
		                    <li class="post post-photo">
		                        <img src="{PhotoURL-400}" alt="{PhotoAlt}" />
								<a href="{LinkURL}">Link URL</a>
		                        {block:Caption}
		                            <div>{Caption}</div>
		                        {/block:Caption}
		                    </li>
		                {/block:Photo}
		                {block:Quote}
		                    <li class="post post-quote">
		                        "{Quote}"
		                        {block:Source}
		                            <div>{Source}</div>
		                        {/block:Source}
		                    </li>
		                {/block:Quote}
		                {block:Link}
		                    <li class="post post-link">
		                        <a href="{URL}">{Name}</a>
		                        {block:Description}
		                            <div>{Description}</div>
		                        {/block:Description}
		                    </li>
		                {/block:Link}
		                {block:Chat}
		                    <li class="post post-chat">
		                        {block:Title}
		                            <div>{Title}</div>
		                        {/block:Title}
		                        <ul class="chat">
		                            {block:Lines}
		                                <li class="{Alt} user_{UserNumber}">
		                                    {block:Label}
		                                        <span>{Label}</span>
		                                    {/block:Label}
		                                    {Line}
		                                </li>
		                            {/block:Lines}
		                        </ul>
		                    </li>
		                {/block:Chat}
		                {block:Video}
		                    <li class="post post-video">
		                        {Video-400}
		                        {block:Caption}
		                            <div >{Caption}</div>
		                        {/block:Caption}
		                    </li>
		                {/block:Video}
					{/block:Posts}
				</ol>
 
			</div><!-- // lazygrid container -->
 
		</div><!-- // template -->
 
	</div><!-- // container -->
 
 
 
 
	<img class="loader" src="http://static.tumblr.com/aedattc/WJpkso85c/loader.gif" alt="loader" />
 
	<script type="text/javascript">// <![CDATA[
 
		/*
			Theme options:
 
			getUrl - string ('/api/read/json/')
			imageSize: - number (1280)
			errorTitle - string ('An Error has Occurred')
			errorBody - string ('Return to the <a href="/">home page</a>.')
 
		*/
		$.lazyGrid({
			cache: true
		});
 
	// ]]></script>
 
	<script type="text/javascript">// <![CDATA[
 
		var m = document.uniqueID /*IE*/ && document.compatMode /*>=IE6*/ && !window.XMLHttpRequest /*<=IE6*/ && document.execCommand ; try{ if(!!m){ m("BackgroundImageCache", false, true) /* = IE6 only */ } }catch(oh){};
 
 
 
	// ]]></script>
 
<p><a href="http://dirtyglitter.com/newsite"><img src="http://dirtyglitter.com/newsite/wp-content/themes/shapeshifter/pix/dg_tab.png" width="37" height="173" /></a></p>
 
</body>
</html>