Archive for the ‘HTML’ Category

Multiple borders with CSS2

Posted by 6bytes at 6 July 2010

Category: CSS, HTML

How to make a div with multiple borders?

Usual approach is to create a div with border then create another div inside that one with different border. We end up with lots of divs inside of another divs. If there only was an easier way to do it in CSS without the need of more divs… There is!

:before and :after pseudo classes

Internet Explorer 6 and 7 does not support :before and :after pseudo classes and to be honest I couldn’t find a working fix for it. The good thing is that those dinosaurs are fading out from our lives.
:before and :after pseudo classes allow to place text or an image before and after each HTML element using content: ”; attribute. In below example content is empty as we need just a border.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Multiple borders with CSS2</title>
<meta charset="utf-8" />
<style>
body { background: #fff; }
#box {
	float: left;
	position: relative;
	width: 100px;
	height: 100px;
	margin: 20px;
	border: #f00 solid 5px;
}
	#box:before {
		position: absolute;
		width: 90px;
		height: 90px;
		content: '';
		border: #0f0 solid 5px;
	}
	#box:after {
		position: absolute;
		left: 5px;
		top: 5px;
		width: 80px;
		height: 80px;
		content: '';
		border: #00f solid 5px;
	}
</style>
</head>
<body>
	<div id="box"></div>
</body>
</html>

Above code should result in:
Multiple borders with CSS

More information about :before and :after pseudo classes can be found here

2 Comments

HTML5 Where to start?

Posted by 6bytes at 15 June 2010

Category: HTML

Tags: HTML, html5, markup, semantic, start, tag

Everyone is excited about the new kid on the block – HTML5, but where to start and how to use it? There are couple of things you can start using right now with a few hacks for our lovely IE6 and other browsers not yet supporting HTML5. Before we get into it, it’s good to know the level of support of HTML5 in different browsers. These few links can help you find it out.

Not supported elements

Following elements are no longer supported in HTML5:

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<s>
<strike>
<tt>
<u>
<xmp>

Now, lets start with a few simple tags.

Doctype

Oh the doctype, who could remember the whole thing?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Instead of old doctype like the one above we can finally start using something that is really easy to remember.

<!DOCTYPE html>

YES! That’s it, we’re done Even Google is using it already.

Character Set

Again, a lot simpler than it used to be.

<meta charset="utf-8" />

<script>, <style> and <link> elements

We’re all used to this

<script type="text/javascript" src="/path/to/my/file.js"></script>
<style type="text/css">
#myId { margin:0px; }
</style>
<link type="text/css" rel="stylesheet" href="/path/to/my/file.css" />

but with HTML5 the we can omit the type attributes as the values above are set as default. Our bit of code becomes a little more clean.

<script src="/path/to/my/file.js"></script>
<style>
#myId { margin:0px; }
</style>
<link rel="stylesheet" href="/path/to/my/file.css" />

Semantic structure

A few new elements were added to only add a more semantic meaning to well known <div> tag. Some of those elements are:

<article>
<section>
<aside>
<hgroup>
<header>
<footer>
<nav>
<time>
<mark>
<figure>
<figcaption>

Support in IE

IE9 is supposed to support HTML5 when it’s out but for now we have to tell IE what type are those elements. To not complicate things too much all we need to do is make a use of this awesome script. Just paste it within your head tag.

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Sample page layout

<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="utf-8" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="Keywords" />
<meta name="description" content="Description" />
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
<div id="wrapAll">
	<header>
		<nav>
			<ul>
				<li><a href="#">Item 1</a></li>
				<li><a href="#">Item 2</a></li>
				<li><a href="#">Item 3</a></li>
			</ul>
		</nav>
	</header>
	<section>
		<article>
			<header>
				<h1>Article Header</h1>
				<time datetime="2010-06-15" pubdate>June 15th, 2010</time>
			</header>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</article>
	</section>
	<footer>
		Footer content
	</footer>
</div>
</body>
</html>

1 Comment

Gmail’s recent email rendering change

Posted by 6bytes at 1 June 2010

Category: CSS, HTML

Tags: CSS, email, gmail, Google, HTML, image, spacing

Problem

Gmail recently made a few changes in their email rendering engine. Unfortunately for us our image based HTML newsletters that used to look fine in gmail are now broken. Each image seems to have a weird spacing after it.
If you’ve been sending HTML newsletters for your clients for some time now, you probably have your own email templates that work well in all email clients. Well not all thanks to Google.

Solution

To make things back to what they were just add style=”display:block;” to every img tag in your HTML email and we’re back in business.

No Comments

Google font api and font directory

Posted by 6bytes at 23 May 2010

Category: HTML

Tags: api, CSS, font, Google, HTML, Tangerine

Technorati code: G8GA9E4SYN2J

Google just made our life much easier by announcing Google font api and Google font directory.
Using custom fonts on your website is as easy as adding two lines of code. Lets consider this simple example.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Custom fonts</title>
<meta charset="utf-8" />
<style>
      body { font-size: 48px; }
</style>
</head>
<body>
<header>
	<p>Hello world!</p>
</header>
</body>
</html>

Nothing fancy here, result as expected.

Hello world!

Now lets add those two aforementioned lines. Line 6 and line 9 in below listing.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Custom fonts</title>
<meta charset="utf-8" />
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
<style>
      body { font-size: 48px; }
      p { font-family: 'Tangerine', serif; }
</style>
</head>
<body>
<header>
	<p>Hello world!</p>
</header>
</body>
</html>

and the effect

Hello world!

The font directory is a bit limited at the moment but I think we can safely assume that Google will be adding more fonts over time.