I successfully added the Facebook Like button to each my blog's posts.
The problem: posts whose titles are longer than one line cover the Like button. (See my blog here. Scroll half way down to posts with the problem, please.)
Here's what I know:
(1)the "headline_area" div includes the title and the author name. The content body of each posts is always directly beneath that div.
(2) When the title of a post is only one line, the Facebook Like button stays up again the bottom of the title. Because the "headline_area" div is consistent, the body of the post stays below both the title, author, and facebook like buttons.
(3) When the title is two lines, the "headline_area" div remains the same, but the Like button gets pushed down by the second line. The post content stays up against the headline_area div, thus overlapping the Like button.
I hope that is clear. Any help is much appreciated!
The problem is with CSS .headline_area style. It has defined fixed height to height: 80px (custom.css:7). Try removing it and changing facebook like iframe height.
Related
I have a website with a blog and sidebar on the right hand side and it looks fine, however when I go onto page 2 of the blog, the sidebar moves down to the bottom of the page.
You can see what I mean by going to these links
http://www.beatinganger.com/blog (Sidebar looks normal)
http://www.beatinganger.com/blog?page=1 (Sidebar moves down to the bottom)
I have looked at the source code and I can see no changes in the difference between the 2 pages.
Any help would be much appreciated.
Your #left_container element on the sub-page is not being closed and therefore the #right_container element is being contained inside it.
The container div closing is causing a problem (as the other answers point out); also your div with the vertical_menu class is breaking out of its allotted size - which will probably cause float issues when your divs are closed:
Yeah, something is up with the template of the second URL, so that the sidebar is injected INSIDE the left 'main' column.
the #right_container http://www.beatinganger.com/blog?page=1 is in the different hierarchy than the enter link description here. #right_container and #left_container should be in the same parent and level as shown in the first link.
Another advise though, I notice that the content of the #right_container has slightly "wider" content than the container itself. Make sure the content elements are smaller or equal to the width of the parent container, or set #right_container -> overflow: hidden; a quick hackish way though.
Looking for a way in CSS (in the child theme) to make a pop out from one div display over another, without blocking the links in the lower div when the pop-out is closed.
I am trying to use the Facebook Like Button with the comment pop-out on the pages of my site and have made the .widget-pad area of my section appropriately sized to display it when it pops up, so that it goes over another section and div that is containing a large image that links to another page.
However, when the Like button is unclicked and the pop-up is not displayed the linked area (silver part in this pick) is not-clickable.
The area below where the transparant div from the Like Button is still clickable.
How to make it so I can still click the links below where a popout happens on my page?
Ok I found the answer -- I needed to use CSS to select the .widget element and not the .widget-pad element I had been using before.
Note to all trying to deal with implementing Facebook Like in WordPress widget, something like this can help if you are having trouble getting the Comments pop-out to display over other <div>'s:
.widget{overflow: visible}
In my page header, I have an image div with overflow:hidden.
In the content area, I have an bookmark anchor tag:
<a name="arghargh"></a>
At the top of the content area, I have a link to the bookmark:
go the the bookmark
When I click the link, the content disappears, leaving only everything outside of the content div.
I found this post describing the exact same issue. Based on that, I removed the overflow:hidden, and everything works fine, except that I need overlow:hidden for the page formatting to work correctly.
Help!
Update
It appears that, with overflow:hidden, the bookmark is causing the div to scroll internally, which moves all of the content up until the bookmark tag is at the top of the visible area. This is not cool.
Remove overflow:hidden and add <div style="clear:both"></div> as last inner element to keep the page formatting to work correctly.
Can't you just use id="arghargh" on the div instead of an anchor tag? Does the problem still occur then?
I am using ScrollTo and LocalScroll on my single page site, which scrolls in all directions. I have four large divs inside a wrapper, two on top and two below those. Each div is a 'page' of the site.
Onload, the page goes to the 'home' div anchor, at the bottom left of the window/page. My issue is that anytime I try to scroll horizontally from one of the bottom divs to another via my floating nav box, it flashes the content from the div above it before scrolling to the correct linked div.
There is no 'flicker' or 'flash' of any content when the scrolling originates from a top div.
Any help is very much appreciated!
It took some time and tons of Googling but I finally figured this out.
Comment from: Freelancer ID [Member]
I think i've got the problem..
If you put # in the HREF attribute of the A tag, then the window will go up on click to go the ID (which is nothing)
To fix this, Please try to use the following:
- Put "javascript:;" in the HREF attribute of the A tag.
- Or use DIV, SPAN... etc with cursor:pointer css style and onclick event.
This will fix it.
Source: http://blog.freelancer-id.com/index.php/2009/03/26/scroll-window-smoothly-in-jquery
I have a div section, which is full of tags, on a event on the page I shrink the div section BUT if the user tabs into the div section, it moves so that the highlighted <a href> has focus, is there any way to lock a div section that it's contents don't move ?
So for example the code (psuedo not real) I have the following
<div>
<h4>Heading</hv>
Link 1
Link 2
Link 3
</div>
I shrink the div section so that only the h4 is displayed {overflow:hidden}, however the user can then tab to the elements and this scroll so that they are displayed in the the div "window" which is not what I want, so in effect I get <div>Link 1<div> where what I want to remain is <div><h4>heading</h4></div> in effect I want to stop the contents of the div sectio scrolling so that the selected element is displayed. I know that if they press return the selected link will be follow, but I'm not worried about this, just what is displayed
I hope thats cleared, you can see my problem if you go to link text click on the training section on the left and then back tab (shift tab) , the article section above changes.
Thanks
is there any way to lock a div section that it's contents don't move?
Not really*, but you don't really want that anyway. Even if you locked it in place, the invisible links would still accept focus, resulting in a confusing tab behaviour.
(*: short of something horrendous like changing the scrollTop of the overflowing element from JavaScript onfocus. Ugh.)
What you should probably do is put a div around the links, and set its display style to ‘none’ when the links are elided. That way they won't participate in the tabbing order.
From what I can make of your question, you want your div to stay fixed relative to the browser window. If this is the case, it can simply be done by declaring position:absolute for the div.
If you want something else, please clarify your question.