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.
Related
I am trying to understand if (and how) you can use the em measurement for CSS properties that set the width and height of elements for an elastic design layout (width, height, min-width, min-height, max-width and max-height). The problem relates to the layout position of the main wrapper. I don't understand when, and how you should use the em measurement for width and height properties when designing my layout (not for sizing). If I, for example, want the width of the main wrapper to be 90 % of the body-element, how can I achieve that using em instead of %?
I have searched Stack Overflow for similar questions, but the answers include things like responsive design, JavaScript and JQuery. I can only use HTML5 and CSS3. I have also tried to set the width and height using different values for em, but then main wrapper does not stay centered or exceeds the screen size.
Here is a code snippet of what I have tried. The full code is available on JSFiddle
<div id="page">
<header>
<nav></nav>
</header>
<div id="content">
<article></article>
<article></article>
</div>
<aside></aside>
<footer></footer>
</div>
#page {
position: relative;
width: 90em;
height: 90em;
top: 1em;
right: 1em;
bottom: 1em;
left: 1em;
}
The code above makes the main wrapper exceed the screen size, both vertically and horizontally. I want the results to equal that of using 90 % instead of 90em for width and height.
em measurements are based on font-size
What you will need to use is either % or vw (viewport units)
I would recommend using % as vw/vh can have some strange bugs on mobile safari:
100% is not always the same as 100vh when there is an address bar showing.
100% will shrink the content to fit when an address bar shows
100vh won't so your content might appear under the address bar
Keeping the w/h:auto resizable ability of an img when its parent is set to display:table and the parent's w/h is not 100%? It seems obvious that if the parent's w/h is not set then its child's w/h:auto makes not much sense. My point is, I want to keep the "resizable ability" of an img if it is inside figure/img/figcaption. Description of the problem:
Big images in a gallery we may want to resize to fit the window size if bigger. If it is just an image it can be done easily setting the image's w/h to auto (and maxw/maxh to 100%), with adding margin:auto we get it even nicely centered. But how to achieve the same with figure/img/figcaption altogether? As we want the figcaption's width to match the width of the image dynamically on the fly (not in px) we need to set figcaption display:table-caption (plus caption-side:bottom) and figure display:table. But once we set the figure display:table and its w/h is not set (or is set to auto, otherwise figcaption width will not match the img's), image w/h:auto don't work any more (not much surprisingly) and we get a not desirable 100% of w/h of the img (will not fit into the window if bigger). Is there any CSS only solution how to keep w/h:auto of the img or somehow achieve the same resizable ability if it is inside figure/img/figcaption?
There are many great approaches out there of how to center or resize elements or images, for example here <codepen.io/shshaw/full/gEiDt> or here <codepen.io/dimsemenov/pen/jhsJL>, but these and many more elsewhere don't work with a set of figure/img/figcaption (or I was unable to make it work). I am troubling myslef with it literally for days long with no clear answer.
In other words, what I need: A figure/img/figcaption set is centered altogether, they will resize if the image is bigger than window size, figcaption must match the width of the image width. All should be done with CSS and without setting anything in px.
So <img> and <figcaption> all go inside a <figure> element. All three are block elements.
You would just set the height and width of your <figure> element, then add a margin auto like you said.
Then set in your css:
img {
width: 100%;
height: auto;
}
figcaption {
text-align: center;
width:100%;
}
And now your image and your caption will always be the width of the figure element, the text will always be centered under the image, and the larger element will always be centered on the page.
EDIT: Adding 100% as a width or height to something means "100% of the parent element". So if you set a width/height for your figure element, the elements inside can be 100% and they won't break the element. Again, all three are block elements already, so you don't need to re-declare them as display: table-caption or whatever. Just use the strength of the block element as it is.
EDIT 2: OKAY. Here's what you need:
Set the figure to a specific height and width in CSS.
Then set the img and figure inside your fig caption to: width: 100%; height: auto;.
Your html looks like this:
<body>
<figure>
<img src="">
<figcaption>Some Text</figcaption>
</figure>
</body>
Now you need a media query in your CSS to handle the size of <figure>
#media screen and (max-width: 600px) {
figure {
width: /*Whatever width you want*/
height: /*Whatever height oyu want*/
}
}
Then repeat your media query for different break points.
If you still think I'm wrong, make a codepen or fiddle with an example and I'll help you from there.
EDIT 3
Here is a JSFiddle demonstrating that you can make a responsive image and element using relative measurements in % and maintaining the image centered to the things around it.
http://jsfiddle.net/o2rv4t9h/1/
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 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.
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>