By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,648 Members | 1,190 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,648 IT Pros & Developers. It's quick & easy.

CSS Havoc

P: 98
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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title>Your Page Title</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <!-- (en) Add your meta data here -->
  7. <link href="CSS/reset.css" rel="stylesheet" type="text/css" />
  8. <link href="CSS/basemod.css" rel="stylesheet" type="text/css" />
  9. <!--[if lte IE 7]>
  10. <link href="patches/IE Patchfile.css" rel="stylesheet" type="text/css" />
  11. <![endif]-->
  12. <style type="text/css">
  13. <!--
  14. body {
  15. background-color: #000000;
  16. }
  17. -->
  18. </style></head>
  19. <body>
  20. <div id="page_margins">
  21. <div id="page">
  22. <div id="main">
  23. <div id="col1">
  24. <!-- LEFT COLUMN CONTENT START -->
  25. <div id="col1_content" class="clearfix">
  26. <div>
  27. <?php include 'banners.php'; ?>
  28. </div>
  29. <ul id="navlist">
  30. <li><a href="#" class="menu">CONCOURS</a></li>
  31. <li><a href="#" class="menu">FORUM</a></li>
  32. <li><a href="#" class="menu">NEWSLETTER</a></li>
  33. <li><a href="#" class="menu">RECHERCHE</a></li>
  34. </ul>
  35. <div class="indexLeft">
  36. <span class="indexSectionHeader">MUSIQUE</span>
  37. <ul class="indexSectionTitle">
  38. <li>CONCOURS</li>
  39. <li>DERNIÈRES NOUVELLES</li>
  40. <li>PARUTIONS RÉCENTES</li>
  41. <li>CRITIQUES</li>
  42. <li>ENTREVUES</li>
  43. <li>PHOTO / VIDÉO</li>
  44. </ul>
  45. </div>
  46. </div>
  47. </div>
  48. <!-- LEFT COLUMN CONTENT END -->
  49. <div id="col3">
  50. <!-- RIGHT COLUMN CONTENT START -->
  51. <div id="col3_content" class="clearfix"> THIS IS THE LEFT COLUMN</div>
  52. <div id="ie_clearing"> </div>
  53. </div>
  54. </div>
  55. <div id="footer"> footer </div>
  56. </div>
  57. </div>
  58. </body>
  59. </html>
  60.  
Expand|Select|Wrap|Line Numbers
  1. @charset "UTF-8";
  2. /**
  3. * "Yet Another Multicolumn Layout" - (X)HTML/CSS Framework
  4. * (en) Template for designing a screen layout
  5. * (de) Gestaltungsvorlage für die Erstellung eines Screenlayouts
  6. *
  7. * @file basemod_draft.css
  8. * @creator YAML Builder v0.3 Preview
  9. * @link http://builder.yaml.de
  10. */
  11.  
  12. @media all
  13. {
  14. /**
  15. * Design of the Basic Layout | Gestaltung des YAML Basis-Layouts
  16. *
  17. * @section layout-basics
  18. */
  19.  
  20. /* Page margins and background | Randbereiche & Seitenhintergrund */
  21. body { background-color: #000000; }
  22.  
  23. /* Layout: Width, Background, Border | Layout: Breite, Hintergrund, Rahmen */
  24. #page_margins { width: auto; min-width: 740px; max-width: 90em }
  25. #page { }
  26. #header { }
  27. #footer { }
  28.  
  29. #navlist { margin-top: 100px; margin-bottom: 20px }
  30. #navlist li { display: inline; list-style-type: none; padding-right: 20px; }
  31.  
  32. /**
  33. * Formatting of the Content Area | Formatierung der Inhaltsbereichs
  34. *
  35. * @section layout-main
  36. */
  37.  
  38. #col1 { float: left; width: 50%}
  39. #col2 { display:none}
  40. #col3 { width: auto; margin: 0 0 0 50%}
  41. #col1_content { padding: 0 10px 0 10px }
  42. #col3_content { padding: 0 10px 0 10px }
  43.  
  44. /* PAGE INDEX */
  45. .menu { color: #FFFFFF; text-decoration: none; font-size: 1.3em; font-weight: bold; }
  46. .indexLeft { background-image:url(../images/gradient_index.gif); background-repeat: repeat-x; }
  47. .indexSectionHeader { font-family: Palatino Linotype; font-size: 3em; color: #000; float: left; }
  48. .indexSectionTitle { float: right; width: 200px; }
  49. }
  50.  
Jan 3 '08 #1
Share this Question
Share on Google+
2 Replies


drhowarddrfine
Expert 5K+
P: 7,435
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

P: 98
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

Post your reply

Sign in to post your reply or Sign up for a free account.