A div which contains an image has rounded corners using border-radius and overflow:hidden.
The div also contains another div with an orange background and some white text.
When the second div is placed over the image using a negative margin, the result is that the orange background is hidden behind the image, but the white text appears over top of the image. Why is this?
Fiddle: http://jsfiddle.net/nq9Jv/
Further question: how do I make the orange div appear fully "above" the image, bearing in mind that I cannot use position: relative because that would take it out of the flow and thus not allow the border radius of the first div to conceal a part of the second.
I am not sure the reason that the orange background doesn't appear above the image when using a negative margin.
I have tweaked your example a bit, and by using position: relative on the parent element and position: absolute on the child element, made the orange div appear above the image while maintaining the border-radius concealing the child element.
http://jsfiddle.net/nq9Jv/4/
Is that what you want?
Related
I have a mockup of a little CSS quandary I can't puzzle out (see image).
Basically I have a sidebar (blue) that I want to have position: fixed, but I want this sidebar to respect the parent (red) and always only take up 25% of that parent's width, and never go outside the bounds of the red parent (so red all feels like one big centered element).
If I fix the sidebar, it will jump out of the red container, obviously. If I nest blue in an absolute position container (and give red position: relative) blue will stay fixed but it won't fill the full 25%.
Have you tried with position: sticky? It should stay relative to parent.
I have a .footerdot div, which lies at the bottom of page with a bluedot image aligned to center of the page and overlapping the container div. I'm attaching the image for better understanding how the layout should looks like.
Here is the code:
<div class="footerdot">
<div class="dot">
<img src="images/bluedot.png" alt="bluedot"/>
</div>
</div>
From the image I understand that you are trying to create a slider. The footerdot acts as the slider base and the dot is used to slide over it.
This includes overlapping the dot over footerdot. So to overlap a div over another div, we need to place both footerdot and dot inside another parentdiv with position: relative.
Now both the child divs are relayively positioned to their parentdiv. The flow will be normal here.
In order to place dot over footerdot, i.e we are not altering the position of footerdot but the dot. So we need to position the dot absolutely to it's parent. Add position:absolute to dot. Now dot overlaps the footerdot. Give dot a fixed width and height. eg: height: 20px; width: 20px.
But dot is still not centered on the footerdot. Instead it lies on the top left corner. In order to achieve that we need to add a dotparent div to the dot, which takes the width of the footerdot and we can center the dot inside it. But again we also need to shift the property position: absolute from dot to dotparent. And add left: 0; right: 0 to dotparent, so that it occupies the whole width of the parent from left to right. Now the width of dotparent is same as footerdot. dot can be centered inside the dotparent by applying margin: 0 auto on dot.
Finally the Html structure:
<div class='parentdiv'><div class='footerdot'></div><div class='parentdot'><div class='dot'></div></div></div>
containerdiv has two images, I make them display left and right:
.container {
background-image: url('img/left.png'),url('img/right.png');
background-position: left,130px;
overflow: visible;//this line doesn't work
}
currently, right.png is out of the right boundary of the container div and is hidden behind another named div2 which is at the right side of the container div.
How to make right.png image display on top of div2?
see below structure:
[left.png------ 'I am container div'--------- ][right.png-----I am div2 -------]
for some reason, it is not possible to change the css of div2, so I am wondering if it is possible to set some attribute inside container div then right.png can show up.
see below I draw a picture: I set right.png 125px to show, ideally, it would cover the grey triangle.
Can not add padding to the container, can not change position of div2 (because there are other menus share this part, whole part of container div would turn grey if other menu was clicked.)
Is div2 positioned absolute? If so, you can only place .container higher by positioning it absolute as well and setting the z-index higher than div2, or by placing .container after div2 in the DOM.
I've got a div with a background color blue, that needs to be centered in another div with background green -- just for looks. I centered the blue div inside the green div with a "margin: 10px auto". Now, I need the text inside this blue div to be left justified, not centered, so I put the text inside a div and gave it a margin of zero. That didn't work.
Obviously I'm confused about centering things in general, and am still coming up the css centering / positioning learning curve. Any thoughts / comments appreciated. Thanks.
You need to place a:
text-align: left
style on the DIV containing the text.
margin: auto only works for centering DIVS, has no effect on actual text
http://phplist.xxmn.com/node/1
why the two red box which locates at the center of the page(under Tags:) doesn't have the border bottom? the two red box html label is
<span>
and i applied the
border:1px solid red;
to it. but under IE7, the border bottom isn't show, firefox is ok. the out div box (the id=vistor_comment)is too heigh than under firefox? why? how to alter it. thank you.
try giving it also display: inline-block;
I think it is because the line-height in which the span resides is lower than the height of the span including border, and so the lowest few pixels are cut off, in this case just enough for your bottom border to disappear.
Your parent container has a height: 20px;, I'm assuming that is and your various paddings are causing a height issue in IE7, therefore cropping a portion of your child container. Set an IE7 specific height to see if it rectifies the issue.