i have currently started broadcasting on cam website. have fear of getting recorded so wanted to get dmca button on the webpage where cam get broadcasted. the website i use only allows html for users. so i have tried below codes.
<a style="display:scroll;position:fixed;top:100px;left:100px;" href="#" title="Back to Top"><img src="source to button "/></a>
this code is working good apart from a problem that when the webpage is scrolled down the button also comes down. this leave cam area clear.
Is there any way to fix the button to specific place?
position:fixed; fixes the element's position relative to the viewport. If you want to fix its position within the container you'll need to use position: absolute;, ensuring that the ancestor you're wishing to position it to has its own positioning (which can be set to relative).
Change position to absolute:
<a style="display:scroll;position:absolute;top:100px;left:100px;" href="#" title="Back to Top"><img src="source to button "/></a>
position:absolute will keep the element fixed in relation to the ancestor or first positioned element.
position:fixed will keep element in relation to the browser window/viewport. That is what keeping it moving along with the window scrolling.
You may read it in detail here: http://www.w3schools.com/cssref/pr_class_position.asp
Related
I currently have a iframe video and sitting on top of this are 4 clickable images. Below this, I want to have a contact Me page, however, the problem I am facing is How to get my Contact Me div blow the iframe video. Can someone Help me sort this problem out? Currently, on my codepen, you will see that i have applied a linear gradriend which is where the video is to be placed, and even though I have a Contact Me div in place, it is not placed in the top left hand corner, behind the iframe video, and I want it to be below the div, totally separated from it.
You can see my code on my Codepen, here
and this is what i currently have :
.
As you can see from the screen shot, this is the front page, but the "contact me" div is placed behind the video, in the top corner... can someone help me fix this issue?
You have too many elements with absolute positioning. You don't need all of that.
To position an element absolutely relative to its parent element all you have to do is add position: relative to the parent and position: absolute to the child.
And because you're positioning everything absolutely, elements are losing their height and it's why your contact div is moving to the top because the flow of the page is broken, and therefore, your contact div doesn't really see elements above it. Plus, you have color: white on the body and that applies to everything on your page including the contact div. change it and you'll find your contact on top of your header.
If you need more info I'm happy to help.
Your contact header is there. It is in the top left corner, but it is white (at least that is what I see on the code link)Give the <h1> a style color to help make it stand out, <h1 style="color:blue;"> etc. Also move the div to above the image in your code. That should also help.
I have an image with position:absolute;right-300px; inside a container with position:relative; as I want the image to come out of the div and off to the right.
You can see it working here. It's the first large image on the right.
The problem I have, is this is breaking the overall page layout and causing a vacant white space to the right of my page that can be side scrolled to.
If I put overflow:hidden; on the container div it will hide the rest of the image and I need the image to come out and be entirely visible.
Anyone have any suggestions for a way around this?
I tried writing up an example but I putting the whole page up seemed better
http://ciaranhanrahan.com/test/
Cheers!
I want the image to come out of the div and off to the right
Studying your page layout, it appears the image doesn't need to be in the <div> at all.
You could give the <img /> a position:absolute;.
Then, you can include the <img /> markup anywhere in your HTML source.
For instance, it's a 495kB image (ie. quite heavy) so you can include the absolutely positioned <img /> at the very end of your HTML source, which means for first-time visitors to your page, the page will appear to load more quickly.
You won't need to nest the absolutely positioned <img /> inside a parent element - which means you won't need to mess around with negative positioning, CSS inheritance, hiding overflow and so on.
This is my first time posting on here. I've searched for a while for an answer to this question and I'm now turning to this board because it's proven useful to me in the past.
The motif of the page I'm designing is a one page scrolling website (kind of like http://www.kitchensinkstudios.com/).
I've implemented a fixed navigation at the top, about 70px in height. Below this I've created sections that link to the nav. The idea is to click the link in the nav and the page will scroll up to the section chosen. The problem is: due to the automatic nature of internal bookmarks scrolling directly to the top of the page!, this cuts off a majority of the content.
I've attempted to add hidden div's or break tags with padding-top values to the sections in question but, aside from giving me a proper distance from the top of the page, it creates an opaque background with the same value as the padding.
Does anyone have any suggestions for doing this?
Ideally, when you select a link, the section called upon will float up to about the middle of the page.
Much thanks to anyone who gives this one a shot!
The default behavior for browsers is to scroll an anchor to the top of a view port.
If you offset the anchor vertically upwards, you should find it will bring the content down by an equal amount.
You can do this by specifying the position of the anchor as 'relative', and setting the 'top' attribute to a negative value, e.g.
<a style="position:relative; top: -70px;" name="myAnchor"></a>
Some browsers appear to need the anchor taken out of the normal flow, which is solved by simply floating the element.
<a style="float: left; position:relative; top: -70px;" name="myAnchor"></a>
You should find the line above works for FireFox, Chrome and InternetExplorer.
I am doing a popup on a clients site for their new restaurant location. The base site is kind of a cookie cutter type site, and very messy (I'm not sure if I should attribute this to the problem). Everything was going fine until I added some divs that were positioned relatively and had width and height to the absolute div "pop-up". Now, the popup pushes the base site down, and the popup goes behind (it has a z-index of 10?). Here is the brand new css:
http://addproxy.net/sites/testing_space/css/style.css
and the site is down a level:
http://addproxy.net/sites/testing_space/
And a mockup of the desired effect (disregard the backslashes, hit max of href):
//http://addproxy.net/sites/testing_space/popup-mockup.jpg
The divs that seemed to trigger the problem were the .coupon class
Any help will be greatly appreciated!
You placed the original content inside of your new div's.
To make it look like your image that would be the id="coupons" div. Just so we're clear it's the one that starts like this:
<div id="coupons">
<div class="coupon" style="background:url(images/bg1.png);">
You need to move that div (and all it's contents) to just after the end tag of the id="popup" div.
I want to make a div with position:fixed that will overlap the content, but not clickable, i.e. when you click in that div's area you are clicking on the content under it. So the text under the div could be easily selected. Is there a way to do that?
The solution is to add pointer-events: none; to the CSS of the overlaying div. This will cause any all events to pointer events to ignore the overlaying div.
This is demonstrated here: http://jsfiddle.net/nayish/7hHvL/.
You'll notice that the alert, which is set only for the bottom div, works also when clicking on the overlaying div.
I had the same problem. Basically I have designed sidebar, Left side is fixed and right is scrollable. The left contains links, when I tried to navigate, I found the link was not clickable. I changed z-index: 1 to z-index: 100. Therefore my navs links worked again.
You might have to use a setCapture on the underlying div during the hoverOver of this fixed div and releaseCapture during the hoverOut
var underlyingDiv = document.getElementById ("div1");
var overlyingDiv = document.getElementById ("div2");
overlyingDiv.onHoverOver = "underlyingDiv.setCapture";
overlyingDiv.onHoverOut = "underlyingDiv.releaseCapture";
Whatever is on displayed in front is also what is being clicked on. one way to handle that is to make a transparent graphic for the links that appears over the links and zindex that transparent image in front of the position absolute content. Easy to do if the links are menu buttons with a known size.
Update an example
<a href="#">
<img src="transparent.gif" width="100" height="100" style="position:absolute; zindex:100">
</a>
<div style="width:100px; height:100px">
this is my menu button
</div>
The img position:absolute remains at current screen position over the div menu button. zindex will push it in front of the fixed content. It is easy if you know the space for the link that is covered up.
Had the same problem. But i found a way wich worked for me. You could simply position the fixed element inside of the container wich is overlapping it. As you set position: fixed it does not matter where the element is in the mark-up, because it will still stay on the same place.