If I set the size of a child element in percentage, the size will be calculated relative to parent's content-box, independently from the fact that I have set its box-sizing property to border-box.
So if I have something like this:
.parent {
box-sizing: border-box;
padding: 0 100px;
width: 600px;
}
.child {
width: 50%;
}
The width of .child will be 50% of 400px (parent's width after padding has been applied). You can see an example here: JSBin
Main Question
Is there a way to make the width of a child element relative to the
parent's border-box rather than the parent's content-box?
Bonus question
While making my example I noticed a weird behavior in the calculation of the size. Setting the .parent's padding as 0 10% actually gives a padding of 68-odd pixels from each side. Why is that? Isn't 10% of 600px 60px or I am missing something?
The width property is explicitly defined as being relative to the content box and box-sizing on the parent doesn't alter this however there is a trick available. What you need is a border that doesn't consume any space and thankfully that is exactly what the outline property does.
There is one catch: The outline defaults to being outside the content box. Not to worry though because one of outline's related properties outline-offset accepts negative values which will bring our outline inside our content box!
HTML
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="outer">
<div class="inner">
TEST
</div>
</div>
</body>
</html>
CSS
.outer {
position: relative;
width: 100px;
height: 100px;
outline:20px solid red;
border:1px solid black;
outline-offset: -20px;
}
.inner {
width: 50%;
height: 100%;
outline:1px solid yellow;
position: absolute; /* required so inner is drawn _above_ the outer outline */
background-color: blue;
}
JS Bin: http://jsbin.com/efUBOsU/1/
With regards to your "bonus question" percentage widths are based on the container size, not the element size. This is true for width, padding and margin. You're getting a padding of 68px because the container is is 680px. This may seem odd but it comes in very handy when you have a rule like {width: 80%; padding: 10%;} because it guarantees your total object dimensions will be 100% of the container and not some arbitrary value based on your child elements' content.
Note: In future please ask additional questions seperately, especially when they are only marginally related to your primary question.
Related
The following responsive css grid code produces cells with mismatched sizes. I can't for the life of me figure out how this is possible.
#service-icons {
display: grid;
margin-top: 3rem;
margin-bottom: 3rem;
grid-gap: 2rem;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
justify-items: center;
align-items: center;
}
.service-icon {
position: relative;
display: inline-block;
margin: 1rem;
margin-bottom: 0;
}
The page in question can be found here. (Be sure to shrink the browser window to ensure use of mobile styling.)
Here is a screenshot showing the erroneous result:
As per Zohir's comment under the question, the mismatched sizes can be accounted for by the different widths of the text elements. The larger text size pushes the grid cell size beyond its minimum. Allowing the text element to overflow within a new parent element fixed the problem in practice.
I was trying to build myself a portfolio site. When I thought I was about to finish building the basic template, the margin and media queries stuff totally drove me crazy.
Here is my temporarily hosted domain, www.kenlyxu.com/portfolio_new
I made the pages fit to whatever browser size by using
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
I'm trying to make 10px margin on all side and on every page so that I use this container.
#thecontainer {
margin: 10px;
background-color: #f29e28;
height: 100%;
width: 100%;
}
#workcontainer {
margin: 10px;
background-color: #f29e28;
width: 100%;
}
I hope the end result would be like orange background with white margins on all sides. When seeing my site on the desktop, the margin-right and margin-bottom not showing. They only show when I use width: 98.5%;
Also, the orange background color should expand according to the size of browser. On the iPhone 5 portrait view, the orange background does not extent the bottom part. I tried to use some standard media queries for it, but I don't know what values should I give to each of the mobile devices.
Try
Position:fixed;
in
# thethecontainer
now your code looks like
#thecontainer {
margin: 10px;
background-color: #f29e28;
height: 98%;
position:fixed;
width: 98.5%;
}
I am trying to set a height to be relative to the size of the screen (height = 12%), but I don't want it to exceed a certain pixel height (i.e. max-height: 150px). What is the proper css for this. I have tried:
.titleBar {
position: relative;
background-color: #5C755E;
padding: 1%;
height: 12%;
max-height: 100px;
border-bottom: .45em solid #DEB887;
top:0;
left:0;
width: 100%;
}
but this ignores the max-height property. On my large desktop screen the titlebar becomes 200px (much too big).
You need to use min-height instead of height. Height overrides min and max height unless set to auto. Combination of height and min-height (unless height:auto) ignores min/max height.
This should work.
.titleBar {
position: relative;
background-color: #5C755E;
padding: 1%;
min-height: 12%;
max-height: 100px;
border-bottom: .45em solid #DEB887;
top:0;
left:0;
width: 100%;
}
You need to add a height to your parent element, if you have one. So if you add a height to the parent element of 432px, the div will now be at a height of 36px.
Also, a few notes.
You should choose to use either ems or pixels. Don't use both.
If you add the property border-box to the element, the width will show up as 100% of the page, not 100% of the page, and then add the padding, so it turns out to be slightly more.
You might want to add a min-height also.
Hope this helps!
I am using 2 regions with 1 region display selector to create some tab functionality between regions. See the following as an example: http://apex.oracle.com/pls/apex/f?p=19914:30 I used the following to remove the 'Show All' button http://apexplained.wordpress.com/2012/07/16/hide-the-show-all-tab-in-a-region-selector/
Mine looks the same as the example above however it doesnt have the rounded corners on the region display selector.
I wondered how you can apply the rounded corners to the display selector, increase the font size and height of the region display selector?
I've tried style="" in the 'Region Attributes' of the Region display selector but no luck. When investigating my page in Firefox using Firebug the display selector is held in a DIV / in an UL list but i wouldnt know how to access those in the APEX builder.
The region display selector has rounded corners when using Chrome, but not in Internet Explorer.
Please could i have some help with my problem.
Oracle Version: Oracle version 10.2.0.4.0
Full APEX version: Application Express 4.1.1.00.23
Browser(s) and version(s) used: Internet Explorer 7 & 8
Theme: Simple Red
Template(s): The standard templates with the Simple Red theme.
Region/item type(s): 3 HTML pages each holding text box fields.
Thank you.
See example below of region display selector:
Example of region selector html from Simple Red theme
<div class="apex-rds-container">
<ul class="apex-rds" id="485041125812774413_RDS">
<li class="apex-rds-first">
<span>Show All</span>
</li>
<li class="apex-rds-selected">
<span>datepicker</span>
</li>
<li class="apex-rds-last">
<span>region 2</span>
</li>
</ul>
</div>
inspect style tab for
DIV
.apex-rds-container {
height: 40px;
margin: 0 0 9px;
}
UL
ul.apex-rds {
background: url("../images/bg-anchor-nc.gif") repeat-x scroll 0 0 transparent;
border: 1px solid #999999;
border-radius: 8px 8px 8px 8px;
box-shadow: 1px 2px 2px #AAAAAA;
float: left;
list-style-type: none;
margin: 0;
}
LI
ul.apex-rds li {
float: left;
list-style: none outside none;
}
A
ul.apex-rds li.apex-rds-first a {
border-left: 0 solid #000000;
}
ul.apex-rds li a {
border-left: 1px solid #FFFFFF;
border-right: 1px solid #999999;
display: block;
height: 16px;
padding: 1px 10px 0;
text-decoration: none;
}
a {
color: #660000;
}
SPAN
ul.apex-rds li span {
color: #000000;
font-size: 11px;
}
So, this shows that a background image is used for the UL. This image's dimensions are 1x18px according to firebug. Hovering over an item will set a different background image, as will a current region selection.
So, if you want a larger selection, use a larger image. Increase the div height. Set the correct styles for current/non-current items.
To increase font size, alter the css for the SPAN.
Borders are done with border-radius: 8px 8px 8px 8px; which don't work in IE.
All css can be found in the theme css file in your apex_images folder: /i/themes/theme1/css/theme_4_0.css
Go to line 1316,
/* -------------------- Region Display Selector -------------------- */
You can find everything you need there.
Don't mess in that file though. If you will, make a backup. Work clean and override properly within a css of your own!
I have a standard CSS menu, made with UL and LI tags. I need them to get to cover the whole page, horizontally (not my real case, but I'll take this to simplify the situation). However, the items are created dynamically and so I'm not able to hardcode any with to LI items, nor margins.
I've seen solutions using JavaScript to set those values but I would really love to avoid them.
Lastly, I've seen a pretty good solution which is setting
#menu {
width: 100%;
/* etc */
}
#menu ul {
display: table;
}
#menu ul li {
display: table-cell;
}
This will create the desired behavior in most browsers... except for IE.
Any ideas?
EDIT: Thanks for the responses. However, as the code that generates the items isn't mine, I'm not able to set inline styles when creating them without using JavaScript later.
You can't set the height or width of an inline element. http://www.w3.org/TR/CSS2/visudet.html#inline-width
Try display:inline-block;
here is the fix for ie:
display:inline-block;
zoom:1;
*display:inline;
If you want to let the element get the whole available space, there is no need to define a priori the width of the menu elements (of course, it will help in equally sizing the li elements). You can solve this problem by working on the display property.
#menu{
display: table;
width: 100%;
}
#menu > ul {
display: table-row;
width: 100%;
}
#menu > ul >li {
display: table-cell;
width:1%
}
Note that width:1% is required to avoid cell collapsing.
If your menu items are being dynamically generated (so you don't know how many there will be prior) then you can add a style="width:xx" attribute to the lis (or in <style> at the top... or where ever you please, really). Where xx should either by width_of_parent_div_in_px/number_of_elements+'px', or 100/number_of_elements+'%'. The lis should also be block-level elements, and floated left.
#menu ul li {
float: left;
clear: none;
display: inline;
padding: 10px;
height: 25px; //how tall you want them to be
width: 18%; //you will need to set the width so that all the li's can fit on the same line.
}
The width: 18% may be about right if you have 5 elements across, accounting for border and padding. But it will vary due to how many elements you have, how much padding, etc.
If you are open to using Flexbox then it isn't hard to do. Full credit for the code I am about to post goes to CSS Tricks as this is their CSS.
Below is an example that includes vendor prefixes.
#menu{
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;
}
<ul id="menu">
<li>Home</li>
<li>Store</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
The only issue with Flexbox is if you need to support IE 9 and below, otherwise, I see no reason to not use Flexbox. You can view browser support for Flexbox here.
Here's what worked for me:
#menu{
height:31px;
width:930px;
margin:0 auto;
padding:3px 0px 0px 90px;
color:#FFF;
font-size:11px;
}
#menu ul{
display:inline;
width:930px;
margin: 0 auto;
}
#menu ul li{
list-style:none;
padding:0px 0px 0px 0px;
display:inline;
float:left;
width:155px;
}