2 Replies Latest reply on Feb 20, 2010 6:44 PM by onefiftymph

    Beginner CSS problems and questions

    onefiftymph Level 1

      I'm trying to learn CSS, but first, I have to knock out this simple site for a client, CSS or not, asap.

       

      Problem #1:

      Here is the page:  http://larrysullivandesign.com/sourceprintmedia.com/_contact.html
      Here is the style sheet: http://larrysullivandesign.com/sourceprintmedia.com/sourceprintmedia.css

       

      I want the email link the same font size as the text around it, which is:

      class="bodycopy-content"

      I don't understand why it appears in the text-links page bottom (class="link-typeA") size.

       


      Problem #2:

      Dreamweaver WYSIWYG shows the text links at page bottom in the #00F blue, (see attached jpg: "scrncap_DW_WYSIWYG.jpg) when clearly they should display only as the grey in the external stylesheet. In the browser, they look good. Frustrating, DW bug?

       

       

      Problem #3:

      I tried to merge all the CSS into one style sheet but no matter what I try, DW won't let me. Now I have 3 CSS categories. (see attached jpg "scrncap-csspanel.jpg")  How come I can't have any/all style sheets in one?

       

      thanks in advance!

      -Larry

        • 1. Re: Beginner CSS problems and questions
          Ben M Adobe Community Professional

          Problem #1:

          You have defined a font size (8px - which btw, renders extremely small on my 1440x900 laptop, suggestion to follow) for the "a" tag.  Because of this any link regardless of where it is will be that font size.  Personally speaking I would recommend taking the font-size off of the "a" tag in your CSS document and then let the other classes control the font size throughout your page.

           

          Problem #2:

          You defined a class fine, but links do not work on a class.  They will always work on a:link, a:active, a:visited, and a:hover.  With this in mind what you need to do to change the color of links in a particular area is to do the following:

           

          .link-typeA a { CSS stuff goes here }

           

          That will change the links in that class to have certain features.

           

          Problem #3:

          This has to do with code in the header of your page where you have re-declared link styles.  Delete that from your page and you will be set

           

           

          Now back to Problem #1 about the fonts.  Your best bet is to use "em" to define your font size.  Think of the EM like a multiplier.  It takes the default size of the end-users settings and 1.1em would be 1.1x larger than the default font, 2em would be twice as large, and .5em would be half the size. This way your text is readable on all screens regardless of the end-users resolution.

          1 person found this helpful
          • 2. Re: Beginner CSS problems and questions
            onefiftymph Level 1

            Thanks SnakEyez

             

            I did as you said and fixed prob 1 & 3 but can't figure out how to add link color to a style like you said:

            You defined a class fine, but links do not work on a class.  They will always work on a:link, a:active, a:visited, and a:hover.  With this in mind what you need to do to change the color of links in a particular area is to do the following:

             

            .link-typeA a { CSS stuff goes here }

             

            That will change the links in that class to have certain features.

             

             

            In my CSS Styles Panel, when I select .link-typeA  —the style for my small text links at page bottom —there's no choice for "Link", "Active", "Hover"," Visited" or any link-type appearance in either Edit Properties or Add Property.

             

            I want the four .link-typeA properties (Active, etc) to have separate colors that show up against the dark background.  I need the other site links to stay blue to be visable on the Contact page.

             

            thanks