Results 1 to 4 of 4

Thread: How to move copied css to a single file?

  1. #1
    Join Date
    Jan 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to move copied css to a single file?

    Hi all,
    i am completely new to this, so maybe you guys can help me out. I want to move the css from a layout and a menu to a single file, but i am doing something wrong. I am using this layout: http://www.dynamicdrive.com/style/la...-frame-layout/ and this menu: http://www.dynamicdrive.com/style/cs...vertical_menu/
    Now after putting them together my html looks like this:

    Code:
    <!--Force IE6 into quirks mode with this comment tag-->
    <!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" lang="en" xml:lang="en">
    
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Dynamic Drive: CSS Left Frame Layout</title>
    
    
    <script type="text/javascript">
    /*** Temporary text filler function. Remove when deploying template. ***/
    var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
    function filltext(words){
    for (var i=0; i<words; i++)
    document.write(gibberish[Math.floor(Math.random()*3)]+" ")
    }
    </script>
    
    </head>
    
    <body>
    
    <div id="framecontent">
    <div class="innertube">
    
    <h1>CSS Left Frame Layout</h1>
    <h3>Sample text here</h3>
    
    <div class="arrowgreen">
      <ul>
        <li><a href="http://www.dynamicdrive.com" title="Home">Home</a></li>
        <li><a href="http://www.dynamicdrive.com/style/" class="selected" title="CSS">CSS Library</a></li>
        <li><a href="http://www.ddwhois.com" title="Whois">DD Whois</a></li>
        <li><a href="http://www.dynamicdrive.com/forums/" title="Forums">Forums</a></li>
        <li><a href="http://tools.dynamicdrive.com/" title="Tools">Webmaster Tools</a></li>
        <li><a href="http://www.javascriptkit.com" title="JavaScript">JavaScript</a></li>
      </ul>
    </div>
    
    
    </div>
    </div>
    
    
    <div id="maincontent">
    <div class="innertube">
    
    <h1>Dynamic Drive CSS Library</h1>
    <p><script type="text/javascript">filltext(255)</script></p>
    <p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p>
    
    </div>
    </div>
    
    
    </body>
    </html>
    and my css-file looks like this:

    Code:
    body{
        margin: 0;
        padding: 0;
        border: 0;
        overflow: hidden;
        height: 100%; 
        max-height: 100%; 
    }
    
    #framecontent{
        position: absolute;
        top: 0;
        bottom: 0; 
        left: 0;
        width: 200px; /*Width of frame div*/
        height: 100%;
        overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
        background: navy;
        color: white;
    }
    
    #maincontent{
        position: fixed;
        top: 0; 
        left: 200px; /*Set left value to WidthOfFrameDiv*/
        right: 0;
        bottom: 0;
        overflow: auto; 
        background: #fff;
    }
    
    .innertube{
        margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
    }
    
    * html body{ /*IE6 hack*/
      padding: 0 0 0 200px; /*Set value to (0 0 0 WidthOfFrameDiv)*/
    }
    
    * html #maincontent{ /*IE6 hack*/
      height: 100%; 
      width: 100%; 
    
    
    
    
    
    .arrowgreen{
      width: 180px; /*width of menu*/
      border-style: solid solid none solid;
      border-color: #94AA74;
      border-size: 1px;
      border-width: 1px;
    }
    
    .arrowgreen ul{
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
      
    .arrowgreen li a{
      font: bold 12px Verdana, Arial, Helvetica, sans-serif;
      display: block;
      background: transparent url(pics/arrowgreen.gif) 100% 0;
      height: 24px; /*Set to height of bg image- padding within link (ie: 32px - 4px - 4px)*/
      padding: 4px 0 4px 10px;
      line-height: 24px; /*Set line-height of bg image- padding within link (ie: 32px - 4px - 4px)*/
      text-decoration: none;
    }  
      
    .arrowgreen li a:link, .arrowgreen li a:visited {
      color: #5E7830;
    }
    
    .arrowgreen li a:hover{
      color: #26370A;
      background-position: 100% -32px;
    }
    
      
    .arrowgreen li a.selected{
      color: #26370A;
      background-position: 100% -64px;
    }
    I copied the arrowgreen.gif in the subfolder pics, but still it is not being shown. What is the problem?

  2. #2
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    596
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    you also need to upload the arrowgreen to your website in order to use it.
    it is http://www.dynamicdrive.com/cssexamp...arrowgreen.gif

    You will need to make sure the path to that image is correct also.The script shows it in a directory called pics.(look at the css file for that
    Last edited by ajfmrf; 01-29-2013 at 04:44 PM. Reason: add to post
    Thanks,

    Bud

  3. #3
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    596
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    Please post a link to your page.Nobody can guess at what the problem is to fix it unless they have the source to view
    Thanks,

    Bud

  4. #4
    Join Date
    Jan 2013
    Location
    India
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Any live url please? So it is possible to fix things easily. If you are new to CSS or HTML, I suggest you to use Chrome browser with "inspect element" It can help identifying the missing files and missing css.

Similar Threads

  1. help w/css menu copied from this site.
    By ScottDB in forum CSS
    Replies: 2
    Last Post: 05-27-2011, 05:14 AM
  2. Single JS file
    By Aravona in forum JavaScript
    Replies: 6
    Last Post: 05-24-2011, 08:35 AM
  3. Replies: 4
    Last Post: 04-15-2009, 03:27 AM
  4. Single Selection from PHP File
    By Diversions in forum PHP
    Replies: 2
    Last Post: 09-07-2008, 04:30 PM
  5. How to move a file?
    By sami in forum PHP
    Replies: 4
    Last Post: 04-27-2007, 02:27 PM

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
  •