...

View Full Version : Resizing layouts for resolution.



fatalsiren
07-25-2011, 12:44 PM
Hiya, i've created a tumblr layout however on smaller screen resolutions it won't sit right, my layout can be seen here: http://fatalsirentest.tumblr.com

a screenshot of how it should look on all browsers/resolutions:
http://i55.tinypic.com/flvgc3.png

the coding:


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

<meta name="font:Title" content="Helvetica Neue">
<meta name="font:main" content="Helvetica Neue">
<meta name="if:Show RSS Link" content="1">
<meta name="if:Show Random Link" content="1">
<meta name="if:Show Archive Link" content="1">
<meta name="if:Show Submit LInk" content="1">
<meta name="if:Show Personal Link" content="1">
<meta name="image:PersonalPicture" content=""/>
<meta name="color:Title font" content="">
<meta name="color:main Font" content="">
<meta name="image:header" content=""/>
<meta name="color:hover font" 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}
</head>


<style type="text/css">

body {
width: 1280px;
height: 800px;
margin: 0 auto;
background: #fff url('http://i52.tinypic.com/2quhjrk.jpg') no-repeat center fixed;
}

.header{ background: #fff;
width: 520px!IMPORTANT;}

a, a:link, a:active, a:visited
{ color: {color:main Font}; }

.container
{ width: 510px!IMPORTANT;
text-align: center;
background: #fff;
margin-left: 380px; }

.sidebar
{ text-align: justified;
width: 510PX!IMPORTANT;
background: #fff; }

.paginaters
{ font-family: {font:title};
font-size: 42px;
line-height: 56pt;
letter-spacing: -5px;
display: inline;
text-shadow: 0.00em 0.00em 1px #bbb; }

.paginaters a, .paginaters a:link, .paginaters a:active, .paginaters a:visited
{ text-decoration: none;
color: {color:titlefont};
-webkit-transition: color .2s linear; }
.paginaters a:hover
{ color: {color:hover Font}; }

.desc {
background-color: #fff;
font-family: {font:main};
font-size: 8pt;
WIDTH: 500PX!IMPORTANT;
color: {color:main Font};
text-align: justify;
margin: 0; padding: 0; }

.desc ol, .desc ul
{ margin: 0; padding: 0; margin-left: 15px; }

.post
{ background-color: #fff;
margin-top: 0px!important;
padding: 5px;
margin: 0px;
width: 500px!IMPORTANT;
max-width: 500px;
font-family: {font:main};
font-size: 8pt;
font-weight: normal;
color: {color:main Font}; }

h3
{ font-family: {font:main};
font-size: 7.5pt;
line-height: 8pt;
color: {color:main Font};
margin: 0; padding: 0;
font-weight: normal;
width: 500px; }

h4
{ font-family: {font:title};
font-size: 20pt;
line-height: 3pt;
*line-height: 100%;
color: {color:title font};
font-style: italic;
font-weight: normal;
text-align: right!important;
margin: 0; padding: 0; }

h4 a, h4 a:link, h4 a:active, h4 a:visited
{ color: #4E4E4E;
text-decoration: none;
-webkit-transition: color .2s linear; }
h4 a:hover
{ color: {color:Hover Font}; }

h5
{ font-family: {font:title};
font-size: 32pt;
line-height: 22pt;
text-align: left;
margin: 0; padding: 0;
font-weight: normal;
color: {color:title font};
letter-spacing: -1px; }

.links
{ font-family: {font:title};
font-size: 10pt;
line-height: 10pt;
text-align: center;
font-weight: normal;
WIDTH: 500PX!IMPORTANT;
color: {color:title font};
letter-spacing: -1px;
text-transform: uppercase; }

h5 a, h5 a:link, h5 a:active, h5 a:visited, .links a, .links a:link, .links a:active, .links a:visited
{ color: {color:titlefont};
text-decoration: none;
-webkit-transition: color .1s linear; }
h5 a:hover, .links a:hover
{ color: {color:hover font}; }

h3 a
{ text-decoration: none; }

.reg
{ text-align: justify;
margin: 0; padding: 0; }

.reg a, .reg a:link, .reg a:active, .reg a:visited, .source a, .source a:link, .source a:active, .source a:visited
{ color: {color:main Font}; }

.source
{ margin: 0; padding: 0;
margin-left: 50px;
font-size: 7.5pt; }

.screenname
{ font-family: {font:title};
font-size: 8pt;
color: {color:title font};
margin: 0; padding: 0; }
.im
{ font-family: {font:main};
font-size: 8pt;
color: {color:main Font};
margin: 0; padding: 0;
margin-left: 5px; }

.player
{ background-color: #ff;
width: 100%;
height: 27px;
vertical-align: center;
font-size: 7.5pt;
text-align: center;
line-height: 30px; }

.player a
{ text-decoration: none;
color: #777777; }
.player a:hover
{ color: {color:hover Font}; }

img.albumart
{ width: 100%; }

.post blockquote
{ margin-left: 20px;
margin-right: 0px; }

.perma
{ width: 100%;
font-family: {font:title};
font-size: 7pt;
line-height: 5px;
text-transform: uppercase;
color: {color:title font};
text-decoration: none;
-webkit-transition: color .2s linear; }

.perma:hover
{ color: {color:hover Font} }

img.pic
{ width: 194px;
margin-top: 3px; }

ol.notes
{ padding: 0px;
margin: 25px 0px;
list-style-type: none;
border-bottom: solid 1px #E8E8E8; }

ol.notes li.note
{ border-top: solid 1px #E8E8E8;
padding: 3px; }

ol.notes li.note img.avatar
{ vertical-align: -4px;
margin-right: 10px;
width: 16px;
height: 16px; }

ol.notes li.note span.action
{ font-weight: normal;
font-size: 7.5pt; }

ol.notes li.note .answer_content
{ font-weight: normal; }

ol.notes li.note blockquote
{ border-color: #f0f0f0;
padding: 4px 10px;
margin: 10px 0px 0px 25px; }

ol.notes li.note blockquote a
{ text-decoration: none; }

iframe
{ position: fixed!important;
*position: absolute!important; }
.post iframe
{ height: auto!important;
overflow: visible!important;
position: relative!important;
display: inline!important;
width: 400px!important; }

{CustomCSS}

</style>
<body>
<div class="container">
<CENTER><div class="header">{block:IfHeaderImage}<img src="{image:Header}"/>{/block:IfHeaderImage}</div>
<div class="links">{Title}<BR><BR>
{block:IfShowRSSLink}&nbsp;<a href="{RSS}">rss</a>{/block:IfShowRSSLink}
{block:IfShowArchiveLink}&nbsp;<a href="/archive">archive</a>{/block:IfShowArchiveLink}
{block:IfShowRandomLink}&nbsp;<a href="/random">random</a>{/block:IfShowRandomLink}
{block:AskEnabled}&nbsp;<a href="/ask">ask</a>{/block:AskEnabled}{block:IfShowSubmitLink}&nbsp;<a href="/submit">submit</a>{/block:IfShowSubmitLink}
{block:IfShowPersonalLink}&nbsp;<a href="/tagged/personal">personal</a>{/block:IfShowPersonalLink}<BR><BR>
{Description}
{block:IfPersonalPictureImage}<br><a href=/><img src="{image:PersonalPicture}" /></a>{/block:IfPersonalPictureImage}</div></CENTER>

<BR><BR>
{block:Posts}
<div class="post">

{block:Text}
{block:Title}<h5>{Title}</h5>{/block:Title}

<div class="reg">{Body}</div>
{/block:Text}


{block:Photo}
<img src="{PhotoURL-500}" alt="{PhotoAlt}" width="100%"><br>

{block:Caption}<div class="reg">{Caption}</div>{/block:Caption}
{/block:Photo}


{block:Quote}
<h5>&ldquo;{Quote}&rdquo;</h5>

{block:Source}<div class="source">-- {Source}</div>{/block:Source}
{/block:Quote}


{block:Link}
<h5><a href="{URL} class="link" {Target}>{Name}</a></h5>

{block:Description}<div class="reg">{Description}</div>{/block:Description}
{/block:Link}


{block:Chat}
{block:Title}<h5>{Title}</h5>{/block:Title}

<table cellpadding="0" cellspacing="0">
{block:Lines}
<tr>
{block:Label}
<td class="screenname">
{Label}
</td>
{/block:Label}
<td class="im">
&nbsp;{Line}
</td>
</tr>
{/block:Lines}
</table>
{/block:Chat}


{block:Video}
{Video-400}

{block:Caption}<div class="reg">{Caption}</div>{/block:Caption}
{/block:Video}


{block:Audio}
{block:TrackName}
<h5>'{TrackName}'{block:Artist} by {Artist}{/block:Artist}</h5>
{/block:TrackName}

<div class="player"><div style="float:left;">{AudioPlayerGrey}</div> &nbsp; {block:ExternalAudio}<a

href="{ExternalAudioURL}">Download</a></span>{/block:ExternalAudio}</div>
{block:AlbumArt}<img class="albumart" src="{AlbumArtURL}">{/block:AlbumArt}

{block:Caption}<div class="reg">{Caption}</div>{/block:Caption}
{/block:Audio}


<a href="{Permalink}" class="perma"><div class="perma">{NoteCount}<div style="float:right;">{Month}

{DayOfMonth}{DayOfMonthSuffix} {Year}</div></div></a>

{block:PostNotes}
{PostNotes}
{/block:PostNotes}

</div>
{/block:Posts}
<BR>

{block:Pagination}
<div class="paginaters">
{block:PreviousPage}
<a href="{PreviousPage}">back.</a>
{/block:PreviousPage}

{block:NextPage}
<a href="{NextPage}">next.</a>
{/block:NextPage}
</div>
{/block:Pagination}

<h3>powered by <a href="http://tumblr.com">Tumblr</a> | designed by <a href=http://fatalsiren.tumblr.com>FATAL SIREN</a></h3></div>
</body>
</html>

vikram1vicky
07-25-2011, 02:17 PM
Hey,

<style>....</style> tags must be under head tags, but in your code, its outside...

:)

fatalsiren
07-26-2011, 08:53 PM
thanks for that :) but it doesn't help with the sizing issues!

vikram1vicky
07-27-2011, 01:41 PM
You are welcome :)

It was not a solution of your problem. It was just a correction in your code :)

alykins
07-27-2011, 03:25 PM
I am pretty sure this is due to your positioning CSS... is this absolutely necessary?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum