SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Seemingly simple CSS Tumblr problem.. that's driving me crazy!!

    Hi there,

    I am having a small and very annoying problem with Tumblr. I have customised a Theme so that I can use it as an online portfolio however I am having some trouble positioning a "Pages" iFrame (if it even is an iFrame).

    As you can see here www.ellekorhalillerweb.tumblr.com , when you click on "Information" an iFrame shows a different page of content using Tumblr's "Pages" function.. I would like to have this content centered on the page but for some reason Tumblr is keeping it left of the center.
    I have tried everything I can in CSS with positioning and am just baffled by this seemingly easy, obvious problem. I am wondering if it has anything to do with some Tumblr Script or other Javascript that is used on this theme?
    I have tried to use Mozilla Inspect Element to inspect which DIV is stopping this content from being centered but I can't seem to find where this is coming from.

    Any help would be much appreciated!

    Elle.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi,
    It's coming from one of the parent divs with the id of "post" which has the following styles applied to it:
    Code CSS:
    width: 500px; position: absolute; top: 0px; left: 0px;
    If you can remove the first two declarations, your text will be centred.

  3. #3
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there,

    I apologize if I am being blind here but I cannot see the above code in the CSS section of my page?
    This is all of the CSS I can see..

    HTML Code:
    <style type="text/css">
    body {
    background-color:#ffffff;
    font-family:'BrownBold';
    color:#000000;
    font-size:17px;
    line-height:25px;
    }
    a { 
    padding-bottom:2px;
    color:#000000;
    text-decoration:none;
    border-bottom:2px solid;
    }
    img {
    border: none;
    border : 0;
    outline:none;
        width: 1000px;
        height: auto;
    
    max-width: 100%
    
    }
    a img {
    outline: none;
    }
    iframe#tumblr_controls {  
    display:none;
    
    
    }
    #wrapper {
    margin: 50px auto auto auto; 
    width: 1000px;
    max-width: 100%
    height: auto;
    
    
    }
    #post {
    padding:40px;
    
    }
    #post img {
        width: 1000px;
        height: auto;
    
    max-width: 100%
    
    }
    #post img:hover {
    
    
    
    }
    #post embed, #post iframe {
    width:100% !important;
    }
    #post .photoset a:first-child {
    
    }
    #post .photoset a {
    display:none;
    }
    .title {
    width:100%;
    text-align:center;
    margin:auto;
    position:fixed;
    top:20px;
    z-index:5000;
    }
    .follow {
    position:fixed;
    top:20px;
    right:20px;
    z-index:5000;
    }
    .archive {
    position:fixed;
    top:20px;
    left:20px;
    z-index:5000;
    }
    .message {
    position:fixed;
    bottom:20px;
    left:20px;
    z-index:5000;
    }
    .random {
    position:fixed;
    bottom:20px;
    right:20px;
    z-index:5000;
    }
    #toTop {
    width:100%;
    text-align:center;
    margin:auto;
    z-index:5000;
    position:fixed;
    display:none;
    bottom:20px;
    cursor:pointer;
    }
    .player {
    background:#000;
    width: 1000px;
    max-width: 100%
    height: auto;
    }
    ul.chat {
    list-style-type:none;
    width: 1000px;
    max-width: 100%
    height: auto;
    
    }
    #infscr-loading {
    display:none !important;
    }
    
    .corner {
    top:6px;
    right:40px;
    position:absolute;
    padding:1em 1.5em;
    margin:2em auto;
    color:#fff;
    overflow:hidden;
    z-index:4000;
    
    }
    .corner:before {
    content:"";
    position:absolute;
    top:0px;
    right:0px;
    border-width:0 25px 25px 0;
    border-style:solid;
    border-color:#fff #fff red red;
    background:#fff;
    display:block; width:0; /* Firefox 3.0 damage limitation */
    }
    
    .contentcolumn{
    margin:auto;
    width: 100%;
    
    </style>
    Thanks,

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    The CSS is applied inline to the "post" div.
    That is to say the HTML when viewed with Chrome Developer Tools looks like this:
    HTML Code:
    <div id="post" style="width: 500px; position: absolute; top: 0px; left: 0px; " class="masonry-brick">
    I don't know much about Tumblr. can you access that line of code?

    Edit:
    Weird, using FireBug it seems that the only inline style being applied is width="500px".
    Looking at the source code, this is all I could fine (line 247)
    Removing that centres the text in FireFox.

  5. #5
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, I cannot access and edit that line of code in Tumblr.
    When I am in the edit/customise window in Tumblr, inspecting the code there is not even any code that has the width="500px" style. So strange!

    Perhaps I could write my own style for the "post" div and add an !important declaration onto it and this may overwrite the hidden Tumblr code.
    But then again, I can imagine Tumblr has made that near impossible.

    I may have to find another way to add the iframe manually without Tumblr's "Pages" function.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by elifflower View Post
    Perhaps I could write my own style for the "post" div and add an !important declaration onto it and this may overwrite the hidden Tumblr code.
    But then again, I can imagine Tumblr has made that near impossible.
    Who knows. It might be worth a try.
    See if you can access the "post" div first by applying a simple rule, such as "background:red;" or "color:blue" to your stylesheet;

    Then try:
    Code CSS:
    div#post[style] {
       width:100% !important;
       position:relative !important;
    }

    Would be curious to know how you get on.

  7. #7
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That worked! Look: http://ellekorhalillerweb.tumblr.com/information

    Thank you.

    My only problem is now that when loading my homepage http://ellekorhalillerweb.tumblr.com/ there is now a horizontal scroll bar where there wasn't previously there because we implemented the width: 100% in the "Post" Div.
    I think it might have something to do with my padding though so will have a look now.

    Thanks for all your help.

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Excellent. Glad to be able to help
    Regarding the horizontal scroll bar, removing the padding should remove that, too.
    If you need to position your text, you could always just use padding-top.


Tags for this Thread

Bookmarks

Posting Permissions

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