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 15 of 15
  1. #1
    Regular Coder
    Join Date
    Feb 2010
    Posts
    231
    Thanks
    25
    Thanked 0 Times in 0 Posts

    Problems with 'position: fixed'

    I'm trying to 'fix' my sidebar and header on this tumblr: http://englandgazette.tumblr.com/

    But when I add position:fixed; to either the header css or sidebar css, it shifts their position?

    You can see the header effect I'm looking for here: http://scenefrombehind.tumblr.com/ (notice how the scrolling section disappears behind the static header)

    How would I make both the header and sidebar, in the first site I link to, static in such a way?

    Thanks in advance.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    first off, did you write this code?
    Last edited by Sammy12; 11-14-2011 at 03:18 AM.

  • #3
    Regular Coder
    Join Date
    Feb 2010
    Posts
    231
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    first off, did you write this code?
    No. Tumblr is a blogging platform, but I do have access to the site's html and css.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,688
    Thanks
    22
    Thanked 1,829 Times in 1,813 Posts
    Hello OurJud,
    When you add position: fixed; you will also need to position it.
    Like this -
    Code:
    #container{
    margin:50px auto 0 auto;
    width:625px;
    position: relative;
    }
    #sidebar{
    width:128px;
    position: fixed;
    top: 25px;
    left: 800px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    OurJud (11-14-2011)

  • #5
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    The #sidebar element uses float:right; to get its position currently. When you add position:fixed; you are obliterating that setting so it goes to position 0,0 by default. There isn't really a good fix for this with the way your page is laid out right now. Excavator's solution works at a specific screen resolution/browser width, but maximizing the browser or otherwise changing the browser's window width will end up shifting the sidebar's left/right alignment away from what was intended. A basic limitation of fixed positioning is that a fixed element ignores ALL of its parent elements' positioning rules and stays fixed relative to the browser viewport. For this reason I find it is best to use only one fixed element in a page where possible. I then make all elements that I want to have "fixed" sit inside of that single fixed element and give each of them the appropriate "absolute" position from within that parent fixed element. This has the effect of multiple fixed pieces without much of the frustration and also allows for static page widths and page centering and the like (which normal fixed positioning makes difficult).

    If you shift some source code around and make that sidebar part of a fixed header (don't make the sidebar itself fixed - you would probably want to use absolute positioning with a defined [top or bottom] and [left or right] position) and allow it to overrun the bottom edge of that fixed header then you can make that work while still keeping all page contents visible and clickable as you go.

    Now for your page, I notice no shift when adding position:fixed; to the blog title, though the rest of the page does shift up since the title is removed from the normal document flow. To restore the expected position of the first post just add top padding to the body (or to whichever element you find most convenient) and that will look correct again.

    For a similar layout that I devised a while back take a look here:
    http://rowsdower.freehostia.com/layo...er_and_sidebar

    I haven't cross-browser tested that layout, but in principle it does what you are trying to do so you can at least dissect it and pick up a few pointers from the code.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #6
    Regular Coder
    Join Date
    Feb 2010
    Posts
    231
    Thanks
    25
    Thanked 0 Times in 0 Posts
    First off, thank you Excavator and Rowsdower. I appreciate it must be frustrating when you go to so much trouble and then have the dunce who asked the question come back saying they don't understand.

    I'm one of those people who stumbles through html/css, learning the language by accident/trial & error and unfortunatley, Rowsdower, your solution is too advanced for me. I'm afraid, too, that looking through the code of your example wouldn't really help as I wouldn't know what I'd be looking for.

    The only part that I thought I might be able to work with is this:

    If you shift some source code around and make that sidebar part of a fixed header (don't make the sidebar itself fixed - you would probably want to use absolute positioning with a defined [top or bottom] and [left or right] position) and allow it to overrun the bottom edge of that fixed header then you can make that work while still keeping all page contents visible and clickable as you go.
    But even then I'm struggling. Do you mean move the div for the sidebar inside the div for header?

  • #7
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by OurJud View Post
    ...But even then I'm struggling. Do you mean move the div for the sidebar inside the div for header?
    Yes, that is exactly what I mean (though it doesn't necessarily need to be "header" that contains all fixed elements, in your case it does make the most sense).

    The basic overview:

    1. Create a div #header and use fixed position and 100% width
    2. Add a div within #header (let's call it #head_wrap) that has a set width to match your content's set width (470px for #posts) and margin: 0 auto; to keep it centered, and use position:relative; on this to contain the next pieces
    3. Move #sidebar and .blogtitle into #head_wrap
    4. Give #sidebar position:absolute; and top:<figure out what looks right>px;left:<figure out what looks right>px; to get it where you want it


    You will need to tweak top and left values, but sooner or later you will get there.
    Last edited by Rowsdower!; 11-14-2011 at 07:40 PM. Reason: forgot to add a piece of the puzzle
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    OurJud (11-14-2011)

  • #8
    Regular Coder
    Join Date
    Feb 2010
    Posts
    231
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Thank you so much for your patience, Rowsdowser. Do I take it from this, that doing it this way will ensure positioning is correct in all browsers, screen resolutions and sizes?

    Also, thanks to you too, Excavator. I had no problems with your fix, until Rowsdowser pointed out the possible compatibility issues.

  • #9
    Regular Coder
    Join Date
    Feb 2010
    Posts
    231
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Right, I tried to follow those instruction and made a right pig's ear of things. I don't think you appreciate how little I know about coding.

    All I managed to do with these instructions was shift everything over to the right of the screen and somehow disable the scrolling???

    I've now got it back to how it was, but would it be feasible for me to supply the entire code I have at my disposal so that I might better understand what I'm supposed to be doing?
    Last edited by OurJud; 11-14-2011 at 08:38 PM.

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,688
    Thanks
    22
    Thanked 1,829 Times in 1,813 Posts
    Quote Originally Posted by OurJud View Post
    Also, thanks to you too, Excavator. I had no problems with your fix, until Rowsdowser pointed out the possible compatibility issues.
    Sorry I just gave you the quick fix. I would normally have put that in a header so it would not move around like that but I was using your existing markup.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Any use of fixed position will eventually break if used on a small enough browser window (as, for example, in a case where a fixed element has only 2px by 2px size with 0,0 position, but the browser window is reduced to only have 1px by 1px visible - in such a case 3/4 of the fixed content would overflow the viewable screen and be impossible to view since the content is fixed and anything else on the page would be covered up by the fixed-position element). I would take no responsibility for that .

    That said, your page uses a fairly small display width and a very short sidebar (vertically speaking). With respect to this specific layout of yours working for all screen resolutions I think you could at least say that it will work for all reasonably expected screen resolutions and browser sizes.

    As for the cross-browser compatibilty, remember that I prefaced my earlier sample with the warning that I had NOT run it through thorough testing cross-browser (nor cross-platform, though I didn't specifically clarify so I will do so now). I haven't used this method anywhere in production that would necessitate testing it that thoroughly, but I can tell you that it works in FF3-FF7 and in IE7 on Windows XP, and on FF7 and IE8 on Windows 7. It also works on browser display sizes from whatever minimum size your layout needs (based on content) up to whatever available size monitor your user will have (though to be fair I have only tested it on a 1920 display, I have resized my browser between 1000px width and the full 1920 on my sample own page and it works at any and all widths between. I will never discourage you from testing it further yourself before using it, but I am reasonably confident that it will hold up under *most* circumstances.

    Quote Originally Posted by OurJud View Post
    ...I had no problems with your fix, until Rowsdowser pointed out the possible compatibility issues.
    To clarify: Excavator's solution doesn't have any specific compatibility problem. I believe it will behave the same on pretty much any setup. It just doesn't display the page consistently at different browser widths (even on the same version browser on the same exact machine) since the fixed positioning of the sidebar is always relative to the browser's viewport - it is not relative to the #container element's position within the viewport. So in effect you have a fixed-width element that centers itself within a variable-width browser viewport that you are trying to line up consistently with a fixed-width element that resides at a fixed distance from one side or the other of the viewport. Only at one set width will this actually match the original layout, and therein lies the problem with that approach.

    See the attached images for an illustration (both screen shots were taken from the same browser window, one with my viewport sized at 1280px and the other with the browser maximized to the full 1920px). Take a look at where your sidebar ends up in the second image.

    It was a fair shot (and something that I had tried to implement a hundred different ways when I made my sample layout) but I learned the hard way that the parent element's position is basically ignored with a fixed element. If there is a way to make Excavator's method work I would be way more in favor of doing it that way - I just haven't found any way to make that work after a lot of trying. My way is basically a hack, but as far as I know it works.

    If you implement my method in your website and find a browser/OS combination that this doesn't work with please do let me know.
    Attached Thumbnails Attached Thumbnails Problems with 'position: fixed'-1280.jpg   Problems with 'position: fixed'-1920.jpg  
    Last edited by Rowsdower!; 11-14-2011 at 09:17 PM. Reason: removed enormous images since they made the thread unreadable...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #12
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    My stab at it (changes highlighted):
    Code:
    <html>
        <head>
            <title>england gazette - the good the bad and the ugly</title>
            <link rel="shortcut icon" href="http://30.media.tumblr.com/avatar_beb5772637af_16.png">
            <link rel="alternate" type="application/rss+xml" href="http://englandgazette.tumblr.com/rss">
            
    
    <script type="text/javascript" src="http://static.tumblr.com/twte3d7/BH7lio0yf/jquery.js"></script>
    <script type="text/javascript" src="http://static.tumblr.com/twte3d7/RhUlio0y7/lazyload.js"></script>
    <script type="text/javascript" charset="utf-8"> 
    var $j = jQuery.noConflict();
    $j(function() { 
    if (navigator.platform == "iPad" || navigator.platform == "iPhone") return; 
    $j("img").lazyload({
    placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
    effect: "fadeIn",
    });
    });
    </script> 
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(window).load(function(){
    $("p").remove(":contains('Source:')");
    $("p").remove(":contains('(via')");
    });
    </script>
    
    
    <!-- DEFAULT COLORS -->
    <meta name="color:Text" content="#000000"/>
    <meta name="color:Links" content="#8D8D8D"/>
    <meta name="color:Accent" content="#000000"/>
    
    <meta name="font:Body" content="Helvetica"/>
    
    <meta name="if:Show Icon" content="0"/>
    <meta name="if:Endless Scroll" content="1"/>
    <meta name="if:Show Icon" content="0"/>
    
    <style type="text/css">
    body{
    text-align:justify; 
    font-family:Helvetica, Arial, sans-serif;
    font-size: 11px; 
    color:#050505; 
    background-color:#fff;
    }
    ::-webkit-scrollbar-thumb:vertical {  
    background-color:#616160;
    height:100px;
    }
    ::-webkit-scrollbar-thumb:horizontal { 
    background-color:#616160;
    height:10px !important;
    }
    ::-webkit-scrollbar { 
    height:10px;
    width:5px; 
    background-color:#fff;
    }
    .tumblrAutoPager_page_info, .tumblrAutoPager_page_separator {display:none;}
    
    a{
    text-decoration:none; 
    color:#050505;
    }
    
    
    img {
    border:none;
    margin:0px;
    padding:0px;
    }
    a img {
    border-width:0;
    outline: none !important;
    }
    
    #mainentry{
    width:460px;
    margin-bottom:25px;
    }
    #mainentry img{
    width:460px;
    }
    .blogtitle{
    width:460px;
    font-size:13px;
    margin-bottom:15px;
    border-bottom:1px solid #c4c4c4;
    padding-bottom:10px;
    text-align:left;
    font-weight:bold;
    
    }
    .title, h2{ 
    font-weight:bold;
    font-size:14px;
    line-height:17px;
    text-transform:uppercase;
    text-align:left;
    }
    .buttons{
    float:left;
    margin-right:10px;
    width:40px;
    font-size: 11px;
    font-weight: bold;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: #f5f5f5;
    text-align: center;
    padding: 4px 10px 3px 10px;
    border: 0px;
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px;
    border-style: solid;
    border-color: #e4e4e4;
    border-width: thin;
    }
    .buttons:hover{
    background:#ddd;
    }
    .pagination {
    height:20px;
    border-top:0px !important;
    border-bottom:1px solid #c4c4c4;
    }
    .quote{
    margin-bottom:5px;
    font-size:11px;
    font-weight:bold;
    }
    .search{
    border-style: solid;
    border-color: #e4e4e4;
    border-width: thin;
    width:90px;
    padding: 5px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size:11px;
    height: 22px;
    background-color: #f5f5f5;
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px;
    }
    .audio{
    position:relative;
    overflow:hidden;
    color:#222!important;
    margin-bottom:10px;
    }
    
    .art{
    float:left;
    width:100px !important;
    height:100px !important;
    margin-right:20px;
    background:#000;
    }
    .audio img{
    width:100px!important;
    height:100px!important;
    }
    .audioplayer{
    width: 28px;
    height: 30px;
    overflow: hidden;
    margin: 15px;
    }
    .audioplayercircle {
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    position: absolute;
    left:22px;
    top:22px;
    z-index: 3;
    background: white;
    }
    div.video embed,
    div.post div.video object {
    
    width:180px; height:168px;
    
    }
    #footer {margin:20px 0px 0px 0px; text-align:center; }
    #pagination { float:left; width:500px; margin:20px 0px 20px 0px; padding:0px 0px 0px 0px; text-align:left; letter-spacing:1px;}
    #pagination a {padding:3px;}
    #pagination a:hover { background:#E3E3E3;}
    .current_page { padding:3px; background:#616160;}
    ul{
    margin:0 0 5px 0;
    padding:0 0 10px 0;
    }
    ul h1{
    text-align:left;
    margin:0px 0 10px 0;
    padding:0px 0 10px 0;
    font-size:13px;
    border-bottom:1px solid #c4c4c4;
    }
    li.portrait{
    border-top:1px solid #c4c4c4;
    padding-top:15px;
    margin-top:25px;
    }
    h1.sidebar{
    padding: 10px 0 0 0;
    border-bottom:1px solid #c4c4c4;
    
    }
    li{
    list-style-type:none;
    margin-bottom:5px;
    padding:0;
    line-height:12px;
    }
    li a{
    color: #dd1515;
    }
    #sidebar{
    
    float:right;
    width:128px;
    }
    #sidebar a {
    color: #555;
    }
    #sidebar a:hover{
    color: #ccc;
    }
    .postnotes{
    margin:auto;
    width:470px;
    }
    .viewnotes{
    cursor:pointer;
    height:15px;
    float:right;
    }
    #mainentry:hover {
    
    }
    
    #container{
    margin:50px auto 0 auto;
    width:625px;
    }
    #posts{
    width:470px;
    float:left;
    }
    #notestyle {
    font-size:14px; color:#777; font-style:italic;}
    ol.notes {
    padding: 0px;
    opacity:0.7;
    font-size:11px;
    list-style-type: none;
    }
    ol.notes li.note {
    padding: 0px 0px 0px 0px;
    }
    ol.notes img.avatar { width: 15px !important; height: 15px !important; }
    ol.notes li.note span.action {
    font-weight: normal;
    }
    ol.notes li.note .answer_content {
    font-weight: normal;
    }
    ol.notes li.note blockquote {
    border-color: #eee;
    padding: 4px 10px;
    margin: 10px 0px 0px 25px;
    }
    ol.notes li.note blockquote a {
    text-decoration: none;
    }
    
    
    body{padding-top:34px;}
    #header{position:fixed;top:0;width:100%;background-color:#fff;height:92px;}
    #head_wrap{width:641px;margin:0 auto;position:relative;padding-top:50px;}
    #sidebar{float:none;position:absolute;right:15px;top:50px;}
    </style>
    
    <script type="text/javascript" src="http://static.tumblr.com/53unaru/kx3lgzker/jquery-1.3.2.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="http://static.tumblr.com/53unaru/4jtlgzkf8/easing.js"></script>
    <script type="text/javascript" src="http://static.tumblr.com/53unaru/y8wlgzkbt/jquery.ui.totop.js"></script>
    
    
    <script type="text/javascript">
    
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-23090799-1']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    
    </script>
    <meta http-equiv="x-dns-prefetch-control" content="off"/></head>
    
    <body>
    <div id="header"><!-- open header -->
      <div id="head_wrap">
        <div class="blogtitle"><a href="/">england gazette - the good the bad and the ugly</a></div>
        <div id="sidebar">
          <ul><h1 class="sidebar">navigation</h1>
            <li><a href="/archive">archive</a></li>
            <li><a href="http://englandgazette.tumblr.com/rss">rss feed</a></li>
            <li><a href="/ask">message</a></li>
            <li><a href="/random">random</a><li>
          <ul><h1 class="sidebar">pagination</h1>
        </div>
      </div>
    </div><!-- close header -->
    <div id="container">
    <div id="posts">
    
    <div id="mainentry">
    
    <a href="http://englandgazette.tumblr.com/post/12769113125">
    
    
    
    
    <a href="http://englandgazette.tumblr.com/post/12769113125">
    
    <img src="http://27.media.tumblr.com/tumblr_lumo2aHu8A1r6qfsgo1_r1_250.jpg" alt=""/>
    </a>
    
    
    <div style="font-size: 12px; color:#444; font-style:italic; margin-top:4px;">Posted 18 hours ago with 1 note</div>
    
    <div class="postnotes">
    </div>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    </a>
    </div>
    
    
    <div id="mainentry">
    
    <a href="http://englandgazette.tumblr.com/post/12768433804">
    
    
    
    
    <a href="http://englandgazette.tumblr.com/post/12768433804">
    
    <img src="http://27.media.tumblr.com/tumblr_lumnhkT6VV1r6qfsgo1_500.jpg" alt=""/>
    </a>
    
    
    <div style="font-size: 12px; color:#444; font-style:italic; margin-top:4px;">Posted 18 hours ago with 0 notes</div>
    
    <div class="postnotes">
    </div>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    </a>
    </div>
    
    
    <div id="mainentry">
    
    <a href="http://englandgazette.tumblr.com/post/12768140927/test">
    
    
    <div class="title"><a href="http://englandgazette.tumblr.com/post/12768140927/test">Test</a></div>
    <p>dhsdf shdfj shdfjkshsjkfhs fjsh sjfsk sfjk sajk asjk jask a asjka gf asfjkghfk sjka fdasjk gfsjka asjgfasjk gfasjk fasjkgf as gfasjkf gasjkgf f gasjkgf asgfas fjkasgfsgfasdf gasdjk fsdjf gasdjkgfs fgasjkgf asdjkasjk gfasjkgf asgfasjk fasjkgfasdjk fas gfasjkgf asjkgf sasf gjkasgfaskgas jkgfasdkjg sfjkgasdjkf asdjkgasfg asdfjkgfasdjkggfjskg asdjkg fjkgf asdfgagkdf</p>
    <p>dhsdf shdfj shdfjkshsjkfhs fjsh sjfsk sfjk sajk asjk jask a asjka gf  asfjkghfk sjka fdasjk gfsjka asjgfasjk gfasjk fasjkgf as gfasjkf gasjkgf  f gasjkgf asgfas fjkasgfsgfasdf gasdjk fsdjf gasdjkgfs fgasjkgf  asdjkasjk gfasjkgf asgfasjk fasjkgfasdjk fas gfasjkgf asjkgf sasf  gjkasgfaskgas jkgfasdkjg sfjkgasdjkf asdjkgasfg asdfjkgfasdjkggfjskg  asdjkg fjkgf asdfgagkdfdhsdf shdfj shdfjkshsjkfhs fjsh sjfsk sfjk sajk asjk jask a asjka gf  asfjkghfk sjka fdasjk gfsjka asjgfasjk gfasjk fasjkgf as gfasjkf gasjkgf  f gasjkgf asgfas fjkasgfsgfasdf gasdjk fsdjf gasdjkgfs fgasjkgf  asdjkasjk gfasjkgf asgfasjk fasjkgfasdjk fas gfasjkgf asjkgf sasf  gjkasgfaskgas jkgfasdkjg sfjkgasdjkf asdjkgasfg asdfjkgfasdjkggfjskg  asdjkg fjkgf asdfgagkdf</p>
    
    <p>dhsdf shdfj shdfjkshsjkfhs fjsh sjfsk sfjk sajk asjk jask a asjka gf  asfjkghfk sjka fdasjk gfsjka asjgfasjk gfasjk fasjkgf as gfasjkf gasjkgf  f gasjkgf asgfas fjkasgfsgfasdf gasdjk fsdjf gasdjkgfs fgasjkgf  asdjkasjk gfasjkgf asgfasjk fasjkgfasdjk fas gfasjkgf asjkgf sasf  gjkasgfaskgas jkgfasdkjg sfjkgasdjkf asdjkgasfg asdfjkgfasdjkggfjskg  asdjkg fjkgf asdfgagkdf</p>
    <div style="font-size: 12px; color:#444; font-style:italic; margin-top:4px;">Posted 18 hours ago with 0 notes</div>
    
    <div class="postnotes">
    </div>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    </a>
    </div>
    
    
    
    
    
         
    
    </div></div>
    <!-- BEGIN TUMBLR CODE --><iframe src="http://assets.tumblr.com/iframe.html?10&src=http%3A%2F%2Fenglandgazette.tumblr.com%2F&amp;lang=en_US&amp;name=englandgazette&amp;brag=0" scrolling="no" width="330" height="25" frameborder="0" style="position:absolute; z-index:1337; top:0px; right:0px; border:0px; background-color:transparent; overflow:hidden;" id="tumblr_controls"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('tumblr_controls').allowTransparency=true;</script><![endif]--><script type="text/javascript">_qoptions={qacct:"p-19UtqE8ngoZbM"};</script><script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script><noscript><img src="http://pixel.quantserve.com/pixel/p-19UtqE8ngoZbM.gif" style="display:none; border-width:0px; height:1px; width:1px;" alt=""/></noscript><!-- END TUMBLR CODE --></body>
    </html>
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    OurJud (11-14-2011)

  • #13
    Regular Coder
    Join Date
    Feb 2010
    Posts
    231
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Sorry I just gave you the quick fix. I would normally have put that in a header so it would not move around like that but I was using your existing markup.
    Ah, I understand. Thanks, Excavator.

    Quote Originally Posted by Rowsdower! View Post
    My stab at it (changes highlighted):
    Rowsdower, I applied your changes to my test log here: http://testblognumber1.tumblr.com/ (using the same template I'm working with on the proper site, of course) and it appears to have worked... like a dream! It does exactly what I want - thank you very much!!

    The big test now is resolution compatibility. I was more than a little disheartened by your screenshots that showed my sidebar all messed up on different settings. Would you be kind enough to do the same with my test blog now that I've applied your changes, to see if all is okay?

    Thank you again for your help, both of you.
    Last edited by OurJud; 11-14-2011 at 09:40 PM.

  • #14
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    The test page works just fine as far as I can see. The minimum browser viewport needed is about 643px wide and 201px high (based on current content).

    Also, to clarify: The screenshots presented earlier were tests of the other suggested method (not tests of your page as it actually was). That was just me loading your page in Firefox and then using the Firebug plugin to alter the document's style. Your page in its original style was working just fine (apart from its not having fixed header and sidebar).

    And since we're on the topic, if you don't know about Firebug you should look into it. It will change your life!
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #15
    Regular Coder
    Join Date
    Feb 2010
    Posts
    231
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Really, I can't thank you enough.

    Oh, and believe it or not, I've been using Firebug for about four years now. I do find it incredibly helpful and I owe all I know (such as it is) to this add-on. I just don't seem to pick up programming languages as easily as others.


  •  

    Posting Permissions

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