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

  • John G
    Reply to Things that jerk my chain...
    John G
    "We aren't going to promote you just yet [maybe next year], because we have too many senior developers"... a few weeks later 2 people leave (non-senior title) and we aren't going to fill them...
    Today, 02:09 AM
  • Kayekaye
    Reply to non native art cs3 ai
    Kayekaye
    Yeah, placed a photo outlined from photoshop into ai file. The ps pdf has the clipping path in it. So far it is proofing ok. Will see what happens. Would just a ps file that has been outlined with clipping...
    Today, 12:44 AM
  • tanjamamas
    Reply to Feedback?
    tanjamamas
    Okay. New direction. I love the "Design is not decoration" sentence.

    ...
    Yesterday, 11:34 PM
  • UIDer
    Map Icons for mobile
    UIDer
    I'm creating "pin" icons for use on a mobile map. They are to depict a camera, video, text and audio in a simplistic manner as a family.

    Two quick questions:

    1) Do...
    Yesterday, 08:03 PM
  • TomMonTom
    Reply to Which font is this
    TomMonTom
    Nevermind, figured it out.
    Yesterday, 07:43 PM
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

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