CSS3 - How to override the padding of a parent element? - html

I have a div element in the shape of a circle using this code:
#circle{
width: 320px;
height: 320px;
background-image: url('image.jpg');
border-radius: 50%;
background-position: 50% 50%;
transition: all 1s;
}
That expands on hovering using this code:
#circle:hover{
margin-top:-50px;
width: 400px;
height: 400px;
}
Now this div element is inside another div element in the shape of a rectangle, or a box as some might say, that has a padding of 50px.
When the circle expands, the top part of the circle gets hidden under the padding. Imagine it like, the top part of the circle gets cut off, while the 50px padding is there.
What I want is, it will override the padding. it'll simply show above the padding, I hope you get what I'm trying to say here... If not, i'll try to explain in a better way. Thanks in advance!

Unfortunately there is no css that can access the parent element of an item.
I found this thread which outlines how you might accomplish this task.

You can use "position" or "display". I hope this http://css-tricks.com/absolute-positioning-inside-relative-positioning/ may help you

How you tried with z-index?
The round element
z-index: 2;
and the parent element:
z-index: 1;

Related

How to add a border to only percentage of width of element, CSS Trick

The Issue...
Once again I am searching for a cool CSS trick to help me to achieve an effect whilst preventing the use of untidy HTML...
The following image shows what I am trying to achieve, notice the top and bottom borders only stretching around 70% of the width...
A Starting Point
As a starting point I have created the above using what I would call 'untidy HTML' to add these dividers to the list.
Here is my jsFiddle: http://jsfiddle.net/E93UE/
You will see I have <li class="divider><!-- Divider --></li>, this is what I want to get rid of if possible
My Question
So, if the above has not explained well enough, I would like to apply a border to a block element, but only show the border for a specific width of the whole element.
Obviously this cannot be achieved using just border:XXX, it is likely to need some :before and :after selectors...
Possible Solutions...
I have had two thoughts of how this could be achieved, one is not too practical, and the other I am not too sure how to implement (these are just ideas):
Set the width of the list element and give it overflow:visible, all elements within have position:absolute and then just apply margins to bring the elements out of the list box... (not a good fix, prefer my original)
The other solution, which I am not too sure how to implement, may be the way to go. By apply two :before elements with position:absolute you could overlay the edges of each border (I think)
Give a border to :after pseudo-element (demo):
.separated:after {
content: "";
display: block;
width: 70%;
margin: 1em auto 0;
border-bottom: solid;
}
I recreated your divider using :before/:after pseudo-elements:
http://jsfiddle.net/thirtydot/E93UE/1/
#staff_list li:first-child:before, #staff_list li:after {
content: '';
display: block;
margin: auto;
position: relative;
bottom: -26px;
width: 500px;
height: 2px;
background: #b9b7b6;
}
#staff_list li:first-child:before {
top: -14px;
bottom: auto;
}
The numbers need tweaking, and you need to test it when you have more text, but it's probably close enough. I made other changes to help this solution work, compare your original demo to mine.

CSS - Can an image overlap a page border without affecting page width?

I have the following element in my initial page concept:
http://tinyurl.com/bcmcxp9
The ribbon is a PNG image. What I'd like to be able to do is position this image exactly over the border of a box-shadowed div (representing the page content), without affecting the page width.
I've tried a couple of techniques.
By using position:absolute, I've been able to achieve the visual effect I was looking for, but it brings up the dreaded horizontal scrollbars! I want the edge of the div (not the edge of the image) to represent the edge of the page.
#banner-ribbon {
background-image: url(ribbon-right.png);
background-repeat: no-repeat;
position: absolute:
width: 419px;
height: 114px;
left: 700px;
top: 400px;
}
By using a div that sits between the content wrapper and the background, I've been able to position the image in the right place without affecting the horizontal scrollbars (sort of, I might need a little javascript to absolute-position it relative to the center), but I can't raise the image's z-index above its child divs!
#banner-ribbon-wrapper {
background-image: url(ribbon-right.png);
background-repeat: no-repeat;
background-position: 90% 400px;
z-index: 70; /* does nothing */
}
Any ideas?
It sounds like the image is extending the boundaries of the page, causing the horizontal scroll bars. One way to fix this may be to set a width for your page and then hide anything that goes outside of it. Something like this may work for you:
body {
width: 100%;
overflow-x: hidden;
}
Example jsFiddle
Give your content div
position: relative
and to your ribbon
position: absolute
right:0
Make sure your image don't extend boundaries uncontrollably.
Working sample on JsFiddle:
http://jsfiddle.net/BrvJk/

Overlay image inside <div> causing text to move down

I have a <div> with a border:15px. It has an image on the left-corner as given in the fiddle
http://jsfiddle.net/user1212/e7Gez/17/
Now, this image is pushing down the text from the top. How can I make the text get margin-top:0;
I do not want to use the image as background-image since the 15px border overlaps it.
Any solutions?
Just use float: left; on your image, see updated Fiddle. You can also use a negative margin-right on it to prevent it from pushing the text to the left, but then you need to mess with the z-index of it and the rest of the content, which means additional HTML markup for styling purposes; see this Fiddle.
OK, I'm going to leave my other answer as a more direct "this is how you fix things doing it your way" answer, but I think a better approach here would be to use position: absolute; -- this achieves the effect with much less fuss.
Fiddle
I'm styling the image as follows:
img#post-backgrnd {
position: absolute;
top: -1px;
left: 0px;
}
This forces the image to go to the upper-left corner, which is where we want it (the top: -1px; is because the image is slightly misaligned with the border), and position: absolute; means it does not take up space, so it doesn't push the text at all. However, done this way, the image covers up the text. The better solution here is to edit the image, fixing the alignment issue (and going to top: 0;), and making the white section actually transparent.
If for some reason that cannot be done, you could fix this overlapping issue by using z-index, but it means that your parent, your image, and the text need three different z-index values, which means that you need a new element for your text. For an example of this, see this Fiddle.
Just add vertical-align:top to your <div> like:
.content {
width: 500px;
height: 500px;
border: 15px solid #E4EAF3;
/* background: #ffffff url('http://smitra.net76.net/post-bg.jpg') no-repeat top left;*/
margin-top:0;
padding-top:0;
vertical-align:top;
}
see it in jsfiddle

left:50% element not appearing in middle of page

I have an absolute positioned popup (hover over "ice white" image to see popup) which has css left:50%. Now this should appear in the middle of page but doesn't. Any suggestions please? Thanks in advance.
You're also supposed to add margin-left with the negative of a half of visible width of the element. So, for example:
width: 400px;
padding: 10px;
border-width: 2px;
/* -(400 + 10 + 2)/2 = -206 */
margin-left: -206px;
left: 50%;
Note that margin: auto suggested by others won't work because you've positioned the element absolutely.
position: absolute;
left: 50%;
transform: translate(-50%,0)
Lol, no. The left side of the image appears at 50% of the page width. Hence; left: 50%.
In order to center your image, set margin: auto instead.
Your code is working correctly. The popup is being positioned with left of 50% ... of the TD tag it's nested inside.
Try either taking the popup out of the table, or setting it to 50% of the document width instead. (Your javascript is minified and unreadable to me, or I'd help further.)
u can try to change CSS Style like this
#displayDiv {
background-color: white;
font-weight: bold;
height: 460px;
left: 50%;
margin: auto auto auto -475px;/* change done here */
overflow: hidden;
position: absolute;
text-align: center;
top: 80px;
width: 950px;
z-index: 1;
}
Looks to me like there's a containing element somewhere in between the "Ice White" image and the body (specifically, Firebug reveals that it's the <a class="popup1" ... >) that is relatively positioned, so your 50% is relative to that rather than the whole page.
I know this seems a bit counterintuitive: Why should it be relative to a parent element if the poput uses absolute positioning? It's basically because relative positioning is relative to where the element is in the normal flow of the document, whereas absolute positioning yanks the element out of that flow. See sections 9.4.3 and 9.6 of the W3C's explanation of the visual formatting model for more info.
Check out a tutorial or two if this is giving you trouble. I like Learn CSS Positioning in Ten Steps and css-tricks.com's "Absolute Positioning Inside Relative Positioning" (to which I'd provide a link if not for the spam filter; first-time answerer here ;) ).
As for what to do about it, you might be able to move the popups out of the relatively positioned parent, as mblaze75 suggests, but it looks (and I'm guessing here) like that <a> is what's triggering your JavaScript event, so you probably can't do that. Instead, I'd try removing the relative positioning and using margins instead.
Also, bear in mind what Greg Agnew said: Even with that problem solved, you're still centering the left edge rather than the center of your popup. I think duri's answer will take care of that.

Placing an background image with padding in h2 tag

I want to create a headline (h2) with an image at the right-most area of the bounding box. I have the layout almost right except I can't push the image a little bit to the right of the element's bounding box -- how would I tweak my css so it is displayed correctly?
I'm trying to do something like this:
[{someHeadLineText}{dynamic space }{image}{5px space}]
where the [] indicate the total available width of my content.
Html:
<div class="primaryHeader">
<h2>News</h2>
</div>
Css:
.primaryHeader h2 {
background-color: green; /* the header looks like a box */
color: black;
background: transparent url(../images/edit.png) no-repeat right center;
border: 1px solid red;
}
I am placing the image to the right of my h2 element and centered vertically -- but how do I adjust the placement of the background image?
I'm afraid I think you can't. You can use either right or a pixel value as the image's x-position but that pixel value will always be relative to the left corner of the bounding box. Adding padding won't help either, it will just extend the bounding box further.
The only solution I know for this is either adding the shift to the image itself, or using an absolutely positioned element (with a slight offset) hovering behind the element - but that would require you know the width and height in advance.
Edit: evil, hacky idea. I have no time to try this out right now, but it should work if the h2 is a display: block.
Give the h2 a position: relative.
Place a div or other element inside the h2 with the following:
position: absolute;
left: 0px;
top: 0px;
right: 5px; /* This is the shift */
bottom: 0px;
background-image: url(...);
background-position: right center;
background-repeat: no-repeat;
z-index: -1; /* I don't know whether this will overwrite the h2's content */
this could lead to the desired effect, I'm not sure as I have not tried.
The element may overlay the h2's other content, in which case you would have to put the rest into a <span> element with position: relative and z-index: 1.
It's really hacky. Better put the padding into the image itself, much cleaner.
Can you add padding pixels in the image itself?
You could ditch the background image and use an image instead.
<div class="primaryHeader" style="padding-right: 5px;">
<img src="../images/edit.png" alt="" style="float: right;" />
<h2>News</h2>
</div>
You can look into CSS3 background positioning. It works in all the modern browsers (not IE, of course).