Skip navigation
m.dakin
Currently Being Moderated

How can I make the CSS apply to the page?

Apr 17, 2013 2:12 PM

New at this, using the tutorial.  Am stuck at the place where you apply the newly created CSS style page.  The program will not apply it to the page. Have tried is numerous times.  What am I doing wrong?

 
Replies
  • Currently Being Moderated
    Apr 17, 2013 2:21 PM   in reply to m.dakin

    I don't know which tutorial you're working with. So forgive me if I'm covering old material.

     

    #1 You need to be working in a Defined Local Site Folder.   Site > New site or Manage Sites > Edit.  See screenshot.DW-CS6-LocalSiteFolderDef.jpg

     

    #2 You need an HTML document and a CSS document.  See link below for details.

    http://alt-web.com/DEMOS/DW-Link-Stylesheet.shtml

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 17, 2013 2:49 PM   in reply to m.dakin

    Can we see the code from your CSS file and your HTML file?  Use the web forum to paste code into a reply.  E-mail won't work.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 17, 2013 2:54 PM   in reply to Nancy O.

    Another thought occurred to me.  Design View isn't reliable. Click Live View or Preview your page in browsers.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 17, 2013 4:44 PM   in reply to m.dakin

    That's not much help.

     

    In code view, copy & paste this code into a new, blank HTML document. 

    Save As test.html 

    You should be able to see the background colors in Design View.

     

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 Document</title>
    
    <style>
    body {
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    width: 900px;
    margin: 0 auto;
    padding: 0;
    background: #099;
    }
    
    header {
    margin: 0;
    padding: 0;
    background: #FFF;
    }
    
    h1 {
    margin: 0;
    padding: 0
    }
    
    /* BEGIN HORIZONTAL DROP-MENU */
    nav {
    position: relative;
    width: 900px; /**adjust width as needed**/
    margin: 0 auto; /**with width, this block is centered**/
    padding: 0;
    text-align: center;
    background:#EAE;
    }
    
    nav ul {
    margin: 0;
    padding: 0
    }
    
    nav li {
    list-style: none;
    font-size: 14px;
    float: left;
    text-align: center; 
    }
    
    /**top level menu**/
    nav li a {
    display: block;
    text-decoration: none;
    /* adjust width as needed or use auto */
    width: 9em; /*same as sub-menus*/
    /*space between links, adjust margins as needed*/
    margin-right: 3.5em;
    margin-left: 3.5em;
    padding: 8px;
    font-weight: bold;
    line-height: 1.50em;
    border: 1px dotted #666;
    border-top: none;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    color:#FFF;
    background: #2CC7CF;
    text-shadow: 1px 2px 4px #666;
    }
    
    /**top menu style on mouse over**/
    nav li:hover > a{
    background: #333;
    }
    
    /**sub-menu**/
    nav li ul {
    display: none;
    text-align: center;
    margin: 0;
    padding: 0;
    }
    
    /**sub-menu, help for older IE**/
    nav li:hover ul, nav li.hover ul {
    display: block;
    position: absolute;
    padding: 0;
    }
    
    nav li:hover li, nav li.hover li { float: none; }
    
    /**drop-menu style**/
    nav li:hover li a, nav li.hover li a {
    width: 9em; /* adjust width as needed or use auto */
    margin-top: 0;
    }
    
    /**drop-menu style on mouse over**/
    nav li li a:hover {
    background:#FFF;
    color: #000;
    }
    
    /* Clear floated elements at the end*/
    nav:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
    /**END HORIZONTAL DROP-MENUS STYLES**/
    
    
    /**COLUMNS**/
    aside {
    float: left;
    width: 50%;
    background: #FFF;
    }
    
    aside * { padding: 0 12px }
    aside:nth-child(odd) { background: #EAEAEA; }
    aside:nth-child(even) { background: #DADADA; }
    
    footer {
    color: #FFF;
    font-size: small;
    font-weight: bold;
    text-align: right;
    padding-right: 25px;
    }
    </style>
    
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    
    <!--[if lt IE 8]>
    <style>
    nav li a {margin-right: 2.75em; margin-left:2.75em}
    </style>
    <![endif]-->
    </head>
    
    <body>
    
    <header>
    <h1>Site Name</h1>
    
    <nav>
    <ul>
    <li><a href="#">ABOUT US &#9660;</a><ul>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Newsletter</a></li></ul>
    </li>
    <li><a href="#">PRODUCTS &#9660;</a><ul>
    <li><a href="#">Broken Glass</a></li>
    <li><a href="#">Mosaic Tiles</a></li>
    <li><a href="#">Adhesives</a></li>
    <li><a href="#">Grout</a></li></ul>
    </li>
    <li><a href="#">ACCESSORIES &#9660;</a><ul>
    <li><a href="#">Gloves</a></li>
    <li><a href="#">Rubber Mallets</a></li>
    <li><a href="#">Sponges</a></li>
    <li><a href="#">Safety Glasses</a></li></ul>
    </li>
    <li><a href="#">CONTACT</a></li>
    </ul> 
    </nav>
    
    </header>
    
    <aside>
    <h3>Heading 3</h3>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Mauris vitae libero lacus, vel hendrerit nisi! 
    Maecenas quis velit nisl, volutpat viverra felis. 
    Vestibulum luctus mauris sed sem dapibus luctus. 
    Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. 
    Quisque varius scelerisque nunc eget rhoncus. 
    Aenean tristique enim ut ante dignissim. </p></aside>
    
    <aside>
    <h3>Heading 3</h3>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Mauris vitae libero lacus, vel hendrerit nisi! 
    Maecenas quis velit nisl, volutpat viverra felis. 
    Vestibulum luctus mauris sed sem dapibus luctus. 
    Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. 
    Quisque varius scelerisque nunc eget rhoncus. 
    Aenean tristique enim ut ante dignissim. </p>
    </aside>
    
    <footer> <p>&copy; 2013 all rights reserved</p> </footer>
    </body>
    </html>

     

     

    Report back with your results.

     

     

    Nancy O.

     
    |
    Mark as:

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