I have a website that requires a border round the edge. This has been implemented with divs of block colour that are placed around the edges of the screen. This works for most of the site, but one one section, the content overlaps the borders (see here, and scroll down: http://dev.birddartmouth.co.uk/#range).
I've tried putting the z-index of the range items (a.item) to -1, and this then sits below the border but it makes the links not clickable. Does anyone have an idea of how to fix this?
Moving the border divs from <header> tag to just before the closing </body> tag, and then adding z-index:11; to .border-divs (line 1094) fixes the issue for me
using the latest version of Chrome. (30.0.1599.69 m)
Try giving z-index:11; to #bottom-pink and #top-pink.
Your images have a z-index of 10, there for your borders need to have a higher z-index to to be on the top of them. This is why the rest of the text is not showing through and only the images are.
The position attribute of the borders also needs to be absolute or relative not fixed in order for chrome to respect the z-index attribute.
Related
I'm having an issue with this site:
https://connectiveworldenergy.com/
At the top of the page, there is some text saying "Design a happy life and create a stress free path that you've always dreamed of.
Let us show you how!". It is a clickable link.
On FireFox and IE, the link is not clickable.
I think it might have something to do with z-Index. The menu is overlapping on top of it. I've tried adjusting Z-index but haven't had luck. So then I read about z-index and it appears z-index requires elements to have the same "position"
The elements on top of it are transparent background... not sure why it's not clickable.
You have two elements: .cwe-ribbon (your clickable link) and `#top-header' (the rest of your header).
You gave #top-header a z-index of 100 so .cwe-ribbon (your clickable link) will need to be greater than this to sit on top of the other element (and be clickable).
set the z-index of .cew-ribbon to 101. In order for z-index to work you need to give the element a position so go ahead set it to position: relative.
I have been searching for an answer to this for some time.
i want to add space to the bottom of my web page, as content sits too close to edge.
I have tied 'padding-bottom' in wrapper tag, in body tag and in style tag.. not working.
any help on this appreciated..
thanks,
Keith.
http://www.reddogonline.eu/av.html
you have a serious design problem.
all your elements are relatively position with top offset, that cause the wrapper and body to be actually smaller then you think. because this offset is not taken in consideration when determining the wrapper height. (so the height of the wrapper is only the sum of his children height, without the offset between them)
when you add padding-bottom to the wrapper or the body, it works (of course), but you don't see it. because your elements overlaps the wrapper..
you will be able to see that I'm right by setting overflow:hidden; to the wrapper (or inspecting your site with a tool). suddenly, half of your content disappears..
you need to remove the position:relative; from your elements, and use margin-top instead of top to make the desired space between the elements.
That way: the wrapper and body height will be set right, and the padding will work as you expect it.
You're positioning relatively all your elements. That's causing the padding/margin problems too. Why would you position your elements like this?
Try removing relative positioning and add top/bottom margins to your elements. The results will be the same in terms of visual effect.
It will also be much simpler adding new sound boxes, as you don't have to calculate a top positioning for each one.
I have a simple error, below is the adress you can visit to see the issue at hand.
Why is parts of the header white? It's set to be a light shade of green, and to it should be placed the the very top (beneath the topmenu) and after that the 60px margin-top on #menu should push it down into it's correct position and making the entire area green.
This is what isn't happening, and I cannot for the life of me understand why. I removed the margin-top and it only pushed the div up, but how can I then place the menu in it's correct position ( I should add that the menu with login etc, is placed correctly but it's just that unknown white gap that's the problem)
-- Removed Adress as solved
The margin-top that you're adding to #menu is what is causing that gap.
just add an top margin to your #wrapper
position: fixed
sets your element on a fixed position with the standard behaviour for other elements to ignore this element anymore in fact your fixed element will overlay everything else, because it's not bound anymore to other elements and all elements after your fixed box will ignore the bounding box.
The content_background element has CSS property padding-top set to 10px. Remove that and it should be OK.
I'm creating a site where I have a a logo on the page that is static positioned as normal. However I have a jQuery plugin that converts it to a fixed positioned element as it hits the top of the screen when you scroll so that it sticks in place on top of a fixed position navigation bar. The problem I have is that while the logo is still static as it hasn't hit the top yet but is overlapping the navigation bar, it appears underneath the navigation bar.I have used the z-index on the logo to try and place it on top but I'm finding that this doesn't make a difference when used across static and fixed positioned elements at the same time.
Does anyone have a solution?
Edit: I thought I should mention that I have thought of a solution myself, to have the logo always fixed positioned and to adjust its position with javascript but I would like to fix this in CSS if possible.
Just add position: relative; to the styling for #logo. z-index only works on positioned elements. Tested it in jsFiddle and it seems to work.
Happy coding!
I have no idea what I'm doing wrong, but for some reason, I'm experiencing a bug with my markup that is causing my body element and my html element to not take up the entire viewport in the browser.
I can't get to the bottom of this. It first reared its head when I tried to add a 10px purple border to the top and bottom of my body.
If you inspect the page in Firebug, you you can see that there's a huge chunk of the page that is not highlighted when you hover on the html element or the body element. And the border that I applied at the bottom is hanging up very far on the page.
Does anyone know why this is? Could it have to do with my using HTML5?
Here's the page in question:
http://electricorangecreative.com/test/index.html
And here are my style sheets:
http://electricorangecreative.com/test/reset.css
http://electricorangecreative.com/test/style.css
Use a sticky footer technique.
I've had a look at the current test page and it looks like the only outstanding issue is the vertical scrollbar still appearing without need to. Easiest fix for this is to simply remove any margin or padding you have on elements you've set to height:100%. The culprit I identified is div#wrapper. Take off the padding there and the issue is resolved (in FF at least - not tested on other browsers). Since the padding is added to the height you end up with an element that stretches over 100% vertically. Use margins on children instead of padding - should be fine!