CSS Havoc

[anonymous]

Hi,

I'm posting here my HTML and CSS work. The problem is that when I add the float: right argument to class="indexSec tionTitle", the background-image disapears. When I take that argument out, it comes back. Anyone has any idea why?
[code=html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<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_margin s">
<div id="page">
<div id="main">
<div id="col1">
<!-- LEFT COLUMN CONTENT START -->
<div id="col1_conten t" class="clearfix ">
<div>
<?php include 'banners.php'; ?>
</div>
<ul id="navlist">
<li><a href="#" class="menu">CO NCOURS</a></li>
<li><a href="#" class="menu">FO RUM</a></li>
<li><a href="#" class="menu">NE WSLETTER</a></li>
<li><a href="#" class="menu">RE CHERCHE</a></li>
</ul>
<div class="indexLef t">
<span class="indexSec tionHeader">MUS IQUE</span>
<ul class="indexSec tionTitle">
<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_conten t" class="clearfix "> THIS IS THE LEFT COLUMN</div>
<div id="ie_clearing "> </div>
</div>
</div>
<div id="footer"> footer </div>
</div>
</div>
</body>
</html>
[/code]
[code=css]
@charset "UTF-8";
/**
* "Yet Another Multicolumn Layout" - (X)HTML/CSS Framework
* (en) Template for designing a screen layout
* (de) Gestaltungsvorl age für die Erstellung eines Screenlayouts
*
* @file basemod_draft.c ss
* @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 & Seitenhintergru nd */
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; }
.indexSectionHe ader { font-family: Palatino Linotype; font-size: 3em; color: #000; float: left; }
.indexSectionTi tle { float: right; width: 200px; }
}
[/code]

[drhowarddrfine]

This is hard to follow. You float the spanned text left, then float the list right. Removing the float from the span makes it show, but I'm having trouble following where everything is going.

Your span is in the middle of a div but the text has no tag attached, which is OK but it looks like it's a title of sorts so make it so; <h1>.

You have far, far too many divs in there. We call it 'divitis' and it's making it hard to follow. You might be able to eliminate all of them but maybe three as a guess.

[anonymous]

I know there are a lot of divs in there.

It is also true that I should put a <h1> instead of a span and I've done so.

What I want to do is to have the h1 stick on the left of the box and the list stick on the right of the box with the background image showing. Would it be possible to look at my code and tell what's wrong with what I've done in order to acheive that?