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.
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>
I have included a link to a picture to help explain my question: http://i.gyazo.com/b1e319cda4b7c21a5072156f5bd7c590.png
Im trying to position the red div exactly below the blue one. The problem is that the top container which you can see at the top of the picture, has a height of 100%. The blue div then has a height of 300px and is positioned with top:100%.
How can I get the red div exactly under the blue one? I almost just need to be able to do: top: 100% + 300px;
Thanks!
Well you could do top: calc(100% + 300px); ?
Put both the red div and the blue div in a single div container.
Apply the absolute positioning to the outer container, and keep the inner divs static (as in, remove absolute positioning).
Remove margins between divs with margin: 0;
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?
I have a modal box where I'm trying to put two columns beside each other, and I did that by assigning float: left to one div (.center-columnb) and a float: right to .map-column.
What happens, however is that 'center-columnb' breaks the container div with the grey gradient background as if this div was placed UNDER that container div (notice the rounded edges on the bottom of the grey part, that was meant to be at the bottom of the div.
When I remove float: left from centercolumnb from style.css, everything is ok except that the column on the right does not stay there anymore. Does anyone have any alternatives that could help me? Thanks :)
You have a parent div of #contentholder but it's not containing the floats within it at this point. A floated element, by default, is taken out of the document flow and any parent div will collapse. To make it contain the floats within, you need to give it an overflow property. This should do the trick:
#contentholder {
overflow: auto;
}
Another way is to clear at the bottom of the Question container. For a full cross browser compliant solution, just add before the closing div:
<div style="clear:both"></div>