So, I'm experimenting with using rounded-corners in CSS3 (not in IE, don't care if it works there), and I have the DIV where all of my content lives looking quite nice. The problem I'm having is that there are child DIVs that are not getting "masked" by the parent's rounded corners. I'm not looking for the child to inherit the rounded-corners. I just want to have any content inside the parent to not be visible where it is rounded, as if it were masked. I tried using "overflow: hidden;", but that doesn't seem to do the trick.
Does anyone have any ideas how the children of the rounded-cornered container DIV can be sorta masked by the parent DIV? If it's of any use, I'm using "position: absolute;" on the parent DIV. Not sure if that will make any difference.
Thanks!
Try adding overflow: hidden; to the parent element. This fixed the problem for me.
Use padding on the div. If you make the padding equal to the radius you shouldn't have to worry about any overlap or the content appearing in the rounded areas.
<style>
.round{
border-radius:10px;
padding:10px;
background-color:red;
}
</style>
<div class="round">Rounded Corners</div>
Here is a helpful site that talks all about the CSS3 Border Radius: http://www.css3.info/preview/rounded-border/.
Related
I have a setup like the following:
http://jsbin.com/hevidoya/2/
As you can see, the lots of stuff text is wrapping, as it seems to be pressing up against the edge of its parent. I want the inner div to be able to breathe and have the content inside fill its container. I'm not sure how to resolve this, but I always thought that an absolutely positioned element broke the box model and wouldn't behave like this. Since the parent is relative, it would start its position relative to the parent, but the width would be able to extend off outside of its parents container. The more I decrease the left value, the better the box behaviors, but it is off center from where I want it to be. I also looked at bootstraps CSS code for doing dropdowns, and I think I'm doing pretty much the same thing.
Can anyone explain how to fix this, and perhaps explain why this is occurring?
You could use the white-space : nowrap css
<div style="position: absolute; top: 20px; left: 50px; white-space:nowrap;">
<p>lots of stuff</p>
</div>
This will prevent the logic wrapping (line-break) of your content because the div is contained inside its parent.
You need to set a width property on the absolute positioned element.
width: 100%
I'm using this code on Chrome and ie :
<div id="infobox_mainpic" class="DetailsMainPic" align="center" valign="middle">
<img src="pictures/3a8ca06d8d51e76243f3d4efdc710d72.jpg" onerror="this.src='css/noload.png';">
<div class="mainPicArrowLeftDetails" onclick="return NextPic(this,-1);"></div>
<div class="mainPicArrowRightDetails" onclick="return NextPic(this,1);"></div>
</div>
the main div (infobox_mainpic) has fixed dimension 600px*450px.
My purpose is to center vertically and horizontally the img inside. Note that all image can't be wider than 600px and higher than 450px (i have a treatement).
The two div "mainpic..." are supposed to be position absolutely from the top of the main div like on this picture
To achieve this, I used on the infobox_mainpic
display : table-cell;
vertical-align : middle;
text-align:center;
position : relative;
And on the arrows, i use
position : absolute;
top : 130px;
This works on Chrome and IE.
The problem is that position relative doesn't work on Firefox. I tried to wrap everything inside a div and apply the position : relative but now, the arrows are not starting from the top of the main div but from the top of the image. If I set width and height to 100% for the wrapper div , then the image is not vertically aligned...
Do you see a solution ?
After some tests, I have found a solution.
instead of putting the div wrapper inside infobox_mainpic, I put infobox_mainpic inside a a div with a relative position. This way, the arrows are correctly positioned and the img is still inside the table-cell div so it is correctly centered.
This works on Chrome and IE. The problem is that position relative doesn't work on Firefox.
I think that's because firefox is still following the CSS 2.1 specs for this,
"The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined."
Although that has changed in CSS 3, it seems it's still to early to rely on that.
use display:inline-block instead table-cell. relative positionning will not bug anymore.
Set line-height equal to height of your boxe and img as vertical-align:middle;
arrows could be standing outside the box. inline-block as well and vertical-align:middle; so they stand aside and at middle center of the box.At this point , position:absolute is not necessarry anymore.
demo http://codepen.io/gcyrillus/pen/iAlms
going offline
For example: http://jsfiddle.net/MYvYy/182/
I have a lot of 'inner_box' elements inside of 'outer_box'. Inner_box elements a absolute.
I would like to adjust the outer_box height so that all inner_box elements fit in the outer_box.
I know it can be done with js. But I don't really like adjusting style with scripts.
So I was wondering if it is possible to be done using CSS?
I have some workaround for this problem, it may not fit your situation but consider looking at it.
First of all we need to duplicate all absolute positioned div which you want to make the parent extend to its height.
So your HTML will look like this.
<div class="outer_box">
<div class="inner_box">1</div>
<div class="inner_box ghost">1</div>
</div>
Then we need to add the "ghost div" CSS like so:
.inner_box.ghost{
visibility: hidden;
width: 100%;
top: 0;
left: 0;
position: relative;
}
It's not possible with CSS alone.
Layout flow:
An element with position:absolute is outside of the layout flow of the rest of the page. As far as the relative parent is concerned, the absolute child occupies no space in the layout.
This is very useful if you need to have a pop-up or a nav menu nested inside a container, because it won't affect the layout of the container. That's the sort of use case that position:absolute is well-suited for.
Fixed height:
If you need absolute content to behave as if it's a part of the layout flow, use fixed height. Give the relative parent and the absolute child a fixed height, and avoid placing any variable-height child elements before the absolute child. If variable-height content does precede it, use a relative placeholder div with a fixed height at the location where the absolute child needs to appear.
If position:absolute has to be used and fixed height is not an option, use JavaScript.
I only can provide you with Javscript fix for this using jQuery lib.
let me know if you use it or not,
$('.outer_box').height($('.inner_box').outerHeight());
This line will fix the outer_box height
I have tried the Fixed height method, but on small screens it is overlapping. So I have solved this problem by setting overlay background layer to seperate division and content to another division.
<div style="position:relative; background-color: blue; background-image:url('banner.png'); background-size:cover; background-position: center top;">
<div style="position:absolute; top:0; bottom:0; left:0; right:0; z-index:1; background-color:#00000099;"></div>
<div style="position:relative;z-index:2;"><h1 style="color:#fff;">Hello</h1></div>
</div>
I have uploaded the code on Codepen: https://codepen.io/shahbaz8x/pen/GRjEBze
I fixed it by changing the position property of div.inner_box into
position:relative
if this is not what you'r looking for, or this didn't fix it, then you will have to use Javascript.
I'm trying to add caption of images on top of the image. These images should be floating in a grid-like system (without an fixed height!) like in the fiddle I made over here http://jsfiddle.net/thomasjonas/GzjuM/3/
You can already see te problem... Because of the absolute positioning of the title and image inside the relative item div, the relative item div doesn't get the appropriate height, but just the height of the border... How can I fix this? I have looked for answers everywhere, but most of the time the problems of others are solved using a different approach. The only other approach I know for my problem is using an image as a background for a div, but then I need to know the width and height of my image... What is the best solution for this problem?
Don't position the images absolute. Instead render the <div class="image"> elements as block (using display:block if you changed your div style somewhere) and set up a margin instead of fiddling with absolute positioning:
.item .image{
display:block;
margin-top: 1em;
margin-left: 1em;
}
JSFiddle
I have a problem positioning a DIV with Chrome on this page. When I enter text into the red DIV it moves it down (doesn't occur in Firefox).
This shows how it was before putting why into the red DIV.
The height of the boxes is not being considered for vertical alignment (perhaps because the height is applied by the id and the display:inline-block is being applies by a class?). To solve this just add vertical-align:top; to your .box class.
BTW, since the heights are all the same, it might be easier to just put these in a container div to control the width and use float:left;