Lol I'm so badly rusty. What's the best way to position this list?

Hey guys. I can crudely make it work but if it’s worth doing it’s of course worth doing right. So what’s the best way to inline-block (or float) 2 links side by side and line break the 2nd one in each row?

Also I forget… should I wrap each in a (li a li) or should I just do (li a a li). Is it still considered bad form to butt anchors up together? Or did I dream that long ago.

So the link html will be…

<li>Some Words <a>Link1</a><a>Link2</a></li>

Thanks

It really depends upon context, which are the correct elements to use and in what structure. But we can’t see the context of your content.
The common mistake is to choose elements based on how they look or force a particular layout. The correct way is to choose elements based on their semantic meaning. Then use css to make them look and layout however you want.

1 Like

Hi Eric!

Nice seeing you again. I think you’re allowed to be rusty.

I agree with @SamA74, it depends, so please help us out.

Hey guys. Thanks. It will actually be 3 links per line preceded by some words. So after Link3 on each line it needs to break and start again on the line below it. And they need to be blocks.

I was thinking just floating them all and using css3 nth child pseudo to clear the third one in each row. Is that still the easiest/best way these days?

<li>Some Words <a>Link1</a><a>Link2</a><a>Link3</a></li>
<li>Some Words <a>Link1</a><a>Link2</a><a>Link3</a></li>
<li>Some Words <a>Link1</a><a>Link2</a><a>Link3</a></li>

Adjacent links can be an accessibility issue. IIRC, some screen readers had problems with them in the past, but that no longer seems to be the case. However, WebAim does have this caveat:

Additionally, small adjacent links should have adequate whitespace (such as link CSS margins) between them to minimize users inadvertently clicking the wrong link.

http://webaim.org/techniques/hypertext/link_text

Anchors like that can also be a a problem on mobiles, especially for people of a larger finger disposition.

Yes a series of links with only whitespace between them would be read by the screenreader without a pause making it hard to differentiate one link from the next. it would just sound like a sentence. I believe that these days it is not so much of an issue.

1 Like

Hi Eric,

Context is the key and it doesn’t look like a list is the correct item here but it depends on what the ‘some words’ are going to be. If they are a definition of the links that follow then a dl list may be better.

If its just random text then probably a p tag around each line instead of a list. Unless each row is a list of something identifiable then a ul would be ok.

It all depends on context:)

That won’t work as you are adding content in the last float and all clears will be contained to content in that last float and not the float itself. It will not affect other floats or clear other floats but only the content in that float. You would need to use the pseudo element on the row container (a list item in your code) and make that clear all the floats before it (assuming you have sized all floats to be exactly the same height or they will snag).

Inline-block is much easier or indeed flexbox can be used for things like this but is a little more complicated.

4 Likes

Thanks guys. I think a pic will explain the context better than I could. So I attached it. Each folder will have 15 or so forms in it. As you said Paul a dl list is prob best here. But the only problem is the parent folder and the list there below it is already a dl list. So can I even nest another dl list inside of another dl list? A simple google should tell me that. But then my html is going to get corn-fusing. I hate deep level nested lists.

So currently Im playing around with wrapping each in a li and floating them and display blocking them when they are all wrapped in the single li.

So basically I can go like this…

<li>Some Words <a>Link1</a><a>Link2</a><a>Link3</a></li>

Or like this…

<li>Some Words</li> 
<li><a>Link1</a></li>
<li><a>Link2</a></li>
<li><a>Link3</a></li>

So which do you guys think is better?

<dl>
   <dt class="question">
	Parent dt
   </dt>
   <dd class="answer">
      <dt>Sub dt</dt>
      <dd><a href="" target="_blank">PDF</a></dd>
      <dd><a href="" target="_blank">DOC</a></dd>
      <dd><a href="" target="_blank">WEB</a></dd>	
   </dd>
</dl>

Ok lets say I do nested dl list. Is this how to code it? Or do I nest another dl as well?

Edit… Ok well google tells me add another dl as well.

For ease of styling and because there is some ambiguity to the structure I would go with simple nested lists.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul{
	margin:0;
	padding:0;
	list-style:none;
}
.forms ul{padding:0 0 0 1em}
.forms > li{margin:0 0 1em}
.forms strong{display:block;font-size:2rem}
.forms ul strong{font-size:1.2rem;display:inline-block}
.forms a{display:inline-block;margin:0 15px;}
</style>
</head>

<body>
<ul class="forms">
  <li><strong>Tenant Move-in Forms</strong>
    <ul class="answer">
      <li> <strong>Move-in / Move Out inspection</strong> 
      		<a href="" target="_blank">PDF</a> 
      		<a href="" target="_blank">DOC</a> 
      		<a href="" target="_blank">WEB</a> 
      </li>
     <li> <strong>Lorem Ipsum / Lorem ipsum inspection</strong> 
      		<a href="" target="_blank">PDF</a> 
      		<a href="" target="_blank">DOC</a> 
      		<a href="" target="_blank">WEB</a> 
      </li>
    </ul>
  </li>
   <li><strong>Tenant Lorem Ipsum Forms</strong>
    <ul class="answer">
      <li> <strong>Dolor / sit amet inspection</strong> 
      		<a href="" target="_blank">PDF</a> 
      		<a href="" target="_blank">DOC</a> 
      		<a href="" target="_blank">WEB</a> 
      </li>
     <li> <strong>Lorem Ipsum / Lorem ipsum inspection</strong> 
      		<a href="" target="_blank">PDF</a> 
      		<a href="" target="_blank">DOC</a> 
      		<a href="" target="_blank">WEB</a> 
      </li>
    </ul>
  </li>
</ul>
 
</body>
</html>

I can make a case for nested dls or even divs depending on how the data is organised but your drawing looks like a file list and usually that is done with nested lists.

I have 6 test pages now all coded different lol. I think i’m leaning toward the one that uses simple h2, a div, h3, and anchors. I think google will appreciate that best and it seems to make most sense to me.

These folders are all JS driven (when you click them they open like on your computer) so that plays a part to me as well.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.