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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Splitting a file into page and css file

    Hi,

    I found an old template in my files and decided that I want to use it again. I remember the designer created it, with the css coding and the normal page html code all in one file. Later he realised that it would be easier if the css coding was in a separate css file so that if I wanted to change the template a bit in the fututre, I wouldn't have to edit every single file on my website.

    I stopped using it but now, after finding the file, I want to use it again. The thing is, I cannot find the version where there is a css file but the one where the css coding and the rest of the html of the page are all in one file.

    I want to separate them but I'm not sure how to do it. Can anyone help me please?

    Thanks in advance.

    Kind regards,

    Aishah

  • #2
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    You create an empty document and put all your CSS codes in that. Save it with a .css extension to the same directory as your HTML files and link to it with a line like this between the <head> and the </head>

    Code:
    <link rel="stylesheet" type="text/css" href="name_of_file.css">

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    I did try that but the whole template has kind of ruined and things don't come out correctky.

    This is the original file:



    <!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>The Deen - Home</title>
    <style type="text/css" media="screen" title="The Deen">
    body {
    background-image: url('images/back.gif');
    background-color: #ffffff;
    background-position: top center;
    background-repeat: repeat-x;
    font-family: Verdana, Sans, sans-serif;
    font-size: 0.75em;
    color: #555555;
    }
    a { text-decoration: none }
    ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    #wrap {
    width: 780px;
    margin: 0 auto;
    margin-top: -9px;
    background-image: url('images/wrap-bg.gif');
    background-position: center;
    background-repeat: repeat-y;
    border-bottom: 1px solid #bfbfbf;
    min-height: 635px; /* Make sure you change this after you've finalized the navbar */
    }
    #header {
    height: 112px;
    background-image: url('the-deen.co.uk/New/images/top.gif');
    background-position: bottom center;
    background-repeat: no-repeat;
    width: 753px;
    margin: 10px auto;
    border-bottom: 23px solid #414141;
    }
    #navbar {
    margin: 15px;
    /margin: 6px;
    width: 180px;
    float: left;
    border: 1px solid #dfdfdf;
    padding: 10px;
    }
    #main {
    margin-left: 230px;
    /margin-left: 227px;
    margin-top: 25px;
    /margin-top: 16px;
    border: 1px solid #dfdfdf;
    width: 513px;
    padding: 10px;
    margin-bottom: 15px;
    }
    #navbar .sec-title {
    background-image: url('images/cellpic2.gif');
    background-position: top center;
    background-repeat: repeat-x;
    height: 28px;
    background-color: #414141;
    color: #ffffff;
    font-weight: bold;
    font-size: 0.8em;
    text-align: center;
    line-height: 2.8em;
    border-top: 3px solid #a1ba25;
    }
    #navbar li {
    line-height: 2em;
    display: block;
    border-bottom: 1px solid #bfbfbf;
    }
    #navbar li a {
    color: #666666;
    padding-left: 5px;
    font-weight: bold;
    }
    #navbar li a:link {
    display: block;
    }
    #navbar li a:visited {
    display: block;
    }
    #navbar li a:hover {
    color: #ffffff;
    background-color: #414141;
    border-right: 5px solid #a1ba25;
    display: block;
    }
    #main .sec-title {
    background-image: url('images/cellpic2.gif');
    background-position: top center;
    background-repeat: repeat-x;
    height: 28px;
    background-color: #bfbfbf;
    color: #ffffff;
    font-weight: bold;
    font-size: 0.8em;
    text-align: center;
    line-height: 2.8em;
    border-top: 3px solid #a1ba25;
    }
    #main .sec {
    color: #4f4f4f;
    font-size: 1em;
    padding: 5px;
    line-height: 2.0em;
    }
    #main a:link {
    color: #333333;
    border-bottom: 1px solid;
    }
    #main a:visited {
    color: #999999;
    border-bottom: 1px solid;
    }
    #main a:hover {
    color: #a1ba25;
    border-bottom: 2px solid;
    }
    #main li {
    list-style-position: inside;
    list-style-type: circle;
    }
    img.link { border: 0 }
    blockquote {
    margin: 10px;
    background-image: url('images/bq.gif');
    background-repeat: repeat-y;
    border: 1px solid #a1ba25;
    background-color: #414141;
    color: #2f2f2f;
    line-height: 1.5em;
    padding: 15px;
    }
    blockquote a { color: #a1ba25 }
    blockquote a:link { border-bottom: 1px solid }
    blockquote a:visited { border-bottom: 1px dotted }
    blockquote a:hover { border-bottom: 2px solid }
    </style>
    </head>

    <body>
    <div id="wrap">
    <div id="header"></div> <!-- End of header -->
    <div id="navbar">
    <div class="sec-title">Navigation</div>
    <ul>
    <li><a href="home.htm">Home</a></li>
    <li><a href="articles.htm">Articles</a></li>
    <li><a href="lessons.htm">Lessons</a></li>
    <li><a href="events.htm">Events</a></li>
    <li><a href="http://aishahdhorat.wordpress.com/" target="_blank">Blog</a></li>
    <li><a href="contact.htm">Contact</a></li>
    <li><a href="/forum">Forum</a></li>
    </ul>
    <p align="center">
    <a href="http://testing.com"><img class="link" src="images/camera1.gif" /></a><br /><br />
    <a href="http://testing-again.com"><img class="link" src="images/camera2.gif" /></a><br /><br />
    <a href="http://testing-more.com"><img class="link" src="images/camera3.gif" /></a>
    </p> <!-- If you put an image as a link, make sure you use the class link for the img -->
    </div><!-- End of navbar -->
    <div id="main">
    <div class="sec-title">Bismillaahi Rahmaanir Raheem</div>
    <div class="sec">Alhumdulillaahi Rabbil 'Aalameen.
    <p />Wass-Salaatu wass-Salaamu'alaa Ashrafil Ambiyaa`i wal Mursaleen wa 'alaa aalihi wa us-haabihi wa Baarik wa Sallim.
    <p />
    This is a list:
    <ul>
    <li>First item</li>
    <li>Second item</li>
    <li><a href="nolink.htm">A link</a></li>
    <li><a href="http://thinking-islaam.blogspot.com/" target="_blank">A visited link</a></li>
    </ul>
    <blockquote>And here is some blockquoted text. Let's make it a little long so we'll see how it looks when it wraps, inshaa`Allaah.
    <p />Now let's see how a <a href="#">link</a> looks. And <a href="http://the-deen.co.uk/">this</a> is a visited link.</blockquote>
    </div>
    </div><!-- End of main -->
    </div> <!-- End of wrapper -->
    </body>
    </html>

  • #4
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    OK, create one file with this in it:

    Code:
    <!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>The Deen - Home</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
    <div id="wrap">
    <div id="header"></div> <!-- End of header -->
    <div id="navbar">
    <div class="sec-title">Navigation</div>
    <ul>
    <li><a href="home.htm">Home</a></li>
    <li><a href="articles.htm">Articles</a></li>
    <li><a href="lessons.htm">Lessons</a></li>
    <li><a href="events.htm">Events</a></li>
    <li><a href="http://aishahdhorat.wordpress.com/" target="_blank">Blog</a></li>
    <li><a href="contact.htm">Contact</a></li>
    <li><a href="/forum">Forum</a></li>
    </ul>
    <p align="center">
    <a href="http://testing.com"><img class="link" src="images/camera1.gif" /></a><br /><br />
    <a href="http://testing-again.com"><img class="link" src="images/camera2.gif" /></a><br /><br />
    <a href="http://testing-more.com"><img class="link" src="images/camera3.gif" /></a>
    </p> <!-- If you put an image as a link, make sure you use the class link for the img -->
    </div><!-- End of navbar -->
    <div id="main">
    <div class="sec-title">Bismillaahi Rahmaanir Raheem</div>
    <div class="sec">Alhumdulillaahi Rabbil 'Aalameen.
    <p />Wass-Salaatu wass-Salaamu'alaa Ashrafil Ambiyaa`i wal Mursaleen wa 'alaa aalihi wa us-haabihi wa Baarik wa Sallim.
    <p />
    This is a list:
    <ul>
    <li>First item</li>
    <li>Second item</li>
    <li><a href="nolink.htm">A link</a></li>
    <li><a href="http://thinking-islaam.blogspot.com/" target="_blank">A visited link</a></li>
    </ul>
    <blockquote>And here is some blockquoted text. Let's make it a little long so we'll see how it looks when it wraps, inshaa`Allaah.
    <p />Now let's see how a <a href="#">link</a> looks. And <a href="http://the-deen.co.uk/">this</a> is a visited link.</blockquote>
    </div>
    </div><!-- End of main -->
    </div> <!-- End of wrapper -->
    
    </body>
    </html>
    Save that as "index.html"

    and another with this in it:

    Code:
    body {
    background-image: url('images/back.gif');
    background-color: #ffffff;
    background-position: top center;
    background-repeat: repeat-x;
    font-family: Verdana, Sans, sans-serif;
    font-size: 0.75em;
    color: #555555;
    }
    a { text-decoration: none }
    ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    #wrap {
    width: 780px;
    margin: 0 auto;
    margin-top: -9px;
    background-image: url('images/wrap-bg.gif');
    background-position: center;
    background-repeat: repeat-y;
    border-bottom: 1px solid #bfbfbf;
    min-height: 635px; /* Make sure you change this after you've finalized the navbar */
    }
    #header {
    height: 112px;
    background-image: url('the-deen.co.uk/New/images/top.gif');
    background-position: bottom center;
    background-repeat: no-repeat;
    width: 753px;
    margin: 10px auto;
    border-bottom: 23px solid #414141;
    }
    #navbar {
    margin: 15px;
    /margin: 6px;
    width: 180px;
    float: left;
    border: 1px solid #dfdfdf;
    padding: 10px;
    }
    #main {
    margin-left: 230px;
    /margin-left: 227px;
    margin-top: 25px;
    /margin-top: 16px;
    border: 1px solid #dfdfdf;
    width: 513px;
    padding: 10px;
    margin-bottom: 15px;
    }
    #navbar .sec-title {
    background-image: url('images/cellpic2.gif');
    background-position: top center;
    background-repeat: repeat-x;
    height: 28px;
    background-color: #414141;
    color: #ffffff;
    font-weight: bold;
    font-size: 0.8em;
    text-align: center;
    line-height: 2.8em;
    border-top: 3px solid #a1ba25;
    }
    #navbar li {
    line-height: 2em;
    display: block;
    border-bottom: 1px solid #bfbfbf;
    }
    #navbar li a {
    color: #666666;
    padding-left: 5px;
    font-weight: bold;
    }
    #navbar li a:link {
    display: block;
    }
    #navbar li a:visited {
    display: block;
    }
    #navbar li a:hover {
    color: #ffffff;
    background-color: #414141;
    border-right: 5px solid #a1ba25;
    display: block;
    }
    #main .sec-title {
    background-image: url('images/cellpic2.gif');
    background-position: top center;
    background-repeat: repeat-x;
    height: 28px;
    background-color: #bfbfbf;
    color: #ffffff;
    font-weight: bold;
    font-size: 0.8em;
    text-align: center;
    line-height: 2.8em;
    border-top: 3px solid #a1ba25;
    }
    #main .sec {
    color: #4f4f4f;
    font-size: 1em;
    padding: 5px;
    line-height: 2.0em;
    }
    #main a:link {
    color: #333333;
    border-bottom: 1px solid;
    }
    #main a:visited {
    color: #999999;
    border-bottom: 1px solid;
    }
    #main a:hover {
    color: #a1ba25;
    border-bottom: 2px solid;
    }
    #main li {
    list-style-position: inside;
    list-style-type: circle;
    }
    img.link { border: 0 }
    blockquote {
    margin: 10px;
    background-image: url('images/bq.gif');
    background-repeat: repeat-y;
    border: 1px solid #a1ba25;
    background-color: #414141;
    color: #2f2f2f;
    line-height: 1.5em;
    padding: 15px;
    }
    blockquote a { color: #a1ba25 }
    blockquote a:link { border-bottom: 1px solid }
    blockquote a:visited { border-bottom: 1px dotted }
    blockquote a:hover { border-bottom: 2px solid }
    Save that as "style.css"

  • #5
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you! it works fine. Hope you have a nice day!


  •  

    Posting Permissions

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