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.
Results 1 to 5 of 5
  1. #1
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts

    Best method To Have Text between Links in ULs

    I am working on a little project that involves Word Press. I took a chance and asked a question over on the WP forums, but got terrible results. (The people over there are not nearly as friendly as the people here. They insult you, and if you ask a follow up question the mods get furious, call it arguing, and close the thread.. All due to other members. So i highly suggest sticking to CF.)

    I am working on a navigation, and I've been trying to think of the best way to have a grep between each link. I'm not wanting to cause SEO problems. I was thinking something like

    Code:
    li:before {
    content: "|";
    }    
    
    li:last-child { 
    ...
    }
    But I'm not sure whether the majority of browsers support
    content or last-child.

    I thought about using a simple div like

    Code:
    #space {
    padding; 0 4px 0 4px;
    Code:
    <div id="space">|</div>
    But I am afraid that might cause SEO problems. I highly doubt it would matter in my navigation.. But I still want to find the best method.

    My desired result is

    link1 | link2 | link3 |link4

    Code:
    <ul>
    <li>link1</li>
    <li>link2</li>
    <li>link3</li>
    <li>link4</li>
    </ul>
    I don't want to bring WP into the whole conversation because that doesn't really fit into the html / css category and more so the general web building side of the forums.. But those familiar with WP know it uses wp_list_pages to call the page links. You can of course call them individually, however that means you have to modify the navigation output each time you add a page. This is just a reminder to those familiar with it.

    Could any one please suggest the best method to have text between links that are list items?

    Thanks!
    Last edited by stevenmw; 11-24-2012 at 12:22 AM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello stevenmw,
    I totally agree that CF is much more user friendly than most other forums! That's how and why I ended up here

    I've done what you're trying to accomplish several times like this -
    Code:
            <ul id="menu">
                <li><a href="">linky</a></li>
                	<li><span class="dvdr">|</span></li>
                <li><a href="">linky</a></li>
                	<li><span class="dvdr">|</span></li>
                <li><a href="">linky</a></li>
                	<li><span class="dvdr">|</span></li>
                <li><a href="">linky</a></li>
                	<li><span class="dvdr">|</span></li>
                <li><a href="">linky</a></li>
            </ul>
    Just style .dvdr however you like.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    stevenmw (11-24-2012)

  • #3
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    Quote Originally Posted by Excavator View Post
    Hello stevenmw,
    I totally agree that CF is much more user friendly than most other forums! That's how and why I ended up here

    I've done what you're trying to accomplish several times like this -
    Code:
            <ul id="menu">
                <li><a href="">linky</a></li>
                    <li><span class="dvdr">|</span></li>
                <li><a href="">linky</a></li>
                    <li><span class="dvdr">|</span></li>
                <li><a href="">linky</a></li>
                    <li><span class="dvdr">|</span></li>
                <li><a href="">linky</a></li>
                    <li><span class="dvdr">|</span></li>
                <li><a href="">linky</a></li>
            </ul>
    Just style .dvdr however you like.

    Perfect! Thank you so much. I'll have to build a walker for WP so it shows up outside my anchor tags, but that will be easy.

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,620
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Why not set border-left : 1px #000 solid instead of using |

    That way you avoid the content issue and can use first-child (which is CSS2 and therefore supported by all current browsers) rather than last-child (which is CSS3 and therefore only supported by some browsers) to override it with border : none

    Code:
    li {border-left 1px #000 solid;}
    li:first-child {border : none;}
    That would avoid having to update the HTML (which will have the bullets between the links if the CSS is turned off and so would still be as accessible.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    felgall, i thought of that too. But i want it to be interchangeable. So later on down the line I can replace it with another piece of text. Plus I want my grep to have a slightly larger font size than my link text.

    But mainly because iwant it to be interchangable , and so I can control the styling of the font, sizing, etc.

    But the first-child is a good idea.
    Last edited by stevenmw; 11-24-2012 at 12:53 AM.


  •  

    Posting Permissions

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