Category: CSS

Categories
CSS

KeyCap Style in CSS

To simulate a keyboard key on a web page, use the following style with a span tag;

1

<span class="keycap">KeyCap</span>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

 /* ----- KeyCap Style ----- */
span.keycap {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -khtml-border-radius: 4px;
  white-space: nowrap;
  border: 1px solid #aaa;
  border-style: outset;
  border-radius: 4px;
  padding: 0px 3px 1px 3px;
  margin: 0px 0px 0px 0px;
  vertical-align: baseline;
  line-height: 1.8em;
  background: #fbfbfb;
}
Categories
CSS

Center an HTML element in the screen

The following sample shows how to center an HTML image in the screen, vertically as well as horizontally. The image will shift to maintain the centre as the window size is changed.

For more detail, see this link.

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Your Website</title>
	<style>
	.Absolute-Center {
		margin: auto;
		position: absolute;
		top: 0; left: 0; bottom: 0; right: 0;
		}
	</style>
	</head>
<body>
	<img src="image.jpg" class="Absolute-Center" />
</body>
</html>
Categories
CSS JavaScript Web Development

Uniform Form Styling

Sometime something comes along the stands out from the crowd.

Uniform is one of those things.  Uniform is a Forms Styling tool using jQuery and CSS to create some pretty snappy looking form elements.

 

image

http://pixelmatrixdesign.com/uniform/

Categories
CSS

Using Conditional Comments to add CSS file for IE browsers

Due to a lack of standards compliance in Internet Explorer (particularly older versions) it is often necessary to add CSS code to get around the shortcomings of IE.

However, there's no point in using the file on browsers other than those older versions of IE.  To do so would only clutter the site, slow load times, and introduce possible conflicts.

Fortunately IE can recognize Conditional Comments, which are HTML comments with a little logic added to them.

In the example below, the conditional comment is used to determine whether the user's browser is Internet Explorer prior to version 7.

The condition may be read as "If browser is less than IE version 7" or, more accurately, "If browser is Internet explorer AND has a version number less than 7".

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

If the condition is met, the browser will load the CSS file.

Typically, such files contain CSS code which works around problems caused by the standards non-compliance of older IE browers.

The code block above should be placed in the <head> section of your page, below all other css file references. Placing it last will ensure that it's CSS declarations will not be overridden by subsequent declarations in other CSS files.

Categories
CSS

Images overflowing the boundaries of a DIV

A new month brought a new problem. I wanted to set up a staff page for a new site, with a box containing a photo and a profile of the person. The photo was floated to one side of the DIV or the other. I used alternating sides, but that's a matter of taste.

The problem was that if the text profile was too short, the image overflowed the bottom boundary of the div, which had a visible border around it.

Some digging around and experimenting revealed a solution.

The trick is to place <div style="clear:both"></div> just before the end of the DIV to clear the float.

Here's the code I wrote for this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.silhouette {
  border: 1px solid silver;
  padding:1em;
  margin-bottom:.5em;
}
.silhouette img {
  border: 1px solid lightgrey;
  padding:2px;
  margin-bottom:.5em;
}
.imgleft {
  float:left;
  margin: 0px 10px 10px 0px;
}
.imgright {
  float:right;
  margin: 0px 0px 10px 10px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div class="silhouette">
<img src="" class="imgleft" /><p>Duis nec elementum magna. Vivamus malesuada blandit mauris, nec consectetur leo accumsan at. Donec risus enim, porttitor non tristique eu, viverra eu orci. Ut id orci ac elit placerat volutpat. Proin eu nisi ac odio aliquet egestas. Ut vitae justo sed nisi adipiscing suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas augue odio, rutrum bibendum convallis eu, gravida non ante.</p>
<div style="clear:both"></div></div>
 
<div class="silhouette">
<img src="" class="imgright" /><p>Proin eu nisi ac odio aliquet egestas. Ut vitae justo sed nisi adipiscing suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas augue odio, rutrum bibendum convallis eu, gravida non ante. Duis nec elementum magna. Vivamus malesuada blandit mauris, nec consectetur leo accumsan at. Donec risus enim, porttitor non tristique eu, viverra eu orci. Ut id orci ac elit placerat volutpat. Maecenas augue odio, rutrum bibendum convallis eu, gravida non ante. Duis nec elementum magna. Vivamus malesuada blandit mauris, nec consectetur leo accumsan at.  Maecenas augue odio, rutrum bibendum convallis eu, gravida non ante. Duis nec elementum magna. Donec risus enim, porttitor non tristique eu, viverra eu orci.  Maecenas augue odio, rutrum bibendum convallis eu, gravida non ante. Duis nec elementum magna. Ut vitae justo sed nisi adipiscing suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas augue odio, rutrum bibendum convallis eu, gravida non ante. </p>
<div style="clear:both"></div></div>
 
<div class="silhouette">
<img src="" class="imgleft" /><p>Vivamus malesuada blandit mauris, nec consectetur leo accumsan at. Duis nec elementum magna. Donec risus enim, porttitor non tristique eu, viverra eu orci. Ut id orci ac elit placerat volutpat. Proin eu nisi ac odio aliquet egestas. Ut vitae justo sed nisi adipiscing suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas augue odio, rutrum bibendum convallis eu, gravida non ante.</p>
<div style="clear:both"></div></div>
 
<div class="silhouette">
<img src="" class="imgright" /><p>Ut id orci ac elit placerat volutpat. Proin eu nisi ac odio aliquet egestas. Ut vitae justo sed nisi adipiscing suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas augue odio, rutrum bibendum convallis eu, gravida non ante.</p>
<div style="clear:both"></div></div>

And the final result:

Note that the image files are not actually shown.

Duis nec elementum magna. Vivamus malesuada blandit mauris, nec consectetur leo accumsan at. Donec risus enim, porttitor non tristique eu, viverra eu orci. Ut id orci ac elit placerat volutpat. Proin eu nisi ac odio aliquet egestas. Ut vitae justo sed nisi adipiscing suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas augue odio, rutrum bibendum convallis eu, gravida non ante.

[ad]

Proin eu nisi ac odio aliquet egestas. Ut vitae justo sed nisi adipiscing suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas augue odio, rutrum bibendum convallis eu, gravida non ante. Duis nec elementum magna. Vivamus malesuada blandit mauris, nec consectetur leo accumsan at. Donec risus enim, porttitor non tristique eu, viverra eu orci. Ut id orci ac elit placerat volutpat. Maecenas augue odio, rutrum bibendum convallis eu, gravida non ante. Duis nec elementum magna. Vivamus malesuada blandit mauris, nec consectetur leo accumsan at. Maecenas augue odio, rutrum bibendum convallis eu, gravida non ante. Duis nec elementum magna. Donec risus enim, porttitor non tristique eu, viverra eu orci. Maecenas augue odio, rutrum bibendum convallis eu, gravida non ante. Duis nec elementum magna. Ut vitae justo sed nisi adipiscing suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas augue odio, rutrum bibendum convallis eu, gravida non ante.

Vivamus malesuada blandit mauris, nec consectetur leo accumsan at. Duis nec elementum magna. Donec risus enim, porttitor non tristique eu, viverra eu orci. Ut id orci ac elit placerat volutpat. Proin eu nisi ac odio aliquet egestas. Ut vitae justo sed nisi adipiscing suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas augue odio, rutrum bibendum convallis eu, gravida non ante.

Ut id orci ac elit placerat volutpat. Proin eu nisi ac odio aliquet egestas. Ut vitae justo sed nisi adipiscing suscipit.