I have tried implementing a facebook like button on my website however when the like button is clicked the facebook content displays underneath my website content, specifically any images. Is there a way to correct this?
festrags.com
Password="cheaye"
Your issue is a unnecessary z-index: 8888;
.product .image {
position: relative;
overflow: hidden;
z-index: 8888;
margin: 0 0 5px;
}
Lower it or add this to your CSS (below the above CSS):
.fb_iframe_widget_lift {
z-index: 8889 !important;
}
(downvotes might be caused by you not posting any code)
Related
I'm new to HTML and CSS and am trying to implement a navigation bar that sends the user to another part of my one-page website whenever they click on a link. I'm using anchors and reference links in order to achieve this. For instance, I'll have:
<a name="JR_Harrison_Target"></a>
and then use
[Introduction][1]
to go to that location on the page. The only problem is that when I click on the link, it sends me to the page with a large margin of pixels at the top browser from the previous section of my website. This happens whenever I click a link to any and all sections. Is there any way to adjust the position of the anchor that I'm scrolling to so I can set up the window accurately? Thanks!
Example of problem:
Try to play with this code:
HTML
<div class="menu">
1
2
3
4
</div>
<section id="1"></section>
<section id="2"></section>
<section id="3"></section>
<section id="4"></section>
CSS
section {
height: 400px;
background: red;
border: 2px solid black;
}
.menu {
position: fixed;
top: 0;
height: 50px;
width: 100%;
background: #fff;
color: black;
display: flex;
align-items: center;
opacity: .5;
}
.menu a {
margin: 0 20px;
}
JSFiddle: http://jsfiddle.net/8m0w2aon/8/
As you can see - in order to make links work properly - you need to place the id prop on the section you'd like to scroll to. You'll be just "teleported" to the beginning of the section.
Each section should have fixed height, and no element inside it should come out of it (for example a background image which is bigger than the section itself).
I would like to use Disqus comments system as a guestbook on a wedding website based on a bootstrap/html5 template.
Since the content on the website is personal, i would like to remove the share links for Facebook, Twitter etc which appear above the comments box and below each individual comment.
Screenshot here, http://imgur.com/pkvUSoF
Is there a way to achieve this by hiding the share elements in CSS ?
I understand the new Disqus uses an iframe, however there is a similar thread for hiding the Disqus footer linked here and the CSS code below does work.
#disqus_thread{
position: relative;
}
#disqus_thread:after{
content: "";
display: block;
height: 55px;
width: 100%;
position: absolute;
bottom: 0px;
background:white;
}
Using the 'inspect element' in Chrome, I am able to hide the share elements using 'display:none'
.nav-secondary>ul>li.share-menu {
float: right;
display: none;
}
and
.post-content footer .share {
position: relative;
display: none;
}
Could anyone help me with the correct code/syntax to add this to my styles.css to hide the Social Sharing buttons.
Thanks !
As described in the article its not possible.
https://help.disqus.com/customer/portal/articles/545277
Reason: Its using iframe to render the comments to prevent XSS
Even though i am not recommending you to do this but there is a way to do so.
Please read terms and conditions before doing any of this.
<div id="disqus_thread"><div>
<style>
.hide-social-discuss {
background: white; // change color according to your site back.
height: 20px;
position: relative;
width: 80%;
top: -60px;
}
<script>
//add this to script
$("#disqus_thread").append("<div class='hide-social-discuss'></div>")
</script>
Same CSS you mentioned, but adjusted to cover share buttons.
Please read disqus terms and conditions before using this.
disqus_thread {
position: relative;
}
#disqus_thread:before {
content: "";
display: block;
height: 20px;
width: 80%;
position: relative;
bottom: -72px;
background: white; //replace with your background colour
}
You won't be able to use featured comments anymore, but hey, it works
looks like this for me ¯_(ツ)_/¯
How to open bootstrap-dropdown when i click on cell within ng-grid ?
I can open it only partially.
Here's plunker
I think you need to add this to your CSS:
.ngCell {
overflow: visible;
}
which allows the ngCell to display the drop down like you want. The issue that I'm having is getting the drop down on a lower cell to appear over the ngGrid footer rather than increasing the size of the scroll bar.
This CSS worked for me so something in this direction will hopefully work for you
.dropdown-menu {
position: fixed;
display: block;
margin: 22px;
top: auto;
left: 0px;
padding: 0px;
I have implemented the following website: link
There are two textfields in the header part of the website. If you click on a textfield, a calender pops up. My problem is that the calender is not shown on the foreground although I set the css properties position: absolute; and z-index: 999;. What is the problem and how can I solve it?
You can add the following to your css
.row-3 {
overflow: visible;
}
Just remove overflow:hidden; from here #header .row-3
#header .row-3 {
background: url("images/header-tail.gif") repeat-x scroll left top transparent;
height: 276px;
}
see the attached image how i did
I've got a problem with the AutoCompleteExtender inside the AJAX Control Toolkit which I just can't seem to get to the bottom of. The control sits inside an asp:Panel linked to a ModalPopupExtender from the toolkit. Everything works beautifully in the latest generations of IE9, FF and Opera but glitches in Safari and Chrome (assuming it's WebKit related).
The glitch is that the drop down from the autocomplete is falling behind the modal popup rather than in front of it (names blurred for privacy reasons):
Looking at things in Firebug, here's the drop down rendered in an unordered list:
<ul id="EmployeeAutoCompleteExtender_completionListElem" class="autoCompleteList" style="width: 281px; visibility: visible; position: absolute; left: 0px; top: 22px; z-index: 1000; ">
The autoCompleteList class looks like this:
.autoCompleteList
{
list-style: none outside none;
border: 1px solid buttonshadow;
cursor: default;
padding: 0px;
margin: 0px;
}
And the resulting div for the modal popup looks like this:
<div id="MainContent_AddPeoplePanel" class="modalPopup" style="z-index: 100001; position: absolute; left: 719px; top: 352.5px; opacity: 1; ">
With the following modalPopup CSS class:
.modalPopup
{
background-color: White;
padding: 10px;
width: 462px;
}
My assumption is that the lower z-index on the list is causing it to fall behind the div but then again, it plays nice in the non-WebKit browsers. The z-indexes are also inline styles so they're obviously coming straight from the controls. Am I missing something here? Any suggestions? (other than ditching WebForms and AJAX and employing jQuery)
Seeing as you suspect it's the z-index causing the problem, what happens if you try and override the inline styles that are spat out by the Ajax Control Toolkit using !important?
.autoCompleteList {
list-style: none outside none;
border: 1px solid buttonshadow;
cursor: default;
padding: 0px;
margin: 0px;
z-index:2000 !important;
}
.modalPopup {
background-color: White;
padding: 10px;
width: 462px;
z-index:1000 !important;
}
I know it's a bit of a hack but if you haven't tried it yet it might be worth a shot?
Ian, I was having a similar problem with a modal popup and several callout extenders. The callout was always under the popup. I lowered the z-index of the modal with the !important and poof. Started working. Thanks much for the suggestion.
I have came across same problem.
My code was running pretty fine in mozilla. but it was not working on Safari and Chrome.
Now I set "z-index:12000 !important;" to autocomplete class, because modal popup has 10051 z-index value.