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.
Hi,
It’s coming from one of the parent divs with the id of “post” which has the following styles applied to it:
width: 500px; position: absolute; top: 0px; left: 0px;
If you can remove the first two declarations, your text will be centred.
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…
<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,
The CSS is applied inline to the “post” div.
That is to say the HTML when viewed with Chrome Developer Tools looks like this:
<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.
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.
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:
div#post[style] {
width:100% !important;
position:relative !important;
}
Would be curious to know how you get on.
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.
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.