Announcement

Collapse
No announcement yet.

css question

Collapse
X
  • 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-17-2006, 07:13 PM.

  • #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-17-2006, 07:18 PM.

    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-17-2006, 07:57 PM.

      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-17-2006, 08:49 PM.

          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-17-2006, 09:11 PM.

              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

                  Search

                  Collapse

                  Sponsor

                  Collapse

                  Incredible Stock

                  Latest Topics

                  Collapse

                  • eyoungren
                    Reply to Logo help - placement etc.
                    eyoungren
                    Here's how I'd put it: From the Box office on the left, Deal Hunter in the middle (Deal on top of Hunter) and the target on the right.

                    PS. I was always taught that it's a bad idea to give...
                    Yesterday, 06:17 PM
                  • PrintDriver
                    Reply to Differet color in Photoshop and in preview Win10
                    PrintDriver
                    We can only just guess at what your output parameters are. You need to discuss this with the printer who will be doing the work.
                    You need to know what profile your printer wants on hand-off. Not...
                    Yesterday, 02:25 PM
                  • ThomasC
                    Reply to Large Format 3D
                    ThomasC
                    Thank you PrintDriver. I haven't looked into lenticular lenses but that is very interesting. I will have to do some research on the subject in general.

                    So the "off the shelf" items...
                    Yesterday, 09:33 AM
                  • KitchWitch
                    Reply to Differet color in Photoshop and in preview Win10
                    KitchWitch
                    There are folks on this forum who are better qualified to answer this, but I know that what you see on your screen is never guaranteed to be what you'll see in print. The best way to see what something...
                    Yesterday, 09:05 AM
                  • Ondra
                    Reply to Differet color in Photoshop and in preview Win10
                    Ondra
                    It is for print....
                    Yesterday, 08:41 AM
                  GDF A division of Mediabistro Holdings Adweek | Mediabistro | Clio | Film Expo Group Contact Us | Terms of Use | Privacy Policy Copyright 2016 Mediabistro Holdings
                  Working...
                  X