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

  • B
    Reply to Why are TrueType fonts bad?
    B
    They might have their reasons that would make sense once they were explained, like font conflicts with OpenType or Type 1 fonts or something to that effect. Who knows. Really, they'll both work just fine....
    Today, 12:41 AM
  • 858graphics
    Reply to Are you interested in selling your company?
    858graphics
    This is all in California, I will check some other sites as well. Looking forward to joining this group!
    Today, 12:12 AM
  • Buda
    Reply to Crop Marks and Cutting Paper
    Buda
    Hi PaperSeeker and welcome to GDF.

    We ask every new member to read the threads posted HERE, particularly this thread to get acquainted with how things work on GDF. They will explain how the...
    Yesterday, 11:39 PM
  • Designia
    Reply to free upload area?
    Designia
    FYI - wetransfer.com is the same as Hightail but the file limit is ginormous
    Yesterday, 09:49 PM
  • PaperSeeker
    Crop Marks and Cutting Paper
    PaperSeeker
    I admit I am a complete amateur so please don't blast me if these are stupid questions. I make paper designs/notepads and I would like to sell them and give them out as gifts, but it is taking me too...
    Yesterday, 09:45 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, 01: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, 01: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, 01: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, 02: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, 03: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.
                  Working...
                  X