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.
Related
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.
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 have a html page with 12 thumbnails (spliced Photoshop) within a table (Table_01) within a div and when you hover over one of the thumbs a new image pops up.
At the moment when you hover over the "Ice white" thumb (this is the one I'm testing with at the moment) the new image pops up at the top of the page.
This is no good. It needs to pop up exactly to the right of the div which Table_01 is contained in (preferably top of pop up image flush with top of div and left side of pop up image touching right side of div if that makes sense). CSS is within head of source code near the end. It's not the best written webpage and is very messily coded but this bit should be easy to weed out and identify a solution hopefully. Any help greatly appreciated.
Late response obviously but I hope, it will help you out anyways.
As far as your comments above, those popping out new images needs to have absolute position with some right and top positions fixes. For example, considering that you are having a 3 divs in a row, each div is having an image, you should mention the parent div (containing the image) to have relative position; inside it the image (actually the popup image or thumb) should have position absolute and then it should have right and top adjustments in CSS as per your requirement.
I hope it will help you out...
I've designed this page to show a picture gallery with a description for each picture. I use a div with static position and minus left and top margins, so the description is shown on top of the bottom part of the image.
The problem is that if I open the page for the first time with Firefox, the Div displays only partially (only on top of the image part is shown). Only when I click any other album does the div displays correctly.
This is the bad display image
The description div should have been displayed until the bottom of the container div. Try clicking another thumbnail image at the test site page.
This is the test site, to open the page, click the gallery menu, the one on the left bottom with a dog picture.
Has anyone encounter the same problem? Hope someone could help me. Any advice will be welcomed gladly.
Thank you!
Ah, I think I found the answer. I just put '!important' on the height attribute. And then Firefox displays the div fully!
Thank you, I should've thought that.
Use "position: relative" with negative "top" and "left" values.
I guess I've managed to solve the problem. It seems that the div is shown partially to the end of the Image tag just before the div. so then, I wrap the image in another div setting the div's height the same height of the image. I've tried it, and it looks find in FF now.
Thank you.
I'm trying to add a sidebar to my page. The main body container on the page has a box-shadow, so I want the sidebar to appear as though it's coming out from underneath the container so the shadow will be on top of it. I made my sidebar div a direct child of the body container (which has position: relative), and set it's position to absolute, then positioned it using the top and right position values. I got it in the right place, then applied a negative z-index so that it would be under the body. The problem is, this is making any links that I put in the sidebar unclickable in all but IE9. I don't know how else I can accomplish this without knocking out the links. Any ideas?
I would post a link to a page showing an example, but I'm actively making changes to it, so by the time you clicked it you probably wouldn't see what I'm going for. I'll try to explain better.
The body container is 720px wide and has an auto margin so that it appears centered in the page. It is positioned relative.
The sidebar is a direct child (the first child) of the body container. It has a fixed width, position absolute, padding, etc. and has a top and right position applied, along with a z-index of -100.
Here's a link:
http://reachchallenges.infectionist.com
You can remove the negative z-index and give an inner shadow to the sidebar that is the same as the outer shadow of the .body element.
You´d have to try it to see how it affects the border of the sidebar.
I don't fully understand what effect is desired but maybe this barebones fiddle can give some hints as for how to approach problems of such kind.
jsfiddle
The way to get links to work is to toggle z-index back to a positive number. Your CSS will look like:
.z-index1{
z-index: 1 !important;
}
and your JS should be:
$("#div-on-top").click(function(){
$("#div-on-bottom").toggleClass("margin");
$("#div-on-bottom").toggleClass("z-index1");
});
Clicking on #div-on-top will move it out of the way revealing #div-on-bottom and it will also bring #div-on-bottom to the top, making links clickable.
I also applied shadow to the #div-on-top and it looked ok (to me; see jsfiddle).