Hi there!
I am using my Tumblr as a portfolio website and have done some extensive customisation of a free tumblr theme, as you can see – http://ellekorhalillerweb.tumblr.com
I am almost there with it but there seems to be an issue with the width of the site and centering things.
I have tried out many of the DIVs, changing their widths in the css but I can’t seem to find which one is making the page extra wide.
Also, a further problem is that when you click on INFORMATION, you can see that the placement of this page is completely off…
I am not too sure how coding css for Tumblr’s “Pages” (are they permalink pages) and actually what piece of code I need to access to make the page appear centrally, below the navigation bar.
All help would be much appreciated.
Could you stop messing with the live page code please? Makes debugging difficult when every refresh has a new starting point.
Edit-This might be on my end? Some firebug issue. Just happened again…
Edit-Nope I just switched browsers and I think you are messing with the live page…
Hello elifflower I have actually not played w/tumblr much or customizing it.
When i pulled up your site I would say that what stuck me is the hover effect coming on even though the user is not on the image. personally i’d think that’d be pretty annoying.
When i went to inspect the elements i see a lot of absolute positioning that seems to be unnecessary. I would think the image, not the div should have the hover effect.
Also I see that what you mean by centering issue (if i read you correctly) is that you can scroll horizontally as well. (i have attached the image)
Also when run this page trough
http://validator.w3.org/ it came up w/ 45 Errors, 11 warning(s).
including duplicate id & at least one possible open tag. I’d start w/fixing them, then try again.
one last thing. i notice that a lot of tumblr site i have seen have a slide out div that pushes the entire page to the left asking the user to subscribe. I wonder if the theme you are using is keeping that in mind.
The problem is that on .notecount you have that element set to positon:absolute and 100% width on it. You would THINK it would be 100% width of #entry, the parent element, however position:absolute base a lot of its properties off the nearest element with positioning property set on it. You have no parent element with a position property set. So it bases the width off the element. So that 100% width is 100% of the screen size and the .notecount is already halfway over the screen so thus it has the scrollbar. You need that 100% width to be based off #entry so make it recognize that element as the real parent :).
#entry{position:relative;}
Thank you very much for your tips, RyanReese and pdsSherpa… I think I have fixed the horizontal width issue by changing the positioning of the entry DIV to relative as you suggested RyanReese.
I also fixed the horizontal problem of the permalink pages by deleting the width element as I think these just added an extra width alongside the entry on the index page.
Also, solved the problem of the hover effect .notecount coming on when hovering over the whole DIV rather than just the image, which is what I was trying to achieve. It’s not 100% perfect as you still see the hover effect when you are within about an inch of the image on the left so a little unclear on why this is but will keep investigating this.
pdxSherpa, I would love to fix all of the errors w3 brings up but for some reason the line numbers do not correlate to the codes that I have access to via tumblr and also when I copy these into Dreamweaver. I have a feeling this is because tumblr generates a different index page to the one you have access to customize on it’s website… Is there some other way I can find these errors to fix them?
Also if you can see any more errors on the somewhat improved page, please do let me know - http://ellekorhalillerweb.tumblr.com
Thank you.
Elle.
The hovering on the div is messed up because you are setting the hover to happen on the div, and the div is ~800px which is wider than the image.
sorry elifflower really not a tumblr expert, i imagine you went to edit theme, "Customize appearance” on the right column.
then selected “Edit HTML”.
if this was wp I would think that your code was clashing or duplicating something that wp was already trying to do for you but i don’t really know enough about tumblr.
I don’t know if you have already seen this but maybe it could help?
