Tag: css

Categories
Professional

CSS Genius at work.

And no, it’s not me.  Someone sent me a link to Matthew James Taylor’s “Equal Height Columns with Cross Browser CSS” post.  It’s a really smooth way to get equal height columns with different backgrounds working smoothly.

Since reading this first post, I’ve spent several hours reading through what he has on his site; some if it’s quite ingenious and I must say I’m quite jealous that I haven’t come up with some of the ideas myself.  And the best part of it all, it’s all there for download and use… not that an intelligent person could scrape the CSS and HTML to replicate what he’s doing anyhow, but it’s nice to know he’s willing to share.  So I encourage to go off and learn, be inspired.  I know I’m inspired and looking at doing a redesign based off of what I’ve read so far.  My hat’s off to you Matthew James Taylor.

Categories
Interests

Rollover dynamic text with CSS

Ok, technically it’s not dynamic because you have to enter the text in the html so it’s not “created on the fly”.  This is still a cool feature if you wanted a list of terms and have the definition pop up on the page as the visitor rolls over the definition.  And the best part of this it’s pure CSS, no javascript.  Once again, this is dynamic so it scales to the size of the page and it has been tested and works on IE, Chrome, Safari, and Firefox on a Win7 box.  Your mileage may vary.

Without further ado, here’s the HTML and CSS as well as a link to a working example.

Continue reading “Rollover dynamic text with CSS”
Categories
Professional

Pure CSS two column page

I’ve been working on a web page that I want a left hand menu column on with the content being on the right.  Pretty easy right?  Well, yeah, unless you want a background color in the left hand column and you want it to extend all the way down to the footer, especially if the right hand column is longer than the left.  Well I did some web searching and what I came up with was the suggestion of putting an image as a background to create a virtual image… which is great if you want a fixed width column.  So after doing some looking I found a way to do it with CSS.  Now I by no means claim to be the originator, but I didn’t find this solution by searching google.

The results of the code below can be seen here (http://www.servergoon.com/samples/2column.html) , and yes, I purposefully used Red Green and Blue just so the concept would stand out a bit more.  The CSS attached to the html page is minimal to achieve what I wanted, please feel free to take it and use it as you may.  I’ve tested this on Chrome, Safari, Opera, Firefox and IE on a Win7 machine.  As always, your mileage may vary.

The code for the web page is :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="header"> header </div>
<div class="content">
  <div class="contentLeft">
<ul><li>item1</li><li>item2</li><li>item3</li></ul>
 </div>
  <div>
  <p>Est purus in enim amet. In placerat integer in, platea porttitor, pulvinar elit aliquam nunc est, dapibus a aliquam odio amet. Elementum, urna magna sit? Placerat, sociis tristique ac hac! Pid aliquam aenean ac augue? In turpis aliquet amet, nunc massa etiam sit pid dapibus, lundium lectus augue. Sed a arcu et? Enim tortor sagittis? Augue? Sit scelerisque, duis eu, facilisis phasellus nisi elit porttitor, nascetur duis et augue purus tincidunt etiam. Dictumst sit in pulvinar phasellus, turpis, montes est, a ultrices nec tortor, rhoncus quis magnis? Nunc enim ut turpis pulvinar, duis dis non, elementum, augue dictumst in magna dis odio non et enim? Etiam! In purus parturient ridiculus. Nisi integer? Dis pulvinar proin turpis sed a a urna.</p>

<p>Porttitor dapibus purus? Aenean etiam? Turpis urna porta hac? Nunc amet, scelerisque? Vel in, ac? Habitasse pulvinar, natoque diam, ultricies nec scelerisque aliquam, pulvinar turpis, non! Tincidunt. Platea elit, mauris ac porta adipiscing! Nisi dignissim, proin auctor risus nec dapibus porttitor velit cras! Ridiculus? Odio integer lorem diam porttitor odio platea et tortor elementum! A, aliquam cras tincidunt in? Tincidunt duis, ut dapibus lectus et scelerisque, parturient urna, a massa ac, nunc cras turpis, aliquam, mus porttitor? Magna parturient phasellus in ac, est natoque tortor non. Adipiscing! Turpis ultricies, placerat turpis cum turpis adipiscing turpis. Elit turpis in integer? Pulvinar, est, odio aliquam tincidunt! Adipiscing dignissim, dignissim? Magnis auctor, a porta, lorem in mattis! Scelerisque phasellus rhoncus! Lundium tempor.</p>
</div>
</div>
<div> footer </div>
</body>
</html>

The css for the page is :

@charset "utf-8";
/* CSS Document */

.header {
	background-color:#00F;
	width:100%;
}
.content {
	width:100%;
	background-color:#FFF;
	clear:both;
	overflow:hidden;
}

.contentLeft{
	width:25%;
	margin-bottom:-999px;
	padding-bottom:999px;
	border-right:solid #000 1px;
	float:left;
	background-color:#0F0;

}
.contentRight{
	width:74%;
	float:right;
}
.footer{
	background-color:#F00;
	width:100%;
}

I hope you find this useful. It seem the key is the margin-bottom and padding-bottom in conjunction with the overflow:hidden of the containing folder.

–Server Goon