Not sure if the title explains it properly.
I've made a fiddle of my problem: Fiddle
.
The right box properly shows the border on hover. But when theres content in the box it's hidden. Is there a way I can make the border stay on top?
EDIT: FIXED IT WITH CSS: overflow:hidden;
The image is rendered on top of the box which is covering up the animation. If you take the image out you'll see that the hover functionality works on both boxes.
You probably need to add some CSS for the image instead of just the div that the image is in.
Related
I have so much trouble figuring out where my mistake are. I want to build website with some divs on the right to each other...later there should be a horizontal navigation which automatically scroll to the right via anchors.
Anyways...each div has an image in the background and a container with some text. The navigation menu is fixed and is always displayed.
My trouble: Why is the text container not showing up on the first div?
Please see my fiddle on http://jsfiddle.net/pvvFR/
Thank you in advance for reading and if so...for answering
Is this something like that a solution
http://jsfiddle.net/pvvFR/7/
I've put a position absolute on you slider
and i've put your container div out of the slider
EDIT :
Look at this: http://jsfiddle.net/pvvFR/13/
everything is relative
And i've given a height to your slider, and position your container to a negative top
If I did got you right, if you use img to set a background (which I think is not good at all), you should exclude it from the common layer (for example position:absolute), so the content could overlay it. Your problem is not in text, but in image.
try to have each container a unique class and replace with for example and put the image to div background like
background:url('http://www.wiesenhof-online.de/upload/Chicken-Ribs-BBQ-quer.jpg');
http://jsfiddle.net/pvvFR/10/
Well, answer to your question about the REASON behind this happening is that Z-INDEX only works with positioned elements and as you are not positioning your image element that's why 'some text' is buried behind the image and its z-index doesn't take effect.
Check this. http://jsfiddle.net/pvvFR/14/
I am currently creating a one page website, however I am having an issue, I need the scroll text underneath the fixed element however you can see the text that should be dissapearing under the fixed position element, as the element as a back-ground, which is a transparent png, is there any way I can hide text as it scrolls underneath the fixed position element.
Here is a fiddle of what I have, so far
JS FIDDLE
Ideally I am wanting it so that when text moves behind the box with red borders it is not visisble, without the need for a background color.
I have visited your website and stolen some images to better understand what you are trying to accomplish.. Assuming i'm correct in the assumption you do not want a solid background on the header because it would mess with your pages background....
you can use multiple backgrounds...
see your demo
You will need something in #banner that will hide the text. From the css it looks like there is supposed to be a background image in that block, but it is not showing up.
The header is transparent as set in your css reset, so a color or image will be necessary if you want the text to be hidden. Otherwise, it's like moving the text behind a piece of glass...you will still see the text unless you have something to actually cover it.
I suspect if there was a working background image on the header, it would block the text where it wasn't transparent. When I add a background-color it achieves that effect.
I am designing a page on www.bookmyshirt.co.cc/hair/city.html
In main div it has two div:
1) block_header
2)main_out
but main_out is not showing grey background to all of its content rather it shows only grey background to some height i want that grey background to all of its content.
and also at bottom that button also merge with above content.
any suggestion is welcome.
main-content1 is in position absolute.. that's why main-content cant set the proper height.
Remove the position absolute an you'll see the grey background
EDIT:
your problem is that you set the heights for different divs but the content of your divs are bigger than the height you gave them (e.g .main-content, .deals) if you have a dynamic content or if you dont know the height of the div, just remove that property in the css.
To solve the problem of the register button, remove the height on .deals
I'm currently working on this layout
http://imstillreallybored.com/gridiron/indexx.html
at the top menu i have to different backgrounds for the menu the red one and the gray gradient. I need the gray gradient to continue on the right side of the menu off of the page i cant seem to get this to work. I tried absolute positioning but when you resize the browser it covers the menu which wont work. I cant seem to think of the right way to do this anyone have any ideas?
You can create a very long background image for your #menuContainer that is half red and half grey, and then center position it, so it will always stay red on the left and grey on the right. It might be a hacky solution, but that is the easiest thing you can do without changing your markup.
try nesting a few divs. run the grey gradient all the way across, then put your red image over that in another div, and left align it. make the red image like 500px wide and it'll always be on the left, but will extend under the menu and be hidden.
<div style="background-image:url('grey-gradient.jpg'); background-repeat:repeat-x;">
<div style="background-image:url('red.jpg'); background-repeat:no-repeat;">
<div>
<ul>menu</ul>
</div>
</div>
</div>
I am a new learner of html and jquery.
Please help me how I can create an overlay div which covers my whole screen, including the background image as well. I was able to create an overlay div but it does not covers my whole screen, instead it covers my container div and if i increase the width it stretches to right side but left part remains uncovered.I put my overlay div in the outer most div but still on increasing the width it gives extra width to right side only and left part remains uncovered.
.
My wrapper div has a background image for the whole screen but my overlay div is not able to cover left part of my container div. Please help me.
thanks
HP
take a look at the blockUI plugin
http://jquery.malsup.com/block/
lots of different styles available!
the page blocking example is what you need, it works with a div or a html string for the message while the overlay is shown.
I got the answer.
YOu can put margin:auto; Now, your browser will take care of it and it will occupy the whole screen.