Moving the description to the right of an icon

julian · Apr 13, 2020

I have this webpage:

http://www.generalrelativityandlqg.co.uk/test.html

My question is can you tell me how to modify the html code so that the description and "Download.pdf" is to the right of the pdf icon? The easiest way possible.

Thanks.

pbuk · Apr 13, 2020

It took me a while to find the problem (which when I got to it was surprisingly simple!) because there are few problems with your HTML, so I'll go through these in the order I found them...
1. I'm not sure what code editor you are using; it seems to be generating a lot of empty lines. This is not an error, but it does make the code hard to read as shown below. I recommend Visual Studio Code.

HTML:

<html>
<title>Ian Baynham</title>
<body>
<br>

2. The <title> tag is not valid there, it needs to be within a <head> tag like this:

HTML:

<html>
<head>
<title>Ian Baynham</title>
</head>
<body>
...
</body>
</html>

3. You have <a/> on line 33 which should be </a> and a spare <a> on line 35 which should not be there - a decent programmers text editor like VS Code would highlight these errors.

4. On line 38 you have this:

HTML:

<div class="cc-m-download-description"><b>Derivation of black hole solutions</b> <br>This document provides the derivation of the solutions to Einstein's equation for a non-rotating black hole (the Schwarzschild solution), <br> a charged, non-rotationg black hole (the Reissner-Nordstrom solution), and a rotating black hole (the Kerr solution).</div>

Don't force line breaks with <br> tags like this, if you want a continuous paragraph of text then let the user's browser insert the line breaks like the first example below, or if you want to break out separate points use an html list like the second example. Also if something is a title, use a title (<h?>) tag not <b> to emphasize it.

paragraph:

<div class="cc-m-download-description">
  <h3>Derivation of black hole solutions</h3>
  <p>
This document provides the derivation of the solutions to Einstein's equation for a
non-rotating black hole (the Schwarzschild solution), a charged, non-rotating black hole
(the Reissner-Nordstrom solution), and a rotating black hole (the Kerr solution).
  </p>
</div>

list:

<div class="cc-m-download-description">
  <h3>Derivation of black hole solutions</h3>
  <p>
This document provides the derivation of the solutions to Einstein's equation for:
    <ul>
      <li>a non-rotating black hole (the Schwarzschild solution),</li>
      <li>a charged, non-rotating black hole (the Reissner-Nordstrom solution), and</li>
      <li>a rotating black hole (the Kerr solution).</li>
    </ul>
  </p>
</div>

5. If you want the filenames to appear before the image then put them before the images! But first you need to clean everything up - every <a> should have a matching </a>. So instead of this:

HTML:

        <a class="j-m-dowload" href="bh.ps">     
        
        <img src="https://assets.jimstatic.com/s/img/cc/icons/ps.png" width="51" height="51" class="downloadImage" alt="Download"/>
        
        Black hole derivations.ps

you should have

HTML:

<a class="j-m-dowload" href="bh.ps">
  Black hole derivations.ps
  <img
    src="https://assets.jimstatic.com/s/img/cc/icons/ps.png"
    alt="Download"
    width="51" height="51"
    class="downloadImage"
  />
</a>

6. Some of your download files have the .ps extension implying they are postscript files. Many people cannot read postscript files, and what happens when the user clicks on the link depends on a number of variable factors including how your server handles them. Stick to PDF.

7. You are using a number of CSS classes e.g. class="j-m-dowload", and apart from the typos (should there be an 'n' in this?) you do not have any style sheet loaded in your <head> (either inline within <style> tags or loaded via a <link>. Is this coming later? Also, you have both class="j-m-dowload" (known as kebab case) and class="downloadImage" (known as camel case) - stick to one or the other: I'd choose kebab case.

julian · Apr 13, 2020

Thanks. I'm in a stressed out distracted state at the moment, as I think other of people are. I will go through tomorrow.

pbuk · Apr 13, 2020

julian said:

I'm in a stressed out distracted state at the moment

I'm sorry to hear that, keep yourself safe and healthy.

DaveC426913 · Apr 13, 2020

pbuk said:

1. I'm not sure what code editor you are using; it seems to be generating a lot of empty lines. This is not an error, but it does make the code hard to read as shown below. I recommend Visual Studio Code.

Probably a Unix/Windows thing. One of them produces a carriage return and a line feed to start a new line. The other treats them as separate. Can't remember which is which.

There's a setting in the editor, but it; moot, since you may or my not have the same setting in your editor.

pbuk · Apr 14, 2020

DaveC426913 said:

Probably a Unix/Windows thing.

No, that's not it (and if it was I would not have mentioned it). The file linked actually uses LF (*nix) line endings, but in places there are multiple ones, and also lines with nothing on but spaces.

julian · Apr 15, 2020

I've tidied up my html:

http://www.generalrelativityandlqg.co.uk/test.html

I should have said that I was wanting to copy what this guy has done on his webpage:

https://photonicsdesign.jimdofree.com/pdfs/

In particular I wanted to copy how he has a pdf icon and the description located to the right of it. I attempted to borrow some of his code. But I have to say that it has been a while since I've done any html coding and am a bit rusty. I wasn't sure which parts of his code to borrow to achieve what I wanted.

pbuk · Apr 15, 2020

OK, there are a number of alternatives which you may or may not have considered:

That website is built in a service called Jimdo so signing up to that would be one way of achieving your goal.
You could sign up to WordPress.com which is a similar service and is the market leader in this space.
You could download an open source version of WordPress and install a few plugins to get something like what you want.

But if you want to continue to build it yourself that is fine. To get the list of downloads to display like that you need to copy not just the HTML but the relevant CSS: to see what CSS rules apply you can use the Developer Tools plugin for your web browser to 'Inspect' the HTML element.

Or you can build it from scratch - I had some downtime so sketched something up for you at https://jsfiddle.net/pbinuk/j9extg51/. Note I have used the flexbox feature of CSS3 which won't work in IE10 and some other browsers, if you want this to work in older versions you need to use floats and clears and some tricks that are not very easy to hand-code; I would use a CSS framework such as Bootstrap to get this right (you might like to take a look at this anyway.

pbuk · Apr 15, 2020

julian said:

the description located to the right of it.

Sorry I completely misread this previously and thought you wanted the icon to the right of the description! Today I realized my mistake so I think the code in the jsfiddle I linked will do what you want.

sysprog · Apr 20, 2020

You can't just use float left? ok then https://stackoverflow.com/questions...e-of-an-img-without-using-floatleft-so-it-won this shirt buttons ##\dots##

pbuk · Apr 21, 2020

sysprog said:

You can't just use float left? ok then https://stackoverflow.com/questions...e-of-an-img-without-using-floatleft-so-it-won this shirt buttons ##\dots##

Nah, if the text is too long it will wrap around the image; to stop it doing that you either need flexbox or many layers of containers, floats and clears as in that stackoverflow solution or the page linked in #7. Or a table of course - the semantic argument against a table is not that strong here IMHO.

Moving the description to the right of an icon

1. How do I move the description to the right of an icon?

2. Can I move the description to the right without using CSS?

3. How can I make sure the description stays aligned with the icon when the page is resized?

4. Is it better to use a grid system or flexbox for moving the description to the right of an icon?

5. Are there any accessibility concerns when moving the description to the right of an icon?

Similar threads

Hot Threads

Recent Insights