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
 
 Reply to this topicStart new topic
Replies(1 - 3)
smartremark102
post May 2 2011, 08:19 PM
Post #2





Group: Members
Posts: 2
Joined: 1-May 11
Member No.: 14,453
Well i am not really sure how to get into my CSS file...is there a way i can separate them by only editing the html code?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Paula78
post Aug 16 2011, 04:07 AM
Post #3





Group: Members
Posts: 2
Joined: 15-August 11
Member No.: 15,181
Personally i haven't head about separating by only editing the html code..maybe anyonewill help??
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
raydin
post Aug 16 2011, 06:32 AM
Post #4


Newbie
*

Group: Members
Posts: 15
Joined: 13-August 11
Member No.: 15,164
Your CSS is right there in the head at the top. It is included in the HTML file.

You have to edit this:

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

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

Just add margins and border if you want. I won't do it for you and let you try things out and test so you can learn.

Let me know if you're stuck!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Web Site Functionality · Next Newest »
 

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

 

Display Mode: Switch to: Standard · Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 23rd April 2024 - 02:45 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC