CSS Havoc - HTML / CSS

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?

Expand|Select|Wrap|Line Numbers

 
<!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>

Expand|Select|Wrap|Line Numbers

 
@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; }

}

Jan 3 '08 #1

Subscribe Post Reply

1673

drhowarddrfine

7,435

Expert 4TB

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.

Jan 3 '08 #2

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?

Jan 3 '08 #3

Similar topics

Microsoft: Get rid of VB.NET -- now !

by: Spare Change | last post by:

This is a recommendation to Microsoft. VB.net and c# are almost exactly equivalent. I know why Microsoft invented VB.net -- to wean old style VB6 scripters into a true OO world: .Net. But...

.NET Framework

761

C++ sucks for games

by: Neo-LISPer | last post by:

Hey Recently, I researched using C++ for game programming and here is what I found: C++ game developers spend a lot of their time debugging corrupted memory. Few, if any, compilers offer...

C / C++

How solve "Error: The dependency 'xxx.xx.dll, version=1.0.2067.27633, culture=neutral...

by: Rob R. Ainscough | last post by:

I keep getting this error message when I build my solution: Error: The dependency 'xxx.xx.xx, Version=1.0.2067.27633, Culture=neutral' in project 'xxx.xx.xx' cannot be copied to the run directory...

.NET Framework

FTP Programming

by: Squirrel Havoc | last post by:

I am starting to write an FTP server, but I don't understand the PASV protocol. RFC's haven't been much help, since they don't describe what it is, or how it's done. Just what it can do (I think...

C / C++

getting multiple threads

by: Sam | last post by:

When I am debugging my asp.net application with breakpoints I notice I have two concurrent threads running at once. Why is that? It is causing havoc with my response.redirects. Note, I am not...

ASP.NET

new to c++

by: chrispatton | last post by:

I have some questions about Dynamic Memory allocation. I wonder if anyone can clear up a couple things. (1) I am lead to believe that when you allocate memory for an array dynamically, it is not...

C / C++

Library exposing STL containers

by: Bob | last post by:

Hi, I'm writing an application using an API that's still under development. Most data is communicated via std::map<and so forth. Correct me if I'm wrong, but isn't that a bad idea? If a function...

C / C++

Opening and altering XML-doc using XmlDocument wrecks havoc on doc

by: Klaus Jensen | last post by:

Hi I am trying to post-process some XML-documents from some third-party software. I open them, find the right element, manipulate the text and write it back to the element.

.NET Framework

ASP.NET and .NET Framework 2.0

by: HartsVideo | last post by:

Hi, No one seems to know the answers to these questions or they're just not telling. I downloaded and installed .NET Framework 2.0 and along with it came ASP.NET. .NET Framework 2.0 wrecked...

ASP.NET

Cloud Servers without Credit Card and Email Registration: A Simpler Way to Get on the Cloud

by: CloudSolutions | last post by:

Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...

General

Access Europe: Command bars, the Access Shortcut Tool and a simple Audit Log - Wed 3 April

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

General

One-click Importing Excel Data into a*Database

by: ryjfgjl | last post by:

In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...

Microsoft Excel

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware