18 Replies Latest reply on Feb 5, 2012 10:28 AM by zobino

    .css is not a css file and could not be opened

    zobino

      So I got a design from my friend and he wants me to continue working with it. I've been coded without Dreamweave before so I thought I would give it a go since I already bought the Adobe package.

       

      So atm I can only see whats going on in the Design tab with HTML (Only text) So it doesn't seem like it has my .css file.

       

      I followed a adobe tutorial and and imported a .css file into the dreamweaver scene. Problem is it says: The file style.css is a HTML-file, and cannot be opened as CSS"

      (I'm sorry my dreamweaver is not in English)

      If I use "link" instead of Import in the Format screen after clicking the little chain button on the right under "css-format". If I use "link" the .css file seems to get imported but there is still no css design in the design tab (just the HTML)

       

       

      How do you solve this?

       

       

      Thanks in advance!

        • 1. Re: .css is not a css file and could not be opened
          MurraySummers Level 8

          Paste the contents of 'style.css' into a reply here, please.

          • 2. Re: .css is not a css file and could not be opened
            zobino Level 1

            * {

                      margin: 0;

                      padding: 0;

            }

             

             

            a {

                      text-decoration: underline;

                      color: #DB4A4A;

            }

             

             

            a:hover {

                      text-decoration: none;

            }

             

             

            body {

                      line-height: 1.75em;

                      background: #222424 url(images/img01.gif) repeat-x top left;

                      color: #C0C1C1;

                      font-size: 11.5pt;

            }

             

             

            body,input {

                      font-family: Tahoma, sans-serif;

            }

             

             

            br.clearfix {

                      clear: both;

            }

             

             

            h1,h2,h3,h4 {

                      text-transform: uppercase;

                      font-weight: normal;

            }

             

             

            h2 {

                      font-size: 1.75em;

            }

             

             

            h2,h3,h4 {

                      color: #FFF;

                      font-family: Oswald, sans-serif;

                      margin-bottom: 1.25em;

            }

             

             

            h3 {

                      font-size: 1.5em;

            }

             

             

            h4 {

                      font-size: 1.25em;

            }

             

             

            img.alignleft {

                      margin: 5px 20px 20px 0;

                      float: left;

                      position: relative;

                      top: -10px;

            }

             

             

            img.aligntop {

                      margin: 5px 0 20px 0;

            }

             

             

            img.border {

                      padding: 5px;

                      border: solid 1px #D6D6D6;

            }

             

             

            p {

                      margin-bottom: 1.5em;

            }

             

             

            ul {

                      margin-bottom: 1.5em;

            }

             

             

            ul h4 {

                      margin-bottom: 0.35em;

            }

             

             

            #content {

                      float: left;

                      padding: 40px;

                      background: #FFF;

                      width: 595px;

                      color: #4D4D4D;

            }

             

             

            #content h2, #content h3, #content h4 {

                      color: #0F0F0F;

            }

             

             

            #content strong {

                      color: #0F0F0F;

            }

             

             

            #footer {

                      padding: 70px 0 110px 0;

                      text-align: center;

                      margin: 0 0 45px 0;

            }

             

             

            #footer a {

                      color: #C0C1C1;

            }

             

             

            #header {

                      height: 125px;

                      position: relative;

                      padding: 40px;

            }

             

             

            #logo {

                      margin: -20px auto;

                      height: 110px;

                      line-height: 110px;

                      text-align: center;

                      position: relative;

            }

             

             

            #logo a {

                      color: #FFFFFF;

                      text-decoration: none;

            }

             

             

            #logo h1 {

                      font-size: 2.8em;

                      font-family: Oswald, sans-serif;

            }

             

             

            #menu {

                      line-height: 55px;

                      position: absolute;

                      bottom: 0;

                      height: 55px;

                      background: #AF1E1E url(images/img02.gif) repeat-x top left;

                      left: 0;

                      font-family: Oswald, sans-serif;

                      width: 980px;

                      border-top: solid 1px #FF9696;

                      border-bottom: solid 1px #9B0A0A;

            }

             

             

            #menu a {

                      font-size: 1.1em;

                      text-decoration: none;

                      text-transform: uppercase;

                      color: #FFFFFF;

            }

             

             

            #menu ul {

                      width: 980px;

                      list-style: none;

                      text-align: center;

            }

             

             

            #menu ul li {

                      text-align: center;

                      padding: 8px 15px 8px 15px;

                      margin: 0 5px 0 5px;

                      display: inline;

            }

             

             

            #menu ul li.current_page_item {

                      background: #912727;

                      border-top: solid 1px #9B0A0A;

                      border-bottom: solid 1px #FF9696;

            }

             

             

            #page {

                      position: relative;

                      margin: 0 0 0 0;

                      width: 980px;

                      padding: 0;

            }

             

             

            #page .section-list {

                      padding-left: 0;

                      list-style: none;

            }

             

             

            #page .section-list li {

                      padding: 25px 0 25px 0;

                      clear: both;

            }

             

             

            #page ul {

                      list-style: none;

            }

             

             

            #page ul li {

                      padding: 10px 0 10px 0;

                      border-top: solid 1px #D6D6D6;

            }

             

             

            #page ul li.first {

                      border-top: 0;

                      padding-top: 0;

            }

             

             

            #post1 {

                      overflow: hidden;

                      margin: 0 0 30px 0;

            }

             

             

            #post2 {

                      margin: 0 0 30px 0;

                      overflow: hidden;

            }

             

             

            #post3 {

                      overflow: hidden;

            }

             

             

            #search input.form-submit {

                      color: #FFF;

                      background: #CD3C3C;

                      margin-left: 1em;

                      font-family: Oswald, sans-serif;

                      border: 0;

                      padding: 5px;

            }

             

             

            #search input.form-text {

                      padding: 10px;

                      border: solid 1px #2C2E2E;

            }

             

             

            #sidebar {

                      border-bottom: solid 1px #102424;

                      background: #384C4C url(images/img03.gif) repeat-y top left;

                      width: 225px;

                      padding: 40px;

                      margin: 0 0 0 675px;

                      color: #CAD5D5;

            }

             

             

            #sidebar h2, #sidebar h3, #sidebar h4 {

                      color: #FFFFFF;

            }

             

             

            #sidebar a {

                      color: #EF7A7A;

            }

             

             

            #sidebar ul {

                      list-style: none;

                      margin-bottom: 2em;

            }

             

             

            #sidebar ul li {

                      padding: 10px 0 10px 0;

                      border-top: solid 1px #5E8383;

                      border-bottom: solid 1px #182C2C;

            }

             

             

            #sidebar ul li.first {

                      padding-top: 0;

                      border-top: 0;

            }

             

             

            #sidebar ul li.last {

                      border-bottom: 0;

            }

             

             

            #wrapper {

                      width: 980px;

                      position: relative;

                      margin: 75px auto 0 auto;

            }

             

             

             

            I just remembered. Shoud there not be a css define in the begining? Like Doctype for HTML ?

            • 3. Re: .css is not a css file and could not be opened
              Ken Binney Adobe Community Professional & MVP

              Your CSS file should not contain any DOCTYPE or HTML tags etc

              Please  post the link to your css file that you have in the head section of your HTML page

              • 4. Re: .css is not a css file and could not be opened
                zobino Level 1

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

                 

                 

                Dosen't the problem have to do with dreamweaver? as I can see the whole page in preview in browser but not in the design tab

                • 5. Re: .css is not a css file and could not be opened
                  Ken Binney Adobe Community Professional & MVP

                  I am guessing there is a glitch in your HTML

                  Perhaps a missing closing tag.

                  Run the code throught the W3C validator

                   

                  http://validator.w3.org/

                   

                  You're not trying to view your CSS file in design view are you??

                  • 6. Re: .css is not a css file and could not be opened
                    Nancy OShea Adobe Community Professional & MVP

                    Did you define a local site folder in DW before you began this project?  If not, do that now.

                     

                         Setting Up Local & Remote site folders (CS5 & CS5.5)

                         http://help.adobe.com/en_US/dreamweaver/cs/using/WS753df6af718a350a60097e0f131686fa2b4-7ff e.html

                     

                    Do you have CSS styles enabled in DW?

                     

                         View > Style Rendering > Display Styles

                     

                     

                    Nancy O.

                    Alt-Web Design & Publishing

                    Web | Graphics | Print | Media  Specialists 

                    http://alt-web.com/

                    http://twitter.com/altweb

                    • 7. Re: .css is not a css file and could not be opened
                      zobino Level 1

                      I added the website folder to dreamweaver, It now shows In the bottom right. I still have the same problem though. Tried to add the style.css again but it said the same that .css is not a css file...

                      • 8. Re: .css is not a css file and could not be opened
                        zobino Level 1

                        Does anyone know how to solve this issue? Using DW is not needed atm when I can't see the style and I need this site ready this weekend :S been trying to google the whole day and I know I have in the display style enabled.

                         

                        problem1.png

                        (Sorry for the language but you should see what the window is all about)

                         

                        Is this something that should be enabled? And if so, how do I use it?

                        • 9. Re: .css is not a css file and could not be opened
                          zobino Level 1

                          Does anyone have a Adobe guide or a YouTube guide on how to fix this problem?

                          • 10. Re: .css is not a css file and could not be opened
                            adninjastrator Level 4

                            Without actually see the page and files on-line... we are just guessing.... Post a link to the actual page and let us check the link to your .css file.

                            That being said, my guess is that you have not saved the .css file as a .css file. So of course it's not a .css file

                            You don't need DW, you don't need to define the site or anything like that to test and get it working.

                            For testing, put your HTML web page and the .css file in the same folder. Be sure to correctly path to the .css in the <head> of you Web page.

                            To test and fix this, don't use DW at all.... click directly on the HTML with Windows Explorer. If the .css is not linking, open the .css file in Notepad and remove or comment out ALL the styles and just give the body a background color, do NOT add anything else... just this:

                            body {

                             

                            background-color: #670001;

                            border: 0px;

                            margin: 0px;

                            padding: 0px;

                            }

                            Besure to save the file as styles.css. Test the HTML page. If the page doesn't display that background color, the link in the HTML <head> is wrong.

                             

                            Best wishes,

                            Adninjastrator

                            • 11. Re: .css is not a css file and could not be opened
                              zobino Level 1

                              DW is starting to kill me slowly....The file is really a .css since when you're opening the css file the only filetype it looks for is .css, And rightclicking and going to properties says it's a .css file...The website is not even fully created. The reason I want the colors and properties from the css file to display in the design tab is because then I can really create things inside and really see how it turns out as I'm not soo good with placements..

                               

                              EDIT: So there is no problems with the website if you view it or upload it but the problem is in DW and when I'm importing the css file into the dreamweaver project

                              • 12. Re: .css is not a css file and could not be opened
                                adninjastrator Level 4

                                So to clarify, the Web page DOES use the .css file? or not? when viewed directly or uploaded to the server?

                                • 13. Re: .css is not a css file and could not be opened
                                  zobino Level 1

                                  Yes in chrome the site uses the CSS file. But in the design tab in DW it doesn't, there it's just white and with the h1,h2 etc tags.

                                   

                                  problem2.png

                                  • 14. Re: .css is not a css file and could not be opened
                                    zobino Level 1

                                    I got it to work!

                                     

                                    But it is possible to move and place images using the design tab?

                                    • 15. Re: .css is not a css file and could not be opened
                                      MurraySummers Level 8

                                      But it is possible to move and place images using the design tab?

                                       

                                      No.  That's not how HTML works, nor is it how DW works.  The only things you can move around on the page are absolutely positioned things, and using that is like getting in bed with Mephistopheles himself.

                                      • 16. Re: .css is not a css file and could not be opened
                                        zobino Level 1

                                        Figured, Well. Anyways I'm happy Thanks Everyone for the Awesome help!

                                        • 17. Re: .css is not a css file and could not be opened
                                          adninjastrator Level 4

                                          Since a number of us pitched in and tried to help, can you share with us how you solved the problem.

                                          Adninjastrator

                                          • 18. Re: .css is not a css file and could not be opened
                                            zobino Level 1

                                            Oh, sorry. Ofc

                                             

                                            And once again I'm very very happy and I thank everyone in this post. I would love to give you all a gold star

                                             

                                            I started to press the "live view" "live code" and "inspect". At first I could see the site but I could not change anything (The code was locked)

                                            So I saved and relaunched the program and it worked.

                                             

                                             

                                            But before I follow all you're steps and created a local folder, also I did take the CSS code and created a new document and saved it as .css again (dunno if it help)