Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    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>

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Hey,

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


  • Users who have thanked vikram1vicky for this post:

    fatalsiren (07-26-2011)

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Smile

    thanks for that but it doesn't help with the sizing issues!

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    You are welcome

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

  • #5
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,927
    Thanks
    46
    Thanked 203 Times in 202 Posts
    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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •