Can some one explain why I cant get the vertical bar behind my menu? I've tried absolute and relative positioning with z-indexing but no effect. Any ideas?
Live:Test
Remove the body background-image and give to .top class
Related
If I add a background image to a div using CSS, I can't view the image until I add some content/text inside of the div.
Why is that?
Because background image does not give div content.
An empty div without width/height defined will not show. A div does not have natural padding/margin so without content it has a height of 0 so you don't see it
i will assume that the div have no height, so it will take height: 0; in case no data.
try giving it height.
Add background-size property to div.
As background-image doesn't have height and width. Cross check your html in Developer console. You'll find that div is present.
background-size: 100% 200px
I have a div (banner) with fixed position and a div (content) .When I scroll down the div (content), it will overlap with the div (banner) and caused some wording in div (banner) not able to see. I have tried to put z-index on both div but still have same result. Please see my code at Jsfiddle.
Jsfiddle:https://jsfiddle.net/ckcheah/731sLxks/
you can add background-color to your banner.
like this:background-color: #fff;
actually, you can set your banner top:0 to fixed it in the top of the frame.
Fella's!
I'm trying to create the same effect as the iphone search bar on the homescreen.
When you click on the body of my page, a bar will appear and the rest of the page will become blurry. Now there is a problem, The white bar on the top should have a hard border but on the bottom the blur of the .page gets over it. I tried to change the z-indexes but it seems that there is not the solution.
Can someone help me with this?
Your blur effect is bleeding into the header div. Give your .page section overflow: hidden; to avoid this.
jsfiddle
Just add simple line in .page to avoid outside blur effect:
overflow:hidden;
Working DEMO
I am trying to make use of the transition css rule but my problem is all the content inside the div is bunched together when the transition is idle and not being moused over. Once you mouse over the content in the div, or the title in my example, is stretched out to full form.
Is there a way to make the title stretch out on one line the way it should look while the box is not being moused over?
Here is a jsfiddle of an example of my code: http://jsfiddle.net/3W2hC/
.title {
width:420px;
text-align:center;
Thanks in advance.
EDIT: I was able to do this. By adding a width. However, there is now a scroll bar. How do i go about removing the scroll bar?
If you want the content to be cut off inside of the div, just give your div overflow:hidden in your css.
In your case it will be:
#main {
overflow:hidden;
...
}
Here's a fiddle: http://jsfiddle.net/3W2hC/1/
I have a div with a background image which is aligned bottom right. Then I have another div floated inside that div to the left and to the bottom. In IE6, it looks like the bottom inner div is overlapping and cutting out the middle of the background image which is set to bottom left.
Any ideas what might cause this? Is there a known issue with floats and background images?
Thanks
The solution was to add the CSS property Zoom:1; on the div with the background image. This sorts it out in IE6.