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

  • kemingMatters
    Comment on Self Logo Critique
    kemingMatters
    I'm fully aware that the first logo is black and white, I was commenting on how difficult it is to read at any distance other than on top of it.

    The only versions that are really that legible...
    Today, 07:08 PM
  • garricks
    Comment on Indesign CC Exporting
    garricks
    Yeah, i have to agree…
    Today, 06:34 PM
  • subdrewgans
    Reply to Self Logo Critique
    subdrewgans
    In the first link, the very first logo is B&W. I think the one with your initials are stronger, but definitely needs some work and tightening up.

    What does your logo say about you?...
    Today, 06:18 PM
  • CataclysmX
    Comment on Steampunk Tea Brand Logo Critique- Trying to choose final concept
    CataclysmX
    Yeah I meant use the same typeface from the S in the green logo, but if that doesnt work I would keep exploring, fonts are really underrated and people need to spend time finding working fonts to improve...
    Today, 05:55 PM
  • kemingMatters
    Reply to Indesign CC Exporting
    kemingMatters
    Hello LaraMelissa1, welcome to GDF!
    We ask all new members to read very important links here and here. These explain the rules, how the forum runs and a few inside jokes. No, you haven't done anything...
    Today, 05:30 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

                               
                              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