I'm working on a website where I want to display a giant image slideshow in the background along with a quote and a link, which for technical purposes (EDIT: described in comment below) must reside in the same parent element. On top of all that I'm displaying my content, and at one point I want the background image to display through the content, which I have accomplished by setting a margin between two of my content elements (#header and #main). It's a little hard the describe, but I hope this jsfiddle gives an idea of what I'm doing.
The problem is that link and quote displayed in the background is not clickable, since the click is instead directed at the element above displayed (#header). I know about pointer-events: none; but that's no good since I need IE support and being able to interpret clicks in the #header element.
I guess this is in some way attributable to stacking context mentioned in this answer, but I just can't get it right. I'm unable to get the desired layout without using a negative z-index on #background, while the links inside #background would probably need to be put in a parent of higher z-index. The reasonable thing would probably be to put it somewhere else in the markup, but as stated above the link is related to the rest of the content inside #background. Is it possible to make the links stacking context render "above" the stacking context of its parent element?
The code is a bit too long to do any good here, and not really that complex, so please refer to aforementioned jsfiddle.
Make the giant image a background of the <body> and don't create an element with a negative z-index for it. Then your link will be clickable - DEMO
Related
I am a newbie to web developing, lately I have been practising some basic HTML, CSS, and Javascript(jQuery), I'm reverse engineering some websites in order to practice skills. However, I came across a question that is troubling me already for hours. Here is the question:
I want to make a navbar that looks like the first picture, when you hover over the "Sports" icon, the drop-down list shows. As you can see in the second picture, it is a "div-in-li" HTML (so it is the drop-div that shows), I tried to make the same thing, however, the div always stays the same length as its parent element--li, does anybody know any way to keep the "li" stay its length and make the "div" inside of it expand beyond the limit of the "li" element????
Any solutions are good, doesn't matter it's CSS or Javascript...
The drop-down "div" that contains a "ul" and 3 pictures
The "div"-in-"li" element
You can position the li element as absolute or float it. Right now, li is positioned as block level and will envelop the div.
It's the second time I have to use <ul> to create navigation menu with image and text in each anchor. The first time I managed to do this without fully separating the logic but now it seems a little bit more complicated so I want to solve my current problem and also, to know if there's a general approach to this task since I think it's very common but I'm not able to find clear implementation.
First is the example - JSFiddle as you can see, I have problem with styling/positioning the text in a nice, proper way. What I want is the image(bullet) to stay at the top-left corner as it is right now and I want all text to go right from the image. As you can seen in the first <li> when I get certain height the text i going under the image.
For some time now I was thinking about what is the way to make customizeable anchors with image and text. I've had this idea of using two spans so I can have more freedom on styling but as you can see in the example, it's either - me not knowing how ti use <span> properly or it's not best suitable for this case. If the text content is too big the text goes under, also the fact that with the margin only the first row is affected.. It seems to me that this is not the right way, so how can I style my anchor list (in this certain example) and is there a more generic way which will allow me to change some things related only to the text or to the image without having to remake the whole structure?
Images that are UI elements should be CSS backgrounds, not inline images. Positioning CSS backgrounds is easy because it doesn't interfere with the contents within the element. It's also better to put all the stylnig on the A-tag (other than positioning), not on the LI.
<li>Link<br />12.12.12</li>
CSS:
a.bullet {
background-image:url(...your image path...);
background-repeat:no-repeat;
display:block;
min-width:175px;
width: 100%;
min-height:60px;
padding: (what you want);
margin: (what you want)
}
Please see link below:
http://cssmenumaker.com/builder/111528
I am trying to figure it out. What I don't understand is how it works - I cannot fathom how the sub-menus remain hidden and don't interfere with the rest of the page.
Allow me to explain further - when I tried to make my own I had it in my mind that I would have to hide and show the submenus (I was using DIV tags thinking I was clever) but that when made visible they would then take their place in the DOM and move everything else out of the way (something I obviously wanted to avoid but don't understand entirely how to accomplish). When I tried to make mine using JS it didn't work as I wanted. I changed the 'display' and 'visibility' properties of the nested DIV tags (sub-menus) to 'none' and 'hidden' respectively until an onmouseover event and it just doesn't work correctly and I have no idea how to make something work like the example.
I am looking at the hover commands and cannot see how this makes the sub-menus invisible until hovered over. I can also only see the display:block command as the only reference to how they are displayed but do not understand how they don't move everything else out of the way when displayed.
Does this make any sense? Can anyone explain how the example works, what the DOM model looks like and how all the parts of the DOM are interacting with each other? W3C is not much help here.
My impression was that the DOM model is static and will display things in box fashion unless you add some complex z-index or some other method so what am I missing here? I would also prefer a pure CSS solution which is why I posted the example above, I want to understand all this much more than I currently do.
Much obliged to any help!
The answer is: position absolute.
Position absolute removes the elements from the static flow, thus not pushing away the other elements. To control the absolutely positioned elements, you can wrap them in a relative positioned element: the offset parent. This way, you can create blocks/menus/etc. with absolutely positioned elements within, in a normal flow.
For a brief explanation: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
The display none/block part is just hiding/showing the submenu's. If a parent got :hover, you can show the submenu with display: block.
I'm having trouble getting my head around an absolutely positioned :before element. I'm after a big quote mark to sit behind a testimonial. I used a :before element as it is a font and is therefore scalable for retina displays, saves an extra http request for the image (I don't have any other images I could make a sprite with) and it also affords me more flexibility of position (a background image would need padding on the left of the element, which would mean playing about with my grid and losing uniformity across other pages I'm using the CSS on).
Hope that makes sense! The problem I'm encountering is that the :before element is covering the text above it. Not much of an issue if it's just text (although still an issue), but there's a link there that isn't completely clickable…
Here's a jsFiddle of my issue:
http://jsfiddle.net/tempertemper/KzQZQ/
I'd assume as the :before is on the li element it would sit behind the blockquote and cites but it doesn't look like that's the case.
I've tried z-index and can't seem to get it all working properly. I've also tried changing the blockquote and cite's position value but no joy.
Thanks for taking a look :)
I did notice the problem in Chrome as well. By just adding a background to the :before you can actually see what is happening (a trick i often use), or you could try the 3D view in Firefox. Your suspicion was right, the brace is actualy lying on top of the link. This makes sence as the DOM is rendered before the css is apllied. Adding a z-index did solve the problem though. I updated your fiddle: http://jsfiddle.net/KzQZQ/1
This should solve it. Strange that this did not work for you, but perhaps you where doing something wrong... Let us know if you have any more issues with this.
I've designed a website with an elaborate transparent header that has to pass over part of the main section of the page. I'm trying to keep the number of images used in the website down to a minimum, partly for size and partly for cleaner markup.
I want to start putting clickable items in a blank area under the transparency. I managed to get the image to overlap the div in question by playing with the z-index. Now of course, it's unclickable.
Does anyone have a clever solution to this problem? I can think of several different ways "around" the problem that are less ideal, but I'm hoping to avoid those and find a solution that doesn't use JS or an imagemap. I've tried to use a nested div with a higher z-order (outer div is -1, inner div is 1), but it doesn't work.
It turns out that it wasn't necessary at all to change the z-index. All I had to do was use the negative margin and I could click the content in the transparent area under the image. My mistake was making the initial assumption that I would need to change the z-index for some reason. If I had attempted it without touching the z-index, It wouldn't have been an issue at all.
you can $.Event to make an event and then trigger it when ever needed :)
prefectly cross browser and easy