Resize text based on div resizing? - html

To start things off, here is my code:
.header{
width: 100%;
height: 10%;
background-color: #FF4545;
}
.headertext{
font-family: 'Duru Sans', sans-serif;
font-size: 65px;
float:left;
margin-top: 0px;
margin-bottom: 0px;
}
.headermenu{
font-family: 'Duru Sans', sans-serif;
font-size: 65px;
float: right;
margin-top: 0px;
margin-bottom: 0px;
}
So both the .headertext and the .headermenu are html p statements that are embedded within the .header div. Now, the .header div has a bg color. When I resize my window, the div resizes (very clearly with the bg color) however the text does not resize. It makes sense that the text doesn't resize given that I have assigned a concrete font size for them. I wanted to ask how I can have the font size dynamically scale so that the text is always kept within the div? At this point it pokes out the bottom when you resize, meaning half the text is within the bg colored div and half of it is sticking out into whitespace. I hope this is clear enough, thanks!

Try to use change it like this:
1) Add "font-size: 65px;" to the class ".header"
2) Replace the definition of font-size in the class ".headertext" and ".headermenu" by "font-size: 1em;"
Thus, the child will get the same size of the parent node. Therefore, when the parent is resized, the children nodes will be resized too.

Defining your font size in pixels makes them definite sizes instead of something that will scale well with a fluid layout. Define your fonts in em instead of pixels. To find the proper em size you divide the font size by 16 which is the standard font size for browsers. For instance, your font size of 65 pixels would become 4.0625em (65 / 16 = 4.0625).

I think there is no CSS way to make font-size smoothly scale on window resize.
You might try CSS Media Query too set font-size relative to specific widths/heights
See example: http://jsfiddle.net/Ww4hB/
Otherwise, you need JavaScript to update font size on page load and window resize.
edit:
There is also something called viewport unit, but it isn't supported in all browsers.
See more: http://css-tricks.com/viewport-sized-typography/

Related

How can I create the same aspect ratio to align size of button and increment counter?

I've created a page of increment counters for collecting stats on football games but the text of the increment '0' doesn't change in relation to the button size. I am trying to make all the buttons fit on the screen without scrolling.
Larger buttons are unchanged. but the smaller buttons are set at a height to 4% as there are 24 rows of buttons.
Code for each row is:
.row5{
display: flex;
text-align: center
}
buttons are set to:
.button{
color: #000000;
background-color: #ffffff;
font-weight: bold;
font-size-adjust: auto;
width: 16%;
padding:0;
margin:0;
border-color: #ff9900;
height:4%;
}
Please can somebody help to change the size of the text for '0' but make it proportional to button size. I know I can change the font size to 10px for example but I don't think this will help working on a smaller screen.
Hope this makes sense. Thanks in advance for any answers.
You can use font-size: clamp(value1, value2, value3) for responsive font-sizes.
The first value is the minimum value - the font-size will never be lower than what you set here.
The second value is the preferred value. The element will try to set the font-size to this value.
The last value is the maximum value. The element's font size will never exceed this.
As for setting the values, I suggest using either em, rem or vw-units for a fully responsive effect. Using the em-unit on the font-size property allows setting the font size of an element relative to the font size of its parent. When the size of the parent element changes, the size of the child changes automatically.
Read more about em & rem on the font-size-property: https://www.geeksforgeeks.org/difference-between-em-and-rem-units-in-css/
Play a bit around with the values! Try resizing the browser in a new tab with the example snippet and see the effect of how powerful clamp() is.
body {
width: 800px;
font-size: 20px;
}
div {
width: 50%;
font-size: clamp(0.5em, 4vw, 3em);
}
<body>
<div>
Font size
</div>
</body>

How to adjust size of letter background?

I have a word with a background colour. This is fine except that I want the background color a certain size in relation to the word. Simply putting background-color: blue,gives the word a background color and display: inline-block makes the color fit the word exactly. So far so good. The problem is as soon as I increase the font size, the background colour shape warps and either goes into a square covering half the word or goes into a line covering the width but not the height.
#media (min-width: 768px) {
.about5 {
color: red;
background-color: blue;
display: inline-block;
position: relative;
font-size: 90px;
left: 320px;
font-weight: bolder;
transform: rotate(90deg);
bottom: 100px;
z-index: 3 !important;
}
}
<div class="about5">About</div>
This gives a background colour of blue which covers half the word but not the other half.
So how do I get it to cover the whole word and fit exactly, even to perhaps add a bit of padding?
Can I just apply width and height or is there another way?
Thanks.
The page is here and it differs according to desktop mobile.
I inspected the element on your site and saw that your about5 class has the attributes of width and height both set to 100px. Either you specified those dimensions or they were inherited from a parent element. Get rid of your height element only, then change width to auto and add padding: 3%. That's what ended up working for me in the Inspector for your site, although the code works just fine for me in this JSFiddle: https://jsfiddle.net/z0keyftb/

make link text same height as link background

Seems simple but I can't seem to do it, I would like to make the text of my link the same height as the background of the link.
<a href='link.htm' style='background-color: red; display: block; height: 30px; font-size: 30px;'>Link text</a>
The problem is there is always a margin around the text
I think it's because you are using text-decoration: underline.
If you remove height: 30px, the block will rezise to the size of font.
Here are examples: Width static height , Removed height property.
Or you can set text-decoration: none and then it will fit the block.
It it what you wanted? If not, please provide some screenshots with explanation.
The font-size doesn't reflect the physical height that the text occupies, you have to account for descenders as well. You could set the line-height:
<a href='link.htm' style='background-color: red; display: block;
height: 30px; font-size: 30px; line-height: 30px;'>Link text</a>
(You should use a stylesheet rather than inline styles, although this perhaps is just to demonstrate the issue?)
Setting the line-height does make the height setting redundant for this small example though and, usually, the line-height is larger than the font size, defaulting to roughly 1.2.

how to set button background such that it takes up height and width of parent div? what css property affects which dimension?

please check out the codes first:
html:
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="menu">
HOME
</div>
</div>
</body>
</html>
css:
#container
{
width: 80%;
margin: auto;
height: 450px;
}
#menu
{
background-color: #1b9359;
height: 25%;
}
.button
{
text-decoration: none;
float: left;
font: bold 1.2em sans-serif;
line-height: 115px;
margin-left: 20px;
display: block;
text-align: center;
}
.button:hover
{
background-color: #2cd282;
}
so what i would like to acheive is that when i hover to the home button, the whole div changes color, and does not get distorted or mispositioned on zoom. one answer told me that i could use display: block, but that it does not work as you can see. however, i did manage to make it work with display: block when the menu pane is like a vertical column and not a horizontal one. could anyone pls explain why this happens, and how display property of css affects that element? and how to achieve the full highlight without zoom distortion?
If you use percentages as your height and/or width then it will be a percentage of the parent container.
If you want your page to behave well when using a zoom, ie. ctrl + mouse wheel up or down, size everything in your page using em. 1 em = 16px by default. Just get used to using em. Get a calculator out and start converting things. Trust me, it's worth it to have a page that zooms straight in in out without jumbling.
Your outermost container may use percentages as long as you're using an auto margin for the central contents this is an exception to using em, that way things will still be centered on all resolutions. When I say outermost container, I mean body...
Before I tell you how to make it work I'll answer the other questions:
"...I did manage to make it work with display: block when the menu
pane is like a vertical column and not a horizontal one. Could anyone
pls explain why this happens, and how display property of css affects
that element?"
Block elements stack on top of each other vertically. This means that in a vertical arrangement if the zoom level is changed, those elements are perfectly at home taking that extra space up to the right side. Now, if they are intended to be lined up horizontally, display block will not work because that is simply just not what it does. Display inline-block will stack them horizontally preserving heights and widths set for the container, and to my own dismay, adding tiny margins between elements unlike the use of float, which would be touching the previous element, but float is definitely not something I would recommend for a nav menu.
Let's say you have your first link, and it is display:block. It will start its own new horizontal line, assuming there is not a float:(side) item before it with extra space to fill. In that case, you would add clear:both(or :left/:right) to overcome this. Now let's say you want to add a second link to the right of the first one which is display:block. The second one could be display:inline-block, and it would be on the same level as the first one, but if you did this the other way around, the second one, which is display:block, would start on its own new line below.
Now, to make your button do what you want it to do:
I will assume for the purpose of giving you a good answer that screen width in pixels is 1280px. So 80% of that is 64em. That is (1280px * .80)/16px = 64em because 1em = 16px. As I mentioned before, we do this to make your site elastic when it zooms.
You've previously designated #container as height:450px; So let's convert that. 450px/16px = 28.125em (em values can go to three decimal places, but no more) This is good, so we have an exact conversion, and not a rounded value.
container is now finished and should be as such:
#container
{
width: 64em;
margin: auto;
height: 28.125em;
}
Next change height in #menu. You have it as height:25%. That is 25% of 450px/or/28.125em If we leave it at 25% it will mess up the zooming. So let's convert. 28.125em/4 = 7.03125em
This time we must round to 3 decimal places. So we get 7.031em.
menu is now finished and should be as such:
#menu
{
background-color: #1b9359;
height: 7.031em;
}
Next is your button class.
.button
{
text-decoration: none;
float: left;
font: bold 1.2em sans-serif;
line-height: 115px;
margin-left: 20px;
display: block;
text-align: center;
}
At this point I lose some of my own certainty about how CSS will react, but I will start with this. Do not use float:left and Display:anything together. In this case, use display:inline-block. Get rid of the float:left. I am not sure why you have a line-height set. I am guessing it is your way of attempting to set a height for your button because it is 2.5px larger than the height of #menu (line-height of .button = 115px, height of #menu = 112.5px which we have already converted to 7.031em). If that's what you're trying to do you're doing it wrong. get rid of line height, and make it the same height as its container so that it fills it. height:7.031em;
I'll assume if you're making a horizontal menu, that you aren't trying to make one button take up the entire width. If you do not give it a width, it will fill the whole row. I'll be bold and guess you probably want your button somewhere in the ballpark of twice as wide as it is high. Let's just go with 15em(240px). width:15em;
Last is margin-left... 20/16 = 1.25em. Cake.
Now we have:
.button
{
text-decoration: none;
font: bold 1.2em sans-serif;
height: 7.031em;
width:15em;
margin-left: 1.25em;
display: inline-block;
text-align: center;
}
Keep in mind that block elements, whether inline or not, have little built-in margins on top of the margin-left that you've added.
If you make these changes, your page should zoom beautifully and your link will fill out its container vertically, but be a specified width to keep it clean. Never use px or percentages if you want to avoid zoom slop. The body container is 100% by default, but it holds everything and therefore the things in the center seem to grow outward toward the edges and therefore do not show any visible effect from the body not being set based on em, and it also makes the page naturally friendly with a variety of screen resolutions.
I hope this helps.
Edit:
As I mentioned, I lost some of my certainty. The line:
font: bold 1.2em sans-serif;
Does something that makes the container be larger than 7.031em removing that line fixes the problem, but I do not know the remedy if you insist on a font size of 1.2em. I tried setting height to 6.831em instead of 7.031em and it did not do the trick.
A few more tips:
1) If you still feel that you need a margin, perhaps margin-right would better suit you so you don't have random slack space to the left.
2) The CSS I provided does not adjust for the vertical alignment of your link text; to fix it add line-height:7.031em; to the .button class. Note: this method only words with single lines of text!!!

Change height of <div> to height of background image

I have two div's:
<div class="iphonebackground">
<div class="screenbackground"></div>
</div>
.iphonebackground {
background-image:url("../img/iphone-frame.png");
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
height:576px;
}
.screenbackground {
background-image:url("../img/iphone-background.png");
background-repeat: no-repeat;
background-position: center;
background-size:100%;
height:576px;
}
The first, iphonebackground has background-image set as an image of an iPhone frame (http://chpwn.com/apps/iphone-frame.png). The second, screenbackground has background-image set as PNG image the same size which holds the image of what would be on the iPhone's screen (https://dl.dropbox.com/u/290586/iphone-bg.png).
The result of this is that the page renders something like this: http://imgur.com/yVF9gyg. As my site is based on the Twitter Bootstrap the div's resize to fit the browser window so on a smaller display it looks something like this: http://imgur.com/Q2Qy4wn.
As you can see, the height of the div is fixed at 576px. This means that in the second image there is a large blank space above and below the background-image. Is there a way to set the height of the divs so that they are as high as the size of the background-image's height, thus removing the blank space?
A background image has no effect on the size of the DIV to which it is attached. The size of that DIV will be determined by its content, or by width and height if explicitly set in your CSS.
If you have a DIV with a % width (i.e. unknown pixel width), then you cannot set the height based upon this unknown width without resorting to JavaScript, or... the new CSS calc() function, where you could specify the height as a ratio of the unknown width and let the browser work it out. See https://developer.mozilla.org/en-US/docs/Web/CSS/calc for more.
Support is getting better (78% according to caniuse.com) but you can't rely on it.
[edit] While looking for a solution myself, I found an excellent hack using padding-top, written by user Hasanavi in answer to this question [/edit]
You can try using line-height css property on your div.
line-height: normal;
line-height: 3.5; /* <number> values */
line-height: 3em; /* <length> values */
line-height: 34%; /* <percentage values */
line-height: 50px; /* <Pixel> values */
line-height: inherit
Hope this helps...
You can use
height:auto; in both