Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts

    Styling <a> or <li>

    Hello, I wanted to know when using a list item within an anchor tag, which element do I style?

    Do I style both?

    Kind regards,

    Lc.

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    there's really no wrong answer to your question. it depends on what you are trying to accomplish on the current project

  • #3
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Well, I have an unordered list which I want to display some links with the list items. It's more about styling the font more than anything. Not sure whether I should be setting font styles for the a, li or both?

    My code is just a very basic list:

    Code:
    	    <ul>
    		   <a href="?page=products&order=benches"><li>Benches</li></a>
    		   <a href="?page=products&order=binstores"><li>Bin Stores</li></a>
    		   <a href="?page=products&order=birdhousing"><li>Bird Housing</li></a>
    		   <a href="?page=products&order=birdtables"><li>Bird Tables</li></a>
    		   <a href="?page=products&order=decking"><li>Decking</li></a>
    		   <a href="?page=products&order=fencing"><li>Fencing</li></a>
    		   <a href="?page=products&order=gates"><li>Gates</li></a>
    		   <a href="?page=products&order=pethousing"><li>Pet Housing</li></a>
    		   <a href="?page=products&order=planters"><li>Planters</li></a>
    		   <a href="?page=products&order=sheds"><li>Sheds</li></a>
    		   <a href="?page=products&order=tables"><li>Tables</li></a>
    		</ul>
    It has always puzzled me since starting web design, whether you're meant to style the a or li when using an unordered list. I've never been able to find the answer out! My initial thoughts would be that I just style the anchor tags, as most of the examples I have seen just style them, but not all of them!

    Would really like clarification on this!

    Kind regards,

    LC.
    Last edited by LearningCoder; 11-07-2012 at 09:56 AM.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,640
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    You can’t put list items inside anchor elements. Anchor is an inline element and list items are block-level elements, and block-level elements can’t go in inline elements. The other way around is possible, though.

    That said, it’s really you choice which element you use for styling, especially with fonts which are inherited by children. I usually go from outside to inside, i. e. I style the outermost element(s) first and if some children require special treatment I style those.

  • #5
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Quote Originally Posted by VIPStephan View Post
    You canít put list items inside anchor elements. Anchor is an inline element and list items are block-level elements, and block-level elements canít go in inline elements. The other way around is possible, though.
    Thanks for your reply. I have given my list items a style of display: inline so that they display horizontally. I have seen many examples of this when looking at CSS Menu's which you can download from sites. As I say, I'm not sure if this is correct or whatnot. I've not got much time, but I will play around with that tonight and see what the results are.

    Quote Originally Posted by VIPStephan
    That said, itís really you choice which element you use for styling, especially with fonts which are inherited by children. I usually go from outside to inside, i. e. I style the outermost element(s) first and if some children require special treatment I style those.
    Thank you for the advice, I wasn't aware children inherit styles from outside elements, although now you have brought it up, it has been staring me in the face as even setting font styles on a div set the child elements to that very same font...doh!

    As I say, I'll play around with it tonight and let you know the results, I've only ever created a menu where the anchor has been the outermost element of any list items.

    Kind regards,

    LC.

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,640
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    Quote Originally Posted by LearningCoder View Post
    Thanks for your reply. I have given my list items a style of display: inline so that they display horizontally. I have seen many examples of this when looking at CSS Menu's which you can download from sites.
    This is invalid in terms of HTML standards. First of all, a simple list consists of two elements, ul/ol to denote that something is a list (unordered or ordered), and li to mark up every distinct item in this list. Therefore it is a requirement that list items must be direct children of the list element. There canít be anything else as direct children of ul/ol.
    Code:
    <!-- correct -->
    <ul>
      <li></li>
      <li></li>
    </ul>
    
    <!-- wrong -->
    <ul>
      <div><li></li></div>
      <a></a>
    </ul>
    Inside the list items you can put whatever elements you like but you canít put anything you like directly inside ul or ol. This is a fact defined by the Word Wide Web Consortium as HTML standards specification. If you have seen it otherwise on websites they are wrong (and Iím wondering where you have seen that).

    Basic rule of thumb: Inline elements can go into block-level elements but not vice versa. And it doesnít matter if you style block-level elements to look and behave like inline elements, intrinsically, they are block-level elements and an HTML validator will throw an error if they are found inside an inline element.

  • #7
    Regular Coder Custard7A's Avatar
    Join Date
    Jul 2010
    Location
    Australia
    Posts
    286
    Thanks
    32
    Thanked 33 Times in 33 Posts
    You could do an inheritance selector, which could make this really easy for you.

    Code:
    
    // Selects anchor elements inside list items.
    
     li a { }
    That would style all anchor elements inside list items, if you want to make a more specific selector, I'd recommend this:

    Code:
    
    // Only selects anchor elements inside list items, that are inside <ul id="menu">.
    
    ul#menu li a { }
    The nice thing about inheritance selectors, is that you don't need to add IDs or classes to everything.

    Have you considered styling the <ul> itself? That would do the job nicely, if you intend to change all fonts in the list that is.

    Code:
    
    // I would apply all styles I know would be inherited here.
    
     ul#menu { color: #000; font-face: Arial; }
    
    // I would then stylize the list items.
    
     ul#menu li { list-style-type: square; }
    
    // If need be, I would clean up default link styles.
    
     ul#menu li a { text-decoration: none; color: inherit; }
    Considering VIPStephan's input, you might want to use other elements for your purposes, but it would be the same principle.

    Code:
    
    css
       .menu { color: #000; font-face: Arial; }
    
     .menu a { display: inline-block; }
    
    html
    
    <section class="menu">
     <a href="/"> Home </a>
     <a href="/"> Home </a>
     <a href="/"> Home </a>
    </section>

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,640
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    Sorry to rain on your parade, Custard, but please note HTML5Doctor’s article about the section element.

    Also, there is no such thing as an “inheritance selector”. What you have described is a simple element selector because you are addressing specific elements by their name/type (as opposed to attributes or functions), inheritance has nothing to do with this.

    Code:
    /* simple element selectors */
    div, ul li, table a {…} /* selects all div elements, all lis that are children (direct or indirect) of ul, and all a elements that are inside tables */
    
    /* attribute selectors */
    [title], [name], input[type=text] {…} /* selects all elements with “title” attribute, with “name” attribute, and all input elements with a “type” attribute whose value is “text” */
    /* technically the following are attribute selectors, too */
    #example, .example {…}
    /* is equal to: */
    [id=example], [class=example] {…}
    /* or more specific: */
    div[id=example], div#example {…} /* these are exactly doing the same, select divs with an ID of “example” */
    
    /* sibling selectors */
    li + li, div + a + p {…} /* selects all li that are a next sibling of another li and all p elements that follow an a element that itself follows a div */
    
    /* direct child selectors */
    li > div {…} /* selects all divisions that are direct children of list items; it would not select divisions that are, for example, inside other divisions in these list items */
    Which styles are inherited depends on the styles, not on the selectors. For example, a font family is inherited by almost all elements if specified on a parent. If you set body {font-family: Tahoma;} the Tahoma font is inherited down to all elements inside the body, so you don’t have to repeat this declaration for every element (exceptions are form controls). Likewise, a color is inherited by most children with the exceptions of links where you have to specifically set it. A font size is also inherited by children, otherwise you’d have to set it on every element specifically.

    Styles like backgrounds, margins, paddings, dimensions, etc. are not inherited by children, they are only applied to the elements you apply them to. And as said, this is totally independent of the selectors (as shown above) that are used.
    Last edited by VIPStephan; 11-07-2012 at 12:04 PM.

  • The Following 2 Users Say Thank You to VIPStephan For This Useful Post:

    Custard7A (11-07-2012), LearningCoder (11-07-2012)

  • #9
    Regular Coder Custard7A's Avatar
    Join Date
    Jul 2010
    Location
    Australia
    Posts
    286
    Thanks
    32
    Thanked 33 Times in 33 Posts
    Hah, well at least I wasn't the only one who misinterpreted <section> as another flavor for ye ol div soup. Y'know, I swear the last time I checked the HTML5 docs ó a while ago that is ó the definition for <section> was very vague, and only implied <section> was there for semantical purposes and liable to the users interpretation. Guess they realized that could be a bit clearer, or something, thanks for correcting me.

    Yep, inheritance selector was a slip up, what I was trying to say was descendant combinator. I understand how that was confusing, and how it may have seemed like I thought inheritance was related to the selectors.

  • #10
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Thank you both very much indeed. All your input makes perfect sense.

    I will now go away and re-write and re-style the list! Will let you know if I run into any errors.

    Kind regards both,

    LC.

  • #11
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Stephan, if setting a list item element to display inline is not HTML standards, how would I get them to display inline without using that code?

    Kind regards,

    LC.

  • #12
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,640
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    No, I wasn’t saying that setting them to display as inline element is wrong per se, I meant that putting lis into anchors is wrong, even if you make them display: inline with CSS.
    The HTML validator doesn’t care about CSS styles, it only cares about the HTML, and the only valid way is to put the anchors inside the list items, not vice versa. How you make the items look with CSS doesn’t matter. And setting display: inline on them is perfectly fine.

  • Users who have thanked VIPStephan for this post:

    LearningCoder (11-07-2012)

  • #13
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Thank you for the clarification.

    I wanted to add just another little feature to my 'products' list'. When the user clicks an anchor and while they are viewing those products, I want to change the text to bold and also add just a tad of letter spacing. If they click another, I want to take the style off the previous product and apply it to the current element.

    How can I achieve this? I searched google and this forum but people posted more specific problems with IE or FF for example.

    Do you know how to add this effect? I'm going to search around and see if I can find a site which implements this just so you can see exactly what I mean as I don't think my question is very clear.

    Edit: Take a look at Google . When you click Web or Images for example, there is a red font applied to the links (used as a way to show what link you are on, this is what I wanted to do).

    Kind regards,

    LC.
    Last edited by LearningCoder; 11-07-2012 at 11:07 PM.

  • #14
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,640
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    Well, on the current page, add a class “current” to the list item that is representing the current link, and style that specifically. For example:
    Code:
    #nav li a {color: blue;}
    #nav .current a {color: red;}

  • #15
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Just done what you said.

    Having weird results.

    When I just click the link as you normally would, the style only takes places while the mouse button is down.

    When I hold the mouse down and slightly 'drag' the anchor, the style stays 'active'.

    Do you know the reason for this?

    Edit: my fault, I had declared an a:active pseudo class

    Kind regards,

    LC.
    Last edited by LearningCoder; 11-08-2012 at 02:11 AM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •