Announcement Announcement Module
Collapse
No announcement yet.
css question Page Title Module
Move Remove Collapse
Search Search Module
Collapse

Advertisement Advertisement Module
Collapse

Featured Images Featured Images Module
Collapse

Mediabistro Creative Sites Mediabistro Creative Sites Module
Collapse
Latest Topics Latest Topics Module
Collapse

  • Dumbomon
    Reply to How to make Ninja Turtles LESS tacky
    Dumbomon
    The turtles are illustrated with a distinct style and it's appealing. However, the puddle and the test tube lack refinement and any of the illustrative style you had in the turtles.

    The second...
    Today, 03:42 AM
  • Dumbomon
    Reply to My logo as a designer
    Dumbomon
    It's looking a lot better than what you started out with originally. Some small problems, however. The curved descender on the "y" seems a bit out of place when the rest of the letterforms have...
    Today, 03:30 AM
  • Dumbomon
    Reply to YouTube Banner
    Dumbomon
    Based solely on a technical standpoint, they look just fine. The stylistic choices could be appropriate depending on the content of the channels. As for legibility, I can make out the letters, but it...
    Today, 03:18 AM
  • AmitMan
    Reply to G'day everyone
    AmitMan
    G'day mate, your work is very impressive....
    Today, 02:52 AM
  • AmitMan
    Reply to I listened to your opinions ... addes some more time in my design now
    AmitMan
    I like the Bee connected option 2. I actually dont think its overly detailed, its just basically a bee shape with colours and eyes. I also like the choice of typeface.

    Good stuff!...
    Today, 02:50 AM
Advertisement Advertisement Module
Collapse

Sponsors Sponsors Module
Collapse

X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • css question

    I understand CSS pretty good now... but for some reason I'm having a hard time calling my classes/divs...

    example

    XHTML code:

    <div id="nav">
    <ul>
    <li><a href="http:/www.marlonhibbert.com">About Us</a></li>
    <li><a href="http:/www.marlonhibbert.com">Tega Jobs</a></li>
    <li><a href="http:/www.marlonhibbert.com">Contact</a></li>
    </ul>
    </div>

    my CSS code:

    #nav { list-style-type:none;
    text-decoration: none;
    display: inline;}


    and nothing happens
    am I doin' something wrong???

    why am I havin' so much trouble calling my classes/divs and styling my classes/divs??

    any advice and tips would be great

    thanks
    Last edited by mar1300; 12-18-2006, 12:13 AM.

  • #2
    I think you're styling the div, not the ul. You need to apply the ID to your ul.
    Last edited by hewligan; 12-18-2006, 12:18 AM.

    Comment


    • #3
      you want this:

      Code:
      <ul id='nav'>
        <li><a href="http:/www.marlonhibbert.com">About Us</a></li>
        <li><a href="http:/www.marlonhibbert.com">Tega Jobs</a></li>
        <li><a href="http:/www.marlonhibbert.com">Contact</a></li>
      </ul>
      before you were targeting the element with the id nav but, that element was a div not the unordered list. You need to target the element in question pertaining to the document object model. You could also have left the mark-up the way it was and targeted it like this instead:

      Code:
      #nav ul {
      }
      However, then all unorder list elements with a parent of nav would be targeted for the style. So if you had multiple instances of the same style within nav that would be the better way to go.

      The best thing to do is try to limit your divisions and instead declare classs or id's for the HTML element in question. In the way you had the mark-up previously it appeared as if you had a division when really there was no need. You can apply class's and ids to element tags instead then target as I did.

      just some advice
      Last edited by tZ; 12-18-2006, 12:57 AM.

      Comment


      • #4
        thank you..that makes alot of sense

        but I've changed it and still nothing

        <ul id="nav">
        <li><a href="http:/www.marlonhibbert.com">About Us</a></li>
        <li><a href="http:/www.marlonhibbert.com">Tega Jobs</a></li>
        <li><a href="http:/www.marlonhibbert.com">Contact</a></li>
        </ul>

        #nav { list-style-type:none;
        text-decoration: none;
        display: inline;}

        the only thing is the bullets are now gone

        Comment


        • #5
          display inline needs to be applied to the list elements not the unordered list element. The link styling needs to be applied to the link.

          Code:
          #nav li {
            display: inline;
          }
          
          #nav li a {
            text-decoration: none;
          }
          Then I'm assumning you want to change the link on a rollover and that is done with hover like so:

          Code:
          #nav li a:hover {
            text-decoration: underline;
          }
          Last edited by tZ; 12-18-2006, 01:49 AM.

          Comment


          • #6
            ok thank you....now i get it....the book i was reading didn't really explain that part to well

            Comment


            • #7
              descendent selectors area very important concept to understand. Almost all the styling you apply should generally be in the form of descendent selectors. otherwise, you may have promblems with the cascade(woss) later. Descendent selectors deal with the specificity in the cascading rule sheet. The more specific you are generally the better off you are.

              So if you targeting a paragraph that resides in a container with multiple parents its better to declare all those parents as descendents rather then just one or two.

              This:

              Code:
              #wrapper #navigation #nav li a:hover {
              }
              would be more specific thus less pormblems later then if I targeted the same element like so:

              Code:
              #nav li a:hover {
              }
              Another thing is understanding HTML in general is very important. Without knowing HTML it is difficult to know what to target. Once you understand fully element tags then its not so difficult.

              just some helpfull advice. I didn't get the whole descendent thing when I first began learning either. However, eventually it should click since, it is very important.
              Last edited by tZ; 12-18-2006, 02:11 AM.

              Comment


              • #8
                I found some training videos that show them programming the code and the effects to be really helpful with this. I'm just starting to grasp the importance specificity.
                wieNerDog

                Comment


                • #9
                  thanks......what videos

                  Comment

                  Mediabistro A division of Prometheus Global Media home | site map | advertising/sponsorships | careers | contact us | help courses | browse jobs | freelancers | content | member benefits | reprints & permissions terms of use | privacy policy Copyright © 2014 Mediabistro Inc. call (212) 389-2000 or email us
                  Working...
                  X