afish674 Posted April 19, 2012 Share Posted April 19, 2012 Hi Could someone please explain to me why my blog layout scrolls sideways? http://noscriptblog.tumblr.com/ Its like there is a right hand margin that shouldn't be there. Its really confused me. Thanks! p.s.If anybody is familiar with Tumblr - could they explain why the headings and date show up in my text posts but not in any other post type. (The date in the question post has been moved down onto the post body - white background and white text for some reason :S) Link to comment Share on other sites More sharing options...
Ingolme Posted April 19, 2012 Share Posted April 19, 2012 You set the width of the header to 100% and then added 2% padding on either side. In total: 104% the width of the screen. 1 Link to comment Share on other sites More sharing options...
afish674 Posted April 20, 2012 Author Share Posted April 20, 2012 Thank you! I checked all of the other elements but forgot the header. Link to comment Share on other sites More sharing options...
afish674 Posted April 20, 2012 Author Share Posted April 20, 2012 Also, do you have any idea why the tags marked "text" are further left than the other tags? I can't work it out and its breaking the consistancy. I thought if it was positioned absolutely it shouldn't be effected by other elements? Link to comment Share on other sites More sharing options...
dsonesuk Posted April 20, 2012 Share Posted April 20, 2012 consider using px unit instead of %, the more/less text give different results. Link to comment Share on other sites More sharing options...
afish674 Posted April 26, 2012 Author Share Posted April 26, 2012 I've have changed the code to px but still have the same problems. The box placement is still different. I also thought that this might be to do with word length. But there are other tabs in a preview I viewed that have the same number of characters as text ("chat") for example, and they still have different box placement to "text". I suppose it could be something to do with Tumblr but I would have thought I could pick up the problem in Firebug still. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 26, 2012 Share Posted April 26, 2012 Well it looks the same to me? Link to comment Share on other sites More sharing options...
afish674 Posted May 1, 2012 Author Share Posted May 1, 2012 There is more blank space under the lettering in the text tab, compared to the other tabs. It just doesn't look very neat Link to comment Share on other sites More sharing options...
dsonesuk Posted May 1, 2012 Share Posted May 1, 2012 The only way i see of fixing this, where you will have exact distance from left of screen is to use a fixed width, that will accommodate largest amount of current characters 'answer', remove left/right padding and align center .myposttype { -moz-transform: scale(1) rotate(-90deg) translate(0px, 0px) skew(0deg, 0deg); background-color: #FFFFFF; border-top-left-radius: 20px; border-top-right-radius: 20px; font-family: "Courier New",Courier,monospace; font-size: 125%; font-weight: bold; left: -53px; /*amended by dsonesuk*/ padding: 5px 0 30px;/*amended by dsonesuk*/ position: absolute; text-align: center; /*added by dsonesuk*/ top: 20%; width: 83px; /*added by dsonesuk*/ z-index: -50;} Link to comment Share on other sites More sharing options...
afish674 Posted May 3, 2012 Author Share Posted May 3, 2012 Cheers for this! This does solve that specific problem, but does have knockon effects. I guess its whatever is the lesser of two evils! I'll try it out on some different screen sizes and see what happens. Is the word length causing the problem then because the word length is still adding horizontal width even though the parent div has been rotated? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now