Go Back   CodingForums.com > :: Client side development > HTML & CSS
Reload this Page Resizing layouts for resolution.

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 07-25-2011, 12:44 PM   PM User | #1
fatalsiren
New to the CF scene

 
Join Date: Jul 2011
Posts: 5
Thanks: 2
Thanked 0 Times in 0 Posts
fatalsiren is an unknown quantity at this point
Question Resizing layouts for resolution.
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:


the coding:

Code:
<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>
fatalsiren is offline   Reply With Quote
Old 07-25-2011, 02:17 PM   PM User | #2
vikram1vicky
Regular Coder

 
Join Date: Jul 2011
Location: India
Posts: 496
Thanks: 3
Thanked 57 Times in 56 Posts
vikram1vicky is an unknown quantity at this point
Hey,

<style>....</style> tags must be under head tags, but in your code, its outside...
vikram1vicky is offline   Reply With Quote
Users who have thanked vikram1vicky for this post:
fatalsiren (07-26-2011)
Old 07-26-2011, 08:53 PM   PM User | #3
fatalsiren
New to the CF scene

 
Join Date: Jul 2011
Posts: 5
Thanks: 2
Thanked 0 Times in 0 Posts
fatalsiren is an unknown quantity at this point
Smile
thanks for that but it doesn't help with the sizing issues!
fatalsiren is offline   Reply With Quote
Old 07-27-2011, 01:41 PM   PM User | #4
vikram1vicky
Regular Coder

 
Join Date: Jul 2011
Location: India
Posts: 496
Thanks: 3
Thanked 57 Times in 56 Posts
vikram1vicky is an unknown quantity at this point
You are welcome

It was not a solution of your problem. It was just a correction in your code
vikram1vicky is offline   Reply With Quote
Old 07-27-2011, 03:25 PM   PM User | #5
alykins
Senior Coder

 
alykins's Avatar
 
Join Date: Apr 2011
Posts: 1,608
Thanks: 37
Thanked 183 Times in 182 Posts
alykins will become famous soon enough
I am pretty sure this is due to your positioning CSS... is this absolutely necessary?
__________________

I code C hash-tag .Net
Reference: W3C W3CWiki .Net Lib
Validate: html CSS
Debug: Chrome FireFox IE
alykins is offline   Reply With Quote
Reply

Bookmarks

Tags
browser, optimize, resolution, size, tumblr

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 05:44 AM.
Advertisement
Log in to turn off these ads.