Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread: CSS Havoc

  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS Havoc

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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    If a div does not enclose your floats you need to clear your floats.

    This is my favorite method.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I added a div around my <ul> and moved the class to that div but it still doesn't work. What else do I need to do?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I'm not sure... to be honest, it's hard to tell what you're trying to accomplish. You have "this is the left column" floated right... empty divs all over...
    I'm not sure what #page_margins and #page are going to do but that is not a min-width solution I've ever seen before...

    It might help you to put a different background color on each div so you can see where it's going...
    try this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	background: #000000;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #container {
    	width: 740px;
    	margin: 0 auto;
    	overflow: auto;
    	background: #9933FF;
    }
    #header {
    	height: 120px;
    	background: #66FF00;
    }
    #col1 {
    	width: 370px;
    	float: left;
    	background: #33CCFF;
    }
    	#navlist { 
    		margin: 100px 0 20px 0;
    	}
    	#navlist li { 
    		display: inline; 
    		list-style-type: none; 
    		padding-right: 20px; 
    	}
    		.indexLeft { 
    		background:url(../images/gradient_index.gif) repeat-x; 
    		}
    		.indexSectionHeader { 
    		font-family: Palatino Linotype; 
    		font-size: 3em; 
    		color: #000; 
    		float: left; 
    		}
    		.indexSectionTitle { 
    		float: right; 
    		width: 200px; 
    		}
    #col2 {
    	margin: 0 0 0 370px;
    	background: #FF3300;
    }
    #footer {
    	height: 40px;
    	background: #66CC99;
    }
    </style>
    </head>
    <body>
        <div id="container">
        	<div id="header"></div>
            	<div id="col1">
                    <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>
                    <!--end indexLeft--></div>
                <!--end col1--></div>
          <div id="col2">
        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
            aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
            duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
            aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
            duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
          <!--end col2--></div>  
    <div id="footer"> footer </div>  
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    All I'm trying to do is have the ''MUSIQUE'' stick to the left and the list stick on the right of the div.

    I'm building the webpage as we speak and that's why we have so many empty divs for now...

    Can you tell me what's wrong with the code with the div containing the list and the word ''MUSIQUE''?

    Thank you a lot for your time!

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by lemixtape View Post
    All I'm trying to do is have the ''MUSIQUE'' stick to the left and the list stick on the right of the div.

    I'm building the webpage as we speak and that's why we have so many empty divs for now...

    Can you tell me what's wrong with the code with the div containing the list and the word ''MUSIQUE''?

    Thank you a lot for your time!
    No problem at all lemixtape,
    To get the word Musique next to the list you would use float:left;
    For float to work you have to give it a widht.

    You will also need to adjust the widths of .indexLeft, .indexSectionHeader and .indexSectionTitle so they will all fit. In otherwords, MUSIQUE and your list have to fit inside the containing div - the way they are now, #col1 needs to be 455px wide to contain them. See box-model.

    Here's the example:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	background: #000000;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #container {
    	width: 740px;
    	margin: 0 auto;
    	overflow: auto;
    	background: #9933FF;
    }
    #header {
    	height: 120px;
    	background: #66FF00;
    }
    #col1 {
    	width: 455px;
    /#this width is musique plus the list plus extra for bullets*/
    	float: left;
    	background: #CCFF66;
    	overflow: auto; /*now we need to clear floats in #col1*/
    }
    	#navlist { 
    		margin: 100px 0 20px 0;
    	}
    	#navlist li { 
    		display: inline; 
    		list-style-type: none; 
    		padding-right: 20px; 
    	}
    		.indexLeft { 
    		background:url(../images/gradient_index.gif) repeat-x; 
    		}
    		.indexSectionHeader { 
    		font-family: Palatino Linotype; 
    		font-size: 3em; 
    		color: #000; 
    		float: left; 
    		width: 240px;
    		background: #fff;
    		}
    		.indexSectionTitle { 
    		float: right;
    		width: 200px; 
    		}
    </style>
    </head>
    <body>
        <div id="container">
        	<div id="header"></div>
            	<div id="col1">
                    <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>
                    <!--end indexLeft--></div>
                <!--end col1--></div>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks for the extra infos. I just did what you asked but the background image still won't appear in the background once I set the float: right argument...

    Maybe if I sent you the files you'd have a better understanding? Could it be because I'm importing the rules from @import url(/yaml/core/iehacks.css)?

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    You must have a test site up since you have <?php include 'banners.php'; ?>?
    Give us a link would be easiest.

    or zip it all up and attach it here works too.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    lemixtape (01-03-2008)

  • #9
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Here is the code. I've added a few lines since the first post. Thanks for taking a look at it!
    Attached Files Attached Files


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •