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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Tumblr Coding Help -- Issue with Auto-Width Margin

    Hey guys,

    So I'm sorry to bother you with this, but I literally have been trying to figure this out for MONTHS. I just don't know enough about coding to really figure it out. Basically the issue is that in the theme's code, the margin is centered using auto-widths. This is fine, but when you click on different pages, everything shifts to the right. For example, if you try to go to the ask page, everything shifts to the right, then back to the left when you refresh to the homepage. I assume this is because the margin is auto? I tried using % and length px in the margin, and it fixes the problem... but then it's not in the center anymore, which I want. Can anyone take a look and tell me what I can do to fix the issue. The url is {removed} if you need to look at it. The code is below. Thanks!

    Code:
    <!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">
    
     <head>
    
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
    
        <title>{Title}{block:PostSummary} - {PostSummary}{/block:PostSummary}</title>
    
        <link rel="icon" href="{Favicon}"/>
    
        <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
    
        <meta name="viewport" content="width=775"/> <!-- iPhone -->
    
    <style type="text/css">
    
    body {
    
       background: #000000;
    
       color: #818F87;
    
       font-family: Courier New, Courier New, sans-serif;
    
       font-size: 12px;
    
       line-height: 1.8em;
    
       margin: 0;
    
       padding: 0;
    
    }
    
    #content {
    
       background: #000000;
       
       width: 400px;
        
       padding: 20px;
     
       margin: 0px auto;
    }
    
    #header {
    
       border-bottom: 1px solid #818F87;
    
       margin: 0 0 1em 0;
    
       padding-bottom: .1em;
    
    }
    
    #header #description {
    
       font-size: 12px;
    
    }
    
    #header #description span {
    
       font-family: Courier New, Courier New, sans-serif;
    
       font-size: 120%;
    
    }
    
    #header #description span.and {
    
       font-family: Courier New, serif;
    
       font-style: normal;
    
    }
    
    a {
    
       color: #818F87;
    
       outline: 0;
    
       text-decoration: underline;
    
    }
    
    a:hover {
    
       color: #5B7564;
    
    }
    
    h1 {
    
       font-size: 30px;
    
       margin: 1em 0 .5em 0;
    
    }
    
    h2 {
    
       font-size: 18px;
    
       font-weight: normal;
    
       margin: .25em 0 .5em 0;
    
    }
    
    h2 a:hover {
    
       color: #5B7564;
    
    }
    
    h1 a {
    
       font-family: Courier New, serif;
    
       font-style: normal;
    
       text-decoration: none;
    
    }
    
    img {
    
       border: 0;
    
    }
    
    .post {
    
       margin-bottom: 2em;
    
    }
    
    .post .pf {
    
       font-family: Courier New, Courier New, sans-serif;
    
       font-size: 11px;
    
       margin-top: .5em;
    
    }
    
    .post .pf a {
    
       color: #818F87;
    
       background: #464947;
    
       -moz-border-radius: 3px;
    
       padding: 3px 2px 3px 2px;
    
       text-decoration: none;
    
    }
    
    .post .pf a:hover {
    
       color: #5B7564;
    
    }
    
    .post .date {
    
       margin-left: -2em;
    
       margin-bottom: .5em;
    
    }
    
    .post .date:hover .day {
    
       display: inline;
    
        color: #5B7564;
    
    }
    
    .post .date .day {
    
       display: none;
    
    }
    
    .post .date a:hover {
    
       background: #000000;
    
       color: #5B7564;
    
       display: block;
    
    }
    
    .post .caption {
    
       margin-top: .25em;
    
    }
    
    .post .quote span.quote {
    
       font-size: 18px;
    
    }
    
    .post .quote .box {
    
       font-family: Courier New, Courier New, sans-serif;
    
    }
    
    .post .chat li {
    
       list-style: none;
    
       margin-left: -40px;
    
    }
    
    .post .chat .label {
    
       font-family: Courier New, monospace;
    
    }
    
    .post .regular img {
    
       max-width: 100%;
    
    }
    
    {CustomCSS}
    
    </style>
    
     </head>
    
    <body>
    
     <div id="content">
    
        <div id="header">
    
         <h1><center><a href="/">{Title}</a> <a href="/ask">ASK</a> <a href="/archive">ARCHIVE</a></center></h1>
    
         <div id="description">
    
           {Description}
    
         </div>
    
        </div> <!-- END HEADER -->
    
    {block:Posts}
    
     <div class="post"> <!-- BEGIN POSTS -->
    
        <div class="date"><div id="permalink">
    
         <a href="{Permalink}">{block:Date}{MonthNumber}/{DayOfMonth}/{Year} at {12Hour}:{Minutes}{CapitalAmPm}{/block:Date}{block:NoteCount} + {NoteCountWithLabel}{/block:NoteCount}</a></div></div>
    
         
    
      {block:Regular}
    
     <div class="regular">
    
        {block:Title}<h2><b>{Title}</b></h2>{/block:Title}
    
        {Body}
    
     </div>
    
    {/block:Regular}
    
                       
    
    {block:Photo}
    
     <div class="photo">
    
      <div class="img">
    
        {LinkOpenTag}<center><img src="{PhotoURL-400}" alt="{PhotoAlt}"/><c/enter>{LinkCloseTag}
    
      </div>
    
        {block:Caption}
    
         <div class="caption">{Caption}</div>
    
        {/block:Caption}
    
     </div>
    
    {/block:Photo}
    
                       
    
    {block:Quote}
    
     <div class="quote">
    
        <div class="box">
    
         <span class="quote">"{Quote}"</span>
    
        </div>
    
        {block:Source}<div class="caption">— {Source}</div>{/block:Source}
    
     </div>
    
    {/block:Quote}
    
                       
    
    {block:Link}
    
     <div class="link">
    
        <h2><a href="{URL}" class="link" {Target}>{Name}</a></h2>
    
         {block:Description}
    
           <div class="caption">{Description}</div>
    
         {/block:Description}
    
     </div>
    
    {/block:Link}
    
                       
    
    {block:Conversation}
    
     <div class="chat">
    
        {block:Title}<h2><b>{Title}<b></h2>{/block:Title}
    
         <ul>
    
           {block:Lines}
    
             <li>
    
               {block:Label}<span class="label">{Label}</span>{/block:Label}
    
               {Line}
    
             </li>
    
           {/block:Lines}
    
         </ul>
    
     </div>
    
    {/block:Conversation}
    
                       
    
    {block:Audio}
    
     <div class="audio">
    
        {AudioPlayerGrey}
    
        {block:Caption}
    
         <div class="caption">{Caption}</div>
    
        {/block:Caption}
    
     </div>
    
    {/block:Audio}
    
                       
    
    {block:Video}
    
     <div class="video">
    
         {Video-400}
    
        {block:Caption}
    
         <div class="caption">{Caption}</div>
    
        {/block:Caption}
    
     </div>
    
    {/block:Video}
    
                    
    
    {block:HasTags}
    
     <div class="pf">
    
        &darr; {block:Tags} <a href="{TagURL}">{Tag}</a> {/block:Tags}
    
     </div>
    
    {/block:HasTags}
    
     </div> <!-- END POSTS -->
    
    {block:PostNotes}  {PostNotes} {/block:PostNotes}
    
    {/block:Posts}
    
    <div id="header"></div>
    
    <div id="footer"> <!-- BEGIN FOOTER -->
    
    <center>{block:NextPage}
    
    <a href="{NextPage}">older</a>
    
     {/block:NextPage}
    
    {block:PreviousPage}
    
    <a href="{PreviousPage}">newer</a>
    
     {/block:PreviousPage}</center>
    
    </div> <!-- END FOOTER -->
    
    </body>
    
    </html>
    Last edited by Fou-Lu; 04-03-2013 at 04:50 AM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    if you try to go to the ask page, everything shifts to the right, then back to the left when you refresh to the homepage. I assume this is because the margin is auto?
    No, it's because the ask page doesn't have a scrollbar.
    The easiest way to fix this is to force every page to have a scrollbar. One way of doing this is via:

    Code:
    html {
           overflow-y: scroll;
    }
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • Users who have thanked SB65 for this post:

    ira.anderson90 (03-25-2013)

  • #3
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Wow! This was an easy fix, but I would have never been able to figure that one out. Thanks so much!


  •  

    Posting Permissions

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