Announcement Announcement Module
Collapse
No announcement yet.
Noob Question (lists) 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

  • georgemaharis1
    HI!
    georgemaharis1
    Just posted in printing and prepress. Hope to see it approved shortly!
    Today, 12:36 AM
  • georgemaharis1
    Register from a Gerber to a Roland or vice versa?
    georgemaharis1
    I need to be able to routinely prototype / make comps of self adhesive labels. This includes both clear and opaque. I have access to a ROLAND VS which does a VERY good job, but the metallics it can...
    Today, 12:14 AM
  • desmiley1
    Reply to Illustrator won't let me highlight text?
    desmiley1
    Same here, new account...Thanks so much for posting this answer. The zombie post lives and has been re-awakened for 2014!
    Yesterday, 10:32 PM
  • Sbower
    Reply to Re Branding my personal logo.
    Sbower
    Thank you everyone for you comments they have been very helpful. I do have to agree after looking it over again I don't think the icon reads very effectively. And therefore makes it a bit useless. And...
    Yesterday, 09:58 PM
  • PanToshi
    Comment on Are you able to read the text?
    PanToshi
    No prob. The vBulletin forum software is really kinda… well, borked up. I'm glad the workaround works for ya.
    Yesterday, 09:51 PM
Advertisement Advertisement Module
Collapse

Sponsors Sponsors Module
Collapse

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

  • Noob Question (lists)

    I'm still new at this.

    I'm playing with descendant selectors to style my code and am having a hard time with it.

    My end goal is to use a bullet image in place of the default disc bullet.




    So far I have this:


    HTML:

    <change><ul>
    <li>New BMW Umbrella Design</li>
    <li>Oompaville Rain</li>
    <li>Umbrella Shortage of 1959</li>
    </ul></change>


    css:

    change ul {
    color:black;
    font-size:1.5em;
    font-family: Georgia, Times, serif;
    background-color: #cccccc;

    }


    This is fine, now to replace the default bullets with images, I inserted <bull>:


    HTML:

    <change><ul>
    <bull><li>New BMW Umbrella Design</li>
    <li>Oompaville Rain</li>
    <li>Umbrella Shortage of 1959</li></bull>
    </ul></change>


    css:

    change ul bull li {
    list-style-image: url(bullet.gif);
    }



    Theres many other combos I tried. I cant get the right combo and its driving me nuts because something just isnt clicking in my head...HELP!


  • #2
    unless i am missing something you are not naming your UL correctly? shouldn't it be:

    <ul id="change">

    instead of

    <change><ul>

    or is that something else entirely?

    Comment


    • #3
      I'm trying to only use descendant selectors, isnt that a rule?

      Comment


      • #4
        HTML Code:
        <ul id="change">
        	<li>New BMW Umbrella Design</li>
        	<li>Oompaville Rain</li>
        	<li>Umbrella Shortage of 1959</li>
        </ul>
        Code:
        #change {
        	color: black;
        	font-size: 1.5em;
        	font-family: Georgia, Times, serif;
        	background-color: #cccccc;
        }
        
        #change li {
               list-style-image: url(bullet.gif);
        }
        I don't know where your getting <bull> and <change> from…
        Last edited by tZ; 10-25-2009, 01:06 AM.

        Comment


        • #5
          Can't just make up names for tags.
          Check this out, helped quite a bit when I was learning:
          http://www.w3schools.com/

          list-style-image has poor support. Use background-image and padding-left.
          Swedish Meatball Pornography

          Comment


          • #6
            ^^ actually you can make up names for tags, BUT only if you are using xml.

            so if you've seen XML tutorials on this, they are very different than plain html /css tutorials and are not really interchangeable.

            Comment


            • #7
              ok, just read the replies. Its 2am here so let me sleep on it and I'll get back on it and answer/try again....

              thx

              Comment


              • #8
                Originally posted by Drazan View Post
                ^^ actually you can make up names for tags, BUT only if you are using xml.
                And this is relevant.... how?
                Swedish Meatball Pornography

                Comment


                • #9
                  Originally posted by vanishdesign View Post
                  Originally posted by Drazan View Post
                  ^^ actually you can make up names for tags, BUT only if you are using xml.
                  And this is relevant.... how?

                  Originally posted by Drazan View Post
                  so if you've seen XML tutorials on this, they are very different than plain html /css tutorials and are not really interchangeable.
                  Because it could explain why the original poster was making up names for his tags
                  Tumblr Blog Thing

                  Comment


                  • #10
                    It seems like an easy solution would be to apply a rule, which is why I'm getting the answer: <ul id="change">

                    But that isnt a descendant selector is it?


                    Let me explain what the tags are since some needed clarification.
                    First I just had a normal unordered list, which was:

                    <ul>
                    <li>New BMW Umbrella Design</li>
                    <li>Oompaville Rain</li>
                    <li>Umbrella Shortage of 1959</li>
                    </ul>


                    Then I made a style change to that list, so I inserted <change>

                    <change><ul>
                    <li>New BMW Umbrella Design</li>
                    <li>Oompaville Rain</li>
                    <li>Umbrella Shortage of 1959</li>
                    </ul></change>


                    And change the CSS appropriately using a descendant selector (NO RULE! Just a parent and their beloved child):

                    change ul {
                    color:black;
                    font-size:1.5em;
                    font-family: Georgia, Times, serif;
                    background-color: #cccccc;
                    }



                    Now the trick is getting the image to replace the default bullet using ONLY descendant selectors. And since inserting <change> worked, I thought I could do the same for adding the image.

                    I named the tag for changing the bullet to an image as <bull>. (if you suggest anything else please let me know!)


                    Now I wrap <bull> around the <li> tags because <li> are the ones I want to change into images. In my mind, now the descendant selectors work in this order:

                    <change>: Parent
                    <ul>: first descendant
                    <bull>: 2nd descendant
                    <li>: 3rd


                    Here's how I have it:

                    <change><ul><bull>
                    <li>New BMW Umbrella Design</li>
                    <li>Oompaville Rain</li>
                    <li>Umbrella Shortage of 1959</li></bull>
                    </ul></change>


                    So it would follow that the CSS would be (and this is using descendant selectors only):

                    change ul bull li {
                    list-style-image: url(bullet.gif);
                    }




                    Now I know this might seem like the long way around (to use descendant selectors) instead of using a rule but this is the way I want to do it unless it's impossible.

                    If I'm missing something let me know. I might not understand rules and descendant selectors perfectly and there's a TON of info explaining it but I looked it all over and it's not really situational specific enough.

                    Hope this is clear enough

                    Thanks!

                    Comment


                    • #11
                      Ps

                      It's just me trying to get an idea of the extent you can push descendant selectors to, and not just trying to get this list to work.

                      Thanks again

                      Comment


                      • #12
                        Originally posted by Northernsoul View Post
                        It's just me trying to get an idea of the extent you can push descendant selectors to, and not just trying to get this list to work.

                        Thanks again
                        Huh?
                        If it doesn't work then what is the point?

                        I think the solution you were given original of ul id="change" is the way to do this. See the above post.
                        I don't know anything about doing it a different way and can't figure out why you would... but if there is a reason maybe I will learn something.
                        I'd rather be hated for who I am, than loved for who I am not. ~ Kurt Cobain

                        Comment


                        • #13
                          True enough. And I mean if by looking at it at first glance and it just doesn't make sense for you then your probably right. A simple "no" answer is a good answer in my books!

                          Comment


                          • #14
                            Originally posted by Northernsoul View Post
                            True enough. And I mean if by looking at it at first glance and it just doesn't make sense for you then your probably right. A simple "no" answer is a good answer in my books!
                            I am hesitant to say just No because i'm not a fantastic programmer... more of a print designer. but i do know classes and lists... and this looks just wrong to me.
                            I'd rather be hated for who I am, than loved for who I am not. ~ Kurt Cobain

                            Comment


                            • #15
                              Your code's not going to validate, it's going to have limited browser support, and it's going to look like gibberish to anyone else that encounters it or has to work with it. And the markup is inefficient if you have to do that to every list you want to look a certain way. And "change" and "bull" are bad names for made-up tags, or IDs or classes.

                              And yes, #change li{} is a descendant selector. li is a descendant of #change.

                              And they are all rules. Every time you see something written like this:
                              Code:
                              selector{property:value}
                              It is a rule.

                              If you want to do it in XML use XML and XSLT.
                              Last edited by vanishdesign; 10-26-2009, 08:03 PM.
                              Swedish Meatball Pornography

                              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