I want a top margin for my webpage of say 100px when the window is maximised, but if the user resizes the window to shrink it I want this margin to shrink. The margin should have a minimum size of say 10px and should shrink in proportion to the window height.
An example if what I am trying to emulate is http://www.bing.com/
How would I go about implementing this in CSS? I'm stuggling with min-height, min-width, height and width at the moment.
Thanks.
Without seeing some code, it's difficult to give a great suggestion. But, you can style the html and body to be 100% height which should actually conform to the height of the viewable portion of the browser:
html, body{ margin:0; padding:0; height:100%; }
From there, you can add a div directly into the body and give that a height that is a percentage:
#push{ height: 15%; }
Your body html would look something like:
<body>
<div id="push"></div>
<div>
asdf asdf
</div>
</body>
When the body height changes, so will the push height. You may need to tweak that number to get it to your liking. You can also give the push a min-height, but that is not supported in IE6. Also, that 100% html / body could give you trouble later depending on how you're doing your footer and things, so beware and good luck.
Related
I have a div that needs to be full screen width inside a parent div that has a limited with. Simplified, it's something like:
HTML:
<div class="container">
<div class="banner">
</div>
</div>
CSS:
.container {
width: 1170px;
margin: auto;
}
.banner {
width: 100vw;
margin-left: calc( 50% - 50vw);
}
which works fine, except for one thing: The scrollbar on the page covers some of the content in the child div, because 100vw appearantly includes the scrollbar width. So is there a way around this so I can set the width to (100vw - scrollbar width), or perhaps a completely different way to achieve what I want to do with pure CSS?
Try to use % where you can. vw is a percent of the viewport width including the scrollbar and % is a percent of the wrapper object, where the body is not rendered inside the scrollbar.
Don't use a fixed width (px) container. It's bad practice and will not render well on mobile screens. See Responsive Web Design for more.
Don't use vw for containers (or banners). It has weird effects on the scrollbar.
Finally, I don't understand why you want something to be at 300vw or 3x the width of the viewport, but sure. If you designed your page right with responsive web design and avoided setting any wrapper's dimensions with px, then it shouldn't be hard to know what that width of the containing div is. For example, if the wrapper (containing div) is at 30% of the viewport and you want your banner to be 300% of the viewport, then you want 1000% for your banner to span the width of three screens.
You could set the scrollbar width and subtract it from the container's width using 'pure CSS'.
You could give width to the scroll bar in webkit-browsers using:
body::-webkit-scrollbar {
width: scrollbarwidthpx;
}
and set the content width as:
width: calc(100vw - scrollbarwidthpx);
You could make use of this article regarding customizing scrollbar
In CSS, I've never really understood why this happens but whenever I assign something a margin-top:50%, the element gets pushed down to the bottom of the page, almost completely off the page. I would assume with 50%, the element would be halfway down the page.
That also happens with setting the width and height attributes of elements. If I set the width of a div to 100%, the right side of the div goes off the viewable screen and I have to scroll to see it.
Why does that happen and is there a way to fix it?
EDIT:
Here's my css code. I'm also using bootstrap but this is an issue I've noticed outside of bootstrap.
html{
height:100%;
min-height: 100%;
min-width: 100%;
}
#button_container{
width:100%;
clear:both;
margin:0 auto;
margin-top: 25%;
}
#donate_section, #contrib_section{
display:inline;
}
#contrib_section{
float:right;
}
Boiler plate HTML markup:
<body>
<div id="someid">
<div>
<a></a>
</div>
<div>
<a></a>
</div>
</div>
</body>
Read this, and then read it again: http://www.w3schools.com/css/css_boxmodel.asp
Your 'width' setting is setting only the content section - so your total width is content+margin+padding+border. So if width=50%, you really have more like 55% or so after all that (with normal, smallish margins/padding/border). If you want your div to externally take up only 50%, you need to have a no-padding/margin/border div that's 50% outside it, or any number of other solutions.
You also probably are dealing with the fact that browser rendering isn't perfect. If you want to avoid scrolling, you in general shouldn't use 100% of the width. (This is also good "Web 2.0" design, if you follow that school - you should have white space on both sides from a usability/readability standpoint).
Edit: Also, your % is relative to width, not height. See for instance, CSS fluid layout: margin-top based on percentage grows when container width increases .
The reference is often "relative" to the parent element. Unless you are speaking about the first child of the body tag.
I have a header DIV which is 1400px wide and contains a background image which must always stay centered.
I have a site that needs to be 960px wide.
When I resize the browser (shrink it), I don't want any horizontal scrollbars until we hit 960px, but the larger width on the header/background is causing this.
Is it possible to stop all horizontal scrollbars on resize until 960px AND keep the background image in the header div centered??
Any help appreciated! Some code I set up here here for a quick test...
http://jsfiddle.net/gVuvk
The background image has a width of 1400px. I need the scrollbars to start at 960px - NOT 1400px. Is this possible?
change #header width from fixed pixels to 100%
Demo: http://jsfiddle.net/wNSTD/3/
Try fiddling with min-width, if that does not work, use margins, css auto-margins can be useful here. So, make the structure like this:
<style>
.center_image
{
margin: auto auto; // or you can modify the x or y seperately
background-image:url("somesite.jpg");
}
</style>
<div class="outer">
<div class="center_image">
Set the width of header to 100% and center the background image.
background: url(http://fade.com.au/test/bg-image.jpg) no-repeat center center;
width: 100%;
Demo: http://jsfiddle.net/post_erasmus/Hn6Zb/1/
Yesterday I asked the question How to make text vertically and horizontally center in an HTML page, regarding a way to center text in the middle of a page (vertical and horizontal).
The solution works fine, but now I want to increase the text size, but the problem is that I do not want to use the 'px' like unit measure, because is a static way and could not adapt to all screen sizes.
I therefore want to use the percentage unit measure for text.
HTML code:
<body>
<div class="my-block">
WORD1<br />
WORDWORDWORDWORD2
</div>
</body>
The difficulty I am facing is with the height of the <div />. I cannot put the height of the div equal to the height of the body, the width is equal because the div is a block element, but how I put the height of the div equal to the height of the body?
I already tried to put the padding and margin as 0 and the height to 100% but nothing works.
Can anyone help me?
I think this is what you need :
<style type="text/css">
html {height: 100%;}
body {margin: 0;padding: 0;height: 100%;}
.my-block {height:100%;}
</style>
See it in action : 100% height
However if you want to "adapt" your text "to all screen sizes" there is a catch. Percentage and EM units used with font-size do exactly the same (at least in theory, although % are better in terms of compatibility) - they scale text based on its actual size in pixels. In other words font-size:xx% does not scale text based on its container height or width but based on current text size.
See css font units
You could achieve what you want by using javascript. However I recommend you not do it. Let user decide if he needs magnification/zoom.
Cheers!
It works, but the problem is that the body isn't filling the height of the viewport. Add this as well:
html,body{
margin: 0;
padding: 0;
height: 100%;
}
jsFiddle with your original code.
I have a centered div on my site, using a fixed width and margin:0 auto;
All looks fine in IE, but on FF, for the pages with long content, only the top part of the div has the proper div color, and the rest has the body background color.
what I'm doing wrong?
many thx
Without seeing your code it's hard to tell, but my bet is that you've set the div height to %100, which means 100% of the viewport.
It will not stretch beyond that, even if the content is long enough. This is the correct behaviour.
To make it the full scree height when there's not enough content, and go beyond the viewport height when there's more than enough content, you'll need to use two divs.
Here's an example I've hosted:
Div height 100% fix
If you know the width (i.e:600px) and height of the div you can use the following.
I center divs in one direction using 3 parameters:
Horizontal:
<div class='hcnt'>Some H Centered Text</div>
CSS:
.hcnt{
left-margin:50%;
width:600px;
left:-300px;
}
Vertical:
<div class='vcnt'>Some V Centered Text</div>
CSS:
.vcnt{
top-margin:50%;
height:400px;
top:-200px;
}
Both:
<div class='hcnt vcnt'>Some completely Centered Text</div>