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

  • Juniberry
    Reply to Wordpress theme and plugin help for print company.
    Juniberry
    I should also mention that a theme that supports the visual composer would be excellent....
    Today, 05:54 AM
  • Juniberry
    Wordpress theme and plugin help for print company.
    Juniberry
    Howdy-doody fellas and bellas, I'm just after some quick advice from those of you out there with plenty of experience choosing and working with WP themes.

    Attached is a template/guide to...
    Today, 05:53 AM
  • arielr190
    Reply to Opinions on My Logo?
    arielr190
    the business is online. print-wise, the smallest it will ever get is a business card.
    Today, 03:53 AM
  • lowfatgraphics
    Reply to UX tips
    lowfatgraphics
    Hmm This isn't UX, it is UI... Its common to get the two mixed up but having worked in UX and now UI, there is a pretty big difference.

    Now from a UI stand point, there isn't much here...aside...
    Today, 03:52 AM
  • lowfatgraphics
    Reply to Candy Shop Logo
    lowfatgraphics
    "S" is tough to read-- looks interesting. the glossy highlights seem to have multiple light sources tho...might want to double check.
    Today, 03:43 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