The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Help with Tumblr HTML- want to create border and separation between boxes
smartremark102
post May 1 2011, 12:43 PM
Post #1





Group: Members
Posts: 2
Joined: 1-May 11
Member No.: 14,453



Here is a preview of this theme:

http://safe.tumblr.com/theme/preview/28771

Link to the them:
http://www.tumblr.com/theme/28771

As you may be able to tell, all the pictures/text are located in one big square (but its actually four boxes touching each other), and i wanted to see if i could make the boxes separate and even put borders around them. Is this possible?

And also, is there a way that i could move this them to the right a bit? thanks so much! Sorry if this was confusing, i am very new to html.


And here is the HTML codes for this theme:


<!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">

<!--
Killin' Hoes
-->

<head> <!-- DEFAULT VARIABLES -->
<meta name="color:background" content="#F0E1DE" />
<meta name="image:background" content="http://static.tumblr.com/9u2zteh/Q5klj69ew/bg.jpg" />
<meta name="color:text" content="#C2AEAE">
<meta name="color:title" content="#B9AAAA" />
<meta name="color:link" content="#C0B2B2" />
<meta name="color:link hover" content="#967676" />
<meta name="color:posts" content="#FAEFE3" />
<meta name="color:bars" content="#F7E4DE" />
<meta name="font:body" content="georgia" />
<meta name="image:Sidebar" content=""/>
<meta name="if:show sidebar image" content="0"/>
<meta name="text:Custom Link One" content="" />
<meta name="text:Custom Link One Title" content="" />
<meta name="text:Custom Link Two" content="" />
<meta name="text:Custom Link Two Title" content="" />
<meta name="text:Custom Link Three" content="" />
<meta name="text:Custom Link Three Title" content="" />
<meta name="text:Custom Link Four" content="" />
<meta name="text:Custom Link Four Title" content="" />




<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}

<style type="text/css">

img{ -webkit-transition: opacity 0.7s linear; opacity: 1;}
img:hover{ -webkit-transition: opacity 0.7s linear; opacity: 0.8; }

img
{ border-style: none;
}
body{
color:{color:Text};
background-color:{color:background};
background-image:url({image:background});
background-postition:center;
background-attachment: fixed;
background-repeat: repeat;
font-family:{font:body};
font-size:9px;
letter-spacing: px;
line-height: 12px;
text-align:justify;
}

a:link, a:visited, a:active{color:{color:link}; text-decoration:none;
line-height:16px; -webkit-transition-duration: .5s;}

#container{
background-color:transparent;
padding-bottom:5px;
width:96%;
position:absolute;
left:0%;
top:0%;
}

a:hover{color:{color:link hover}; text-decoration:italics; }

#center{
margin-top:-13px;
margin-bottom:0px;
margin-left:323px;

}

#entry{
float:left;
width:450px;
height:350px;
overflow:hidden;
background-color:{color:posts};
text-align:;

padding:0px;
padding-bottom:0px;
margin-bottom:0px;

}

div.navigate a{
text-align: center;
padding:3px;
padding-right:5px;
padding-left:5px;
padding-top:-5px;
letter-spacing: 3px;
color: {color:text};
background-color: {color:background};
border:1px solid #C4B29F;
margin:1px;
margin-left:-1px;
position:relative;
width: 70px;
height: 12px;
display: inline-block;
}

div.navigate a:hover{
font-weight: bold; letter-spacing: 0px; background:{color:posts}}; display:block; padding:0px 0;
border: 0px solid #000000; z-index:2;
}
#perma{
color:{color:link};
background-color:{color:link hover};
opacity:0; position:top;
-webkit-transition-duration: 0.4s;
padding:4px;
}
#notes{
display:block;
width:400px;
float:center;
padding:3px;
margin:5px;
}
#entry:hover #perma
{display: block; opacity:1;
}
.textposts
{ padding:20px;
}
.audio
{width: 490px; background-color:#E4E4E4; padding:3px; -webkit-box-shadow: 3px 3px 3px #dcdcdc;
}
.title
{color:{color:title}; font-family:Angsana New; font-size:32px; line-height:10px; letter-spacing:px; text-align:center; text-transform:; padding-top:3px; padding-bottom:5px;
}
#side{
float: left;
position: fixed;
top: 0px;
left: 10px;
width:300px;
height:100%;
-moz-border-radius:0px;
-webkit-border-radius:0px;
background-color:{color:posts};
border-left: 0px dotted {color:text};
border-right: 0px solid {color:text};
padding-left:8px;
padding-right:6px;
padding-bottom:3px;
padding-top:3px;
}

div.killinhoes{
z-index:9;
font-size:9px;
display:block;
position: fixed;
right:0px;
padding:5px;
padding-right:15px;
padding-left:15px;
background-color: {color:posts};
}
.bottomstrip{
width:1025px;
margin-left:-7px;
position:fixed;
padding:1px;
bottom:0px;
background:{color:background};
text-transform:none;
word-spacing:10px;
text-align:center;
z-index:3;
}
.right { margin: 0 0 px 0; overflow:hidden; text-align: left;}
.totalright {float:right; margin-top:0px;}
ol.notes {margin-left: 70px; width: 450px;}
ol.notes a:hover {font-style:italic;}
ol.notes li.note {padding: px; border-bottom:1px solid {color:link hover}; list-style-type:none;}
ol.notes li.note img.avatar {vertical-align:-4px ; margin-right:2px ;width: 6px;height: 6px;}
ol.notes li.note img.avatar:hover {-webkit-transform: scale(1);}
ol.notes li.note blockquote {font-size: 1.1em; letter-spacing: -1px; margin-left: -1px; margin-top: -1px; margin-bottom: -1px;}
ol.notes li.note .answer_content {font-size: 1.1em; letter-spacing: -1px; margin-left: -1px;margin-top: -1px; margin-bottom: -1px; display: block;}
.label {font-weight: bold; letter-spacing: 1px;}
ul.chat {list-style-type:none;}
</style>

<script type="text/javascript" src="http://static.tumblr.com/q0etgkr/J5bl3lkz1/tumblrautopagernopage.js"></script>

<style type="text/css">{CustomCSS]</style>
</head>

<body>
<div id="container">

<div id="center">

<div id="side">
<div class="title"><a href=""><i>{Title}</i></a></div>
<BR>
<center>
<div class="navigate">
<div style="word-spacing:10px">
<a href="/">home</a>
<a href="/ask">ask</a>
{block:IfCustomLinkOneTitle}
<a href="{text:Custom Link One}"> {text:Custom Link One Title}</a> {/block:ifCustomLinkOneTitle} {block:ifCustomLinkTwoTitle}
<a href="{text:Custom Link Two}"> {text:Custom Link Two Title}</a> {/block:ifCustomLinkTwoTitle} {block:ifCustomLinkThreeTitle}
<a href="{text:Custom Link Three}"> {text:Custom Link Three Title}</a> {/block:ifCustomLinkThreeTitle} {block:ifCustomLinkFourTitle}
<a href="{text:Custom Link Four}">{text:Custom Link Four Title}</a> {/block:ifCustomLinkFourTitle}</div> </center>
<BR><BR> <center>
{block:ifshowsidebarimage}<a href="/"><img src="{image:sidebar}" width=280px></a>{/block:ifshowsidebarimage}
{block:Description}
{Description}{/block:Description}</center>
</div>




<BR>
<div class = "autopagerize_page_element">
{block:Posts}
<div id="entry">

{block:Text} <div class="textposts"> <div id="perma"><a href="{Permalink}" title="{NoteCountWithLabel}">{24Hour}:{Minutes} - {NoteCountWithLabel}</a></div> <BR>
{block:Title}<div style="border-bottom:1px solid #CCC; font-family:Bell MT; font-size:16px;"><i>{Title}</i></div>{/block:Title}{Body}
</div>

{/block:Text}

{block:Photo}<BR><div id="perma"><a href="{Permalink}" >{24Hour}:{Minutes} - {NoteCountWithLabel}</a></div>
{LinkOpenTag}<a href="{Permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}" title="{PhotoAlt}" width="440px"/></a>{LinkCloseTag}



{/block:Photo}

{block:Photoset}{Photoset-450}{/block:Photoset}

{block:Quote} <div class="textposts">
<span style="font-size:20px;">“</span> <span style="font-family:times new roman; font-size:11px; line-height:14px; "><i>{Quote}</i></span> <BR>{block:Source}—<span style="text-transform:uppercase;">{Source}</span>{/block:Source} </div>
<div id="perma"><a href="{Permalink}" >{24Hour}:{Minutes} - {NoteCountWithLabel}</a></div>
{/block:Quote}

{block:Link}
<a href="{URL}" {Target}>{Name}</a>{block:Description}{Description}{/block:Description}
<div id="perma"><a href="{Permalink}" >{24Hour}:{Minutes} - {NoteCountWithLabel}</a></div>
{/block:Link}

{block:Chat} <div class="textposts">
{block:Title}{Title}{/block:Title}
<div class="lines">{block:Lines}<div class="line {Alt}">{block:Label}<b>{Label} </b>{/block:Label}{Line}</div>{/block:Lines}</div> </div>
<div id="perma"><a href="{Permalink}" >{24Hour}:{Minutes} - {NoteCountWithLabel}</a></div>
{/block:Chat}

{block:Audio}
<div class="audio">{AudioPlayerGrey}</div>
<center>{block:Caption}{Caption}{/block:Caption}</center>
<div id="perma"><a href="{Permalink}" >{24Hour}:{Minutes} - {NoteCountWithLabel}</a></div>
{/block:Audio}

<div class="video">
{block:Video}{Video-450}
{Caption}<div id="perma"><a href="{Permalink}" >{24Hour}:{Minutes} - {NoteCountWithLabel}</a></div>{/block:Video}
</div>

{block:Answer} <div class="textposts">
<div style="background-color:{color:box}; padding:1px; text-transform:uppercase;">
{Asker}: {Question}</div>
<div style="padding:3px; background-color:{color:link hover}; -moz-border-radius:0px; -webkit-border-radius:5px;"><i>{Answer}</i></div>
</div>
<div id="perma"><a href="{Permalink}" >{24Hour}:{Minutes} - {NoteCountWithLabel} </a></div>
{/block:Answer}

<BR><BR><BR>
</div>

<div class="killinhoes">
<b></b> <a href="http://killinhoes.tumblr.com"><font color="{color:text}">Theme</font></a>
</div>

{/block:Posts}
</div>
</div>
<center>{block:PostNotes} {Caption} {PostNotes}{/block:PostNotes}</center>

</div>
</body>
</html>


Thanks again!! biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 05:38 AM