Okada Design Blog » CSS http://www.okadadesign.no/blog Welcome to Okada Design Web Development Blog Wed, 11 Jan 2012 23:21:51 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 First look at 1140CSSGrid http://www.okadadesign.no/blog/css/first-look-at-1140cssgrid/ http://www.okadadesign.no/blog/css/first-look-at-1140cssgrid/#comments Thu, 20 Jan 2011 11:40:19 +0000 shinokada http://www.okadadesign.no/blog/?p=2649 I just got an email newsletter from sitepoint and read about 1140CSS Grid.

Sitepoint created a demo and I also played around and uploaded a demo here.

CSS is very simple and Sitepoint claims 960Grid has got to go.

What do you think?

Related posts: IE 6 hacks, tips and [...] Related posts:

  1. IE 6 hacks, tips and blocker tutorials
]]>

I just got an email newsletter from sitepoint and read about 1140CSS Grid.

Sitepoint created a demo and I also played around and uploaded a demo here.

CSS is very simple and Sitepoint claims 960Grid has got to go.

What do you think?

Related posts:

  1. IE 6 hacks, tips and blocker tutorials

]]> http://www.okadadesign.no/blog/css/first-look-at-1140cssgrid/feed/ 0 Three column layout which works with long contents in any column http://www.okadadesign.no/blog/ie/three-column-layout/ http://www.okadadesign.no/blog/ie/three-column-layout/#comments Tue, 23 Mar 2010 11:56:45 +0000 shinokada http://www.okadadesign.no/blog/?p=1684 I guess some CSS gurus must have done it before. But after browsing a maxdesign’s page, I decided to modify one of their layout. I wanted to improve in two aspects. The main content comes before the left column. This is semantically better. And I also want to allow all three columns [...] Related posts:
  1. Organizing a long list with jQuery: ihwy version
]]>


I guess some CSS gurus must have done it before. But after browsing a maxdesign’s page, I decided to modify one of their layout. I wanted to improve in two aspects. The main content comes before the left column. This is semantically better. And I also want to allow all three columns to have a long content without problem.

This layout has one image and one conditional style for IE6.


If you see this original layout with a long content on the right column, you can see the problem at the bottom. And the left content comes before the main content.

Solution

The following code is tested on IE6/7/8, FF3.6, Opera 10.10, Safari 4.0.5.

Demo

Long main content.

Long left content.

Long right content.

And here is the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>3 Column Layout</title>
	<style type="text/css">

	#container
{
	margin: 0 auto;
	width: 1000px;
	background: #fff;
}

#header
{
	background: #ccc;
	padding: 20px;
}

#header h1 { margin: 0; }

#navigation
{
	float: left;
	width: 1000px;
	background: #333;
}

#navigation ul
{
	margin: 0;
	padding: 0;
}

#navigation ul li
{
	list-style-type: none;
	display: inline;
}

#navigation li a
{
	display: block;
	float: left;
	padding: 5px 10px;
	color: #fff;
	text-decoration: none;
	border-right: 1px solid #fff;
}

#navigation li a:hover { background: #383; }

#content-container
{
	float: left;
	width: 1000px;
	background: #fff url(layout-three-fixed-background.gif) repeat-y 100% 0;
	position:relative;
}

#section-navigation
{
	float: left;
	width: 160px;
	padding: 20px 0;
	margin: 0 20px;
	display: inline;
	margin-left: -710px;
}

#section-navigation ul
{
	margin: 0;
	padding: 0;
}

#section-navigation ul li
{
	margin: 0 0 1em;
	padding: 0;
	list-style-type: none;
}

#content
{
	float: left;
	width: 500px;
	padding: 20px 0;

	margin-left:200px;
	padding-left: 30px;
}

#content h2 { margin: 0; }

#aside
{
	float: right;
	width: 200px;
	padding: 20px 0;
	margin: 0 20px 0 0;
	display: inline;

}

#aside h3 { margin: 0; }

#footer
{
	clear: both;
	background: #ccc;
	text-align: right;
	padding: 20px;
	height: 1%;
}
	</style>

	<!--[if IE 6]>
<style type="text/css">

#content
{
	margin-left:100px;
	padding-left: 30px;
}
</style>
<![endif]-->

</head>

<body>
<div id="container">
	<div id="header">
		<h1>
			Site name
		</h1>
	</div>
	<div id="navigation">
		<ul>
				<li><a href="three_column_1.html">Three column 1</a></li>
				<li><a href="three_column_long_left.html">Three column long left</a></li>
				<li><a href="three_column_long_right.html">Three column long right</a></li>
				<li><a href="three_column.html">Three column 2</a></li>
			</ul>
	</div>
	<div id="content-container">
		<div id="content">
			<h2>
				This one has the main content first.
			</h2>
			<p>
				Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
			</p>
			<p>
				Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
			</p>
			<p>
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
			</p>
			<p>
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
			</p>
			<p>
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.
			</p>
			<p>
				Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
			</p>
		</div>
		<div id="section-navigation">
			<ul>
				<li><a href="#">Section page 1</a></li>
				<li><a href="#">Section page 2</a></li>
				<li><a href="#">Section page 3</a></li>
				<li><a href="#">Section page 4</a></li>
			</ul>

		</div>

		<div id="aside">
			<h3>
				Aside heading
			</h3>
			<p>
				Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
			</p>

		</div>

	</div>
	<div id="footer">
			Copyright © Site name, 20XX
		</div>
</div>

</body>

</html>

Related posts:

  1. Organizing a long list with jQuery: ihwy version

]]> http://www.okadadesign.no/blog/ie/three-column-layout/feed/ 3 Adding a drop cap to Blogger http://www.okadadesign.no/blog/blogger/adding-a-drop-cap-to-blogger/ http://www.okadadesign.no/blog/blogger/adding-a-drop-cap-to-blogger/#comments Mon, 30 Mar 2009 15:51:00 +0000 shinokada http://www.okadadesign.no/blog/?p=51 Neal Grosskopf wrote an article CSS Drop Caps Without Unnecessary HTML Elements or Classes.

I tried it with my Blogger here and I found a small adjustment to work in Blogger. What you have to do is create class dropcap and add CSS.

You can see a big N at the beginning of [...] Related posts:

  1. Adding search to Blogger or website
  2. Add your Twitter updates to your Blogger
  3. Adding Picasa Slideshow to your Blogger or webiste
]]>

Neal Grosskopf wrote an article CSS Drop Caps Without Unnecessary HTML Elements or Classes.

I tried it with my Blogger here and I found a small adjustment to work in Blogger.
What you have to do is create class dropcap and add CSS.

You can see a big N at the beginning of this paragraph.

.dropcap
{
background: #990000;
border: 4px double #ffcc00;
color: #ffffff;
float: left;
font-family: “Times New Roman”, Times, serif;
font-size: 3em;
font-weight: bold;
margin: 0 10px 0 0;
padding: 10px;
text-transform: uppercase;
}

And you need to add span with class=”dropcap” to the first letter of your paragraph like this.

<span class=”dropcap”>B</span>BC News.

It becomes like this.
BBC News.

You can add more class like .blue after .dropcap

.blue
{
background: #3B7CEF;
}

And add this class to a span tag.

<span class=”dropcap blue”>C</span>NN News.

CNN News.

Related posts:

  1. Adding search to Blogger or website
  2. Add your Twitter updates to your Blogger
  3. Adding Picasa Slideshow to your Blogger or webiste

]]> http://www.okadadesign.no/blog/blogger/adding-a-drop-cap-to-blogger/feed/ 1