6 Replies Latest reply on Mar 12, 2014 9:32 AM by BTRTATZY

    Fluid Grid Layouts Link to which Stylesheet

    BTRTATZY Level 1

      I'm brand new to Fluid Grid Layouts and websiite design so please explain your answers carefully. One of our members told me there should be at least 3 stylesheets when using Fluid Grid Layouts. The first two are automatically created by Adobe CS6 and the advice is do not delete them. My question below relates to the third, custom wide style sheet I created.

       

      • Fluid.css = layout
      • boilerplate.css = browser reset
      • your_custom.css = site wide styles

       

      The question is, how do I get index.html and other pages to follow the styles created in the custom site wide style sheet? I created a 3rd, custom site wide style sheet and even though I linked index.html to that style sheet, it is ignoring the Styles I'm creating in that custom css file.

        • 1. Re: Fluid Grid Layouts Link to which Stylesheet
          BenPleysier Adobe Community Professional & MVP

          Create an empty my-styles.css file in the css directory and drag the file to below the other css files in code view as per

          mine.png

          1 person found this helpful
          • 2. Re: Fluid Grid Layouts Link to which Stylesheet
            BTRTATZY Level 1

            Ben, maybe I'm missing something in your response but it appears as if you apparently missed the point of my question. I didn't ask how to create a new stylesheet and link it to the index.html file. I already did that. Now I have 3 stylesheets, 2 of which were created by CS6 and the third one created by me.I'm new at this but it seems as if the index.html file is looking at 3 different style sheets but when I change styles in the new sheet  I created, it has no impact on the styles.

             

            How do I get Dreamweaver CS6 to change styles in the file when they're modified in the new stylesheet? I hope this question makes sense.

            • 3. Re: Fluid Grid Layouts Link to which Stylesheet
              BenPleysier Adobe Community Professional & MVP

              The new style sheet must come after the other two so that it will override them.

               

              Make sure that you have linked the stylesheet properly. For this make sure that the new style sheet shows up in the linked files as shown in the image - top arrow.

              • 4. Re: Fluid Grid Layouts Link to which Stylesheet
                BTRTATZY Level 1

                I had no iidea the last stylesheet listed takes precedence. Thanks for that great tip!

                 

                However, I think I did as you suggested but it's still having no impact on the style. Obviousuly I'm doing something wrong. Here's what I have for tish.css

                 

                <title>Home Page</title>

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

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

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

                 

                Here's the code from the style sheet for a Fluid Grid named articles_1

                 

                #Articles_1 {

                          font:Tahoma, Geneva, sans-serif;

                          font-size:20px;

                          clear: both;

                          float: left;

                          margin-left: 0;

                          width: 100%;

                          display: block;

                }

                • 5. Re: Fluid Grid Layouts Link to which Stylesheet
                  Jon Fritz II Adobe Community Professional & MVP

                  #Articles_1 will not affect an element with id="articles_1"

                   

                  CSS is CaSe SenSiTiVe in this situation.

                   

                  You need to verify the case structures of your selectors, they must be identical to the actual ids used.

                  1 person found this helpful
                  • 6. Re: Fluid Grid Layouts Link to which Stylesheet
                    BTRTATZY Level 1

                    I just figured out what I was doing wrong. I changed the font and font size only the smart phone section of the style sheet. I didn't realize I have to also change it in the tablet and desktop section. I feel like an idiot but at least I figured it out.

                     

                    Thanks so much Ben! I'm sure I'll have additional questions as I move along.