Div containaer and p element overlapping another Div that contains an image that needs to respond to a :hover CSS event causing only a small portion of that Div container to be able to sense the mouse hovering over it.
How do I solve this?
z-index isnt effective for some reason either.
Try and hover your mouse over the image.
Here Is The JSFiddle.
As #colandus said adding the position: relative and the z-index to the img should indeed do the trick.
However, it seems to me like you are over complicating things a bit. Why the position relative on the p? that is the one that is causing the problem...
What you are trying to do is default behavior if you use some simpler html / css. Something like this:
the HTML with some div's removed:
<div class="insp">
<h3>Thomas Edison</h3>
<img src="http://www.placehold.it/250x150">
<p>Lorem Ipsum is s...</p>
</div>
and the css with the position: relative removed from the p:
.insp {
border: 2px solid black;
margin: 10px 0px;
padding:10px;
}
.insp h3 {
margin-top:0px;
background-color:#FFDE5C;
}
.insp img {
float:left;
border: 5px solid #FFDE5C;
height:150px;
margin: 0 20px 20px 0;
}
.insp img:hover {
border: 5px solid #ffffff;
}
.insp p {
margin: 40px 40px 40px 80px;
}
And as you can see (http://jsfiddle.net/7fvcD/4/), it looks exactly the same and there is no hover issue anymore.
Put image as position: relative, then z-index will work.
Add the following CSS:
.insp-image img {
position: relative;
z-index:1000;
}
http://jsfiddle.net/7fvcD/5/
Don't need to change your markup ;)
Try this approach: Put the <div> with the <img> inside the <p> tag and set some margin to the img div.
Updated JsFiddle
Related
As i was reading all over the internet span element is inline element and does not accept vertical padding and i was like let me try it and let see. So i opened the editor and try to add vertical padding and somehow it worked.
Here is my HTML and CSS code:
span {
background-color:blue;
padding-left:5rem;
padding-bottom:5rem;
padding-top:4rem;
}
<span>
asdfasdfsadfl
</span>
I will also add the ss of it:
Could you please explain me what am I missing here?
Main purpose of using inline element is to have parts arranged in a line and not as a separate section.Even if you include padding in span tag it won't push the text
to create padding but will expand itself in outward direction without disturbing the text flow.Below is the code to prove the same
span{
background-color:blue;
padding-top: 100px;
padding-bottom:100px;
margin-top: 50px;
border: 2px solid black;
}
<p id="p" style="padding: 20px; border: 2px solid black;">block-block<span id="n"> -INLINE- </span>block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-block-blockblock-block-block-block-block-block-block-block-block-block-block-block-block-block</p>
I have a button on top of a div with a background colour, a box-shadow, and a border. The button has border-radius corners and the top div's background colour and other styles show through.
Easiest way to explain is this jsfiddle:
http://jsfiddle.net/wCppN/1/
HTML:
<div class="journal-content-article">
<div class="button">
Hello Button
</div>
</div>
<div class="journal-content-article">
Normal article with white background.
</div>
CSS:
.journal-content-article {
background-color: white;
border: 1px solid black;
box-shadow: 5px 5px 5px darkgrey;
}
.button {
border-radius: 20px;
background-color: green;
}
I want to be able to leave the 'normal article' div as is, but be able to remove the white background, the black border, and the box-shadow from the 'button'.
This is being done through Liferay web content so I'm limited to what HTML changes can be made. Only any HTML inside the div 'journal-content-article' can be changed, and can't add additional classes to that div or any parent div.
I also can't change the 'normal article' div contents as the users (no CSS/HTML experience) have to type that in.
Any ideas on how to achieve this, or am I forced to use Javascript?
Thanks!
Maybe this:
http://jsfiddle.net/wCppN/7/
<div class="journal-content-article">
<div class="button">Hello Button</div>
</div>
<div class="journal-content-article">
<div class="myClass">Normal article with white background.</div>
</div>
.journal-content-article {
margin: 20px 20px;
width: 150px;
}
.myClass {
background-color: white;
border: 1px solid black;
box-shadow: 5px 5px 5px darkgrey;
}
I don't think you can override .journal-content-article's style without either doing something like fredsbend suggests, or being able to edit the div itself. You can effectively override the white background, something like this:
div class="journal-content-article">
<div class="journal-content-inside">
<div class="button">
Hello Button
</div>
</div>
</div>
.journal-content-inside {
background-color: black;
margin: 0 auto;
padding: 0;
width: 150px;
overflow: hidden;
border: none;
}
However that doesn't fix the border and box-shadow problem. I don't know that those really are fixable without javascript or other means of editing outside the div.
One method that may help someone else, would be to set a negative margin on the button:
.button {
margin: -10px;
}
http://jsfiddle.net/wCppN/11/
This makes the button larger than the border and shadow, and with overflow: hidden off, covers up the problem.
However it has the disadvantage that the button becomes bigger than you want. In some designs that might be fine, but we have a box/column structure and just -2px of margin looks too badly out of alignment for me to use this (I'm a perfectionist)!
It might help someone else though!
My CSS:
h1 {
background-color: #f7953d;
color: #FFF;
width: 100%;
padding: 6px 0 6px 10px;
margin-bottom: 10px;
}
My HTML
<h1>Hello World</h1>
The background color is always stretched to 100% of the screen. How do I make the background color stop after "World" in the h1 tag, and not go all the way to the end of the screen?
H1 is by default a block element and so will span the full width of its parent container you want to make it an inline element (much like a span) in order for it to only be as wide as its contents.
There are 2 possible solutions dependent on your compatability needs
display:inline;
will achieve the effect your after however it does mean that whatever follows your H1 could appear on the same line.
display:inline-block;
Has the effect your after while still forcing anything following it to appear below the H1 the only downside to this is it can throw up some issues in IE<8 see quirksmode for more details
You can do this by adding display: inline-block; to the CSS for your <h1>. This will make it use only as much width as its contents and still respect the margin and padding you give it.
I would suggest something like this:
HTML:
<h1>Hello World</h1>
<div class="clear"></div>
<p>Elements after unafected by float</p>
CSS:
h1 {
background-color: #f7953d;
color: #FFF;
padding: 6px 0 6px 10px;
margin-bottom: 10px;
float:left;
}
.clear {
clear:both;
}
This works consistently (unlike inline-block which isn't supported by all browsers).
An inline of the element is probably not what you want since you require padding.
I'm creating PHP, Javascript based photo-gallery from scratch
The problem is, I want to make difference between simple picture and photo-album.
So simple picture borders look like that
Is that possible to create facebook like photo-album borders (double borders, which creates multiple images effect) via css or CSS3?
P.S Don't know if it will be possible with old css standarts. I mean, CSS3 probably can do it but it will not be backward compatible. In other hand, currently my php side generates 100x100 px thumbs. I need something that will not be ruined if I will increase size of thumbs.
Thx in advance
Use a pseudo element like :before or :after, for example:
Turns out, most browsers don't like :before on images because it's not a text-containing element. You could still do this if you did it on an alternative element, like a div, and set the div's background to the original image. Or, you could try:
http://jsbin.com/otivaj/edit#html,live
Is this what you're looking for?
jsfiddle
HTML:
<div class="facebook-album"></div>
CSS:
.facebook-album, .facebook-album:before
{
background: red;
width: 100px;
height: 100px;
margin: 20px;
border: 3px solid #FFF;
box-shadow: 0 0 0 1px #999;
position: relative;
}
.facebook-album:before
{
margin: 0;
content: "";
position: absolute;
top: -7px;
left: -7px;
background: white;
z-index: -1;
}
You could just look at Facebook's source to figure it out. This will also work:
http://jsfiddle.net/g9A6a/
Yep, you can definitely do this with CSS. It looks like all your images are the same size, too, which will make this very straightforward. Simply place your <img> inside a containing element with position: relative; and an offset. Both the container and image should have a border, with padding and offsets you so desire. Set the width and height of the containing element based off the child image's dimensions.
Here is a
DEMO on jsfiddle
I'm not sure you can achieve that effect with simply CSS2. If adding more markup is an option, I would do something like this:
<ul>
<li><img></li>
</ul>
li {
position: relative;
border: 1px solid gray;
}
img {
padding: 6px;
border: 1px solid gray;
position:absolute;
top:6px;
left: 6px;
background-color:white;
}
For example here http://jsfiddle.net/jitendravyas/5Wqn4/1/
I want to take <h1> over red area. How to make is possible without using image and another added more element.
using border is not necessary I just want background like this.
Without using any extra markup, there's a couple of things you could do.
Apply a negative top margin on the h1:
h1{margin-top:-150px;}
http://jsfiddle.net/5Wqn4/2/
Position the h1 absolutely:
h1{
position:absolute;
top:50px;
left: 50px;
}
http://jsfiddle.net/5Wqn4/3/
Without your body border:
Without using the border you've added to the body you can simply style the h1 as you require:
body {background:yellow;margin:0;padding:0;}
h1{
background-color:red;
margin:0;
height:150px;
}
http://jsfiddle.net/5Wqn4/5/
UPDATE
Further to your comments below, here's a sample that probably matches more what you need:
http://jsfiddle.net/SbGDQ/
You can use this CSS rule:
h1 {
border-top: 20px solid red;
display: block;
}
body {background: yellow;padding: 0px; margin: 0px;}
h1{background: red;line-height: 10em;margin: 0px;}