I am showing a list of clients on a page and on the right side i have a calendar showing to schedule a new date for appoinment. When testing the output i found that if there are lot of clients coming on that day, the list exceeds the length of the container. What to do about this..
some code:
container:
#container {
background-color: #FFFFFF;
margin:0 auto;
min-height: 600px;
width: 900px;
border:0px solid #999999;
margin-top:30px;
font-size:15px;
color: #000000;
margin-bottom:60px;
position:absolute;
}
#calendar {
margin-left:400px;
}
Do you want #container to expand at all?
If not, change min-height to height, and add overflow:hidden;
An even better solution would be to modify whatever is supplying the data so that you only receive a pre-determined number of clients at any given time.
Use min-height. Example:
min-height: 300px;
If you specify this style, the element will be 300px high, or tall enough to contain its contents - whichever is higher.
(Note that not all web browsers work with min-height.)
Is overflow: auto; what you're looking for? If the content exceeds the size of the container, it adds scroll bars.
Related
I have a situation kind of like this =>
https://codepen.io/anon/pen/pQpLqY
since my #sub-header-content has no fixed height and can grow when user interact, I would like to be able to not set the height of #sub-header-content manually, but make it automatically fit the child size.
#sub-header-content{
background-color:purple;
height:40px; // WANT TO REMOVE THIS
}
#sub-header-menu{
position:fixed;
height:40px;
width: 50px;
margin: auto;
background-color:green;
}
I did not understand perfectly what you wanted, but I think setting min-height: 40px would do the trick.
I'm currently learning web design and I was solving some sample problems online, there was one specific case when I was asked to:
Write a CSS rule that limits the width of the webpage to only half the size of the browser and centers it in the browser window.
Add a CSS rule, to the rule above , to display a green background color that fills all the browser window including the empty left and right sides.
For 2, I could use this:
body {
background-color: green;
}
But for 1, I couldn't do it. How do I get the size of the browser? It sounds confusing.
Set this CSS to your body-
body{
width:50%;
margin: 0 auto;
background-color: green;
overflow: hidden; //just in case if you don't want your any fixed width element crosses the body width.
}
All you have to do is set width: 50%;
Or if you want to set to maximum of 50%, use max-width: 50%;
To center, set margin-left: auto; and margin-right: auto;
this is very easy just one step you have to take try this
body {
width: 50%;
margin: 0 auto; //optional if you want your page in center
}
I am designing a fluid page which requires:
parent: 80% (of the screen)
container contains x number of images, width:10%, float left.
The container needs to be autosized as wide as the content, max-width is 50% of the parent.
I have tried different techniques to set display to inline-block, and attached the jsfiddle here. http://jsfiddle.net/7D9XS/
#parent
{
width: 80%;
}
#container {
max-width:50%;
border:solid 1px red;
display:inline-block;
}
.uploadItemPreviewThumbDiv
{
width: 20%;
margin: 10px;
background: cyan;
float:left;
}
.uploadItemPreviewThumbDiv img {
width:100%;
}
OK, Here you go...
.uploadItemPreviewThumbDiv
{
width: 70px;
margin: 10px;
background: cyan;
float:left;
}
JSFiddle!
Remember, the problem here was that the whole of the talk was going on in percentages.. and percentages tend to be one of the most unreliable things that you can come across while developing responsive designs, and on a side note, if I were you i'd use jquery plugins like Isotope or http://mixitup.io/
And Yeah, this is as far as i know, maybe someone could explain quiet better clearer..
Ok Let me try to put it this way...
This is sort of a paradox, where your conditions are..
You want your innerelements(content) to be of a certain percentage
width of the container.
But on the same time you dont want to specify what the width of the container would exactly be.
Because you want the container to be "autosized as wide as the content"
Which again brings us back to the 1st point.
It is like both the 'container' and the 'innerelements' are arguing over who should take the responsibility of being a specific width First, and each one is telling the other to attain a specific width, so that he himself can then adjust his own width based on that.
I want to divide my webpage horizontally in to 2 parts, my monitor layout is 1410 X 752, if I write css code like this
.left{
width:210px;
}
.right{
width:1200px;
}
it wont work correctly in other monitors and also when I zoom in/out the browser the page structure will be totally out of order I mean the left DIV moves down and it will be to under the right DIV !
I know I must use % but when zoom in/out the browser scroll bar doesn't appear, please check this address to see what I said. what shall I do ?
thanks.
First of all, you aren't telling your divs to go anywhere. They are just stacking themselves on-top of each other.
You do however have the correct start and methodology, though it should be modified to fit current best practices. Let me elaborate...
To make your code work you need to add a float property change your code to this:
.left{
float: left;
width:210px;
}
.right{
float: left; /* could also put "right" here as a value */
width:1200px;
}
Now with that said... a better option that will produce the same result is this:
.left{
display: inline-block;
width:210px;
}
.right{
display: inline-block;
width:1200px;
}
Let's go a step further.... While this will "work" it will look terrible on other peoples screens. What if my resolution is 1280x1024, which isn't as wide as yours. I'll have to scroll to the right to see your site. That will encourage people to LEAVE your site. We can fix this though...
.left{
display: inline-block;
width: 20%;
}
.right{
display: inline-block;
width: 80%;
}
Now, no matter how big your browser window is your divs will take up 80% of the right side of the screen, and 20% of the left side of the screen. NOTE This will depend on a good reset.css as the width of an element is by default does not include any padding, margin or border space. If you add a padding or margin or border, the above method will break. To get around that there are a few options. You can use % values for your padding and margins but that breaks if you add a border.
A common solution is to add this property to your css:
.left{
display: inline-block;
width: 20%;
box-sizing: border-box;
}
.right{
display: inline-block;
width: 80%;
box-sizing: border-box;
}
This will fix any padding or margin space issues mentioned above, but you still have to account for margin space. Let's say you want a 5% gutter between the two, then you need this code:
.left{
display: inline-block;
width: 20%;
box-sizing: border-box;
margin-right: 5%;
}
.right{
display: inline-block;
width: 75%;
box-sizing: border-box;
}
Notice how I subtracted 5% from the right column to incorporate the margin space. if you add it all up 20+5=25 25+75=100% 100% means it works, if its more than 100% it will break.
For additional reading so some research (google) Responsive Layout/Web Design.
Info on float property -> http://www.w3.org/wiki/CSS/Properties/float
Info on display property -> http://www.w3.org/wiki/CSS/Properties/display
Info on box-sizing property -> http://www.w3.org/TR/css3-ui/#box-sizing
A good resource to determine browser compatibility is http://caniuse.com/
You should be using % instead of px here is a simple example.
If you are using 1200 of a 1410 monitor then we use math to get the % relative to that width
(1200 * 100) / 1410 = 85% (more or less... the right answer will be 85.71428571428571 %, but really don't matter).
HTML
<div class="left"></div>
<div class="right"></div>
CSS
.left {
float: left;
width: 15%;
background: green;
height: 300px;
}
.right {
float: left;
width: 85%;
background: blue;
height: 300px;
}
Live example.
As everyone says , you should use percentage, cause your window browser will never do the size of your screen, unless it is set on full screen.
Then scrollbars might show up.
% percentage are quiet safe if you manage a little less than 100% all together (calculation from percentage dow to pixels, can add extra pixels).
Differents ways to build ypour layout can help to use pixels, as :
display: table-cell:
you need to set the size of the smallest in pixel and set others to 100% to shrink small one to its size.
float:
set float and width on first element. second element can remain in the flow with no size and overflow:hidden; to keep aside float element and use all space left.
If you need a fiddle to get the idea, ask.
I am trying to achieve a scrolling body with fixed header and fixed sidebar. I think I am almost there except that the body scrolls on top of the header. I wish I could simply increase the z-index of the header in relation to the body but this doesn't work since the header is mostly transparent.
Here is the site: link
Any ideas?
Thanks
Edit: I should clarify that I want the content to be invisible as it scrolls underneath the header, not simply as a layer beneath it.
Use the same background image for your body and header, but with background-position:fixed.
This way, the header will have opacity for the content to scroll beneath and be hidden. Using fixed position will ensure that the two images appear seamless.
On a side note, I am unable to view the entire sidebar on your site, you may want to reconsider using such a rigid layout.
Here is your code:
#thebody {
display:inline-block;
position:relative;
width:984px;
margin-left: 0px auto;
margin-right: 0px auto;
font-size:24px;
text-align:center;
height:100%;
z-index:-1;
}
#theheader {
display:inline-block;
font-size:26px;
width: 984px;
margin-left: 0px auto;
margin-right: 0px auto;
background-color:none;
clear:both;
}
The way z-indexs work is, anything to be included in the layering needs to also have an z-index set. So, in your code right now, only #thebody is set. Add this to #theheader:
#theheader {
display:inline-block;
font-size:26px;
width: 984px;
margin-left: 0px auto;
margin-right: 0px auto;
background-color:none;
clear:both;
z-index: 10; /* addition */
}
This places #theheader over the #thebody. Good luck, and let me know if you have questions.