Whats the easiest way to do this?

Below is the code. Here is the live test page. https://goo.gl/Cd5Nm5.

I want to float the file links over to the right as they are on the test page and code. But the words preceding them are of varing lengths. So On the short ones it is not totally obvious which links go to what words. So I would like to do a … out to the links. Is there an easy way to do that from my current html/css? I am open to a repeating background image to. Or adding a span or whatever. I messed around with it this morning using methods I’ve used in the past but because they are both floated nothing easy popped out at me.

Thanks guys

<!DOCTYPE html><html><head><meta charset="UTF-8">
<title></title>
<meta name"description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<style type="text/css">
* {
margin:0;
padding:0;
}
html {
background:url(/img/newyork-sd.jpg) no-repeat center center fixed;
background-size:cover;
overflow-y:scroll;
}
body {
width:800px;
margin:30px;
font:14px/1.6 Arial, Helvetica, sans-serif;
}
.head, .main, .paypal {
position:relative;
}
.head, .main {
box-shadow:0 0 5px #000;
border-radius:8px;
background:#fff;
padding:25px;
margin:0 0 20px;
overflow:hidden;
}
.profile {
position:absolute;
top:12px;
right:30px;
width:110px;
height:110px;
border:2px solid #fff;
box-shadow:0 0 3px #000;
border-radius:55px;
background:url(/img/satisfaction-guaranteed.png) 0 0 no-repeat;
text-indent:-999em;
}
.paypal .satisfaction {
position:absolute;
top:-20px;
right:90px;
}
h1 {
font-size:36px;
}
h2 {
font-size:22px;
}
h3 {
font-size:14px;
font-weight:normal; 
}
a {
color:#00008B;
}
#mailtoemail b {
display:none;
}
p, ol, form {
margin:0 0 20px;
}
li {
list-style:none;
}
#fb-root {
margin-top:40px;
}
/* --- Accordian --- */
.answer, .answer h3 {
float:left;
}
.answer a {
float:right;
}
.answer h3, .question {
clear:both;
}
.question { /* question */
cursor:pointer;
margin:20px 0 5px 0;
font-size:16px;
}
.answer {
margin:0 0 20px 57px;
}
.answer a {
background:url(/img/pdf-icon.png) 0 0 no-repeat;
padding-left:25px;
margin-left:10px;
height:28px;
}
.answer h3 + a + a {
background:url(/img/doc-icon.png) 0 0 no-repeat;
}
.answer h3 + a + a + a {
background:url(/img/web-icon.png) 0 0 no-repeat;
}
.question:hover {
}
.openanswer, .openanswer:hover, .openanswer:focus { /*class added to answers when opened */
}
.closeanswer { /*class added to answers when closed */
}
.question img {
padding:0 1px 0 0; /* img space */
margin:0 0 -11px;
}
html.js .answer {
display:none;
}
a#collapse { /* collaspe all */
color:darkred;
}
a#expand { /* expand all */
color:darkgreen;
}
p#controls {
display:none;
}
html.js p#controls {
display:block;
}
</style>
<script type="text/javascript">document.documentElement.className = 'js';</script>
</head>
<body>
<div class="head">
	<h1></h1>
	<p span id="mailtoemail"></p>
</div>
<div class="main">
	<p>Hello</p>
	<p id="controls"><a href="#" onClick="ddaccordion.collapseall('question'); return false" id="collapse">Collapse All</a> | <a href="#" onClick="ddaccordion.expandall('question'); return false" id="expand">Expand All</a></p>
            <h2 class="question">Click On Me</h2>
			<div class="answer">
				<h3>Word</h3>
			    <a href="" target="_blank">PDF</a>
				<a href="" target="_blank">DOC</a>
				<a href="" target="_blank">WEB</a>
				<h3>Word longer word word longer</h3>
			    <a href="" target="_blank">PDF</a>
				<a href="" target="_blank">DOC</a>
				<a href="" target="_blank">WEB</a>
				<h3>Word long</h3>
			    <a href="" target="_blank">PDF</a>
				<a href="" target="_blank">DOC</a>
				<a href="" target="_blank">WEB</a>
				<h3>Word long long</h3>
			    <a href="" target="_blank">PDF</a>
				<a href="" target="_blank">DOC</a>
				<a href="" target="_blank">WEB</a>
			</div>
</div>
<script type="text/javascript" src="/js/js.js"></script>
</body>
</html>

The easiest way is to put the words and links into a table. That way the words and links are clearly aligned. Also, if you have a really long sequence of words they will wrap in the table cell, keeping it all in line.

Here is an example, using your information:

<table id="T1" border="0" cellpadding="10" cellspacing="0" style="border-collapse: collapse" width="100%">
        <tr>
          <td class="rt" width="55%">Word</td>
          <td width="15%"><a href target="_blank">PDF</a></td>
          <td width="15%"><a href target="_blank">DOC</a></td>
          <td width="15%"><a href target="_blank">WEB</a></td>
        </tr>
        <tr>
          <td class="rt">Word longer word word longer</td>
          <td><a href target="_blank">PDF</a></td>
          <td><a href target="_blank">DOC</a></td>
          <td><a href target="_blank">WEB</a></td>
        </tr>
        <tr>
          <td class="rt">Word long</td>
          <td><a href target="_blank">PDF</a></td>
          <td><a href target="_blank">DOC</a></td>
          <td><a href target="_blank">WEB</a></td>
        </tr>
        <tr>
          <td class="rt">Word long long</td>
          <td><a href target="_blank">PDF</a></td>
          <td><a href target="_blank">DOC</a></td>
          <td><a href target="_blank">WEB</a></td>
        </tr>
      </table>

<style type="text/css">
#T1 td { text-align:center; }
.rt { text-align:right !important; }
</style>

Hi Eric,
Those are called “dot leaders” from typographical terms. Not sure if you will be able to do it with your current html.

There was supposed to be an inclusion for dot leaders in css3 but it looks like they ran into some issues that have put it on hold.

Here’s an old thread about doing that. Looks like Ralph had a pretty good solution with a dl and dd
Simulating Dot Leaders in CSS2

Here is an old example I dug out of my demos, I’d say it’s to rigid to use these days due to its fixed widths.
It’s probably time to find a clean responsive solution.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Billing Statement</title>
<style type="text/css">

h1{
    text-align:center;
    font-size:1.65em;
}
.wrap{
    float:left;
    width:700px;
    margin:30px;
}
h2{
    font-size:1.5em;
    color:#A04123;
    padding:10px 0;
}
.report{
    margin:0;
    padding:0 0 20px 30px;
    overflow:hidden;
    background:#EEF;
}
.report li{
    float:left;
    clear:left;
    width:100%;
    height:1.3em;
    list-style:none;
    margin:1.5em 0;
    border-bottom:2px dotted #000;
    background:#EED;
}
.report li p,
.report li span{
    float:left;
    max-width:400px;
    margin:0;
    padding:.45em .25em 0;
    font-weight:bold;
    background:#FFF;
}
.report li span{
    clear:left;
    max-width:380px;/*400px total with padding*/
    padding:0 0 0 20px;/*reset padding from ruleset above*/
    margin-top:3px;
    font-size:.75em;
    font-style:italic;
}
.report li a{
    text-decoration:none;
    float:right;
    padding:.45em .5em 0;
    font-weight:bold;
    color:#DA883E;
    background:#FFF;
}
.report li a:hover{
    background:#DDF;
}
ol.toc a::after {
  content: leader('.');
}
</style>
</head>
<body>

<div class="wrap">
<h1>Billing Statement</h1>
<h2>Billed</h2>
    <ul class="report">
        <li>
            <a href="pdf">Create PDF</a>
            <a href="view">View</a>
            <p>Invoices to insurance</p>
            <span>Options: Date, Client, Insurance</span>
        </li>
        <li>
            <a href="pdf">Create PDF</a>
            <a href="view">View</a>
            <p>A short line</p>
            <span>Options: Date, Client, Insurance, Perhaps longer stuff that might need to wrap</span>
        </li>
        <li>
            <a href="pdf">Create PDF</a>
            <a href="view">View</a>
            <p>A much longer line that may need to wrap at lower resolutions</p>
        </li>
    </ul>
</div>

</body>
</html>

I’ve tried different ways without changing the HTML, but no joy.

<div class="answer">
	<h3>Word</h3>
        <a href="" target="_blank">PDF</a>
	<a href="" target="_blank">DOC</a>
	<a href="" target="_blank">WEB</a>
	<h3>Word longer word word longer</h3>
        <a href="" target="_blank">PDF</a>
	<a href="" target="_blank">DOC</a>
	<a href="" target="_blank">WEB</a>
	<h3>Word long</h3>
        <a href="" target="_blank">PDF</a>
	<a href="" target="_blank">DOC</a>
	<a href="" target="_blank">WEB</a>
	<h3>Word long long</h3>
        <a href="" target="_blank">PDF</a>
	<a href="" target="_blank">DOC</a>
	<a href="" target="_blank">WEB</a>
</div>

But if the HTML can be rewritten I think this cheat looks OK

.leaders {
 display: inline-block;
 min-width: 50%;
 border-bottom-style: dotted;
 border-bottom-width: 2px;
}
<div>
  <span>test link</span>
  <span class="leaders"></span>
  <a href="#">test link</a>
</div>

Hi there PicnicTutorials,

this can be done with “display: flex”

Here is an example…

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
.line {
    display: flex;
    margin: 1em 0;
}
.line div {
    white-space: nowrap;
 }
.line div:nth-child(2) {
    position: relative;
    width: 100%;
 }
.line div:nth-child(2) span {
    position: absolute;
    bottom: 0.25em;
    width: 98%;
    margin: 0 1%;
    border-bottom: 1px dotted #000;
 }
</style>

</head>
<body> 
<div class="line">
 <div>Word</div>
 <div><span></span></div>
 <div>WEB DOC PDF</div>
</div>
<div class="line">
 <div>Word longer word word long</div>
 <div><span></span></div>
 <div>WEB DOC PDF</div>
</div>
<div class="line">
 <div>Word long</div>
 <div><span></span></div>
 <div>WEB DOC PDF</div>
</div>
<div class="line">
 <div>Word long long</div>
 <div><span></span></div>
 <div>WEB DOC PDF</div>
</div>

</body>
</html>

coothead

3 Likes

Thanks a lot guys you helped stir my brain. I think this works. I’ll play with line-height and test it more later. https://goo.gl/Y6ZtwP

basically did it with :after on the h3. positioned in absolute with a big width and overflow hid the containing div and raised the links above it and gave them a solid background and used padding instead of margin to space them.

Hi!

That was my first thought too. Pure and simple. (Though I would use monospace dots instead of a bottom border.)

Then I was inspired by @Mittineague to use a flexbox solution to still keep your html intact and only use some css. Here is your code from post #1 with the leading :after dots and flex for layout space and allow the eventual extra long h3 to wrap:

<!DOCTYPE html><html><head><meta charset="UTF-8">
<title></title>
<meta name"description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<style type="text/css">
*{
    margin:0;
    padding:0;
}
html{
    background:url(/img/newyork-sd.jpg) no-repeat center center fixed;
    background-size:cover;
    overflow-y:scroll;
}
body{
    width:800px;
    margin:30px;
    font:14px/1.6 Arial, Helvetica, sans-serif;
}
.head,
.main,
.paypal{
    position:relative;
}
.head,
.main{
    box-shadow:0 0 5px #000;
    border-radius:8px;
    background:#fff;
    padding:25px;
    margin:0 0 20px;
    overflow:hidden;
}
.profile{
    position:absolute;
    top:12px;
    right:30px;
    width:110px;
    height:110px;
    border:2px solid #fff;
    box-shadow:0 0 3px #000;
    border-radius:55px;
    background:url(/img/satisfaction-guaranteed.png) 0 0 no-repeat;
    text-indent:-999em;
}
.paypal .satisfaction{
    position:absolute;
    top:-20px;
    right:90px;
}
h1{
    font-size:36px;
}
h2{
    font-size:22px;
}
h3{
    font-size:14px;
    font-weight:normal;
}
a{
    color:#00008B;
}
#mailtoemail b{
    display:none;
}
p,
ol,
form{
    margin:0 0 20px;
}
li{
    list-style:none;
}
#fb-root{
    margin-top:40px;
}
/* --- Accordian --- */
/*** rules below is in conflict with the flex display:***/
/*
.answer,
.answer h3{
    float:left;
}
.answer a{
    float:right;
}
.answer h3,*/
.question{
    clear:both;
}
.question{
    cursor:pointer;
    margin:20px 0 5px 0;
    font-size:16px;
}
/*** a flex solution keeping the html as is ***/
.answer{
    margin:0 0 20px 57px;
    display:flex;
    flex-flow:row wrap;
    align-items:flex-end;
}
.answer h3{
    flex-basis:40%; /* increase the width enough to flex-wrap the next h3 after the links */
  padding-bottom:.5em; /* padding to visually match the links' vertical flex-end align */
  overflow:hidden;
  line-height:1.1;
}
.answer h3::after{
    display:inline-block;
    margin:0 -40em 0 .2em;
    font:1em monospace;
  white-space:nowrap;
    content:"\a.......................................................";
}
.answer a{
    margin-left:10px;
    padding-left:25px;
    height:28px;
    background:url(/img/pdf-icon.png) 0 0 no-repeat;
}
.answer h3+a+a{
    background:url(/img/doc-icon.png) 0 0 no-repeat;
}
.answer h3+a+a+a{
    background:url(/img/web-icon.png) 0 0 no-repeat;
}
.question:hover{
}
.openanswer,
.openanswer:hover,
.openanswer:focus{
}
.closeanswer{
}
.question img{
    margin:0 0 -11px;
    padding:0 1px 0 0;
}
html.js .answer{
    display:none;
}
a#collapse{
    color:darkred;
}
a#expand{
    color:darkgreen;
}
p#controls{
    display:none;
}
html.js p#controls{
    display:block;
}
</style>
</head><body>

<div class="head">
    <h1></h1>
    <p span id="mailtoemail"></p>
</div>
<div class="main">
    <p>Hello</p>
    <p id="controls"><a href="#" onClick="ddaccordion.collapseall('question'); return false" id="collapse">Collapse All</a> | <a href="#" onClick="ddaccordion.expandall('question'); return false" id="expand">Expand All</a></p>
    <h2 class="question">Click On Me</h2>
    <div class="answer">
        <h3>Word</h3>
        <a href="" target="_blank">PDF</a>
        <a href="" target="_blank">DOC</a>
        <a href="" target="_blank">WEB</a>
        <h3>Word longer word word longer</h3>
        <a href="" target="_blank">PDF</a>
        <a href="" target="_blank">DOC</a>
        <a href="" target="_blank">WEB</a>
        <h3>Word long</h3>
        <a href="" target="_blank">PDF</a>
        <a href="" target="_blank">DOC</a>
        <a href="" target="_blank">WEB</a>
        <h3>Word long long</h3>
        <a href="" target="_blank">PDF</a>
        <a href="" target="_blank">DOC</a>
        <a href="" target="_blank">WEB</a>
    </div>
</div>

</body></html>

Note: Please don’t mind; I happend to reformat your code as I’m used to when I edid it.

Edit) The new short link seems at fault, but the short link in post #1 works and shows your :after solution too.

1 Like

Huh that’s weird wonder what happened to my short link. Here is the correct one. https://goo.gl/Cd5Nm5

Thanks Eric :slight_smile: I’ll have to play with that flex box and the monospace dots. I didn’t much like the border dots. Thanks for the suggestions. Thanks all of you:)

Perhaps your border dots can be adjusted a bit to the better.:

h3::after {
    content: " ";
    position: absolute;
    bottom: 4px;
    width: 500px;
    margin-left: .2em;
    border-bottom: .2em dotted #999;
}

Please do keep us posted!

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