I've created an image of the result I want for a couple of input fields.
What I've tried to get that result is this:
input {
padding-left: 2px;
padding-top: 2px;
height: 1.8em;
font-size: 1em;
}
The problem I'm having in creating this is any time I resize the text so it is relatively smaller than the input field, the height of the input field changes accordingly as well, it doesn't appear to be paying any attention to the height attribute, only font-size.
I want the text to end up at about 60% the height of the input field, and as above, quite close in to the bottom left corner.
Can someone point me in the right direction for this?
em is based off the size of the font (the point size), so if you change the font-size, the height (as you have specified it) will change. Use pixel height if you want it independent of font-size.
Related
in this page
http://demos.roxiwd.com/index.php/ar/kgar
How to show images normal like the next row
and how to show the words once the mouse hover any point on image not the word area.
img:hover .words {
display: block;
}
The biggest problem is that you have a dynamic column width and a fixed height on your image containers (with background-size set to 100% 100%). This results in deformed images. You say you want to change that on hover. To do so, you first need to reset the height of this container:
.uc_animated_border_banner:hover .uc_animated_border_bg {height: auto!important;}
Next you should use the padding trick to set the (now dynamic) height equal to the aspect ratio. The aspect ratio of the image is 450px/350px = 1.29. This equals to 129% padding-bottom. Correct this for the line-height of the element that actually takes up verticale space in the box (the h2, with a height of 30px) and you end up with 129% - 30px for the padding-bottom. Split this for equal padding top and bottom, and you end up with 64.5% - 15px padding on both top and bottom of the h2 element. This results in a box with an exact aspect ratio of 1.29 (as long as the h2 fits on a single line).
.uc_animated_border_banner:hover .uc_animated_border_banner .uc_content_box h2 {
padding-top: calc(64.5% - 15px)!important;
padding-bottom: calc(64.5% - 15px)!important;
}
TIP: Use position: absolute on the h2 for a solution without the 15px/30px and single-line constraint.
Although this works I would chose for a more simple solution. Find the inline CSS statement at line 214:
.uc_animated_border_bg {background-size: 100% 100%!important;}
... and replace it with:
.uc_animated_border_bg {background-size: cover!important;}
I think the result looks better and the solution is much simpler. This alternative solution works for any image (irrespective of their aspect ratio). The only down-side is that an unknown amount of the image is invisible/cut off.
I have an image that's inline with text. That image is 32x32. I'm looking to have it auto size to the line height of where it's contained so it fits properly. Is there a way to do that?
I'm looking to be able to place the image anywhere with an unknown line height and have it resize properly.
Use img{height: 1em;} /* whatever your line height may be, it is affected by its font-size /*
See this Updated Demo (Increase or decrease the font size to view the result.)
You can set the height to the line height if you explicitly set both, e.g.
* { line-height: 1.3; }
img { height: 1.3em; }
If you don’t want to set the line height, you would need to make a guess on browser defaults (which usually depend on font). This might be a good guess:
img { height: 1.12em; }
To make an image fit properly into text, so that it does not cause the actual line height to be increased, you would also need to align it vertically to the bottom of the line box, no to text baseline (which is higher):
img { vertical-align: bottom; }
If you need to let the image sit on the baseline (the default), you need to make a guess on the distance between the bottom and the baseline and set the image height accordingly smaller. In this case, height: 1em, or maybe with a little smaller value, might be a good guess.
Let's say you have a div containing a line of text which you have set the font-size to 16px. Will you be able to determine height of the div? I guess not. I mean the font-size does not seem to correlate to the height of a line of text. What is exactly a font-size? the pixel count of the width of a letter?
The reason I'm asking this is I need to be able to set the font-size of a line of text and also determine the height of the text. Any good ideas?
You can set the line-height too!
element {
font-size: 12px;
line-height: 16px;
}
This will make the element have a height of 16 pixels. This allows you to center text vertically too. However, setting the line-height doesn't change the font-size.
In the page layout I am creating, for some reason, the scrollbars never seem to show and rather the content tries to rearrange itself. Is there a way to lock in a set width and height for the whole page so that if the window is scaled it shows scrollbars?
The page: http://thetalkingcloud.com/clipit.com/
Specifically, if you make the window small, the "COPY PASTE SHARE" links change their position dramatically.
Thanks if anyone can help out :)
If you want to make layout more "fluid," specifically the slogan in the header, try making the following changes to .top_text
.top_text {
float: right;
font-family: "Lucida Grande",Verdana,Arial,sans-serif;
font-size: 60px;
margin-right: 20px;
padding-top: 24px;
}
You will still need to establish a minimum width for the page. Because IE6 doesn't support the min-width property, I often achieve this simply by placing an empty div with the desired minimum width at the top of whatever container I would otherwise use min-width on.
Your top div has a percentage width, instead give it a fixed pixel width so it does not collapse.
The text on my web page looks fine in Firefox & Safari, but in IE7 certain portions are cut off. It looks like (but it hasn't) it has been placed in a smaller element with overflow: hidden;.
Anyone know how to remedy this?
You need to specify the line height to match the font size...
CSS
h1 {
font-size: 2em;
line-height: 2em; /* or 100% */
}
See also IE7 is clipping my text. How do I adjust its attitude?
I had the same problem for IE9 and spent a lot of time fiddling around with the attributes for "height", "line-height" and "padding". Here's what I came up with:
(a) "height" does not affect what's happening inside the textbox;
(b) "line-height" does affect the display of the text and will cause it to be higher or lower in the text box, but the number is important. In the end the first answer seems to be correct i.e. set "line-height" to the same number as your font size;
(c) "padding" also affects the display of text because it creates the space between the borders of the textbox and the text itself;
(d) "vertical-align" provides a reference point for the text inside the textbox.
So, as an example, I got the text to display in the mid-line of the textbox on my site (with no cut off) and a nice distance from the textbox borders by using the following CSS in relation to the "input=text" area of my CSS style sheet:
line-height: 14px; padding: 6px 2px 6px 2px; vertical-align: middle;
The 14px was the size of the font used in my template (stated elsewhere in the CSS style sheet), the 6px is top and bottom padding respectively and the 2px is the left and right padding respectively. The vertical align attribute places a notional middle line through the text. Obviously you can change any of those numbers to suit your requirements.
BTW, for newbies, use the firefox "firebug" plugin to find the code in your CSS syle sheet that needs changing. Just highlight the text box in question and on the right it will give the name of the CSS style sheet its location and line number where the code appears. You can even use "firebug" to do a live test run which will show you the effect of the changes, but which will not be saved when you close your browser : )
Hope this helps.
Try changing the overflow attribute for the element the text is in.
Overflow: auto;
Or
Overflow: Visible;