I'm creating a responsive website based on this article
link
but I added this code for screens more than 980 px width
/* for more than 980px */
#media screen and (min-width: 981px)
{
#pagewrap {
width: 94%;
}
#content {
width: 20%;
}
#middle {
width: 50%;
}
#sidebar {
width: 20%;
}
}
you can see the result in codepen
link
when I set width of #middle 50% or 49%
and resize browser width to somthing near 990px
3rd Content Area goes at the bottom of two other area
but when set width to 48% its ok, I mean now 3 area are next to each other
but now another problem arises.
when browser size is something near 1395 px (my laptop)
theres a 53px Gap between 3rd Content Area and wrapper border like below (I dont want that gap)
any suggestion?
What you're running into are box-model issues. You see, you have widths set, but also margins and paddings and borders that are all messing with the actual, calculated width of your boxes. Worse, even, those margins/paddings/borders are defined in pixels while your widths you've done so in percentages.
To achieve what you want, you should use a border-box box model.
#content, #middle, #sidebar {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Now, when you say width:50%; that means "make my boxes' width 50%, including any padding and borders" (note, not margins).
Using border-box to layout your columns should help you immensely, but it will require you to change the calculations.
Related
This is what I want
If browser is bigger than 900px I want the boxes to be 700px.
Once the browser width is smaller than 900px I want the boxes to be 600px.
#media screen and (min-width : 750px) and (max-width : 900px) {
.multiSelect .checkboxLayer {
width: 600px;
}
}
#media screen and (min-width: 900px) {
.multiSelect .checkboxLayer {
width: 700px;
}
}
My question is, how come the browser width splits around 932px and not 900px?
What units are these if not pixels?
I just tried to measure the browser width with photoshop and it splits at 975 px exactly.
So CSS says 900 px, Chrome says 932 px and photoshop says 975 px
This is really confusing?!?!
The short answer:
You have not reset the box-sizing property for the parent container.
The long answer:
Consider this:
In CSS, by default, the width and height you assign to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen.
There are two values in box-sizing that you should know about
content-box
[...] the default, and gives you the default CSS box-sizing behavior. If you
set an element's width to 100 pixels, then the element's content box
will be 100 pixels wide, and the width of any border or padding will
be added to the final rendered width.
border-box
[...] tells the browser to account for any border and padding in the
value you specify for width and height. If you set an element's width
to 100 pixels, that 100 pixels will include any border or padding you
added, and the content box will shrink to absorb that extra width.
This typically makes it much easier to size elements.
I usually start any CSS sheet with the following to avoid such issues
* {
box-sizing: border-box;
padding: 0;
margin: 0
}
There are many frameworks that reset more of the default properties such as normalize.css but I often don't have the need to use them.
I set up a demo below. There are two div elements. There is also a media query.
Both elements have the same fixed width in px. The only difference is the value for the box-sizing
The first is set to border-box and the second is set to content-box
div {
width: 400px;
height: 400px;
margin: 3em;
text-align: center;
background: darkred;
border: 20px solid #131418
}
#media (max-width: 800px) {
div {
background: darkgreen;
width: 300px;
}
}
.first {
box-sizing: border-box
}
.second {
box-sizing: content-box
}
<div class="first"></div>
<div class="second"></div>
Notice how they render with different sizes even when the width for both is the same?
Scroll bar width is 17px on most browsers, and does not contribute to the screen width. Try using Firefox's responsive design mode, in the dev tools.
I'm currently working on a project where we use a slider with images. This slider is displayed with width 100%, and currently we're adjusting the height to make the slider responsive, in case the user resizes the browser window or visits the website using their phone.
However, the website is for an artist who obviously does not want the image to be altered in any way, especially not altering with the aspect ratio. So what we're looking into is having height: auto to adjust the image height correctly according to the width: 100%, without altering the image (aspect ratio) itself.
This does not work like intended however, using the following code:
#media (min-width:1600px) {
#header{
height:auto;
width: 100%;
min-height: 630px;
background-size: 100% auto;
}
#slidershadow {
height: 630px;
}
}
We need to have some min-height, otherwise we cannot display the slider controls correctly. Here is a picture of our current situation (first image) and the expected behaviour (second picture).
Is there a way to resize our slider responsive, but keeping the following in mind:
The aspect ratio of the image cannot be altered;
We cannot crop images too much (only slightly);
There is a minimum height to keep in mind;
If it helps, all images in the slider have the same size.
You have to give a max-width:100% to your img.
Plus background-size only works when you are working with background-images.
Since you are applying max-width to your img there is no need to apply max-width to its parent #header
Last, but not least try not use min-height and height:auto at same time in the same selector.
Below is a working snippet according to the above comments:
img {
max-width: 100%;
height: auto
}
#media (min-width: 1280px) {
#header {
min-height: 500px;
}
}
#media (min-width: 1600px) {
#header {
min-height: 630px;
}
}
<div id="header">
<img src="http://placehold.it/1920x630" />
</div>
I've created a really simple modal that allows the content to decrease or expand without running off the page - always leaving 10% margin on the top and bottom. When the page isn't tall enough to contain all the modal content, the entire modal becomes scrollable.
See jsfiddle here
Is it possible, using only CSS, to replicate this behavior but only have the modal body be scrollable, so the header is always fixed. I've tried a few things, but haven't come up with the solution yet. Making the header position: fixed almost works, I have to reposition it over the modal box and then try to add padding to the body so the content is visible under the header, which doesn't budge the scrollbars down. I always prefer to exhaust all the css alternatives before I bind some js to window resize and manually manipulate the body height.
This might be late, but I had to solve a similar issue of fixed header, fluid height, fluid width.
This is how I tackled the issue:
Give your elements a border-box box-sizing. Use a wrapper to center and create a bounding box. This can be a fluid one with min-width and max-width + percentages.
Give your content element an overflow-y of auto and a max-height of 100%;
Use box-sizing:border-box;
The complete code should be something like this:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.modal {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
}
.wrap {
position: relative;
margin: 0 auto;
display: block;
width: 90%;
/* Change the max-width value on a media query breakpoint to make this example more "responsive" */
max-width: 500px;
height: 90%;
padding: 30px;
}
.modal header {
height: 30px;
padding: 0;
color: #FFF;
background-color: #007;
}
.modal .body {
background-color: #FFF;
max-height: 100%;
overflow-y: auto;
}
http://jsfiddle.net/mariomc/EhR7r/
Applying the max-height and overflow-y settings to .body rather than to .wrap...?
Edit 1:
Nothing's turned up so far within the constraints, which suggests either JavaScript or straying from the constraints (using % for the header height or px margins).
Edit 2:
Here's an initial demo using % for the header height. I added a px min-height to the header tag to prevent the header from almost disappearing on very small screens, at the expense of the top margin (which is reduced on very small screens).
On a screen >= 400px tall, it should work exactly as per the requirements (40px header with 10% height). If the header were reduced in height, it would support slightly-smaller screens (a 30px header with 10% height would support >= 300px screens). Here's a demo with a 30px header.
It's a clumsy solution, but it's the only one that turned up without using JavaScript.
Also, note that I added an h2 and a .content tag and moved the padding:10px; there, to avoid combining % height and padding in the same elements (which leads to a taller height than the % value specified).
on my css code I set the background-image:url with
height:100%;
but as a result, the range that the 100% capture is only the size of the screen.
if the page have a scroll, all the page line needed to be scroll doesn't appear to have those background.
Any suggestions?
NOTE: my element size changes dynamically.
body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}
This is, because 100% means 100% of your parent element. First of all, make sure your document is actually 100% of your browser window.
html, body {
width: 100%;
height: auto !important;
height: 100%; /* for older browsers */
min-height: 100%;
}
In this example, http://jsfiddle.net/mnXH9/, the height of the content-display element and the height of the nav-menu-container are fixed.
How do I make the height of the content-display and nav-menu-container elements extend to the remaining height of the browser window as the browser height is being adjusted by a user provided the height in the browser window is greater than 400px (The height of the header plus the nav-menu-container)?
I would like for the scrollbar to be inside the nav-menu-content element if the total height in the browser is greater than the sum of the height of the header (100px) and the nav-menu-container element (300px).
If the browser window's height is less than 400px then a scrollbar would appear in the browser window to allow scrolling throughout the 100px header and the 300px min-height of the below elements.
EDIT
Attached are photoshopped mockups of what the jsfiddle should look like.
tab 1 when the browser height is less than 400px
tab 1 when the browser height is greater than 400px
tab 2 when the browser height is less than 400px
tab 2 when the browser height is greater than 400px
EDIT
tab 2 of http://jsfiddle.net/mnXH9/25/show/
EDIT--switched fiddle versions to one working better based off comments and noted IE8.
View a full screen version here (view css here). This uses #media queries and some other CSS3, so it will not work on older browsers, but I believe it does exactly what you requested. I reset the two columns to be position: absolute to achieve this. Some javascript to check for height could be used to fix older browsers if necessary.
IE8 (if you care) needs to also have the overflow: auto set on the #tabs (I removed it from that to the .panel inside for better effects on other browsers).
You could use faux columns to accomplish equivalent height on tab container and right nav - would be simpler than mocking around with manual height settings. That would also make them appear to extend to the entire browser height.
<style>
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {margin:auto; height:100%; width: 500px;}
#header {top:0px;background-color: pink; height:100px; border-bottom: none; z-index:50}
#content-display {position:relative; width: 300px; height:100%; float: left; z-index:-1;}
#nav-menu-container {position:relative; bottom:43px;padding-top:50px;left:300px; width:200px; height:100%; background:lightblue; z-index:-1;}
#nav-menu-content { width: 100px; margin-left:50px; margin-top:43px;height:300px; background:greenyellow;}
#tabs ul li a {font-family: Arial,Helvetica,Verdana,sans-serif; font-size: 13px;} /*Tab title text*/
#tabs {height:100%;}
.panel{height:218px; overflow: auto;}
</style>