SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot franglix's Avatar
    Join Date
    Aug 2005
    Location
    France
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Needing a CSS mentor

    Hi there.

    I have grasped the basics of CSS and am moving into the phase of intermediate level with the help of Designing without Tables + surfing.

    I have spent a week battling with some CSS on a site update for my main French client, and not only am I going bald faster, but I am getting apparently nowhere and have spent the best part of a week earning nothing. For reasons explicable only to myself, I am Free-Lancing, and the lance seems to be getting heavier.

    I am relatively isolated in my location and struggle to find associates to move me up the professional skills ladder, so I am wondering if, at some stage, someone suitably 'master of his own CSS' can help me move me through this intermediate phase and be available for the odd five minutes on skype - for this I would send him/her the excess shampoo that I will probably not be using this month, or offer something more grateful sounding in return. Anyway, my immediate problem is this:

    I am trying to layout with a header div, two column divs (links + content) and a footer div that sits at the end of content, of course. All but the content (right now) is calling .php files to avoid repeats. The footer doesn't want to sit at the bottom, and worse still I want a shadow border to go/float all the way down to the right to link up a basic header footer design. My patient client has pushed for the work to be online and its sitting here: http://industrie.sdeec.fr/index2.php

    Any help / comments would be appreciated.

    Best regards,
    Paul.
    Last edited by franglix; Mar 1, 2007 at 13:39. Reason: spelling + syntax errors

  2. #2
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Step one. Use a proper doctype. See my link below. Use html4.01 strict.

  3. #3
    SitePoint Zealot franglix's Avatar
    Join Date
    Aug 2005
    Location
    France
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks drhowarddrfine, have applied the doc-type advice. Though not yet resolved the border and bottom footer issue.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    That page is a bit broken

    You should float the columns and not absolutely position them and then you should apply the repeating background to a wrapper element to get full length borders.

    You also need to clean all that rubbish up as you have 2 body tags and code all over the place

    Here is a quick tidy up although there are still about 10 validation errors for you to fix.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Climatisation Industrielle de SDEEC</title>
    <meta name="keywords" lang="en,fr" content="">
    <meta name="classification" content="">
    <meta name="author" content="franglix">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="content-language" content="fr,en">
    <link href="http://www.sdeec.fr" rel="Start" title="" lang="fr,en" type="text/asp">
    <link rel="icon" href="http://www.sdeec.fr/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="http://www.sdeec.fr/favicon.ico" type="image/x-icon">
    <meta name="robots" content="follow, index, all">
    <meta name="date" content="">
    <meta name="revisit-after" content="14 days">
    <meta name="Indentifier-url" content="http://www.sdeec.fr">
    <meta name="distribution" content="global">
    <style>
    body{margin:0; padding:0; font-family: Arial, Verdana, sans-serif; font-size:1em;}
    ul, ol {display:block; border:0; margin:0px 0px 0px 0px; padding:4px;}
    a {color:#333333;}
    a:hover {color:#666666;}
    div {display:block; border:0; margin:0; padding:0;}
    #Image1 {border-color:#FFFFFF;}
    
    body{text-align:center}
    #wrapper{
        width:780px;
        margin:auto;
        text-align:left;
        background:url(http://industrie.sdeec.fr/im/bg_pompe_a_chaleur.jpg) repeat-y right top;
    }
    
    #head{position:relative; width:780px; height:164px; margin-bottom:0px; padding:0px;}
    #content{
        width: 605px;
        padding-right:15px; 
        float:right;  
    }
    * html #content {width:620px;w\idth:605px;}
    #foot{
        clear:both;
        width:780px;
        height:50px;
        background:url(http://www.sdeec.fr/images/PAC_Bottom.jpg) 0 0 no-repeat;
        text-align:center;
        color:#666;
    }
    #new_menu2{float:left; width:150px;}
    
    #new_menu2 ul
    {padding: 0; border: 0; margin: 0; list-style: none;}
    #new_menu2 li
    {border-top: 1px solid; color:#666666; list-style: none;}
        /* opera browser to remove bullets on lists */
     
    #new_menu2 li a:link, #new_menu2 li a:visited
    {   /* main colour of the menu */
        margin: 0;
        padding: 0;
        display: block;
        padding: 3px;
        text-decoration: none; /* again opera */
        color: #FFF;
        height:17px;}
    /* this is the representative bar colour */
    #new_menu2 ul li
    {    background-color:#FF3300;
        color:black;
        font-family: Arial, Verdana;font-size:0.8em;}
    #new_menu2 li a:hover
    {    color:black;
        display: block;
        background-color:#CCCCCC;}
    #new_menu2 ul li a:link #PAC_MenuNav ul li a:visited{
        color:black;}
    #new_menu2 ul ul li a:hover
    {   color:black;
        background-color:#CCCCCC;
        margin-left:-10px;
        padding-left:15px;}
    #new_menu2 ul ul a:link #new_menu2 ul li a:visited{color:black;}
    
    #head img {display:block}
    
    </style>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    </head>
    <body onload="MM_preloadImages('im/i1o.gif','im/i1t.gif','im/i2o.gif','im/i2t.gif','im/i3o.gif','im/i3t.gif','im/i4o.gif','im/i4t.gif','im/i5o.gif','im/i5t.gif','im/i6o.gif','im/i6t.gif','im/i7o.gif','im/i7t.gif','im/i8o.gif','im/i8t.gif','im/i9o.gif','im/i9t.gif','im/i10o.gif','im/i10t.gif','im/i11o.gif','im/i11t.gif','im/i12o.gif','im/i12t.gif' );">
    <div id="wrapper">
        <div id="head"><img src="http://www.sdeec.fr/images/Climatisation_Industriel_to.jpg" alt="Climatiseurs sp&#233;cifiques pour des applications industrielles" width="780" height="164" border="0" usemap="#pompes-&#224;-chaleur">
            <map name="pompes-&#224;-chaleur">
                <area shape="circle" coords="74,88,64" href="http://www.sdeec.fr" alt="Fabricant des pompes &#224; chaleur.">
                <area shape="rect" coords="391,80,573,127" href="http://industrie.sdeec.fr/index2.php" alt="Climatiseurs sp&#233;cifiques pour des applications industrielles.">
                <area shape="rect" coords="575,80,756,128" href="http://militaire.sdeec.fr/index2.php" alt="Climatiseurs sp&#233;cifiques pour des applications militaires.">
            </map>
        </div>
        <div id="new_menu2">
            <ul>
                <li><a href="http://www.sdeec.fr/" title="Accueil - SDEEC Fabricant des pompes &#224; chaleur">Accueil</a></li>
                <li><a href="http://industrie.sdeec.fr/index2.php" title="Climatiseurs sp&#233;cifiques pour des applications industrielles.">Climatiseurs Industriels</a></li>
                <li><a href="http://militaire.sdeec.fr/index2.php" title="climatiseurs sp&#233;cifiques pour des applications militaires.">Climatiseurs Militaires</a></li>
                <li><a href="http://www.sdeec.fr/fr/qui_est_SDEEC.html" title="Pr&#233;sentation de SDEEC: Fabricant de climatiseurs.">SDEEC - la soci&eacute;t&eacute; </a></li>
                <li><a href="http://www.sdeec.fr/fr/coordonnees_de_SDEEC.html" title="Contacter SDEEC">Contact</a></li>
            </ul>
            <img src="http://www.sdeec.fr/images/Fabricant-de-climatiseurs.gif" name="Image1" width="140" height="105" border="5" id="Image1" alt="usine de SDEEC"></div>
        <div id="content">
            <table width="600" height="480" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td><table width="600" height="480" border="0" cellpadding="0" cellspacing="0">
                            <tr>
                                <td width="150" height="120" align="center"><a href="climatiseur_industriel.php?prod=1" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','im/i1o.gif','centre','','im/i1t.gif',1)"><img src="http://industrie.sdeec.fr/im/i1.gif" alt="T7000f" name="Image1" width="150" height="120" border="0"></a> </td>
                                <td width="150" height="120" align="center"><a href="climatiseur_industriel.php?prod=2" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','im/i2o.gif','centre','','im/i2t.gif',1)"><img src="http://industrie.sdeec.fr/im/i2.gif" alt="BTMS" name="Image2" width="150" height="120" border="0"></a> </td>
                                <td width="150" height="120" align="center"><a href="climatiseur_industriel.php?prod=3" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','im/i3o.gif','centre','','im/i3t.gif',1)"><img src="http://industrie.sdeec.fr/im/i3.gif" alt="H2" name="Image3" width="150" height="120" border="0"></a> </td>
                                <td width="150" height="120" align="center"><a href="climatiseur_industriel.php?prod=4" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','im/i4o.gif','centre','','im/i4t.gif',1)"><img src="http://industrie.sdeec.fr/im/i4.gif" alt="EG5000EEx" name="Image4" width="150" height="120" border="0"></a> </td>
                            </tr>
                            <tr>
                                <td width="150" height="240"><table width="150" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td width="150" height="120" align="center"><a href="climatiseur_industriel.php?prod=5" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','im/i5o.gif','centre','','im/i5t.gif',1)"><img src="http://industrie.sdeec.fr/im/i5.gif" alt="HVAC" name="Image5" width="150" height="120" border="0"></a> </td>
                                        </tr>
                                        <tr>
                                            <td width="150" height="120" align="center"><a href="climatiseur_industriel.php?prod=31" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image31','','im/i11o.gif','centre','','im/i11t.gif',1)"><img src="http://industrie.sdeec.fr/im/i11.gif" alt="AHU" name="Image31" width="150" height="120" border="0"></a> </td>
                                        </tr>
                                    </table></td>
                                <td colspan="2" width="300" height="120"><div align="center"></div>
                                    <div align="center"><img src="http://industrie.sdeec.fr/im/iintro.gif" name="centre" width="300" height="120"></div></td>
                                <td width="150" height="240"><table width="150" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td width="150" height="120"><a href="climatiseur_industriel.php?prod=6" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','im/i6o.gif','centre','','im/i6t.gif',1)"><img src="http://industrie.sdeec.fr/im/i6.gif" alt="W3500EEx" name="Image6" width="150" height="120" border="0"></a> </td>
                                        </tr>
                                        <tr>
                                            <td width="150" height="120" align="center"><a href="climatiseur_industriel.php?prod=32" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image32','','im/i12o.gif','centre','','im/i12t.gif',1)"><img src="http://industrie.sdeec.fr/im/i12.gif" alt="Boucle passive" name="Image32" width="150" height="120" border="0"></a> </td>
                                        </tr>
                                    </table></td>
                            </tr>
                            <tr>
                                <td width="150" height="120" align="center"><a href="climatiseur_industriel.php?prod=7" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','im/i7o.gif','centre','','im/i7t.gif',1)"><img src="http://industrie.sdeec.fr/im/i7.gif" alt="T6000EEx" name="Image7" width="150" height="120" border="0"></a> </td>
                                <td width="150" height="120" align="center"><a href="climatiseur_industriel.php?prod=8" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','im/i8o.gif','centre','','im/i8t.gif',1)"><img src="http://industrie.sdeec.fr/im/i8.gif" alt="Remorqueurs ravitailleurs" name="Image8" width="150" height="120" border="0"></a> </td>
                                <td width="150" height="120" align="center"><a href="climatiseur_industriel.php?prod=9" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','im/i9o.gif','centre','','im/i9t.gif',1)"><img src="http://industrie.sdeec.fr/im/i9.gif" alt="Centrale Hydraulique" name="Image9" width="150" height="120" border="0"></a> </td>
                                <td width="150" height="120" align="center"><a href="climatiseur_industriel.php?prod=10" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','im/i10o.gif','centre','','im/i10t.gif',1)"><img src="http://industrie.sdeec.fr/im/i10.gif" alt="TV-Car Video" name="Image10" width="150" height="120" border="0"></a> </td>
                            </tr>
                        </table></td>
                </tr>
            </table>
        </div>
        <div id="foot"></div>
    </div>
    </body>
    </html>


    Those javascript rollovers could all be converted to css and the tables discarded.


    Hope it helps

  5. #5
    SitePoint Zealot franglix's Avatar
    Join Date
    Aug 2005
    Location
    France
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Many thanks...

    Really appreciate this generous help Paul.

    I was feeling a little having returned and started to read all the 'stickies' and 'Importants' and realised I was not the only confused and dased about divs and floats etc.. So apologies (if they are in order) for posting probably previously dealt with stuff. ...sometimes when the pressure's on and the client wants it the day before yesterday, the vision carpel-tunnels and the mouse-clicking becomes difficult to control.

    I will look at that idea of replacing Javascript with CSS... the possibility was not even on my radar, so I may come back on that issue (or actually bally well surf for a link).

    Thanks again,

    Paul.

    P.S. It looks like you may be the candidate for the bulk of my mad March's excess shampoo offer... I will see if I can put it in a zip file and PM it, but I first need to relocate that bookmarked USB funnel thingy site.
    Last edited by franglix; Mar 3, 2007 at 09:28.


Bookmarks

Posting Permissions

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