Skip navigation
NicholasEZ
NicholasEZ Calculating status...
Currently Being Moderated

Advanced CSS Help!

Nov 2, 2011 11:59 AM

Tags: #css #styles #dw #dreamweaver_cs5.5

I'm using Dreamweaver CS5.5 as part of the CS5.5 master collection.

 

On my website I currently have a single style sheet (named style.css) and it contains 7 styles (.background, .networking, .header, .footer, .main, .mainround, .instruction).

 

Each page is constructed as follows:

 

.background is applied

 

.networking is applied to a table at the very top

 

.header is applied to a table below the .networking table

 

.main, .mainround, and/or .instruction is applied to table(s) within the body of the website

 

.footer is applied to the lowest table

 

The following is the same on EVERY single page of my site.

 

The .background style is applied to every page (consists of background-image, background-scroll: scroll; and background-repeat: no-repeat)

 

The .networking table will be including links/scripts to share my site on social networking websites.

 

The .header table includes my site logo as well 5 rollover images/links.

 

The .footer table inludes to rollover images/links.

 

What I want to do:

 

I want my "main" style to include all the information of the 4 aformentioned styles in one.  For instance, say I name the style (within my style.css file) .background.  When I apply .background to my site's body, at want that page to now have my background image and settings, the networking table with functioning links, the header table with my logo and rollovers and the footer tables with my rollovers.  Though is nothing is contained in tables and are contained in something else, that is fine, as long as it is eficient and I get the desired style / effect!

 

Currently everything is centered on the page with auto left and right margins, the appropriate top margin to keep everything in order and properly spaced, and no bottom margin.  I would need these settings/styles to remain, and I would need to be able to insert my site's content between the header and footer tables.  If I need to exclude the footer table, I understand, but I feel everything else I want to do should be quite possible.

 

Thank you for your help fellow forum users.  You have been an amazing help so far and I look forward to the day where I can actually answer someone else's questions!

1464 Views   13 Replies   Latest reply: MurraySummers, Nov 3, 2011 9:16 AM
 
Replies
  • MurraySummers
    Currently Being Moderated
    1. MurraySummers,
    Nov 2, 2011 12:16 PM   in reply to NicholasEZ
    Report

    Too hard to follow.  Please upload the page and post a link to it.

     
    |
    Mark as:
  • NicholasEZ
    Currently Being Moderated
    2. NicholasEZ,
    Nov 2, 2011 12:21 PM   in reply to MurraySummers
    Report

    Thank you for responding Murray.  This site is not yet live (a temporary page is currently up), so I will post the code for a page here, though it doesn't contain much info, it has all of my tables with the appropriate styles applied to them.

     

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

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Untitled Document</title>

    <link href="style.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">

    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_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_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 class="background" onload="MM_preloadImages('buttons/Home/home-over.png','buttons/Schedu le/schedule-over.png','buttons/Register/register-over.png','buttons/Do nate/donate-over.png','buttons/Supporters/supporters-over.png','button s/Legal/legal-over.png','buttons/Contact/contact-over.png')">

    <table width="800" border="0" cellpadding="0" cellspacing="0" class="networking">

      <tr>

        <th scope="col"> </th>

        <th scope="col"> </th>

      </tr>

    </table>

    <table width="800" border="0" cellpadding="0" cellspacing="0" class="header">

      <tr>

        <th width="301" align="left" valign="middle" scope="col"><img src="images/logo.png" alt="Leapfest 30" width="301" height="120" /></th>

        <th width="499" align="right" valign="bottom" scope="col"><a href="home.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','buttons/Home/home-over.png',1)"> <img src="buttons/Home/home.png" name="home" width="70" height="18" border="0" id="home" /></a><a href="schedule.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('schedule','','buttons/Schedule/schedule-ov er.png',1)"><img src="buttons/Schedule/schedule.png" name="schedule" width="96" height="18" border="0" id="schedule" /></a><a href="register.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('register','','buttons/Register/register-ov er.png',1)"><img src="buttons/Register/register.png" name="register" width="88" height="18" border="0" id="register" /></a><a href="donate.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('donate','','buttons/Donate/donate-over.png ',1)"><img src="buttons/Donate/donate.png" name="donate" width="80" height="18" border="0" id="donate" /></a><a href="supporters.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('supporters','','buttons/Supporters/support ers-over.png',1)"><img src="buttons/Supporters/supporters.png" name="supporters" width="114" height="18" border="0" id="supporters" /></a></th>

      </tr>

    </table>

    <table width="800" border="0" cellpadding="0" cellspacing="0" class="instruction">

      <tr>

        <th scope="col"> </th>

      </tr>

    </table>

    <table width="800" border="0" cellpadding="2" cellspacing="2" class="main">

      <tr>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

      </tr>

      <tr>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

      </tr>

      <tr>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

      </tr>

      <tr>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

      </tr>

      <tr>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

      </tr>

      <tr>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

      </tr>

      <tr>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

      </tr>

      <tr>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

        <td> </td>

      </tr>

    </table>

    <table width="800" border="0" cellpadding="2" cellspacing="2" class="footer">

      <tr>

        <td align="right" valign="middle"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('legal','','buttons/Legal/legal-over.png',1 )"><img src="buttons/Legal/legal.png" name="legal" width="65" height="18" border="0" id="legal" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','buttons/Contact/contact-over. png',1)"><img src="buttons/Contact/contact.png" name="contact" width="82" height="18" border="0" id="contact" /></a></td>

      </tr>

    </table>

    </body>

    </html>

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    3. MurraySummers,
    Nov 2, 2011 12:25 PM   in reply to NicholasEZ
    Report

    A table-based layout is not the way to go for any page design, but especially not this one!

     

    How about the CSS for this page?  <sigh>  uploading the page and posting a link is the only fast way to do this.

     
    |
    Mark as:
  • NicholasEZ
    Currently Being Moderated
    4. NicholasEZ,
    Nov 2, 2011 12:30 PM   in reply to MurraySummers
    Report

    Thank you again Murray and I'm sorry if my lack of ability or talent is frustrating.  I've been where you are in my areas of expertise and it can be quite frustrating.

     

    I can't upload it to the site as my site gets quite a bit of traffic (it has existed for quite a while, I am only replacing it with a better site).

     

    And what should I be using instead of tables?  APDivs?

     

    Here is the style.css sheet.

     

    .background {

              background-image: url(images/background.png);

              background-attachment: scroll;

              background-repeat: no-repeat;

     

    }

    .footer {

              height: 18px;

              width: 800px;

              margin-top: 10px;

              margin-right: auto;

              margin-left: auto;

    }

    .instruction {

              background-color: #FFF;

              font-family: "Myriad Pro";

              font-size: 24px;

              text-align: center;

              vertical-align: middle;

              padding: 5px;

              height: auto;

              width: 800px;

              margin-top: 10px;

              margin-right: auto;

              margin-left: auto;

    }

     

     

    .header {

              height: auto;

              width: 800px;

              margin-top: 20px;

              margin-right: auto;

              margin-left: auto;

    }

    .main {

              margin-top: 10px;

              margin-right: auto;

              margin-left: auto;

              width: 800px;

              font-size: 16px;

              padding: 0px;

              height: auto;

    }

    .mainround {

              width: 800px;

              margin-top: 10px;

              margin-right: auto;

              margin-left: auto;

              border-radius: 20px;

    }

     

     

    .networking {

              height: auto;

              width: 800px;

              margin-top: 0px;

              margin-right: auto;

              margin-left: auto;

    }

     
    |
    Mark as:
  • Curtis_E_Flush
    Currently Being Moderated
    5. Curtis_E_Flush,
    Nov 2, 2011 12:32 PM   in reply to MurraySummers
    Report

    Tables bad DIVs good.

     

    I rewrote a tabled page (that was 587 lines long) with DIVs and it was 248 lines when I was done. Looked identical but 39kb vs 13kb? Hands down a faster page, cleaner code, and smaller for FTP.

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    6. MurraySummers,
    Nov 2, 2011 12:59 PM   in reply to NicholasEZ
    Report

    I can't upload it to the site as my site gets quite a bit of traffic

     

    Of course you can.  Save the file as "temp-whatever.php" and upload it.  When diagnosis is done, take it down.  Or save it in a folder called "temp" or my favorite folder name "monkeybutt", and upload it.  Doesn't matter how much traffic your site gets - nobody will see the page except those of us trying to help you.

     

    And what should I be using instead of tables?  APDivs?

     

    Definitely not.  You should be using good practices!  Read this to see what I mean - http://www.apptools.com/examples/pagelayout101.php

     

    OK - I'll see what I can find now that I have the HTML and CSS.

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    7. MurraySummers,
    Nov 2, 2011 1:08 PM   in reply to NicholasEZ
    Report

    I want my "main" style to include all the information of the 4 aformentioned styles in one.

     

    Can't happen, because within the styles that get applied to EVERYTHING, you have styles that should only be applied to certain page elements.  That's not to say that you can't improve and simplify your CSS -

     

    body {

              width:800px;

              background-color: #FFF;

              background-image: url(images/background.png);

              background-repeat: no-repeat;

              margin:0 auto;

              padding: 0;

    }

    .header {

              margin-top: 20px;

    }

    .footer {

              height: 18px;

              margin-top: 10px;

    }

    .instruction {

              font-family: "Myriad Pro", arial, helvetica, sans-serif;

              font-size: 24px;

              text-align: center;

              vertical-align: middle;

              padding: 5px;

              margin-top: 10px;

    }

    .main {

              margin-top: 10px;

              font-size: 16px;

    }

    .mainround {

              margin-top: 10px;

              border-radius: 20px;

    }

     
    |
    Mark as:
  • NicholasEZ
    Currently Being Moderated
    8. NicholasEZ,
    Nov 2, 2011 1:14 PM   in reply to MurraySummers
    Report

    This is really too bad.  I was hoping I could have a single style that would add my logo and buttons . . .

     

    Thank you for your help Murray!

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    9. MurraySummers,
    Nov 2, 2011 1:57 PM   in reply to NicholasEZ
    Report

    Take note of the changes I made to your CSS.  See if you can understand why I made them....

     
    |
    Mark as:
  • NicholasEZ
    Currently Being Moderated
    10. NicholasEZ,
    Nov 3, 2011 9:02 AM   in reply to MurraySummers
    Report

    Hey Murray.

     

    I think I do understand most of your changes.

     

    The width, margin and padding in the body makes it so any tables or divs that I add to my site will have auto margins on the left and right as well as a width of 800px. 

     

    I don't understand the white background color that you have applied.

     

    I also don't understand the addition to the font on .instruction ( font-family: "Myriad Pro", arial, helvetica, sans-serif;).  Does this make it so if a browser doesn't support one font, it goes to the next available font?

     

    Thank you for all of your help!

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    11. MurraySummers,
    Nov 3, 2011 9:12 AM   in reply to NicholasEZ
    Report

    The width, margin and padding in the body makes it so any tables or divs that I add to my site will have auto margins on the left and right as well as a width of 800px.

     

    It restricts the body to 800px of usable width which will be centered within the browser's viewport.  And elements added to the body will be constrained by that width.  So you are close if not exact.

     

     

    I don't understand the white background color that you have applied.

     

    You should declare a background color for the page, even when it's white.

     

    I also don't understand the addition to the font on .instruction ( font-family: "Myriad Pro", arial, helvetica, sans-serif;).  Does this make it so if a browser doesn't support one font, it goes to the next available font?

     

    Bingo.  Not everyone is going to have Myriad Pro installed. And the browser default of Times/Times New Roman is what's used if Myriad Pro isn't found.  Ugly....

     
    |
    Mark as:
  • NicholasEZ
    Currently Being Moderated
    12. NicholasEZ,
    Nov 3, 2011 9:15 AM   in reply to MurraySummers
    Report

    Awesome Murray.  I like your style of help.  You don't just give the answer, you give the answer and make sure the person understands it.  Kudos to you and thank you again!

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    13. MurraySummers,
    Nov 3, 2011 9:16 AM   in reply to NicholasEZ
    Report

    You're welcome.  Good luck!

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points