Pixels occupied by a highlighted character in css - css

I have a box 940px in width and a height of 40px
<!doctype html>
<head>
<meta charset='utf-8' />
<title>Html Positioning</title>
<style type='text/css'>
.top{
width:940px;
border:1px solid pink;
display:block;
min-height:40px;
}
.orange{
font-size:16px;
background-color:orange;
}
</style>
</head>
<body>
<p class="top"><span class="orange">v</span></p>
</body>
</html>
I have the character v with a font-size 16 px highlighted and i was wondering how much width and height the character highlighting takes.
I have the fiddle http://jsfiddle.net/thiswolf/hzm65/
Does css offer a way of knowing the width and height of such highlighting?.

By “highlighting”, you apparently refer to giving an element some special background color.
There is no way to know the dimensions in CSS. The width is determined by the metrics of the glyph. The height is determined by the line height of the element (which is in the sample case determined by the browser default line height for the browser default font in the given font size).
In JavaScript, you can query them using the offsetWidth and offsetHeight properties.

Related

Max height or width of an image inside a div while keeping proportions in pure css

I have two layouts, but they are conceptually the same.
One is a div containing an image. The other is two floating div elements that takes half with of their parent div at the left and right respectively containing an image each. Their parent div size and proportion depends of the body size and proportions and it is unknow until display time, so I need to specify it by percentage and not by constant width or height.
In both cases I need the maximum width or height while keeping aspect ratio and not overflowing the parent div, so image/s display as bigger as possible while keeping proportion.
I know how to keep proportions with max height or with, but not with both, so there is overflow. I also know how to accomplish this with Javascript, but I'm trying to avoid scripts in my layout and I want to handle that in css.
I haven't see anything like that in the net, nor googling gave me a clue about it, so I even doubt if this is actually possible in css.
Any solution will be greatly appreciated.
EDIT :
OK, I figured out how to do it. The deal was setting up image max-height and max-width to 100%. However I am facing another problem, so I post the layout if someone doing what I was trying to do finds it useful, and I remake the question to focus in the new problem.
Here's the layout. It will keep images aspect ration to the biggest possible size.
index.html
<html>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header"></div>
<div id="pageleft" class="page">
<img src="img/1.jpg">
</div>
<div id="pageright" class="page">
<img src="img/2.jpg">
</div>
</body>
</html>
style.css
html, body {
height: 100%;
overflow:hidden;
padding:0px;
margin:0px;
}
.header{
background-color:blue;
width:100%;
height:2em;
}
.page{
width:50%;
height:100%;
position:relative;
}
#pageright{
float:right;
background-color:green;
}
#pageleft{
float:left;
background-color:yellow;
}
.page > img{
position:absolute;
margin:auto;
top:0;
bottom:0;
max-height:100%;
max-width:100%;
}
#pageleft > img {
right:0;
}
#pageright > img {
left:0;
}
Note 1: Tested in Chrome and Firefox both desktop (resizing the window to any size/propotion) and mobile (portrait and landscape).
Note 2: I'm using A paper cut proportions for the images, but should work with any image size and proportions, even when both images have different aspect ratio.
The problem is that my header height is 2em and that is what the .page div are overflowing. Does anyone know a way to fix that?
Thanks in advance.

CSS alignment Issue with Headers

Im a newbie to CSS and created this html file for my testing...but the results are not what I expected..
Here are my questions,
What would be the correct width of my IE window.
What would be the perfect height of my window..When I specify a value nothing changes.
I have created 3 divisions- Header, Footer and content..When I view it..there is a big space between each of these sections..Why do they occur?
Code follows:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
width:1400px;
height:1000px;
}
h1
{
color:orange;
text-align:center;
}
#div-1
{
background-color:red;
}
#div-2
{
background-color:Green;
}
#div-3
{
background-color:Blue;
}
</style>
</head>
<body>
<div id="div-1">
<h1>Header<h1>
</div>
<div id="div-2">
<h1>Content<h1>
</div>
<div id="div-3">
<h1>Footer<h1>
</div>
</body>
</html>
The width on your body tag should be set to "width: 100%;" This will cause the body tag to take up the entire width of the window, and your colored div sections will also stretch the full width.
You can set the height on the body tag to either "height: 100%;" or "height: auto;". Depends on what you are doing exactly.
The space is coming from your h1 tags you have inside each of those divs. They have a browser-defaulted margin set to them. If you set the css property to "margin: 0px" that should eliminate all that extra space.
First, you don't define the width or height of the window in CSS. It just doesn't happen. You may specify the width of particular elements on your page, but that is a slightly different matter. Remove your height and width properties.
Second, your divisions have spaces between them due to the default margins that are set on h1 tags. If you want to remove them, then set margin: 0 on your h1 in your CSS.
Third, you may want to check out this CSS tutorial at HTMLDog

Width and Height is not applied to DIV tag

Hi,
I created a small popup with div of height and width 500px.Whenever I display it directly,It looks good.But When I put display:none by default and make it visible whenever I click the button,the popup is displayed with no height and width...Can anybody tel me the reason.....
<!DOCTYPE HTML>
<html>
<head>
<style>
div{
width:500px;
height:500px;
border:1px solid black;
background:#988858;
border-radius:14px;
box-shadow:5px 5px 10px #666633;
display:none;
}
</style>
</head>
<body>
<button class="button">Click</button>
<div id="Popup">
close
</div>
</body>
<script>
document.getElementsByClassName('button')[0].addEventListener('click',showPopup,false);
function showPopup(){
//document.getElementById('Popup').style.width=500+'px';
//document.getElementById('Popup').style.height=500+'px';
document.getElementById('Popup').style.display='inline';
}
function closePopup(){
document.getElementById('Popup').style.display='none';
}
</script>
</html>
Inline elements don't preserve width and height, you need to set the display to block.
document.getElementById('Popup').style.display='inline';
^^^^
display inline does not support the height and width so use block
display:inline doesn't support width and height. Try display:block.
Can not use initial and inline properties of display here. flex and inherit are more suitable (alignment is same as when div loads for first time). apart from that you can use inline-block, block and inline-flex. Try flex :)

Doctype and sections

I run into this, and I am not sure why it is happening...
Taking the html below as an example, as it is, it will display grey areas for the sections as instructed by the CSS. However, when I include <!Doctype html> in the first line it breaks down.. Furthermore, the code below does not work at all with IE9.. why?
Many thanks in advance.
<html>
<head>
<style type="text/css">
.sec_class{
width:50%;
height:15%;
border:1px black solid;
padding:0px;
position:relative;
background-color:grey;
}
</style>
</head>
<body>
<section class = 'sec_class'></section>
<section class = 'sec_class'></section>
<section class = 'sec_class'></section>
</body>
</html>
Your sections have basically no height, because height given in the percentage (height: 15%;) will always be relative to the parent's height. body has zero height in your case, and the 15% of that is still zero.
This should help:
html, body { height: 100%; }​
jsFiddle Demo
Be sure to ALWAYS include the doctype.
In order to make IE styles HTML5 tags (section, nav...) you must use a polyfill, because it can't by default. You can use: http://code.google.com/p/html5shiv/
It's just a JS file that you must include on your HTML (using IE conditional comments):
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Also you should not use single quotes:
<section class="sec_class"></section>
Also, of course, if you are setting a porcentual height on your section elements, his parent must have also a defined height. On your case, a 15% height of nothing (body has no height) is… nothing.

Why does border affect the containing block size in CSS?

I understand that the height of a box in CSS is the height of the contents, excluding the margin and padding, but why with this sample, if you uncomment the border: line in the containing div, does the background color of the div extend above the first paragraph while if you have no border it doesn't?
<html>
<head>
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<title></title>
<style type="text/css">
#container {
background-color: green;
/* border: black solid 1px; */
}
p { background-color: red;
margin-top:50px;
margin-bottom: 0px;
border: black dotted 3px;
}
</style>
</head>
<body>
<div id="container">
<p>first paragraph</p>
<p>second paragraph</p>
</div>
</body>
</html>
I understand that the height of a box in CSS is the height of the contents, excluding the margin and padding
Wrong: it includes padding and border (except in Microsoft Internet Explorer due to a bug and now for compatibility reasons (if using quirks mode rendering)). Read up on the CSS box model:
The content edge surrounds the rectangle given by the width and height of the box
where the content edge is the edge running around the outside of the border.
#aizuchi,
First of your CSS has an error. Check for "pic" right to "margin-bottom".
Second of all add "overflow:hidden;" to #container element, once you haven't set siez of parent element you must have this tag to tell parent which size to use. It will make #container to use height of child element at it's own (#container) which is probably the problem in your CSS besides "pic".
Third of all, Google box model bug in IE6 to understand difference between our "beloved" ie6 and other browsers.
Fourth of all
it is better to use
<LINK rel="StyleSheet" href="style.css" type="text/css" media="screen" />
instead of
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
Margin is on the outside of a border and padding is on the inside of a border, so your top margin would cause the margin to exist above the border. If you want the padding between your paragraph and border use padding not margin. The size of the div will be determined by the margin, padding, and border. They will all contribute to the size of the div.

Resources