Hi,
I'm posting here my HTML and CSS work. The problem is that when I add the float: right argument to class="indexSectionTitle", the background-image disapears. When I take that argument out, it comes back. Anyone has any idea why?
////////////////////////////////// HTML ////////////////////////////////////
<!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" xml:lang="en" lang="en">
<head>
<title>Your Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- (en) Add your meta data here -->
<link href="CSS/reset.css" rel="stylesheet" type="text/css" />
<link href="CSS/basemod.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<link href="patches/IE Patchfile.css" rel="stylesheet" type="text/css" />
<![endif]-->
<style type="text/css">
<!--
body {
background-color: #000000;
}
-->
</style></head>
<body>
<div id="page_margins">
<div id="page">
<div id="main">
<div id="col1">
<!-- LEFT COLUMN CONTENT START -->
<div id="col1_content" class="clearfix">
<div>
<?php include 'banners.php'; ?>
</div>
<ul id="navlist">
<li><a href="#" class="menu">CONCOURS</a></li>
<li><a href="#" class="menu">FORUM</a></li>
<li><a href="#" class="menu">NEWSLETTER</a></li>
<li><a href="#" class="menu">RECHERCHE</a></li>
</ul>
<div class="indexLeft">
<span class="indexSectionHeader">MUSIQUE</span>
<ul class="indexSectionTitle">
<li>CONCOURS</li>
<li>DERNIÈRES NOUVELLES</li>
<li>PARUTIONS RÉCENTES</li>
<li>CRITIQUES</li>
<li>ENTREVUES</li>
<li>PHOTO / VIDÉO</li>
</ul>
</div>
</div>
</div>
<!-- LEFT COLUMN CONTENT END -->
<div id="col3">
<!-- RIGHT COLUMN CONTENT START -->
<div id="col3_content" class="clearfix"> THIS IS THE LEFT COLUMN</div>
<div id="ie_clearing"> </div>
</div>
</div>
<div id="footer"> footer </div>
</div>
</div>
</body>
</html>
////////////////////////////// CSS /////////////////////////////////////////////
@charset "UTF-8";
/**
* "Yet Another Multicolumn Layout" - (X)HTML/CSS Framework
* (en) Template for designing a screen layout
* (de) Gestaltungsvorlage für die Erstellung eines Screenlayouts
*
* @file basemod_draft.css
* @creator YAML Builder v0.3 Preview
* @link
http://builder.yaml.de
*/
@media all
{
/**
* Design of the Basic Layout | Gestaltung des YAML Basis-Layouts
*
* @section layout-basics
*/
/* Page margins and background | Randbereiche & Seitenhintergrund */
body { background-color: #000000; }
/* Layout: Width, Background, Border | Layout: Breite, Hintergrund, Rahmen */
#page_margins { width: auto; min-width: 740px; max-width: 90em }
#page { }
#header { }
#footer { }
#navlist { margin-top: 100px; margin-bottom: 20px }
#navlist li { display: inline; list-style-type: none; padding-right: 20px; }
/**
* Formatting of the Content Area | Formatierung der Inhaltsbereichs
*
* @section layout-main
*/
#col1 { float: left; width: 50%}
#col2 { display:none}
#col3 { width: auto; margin: 0 0 0 50%}
#col1_content { padding: 0 10px 0 10px }
#col3_content { padding: 0 10px 0 10px }
/* PAGE INDEX */
.menu { color: #FFFFFF; text-decoration: none; font-size: 1.3em; font-weight: bold; }
.indexLeft { background-image:url(../images/gradient_index.gif); background-repeat: repeat-x; }
.indexSectionHeader { font-family: Palatino Linotype; font-size: 3em; color: #000; float: left; }
.indexSectionTitle { float: right; width: 200px; }
}
Before you post, read our: 
