...

View Full Version : Best method To Have Text between Links in ULs



stevenmw
11-24-2012, 01:16 AM
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



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



#space {
padding; 0 4px 0 4px;


<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



<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!

Excavator
11-24-2012, 01:24 AM
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 -
<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.

stevenmw
11-24-2012, 01:25 AM
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 -
<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.

felgall
11-24-2012, 01:42 AM
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


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.

stevenmw
11-24-2012, 01:46 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum