Sorry about the mis-fire, lets try again and finish the thought this time...
Hello list,
Having a situation and am not sure the best way to handle it. Can't
post a link, sorry.
I have a group of links that I need to have sit next to each other like so:
Link & more link text | Linkstuff | Link & more link text |
link | link |Link & more <--note the line broke here. this is
what i'm after. Natural breaks.
link text | Linkstuff | Link & more link text | link | link | Link
& more link text | Linkstuff
| Link & more link text | link | link | Link & more link text
| Linkstuff
WHat i'm getting is:
Link & more link text | Linkstuff | Link & more link text | link | link
Link & more link text | Linkstuff |
Link & more link text | Linkstuff | Link & more link text |
link | link | Link & more link text
| Linkstuff | Link & more link text | link | link
I started with a <ul>, floated the <li>s and did some padding and
margin and added a border on the <a> to handle the rule to the right
of the links (like the pipe shown above). I added the rule to the <a>
so I could pad the <li>s for "line spacing" and not have tall rules
The problem is when I have cases like "Link & more link text" the
<li>s ( i'm assuming it's the <li>s) won't let the text break where
you'd expect and wrap to another line so I end up with odd line
breaks.
So I then tried just the links and letting them run inline naturally
without a <ul>. I adjusted for the now missing <li>s and I'm still
getting odd breaks. I don't see WHY words are dropping down to another
line when the appear to be able to. OR I get things dropping to
another line when there is clearly enough room for it not to have to
break.
code:
.discipline-sortlist{position: relative; width: 90%; margin: 0 0 1em
0; padding: 0;}
.discipline-sortlist a{font-size: .875em; line-height: 1;
border-right: 1px solid rgb(95,95,95); padding: 0 6px 0 0;}
.discipline-sortlist a:first-of-type{margin: 0;}
.discipline-sortlist a:last-of-type{padding: 0; border: none;}
<div class="discipline-sortlist clear">
<a href="">General</a><a href="">Business</a><a href="">Criminal
Justice</a><a href="">Culinary, Hospitality & Tourism</a><a
href="">Economics</a><a href="">Education</a><a href="">Fashion</a><a
href="">Humanities & Social Sciences</a><a href="">IT &
MIS</a><a href="">etc...</a>
</div>
I am not familiar enough with the various 'word-wrap" properties and
the like. Any help would be appreciated.
TIA
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
