YAML CSS Framework with Borderless Banner

I should have done this a long time ago. I’ve probably redone the below adjustments five times already, wasting more than a full working day all in all, testing by trial and error.
Normally the YAML CSS framework looks like the picture to the left when you add a banner without changing anything. Unfortunately all the sites I’ve been involved in required the banner to have no borders. The below CSS will result in a look like in the picture to the right.

The contents of changes.css:

  margin: 0;
  padding: 0;

  margin: 0;
  padding: 0;


  background: url(../banner.jpg) no-repeat; 
  padding: 0px 0px 0px 0px; 

In this case the banner is exactly 950 pixels wide and 300 pixels high.

And the HTML used in this example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title>YAML | Example &quot;2col_left_13&quot;</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="css/layout_2col_left_13.css" rel="stylesheet" type="text/css"/>
<!--[if lte IE 7]>
<link href="css/patches/patch_2col_left_13.css" rel="stylesheet" type="text/css" />
<link href="css/changes.css" rel="stylesheet" type="text/css"/>
<div id="page_margins">
	<div id="page">
		<div id="header"></div>
		<div id="main">
			<div id="col1">
				<div id="col1_content" class="clearfix">Left</div>
			<div id="col3">
				<div id="col3_content" class="clearfix">Content</div>
				<div id="ie_clearing">&nbsp;</div>
		<div id="footer">Footer</div>

Related Posts

Tags: , ,