Moving the description to the right of an icon

  • Thread starter Thread starter julian
  • Start date Start date
Click For Summary
SUMMARY

The discussion focuses on modifying HTML code to position a description and a "Download.pdf" link to the right of a PDF icon on a webpage. Key recommendations include using Visual Studio Code for better code readability, ensuring proper HTML structure with and tags, and correcting HTML syntax errors such as mismatched <a> tags. Additionally, it emphasizes the importance of using CSS for layout, suggesting the use of flexbox or a CSS framework like Bootstrap for proper alignment.</p> <strong>PREREQUISITES</strong> <ul> <li>Basic understanding of HTML structure and syntax</li> <li>Familiarity with CSS for layout management</li> <li>Knowledge of using code editors like Visual Studio Code</li> <li>Understanding of web development concepts such as responsive design</li> </ul> <strong>NEXT STEPS</strong> <ul> <li>Learn CSS Flexbox for modern layout techniques</li> <li>Explore Bootstrap for responsive web design frameworks</li> <li>Study HTML semantic elements for better accessibility</li> <li>Investigate browser Developer Tools for inspecting and debugging HTML/CSS</li> </ul> <strong>USEFUL FOR</strong> <p>Web developers, front-end designers, and anyone looking to improve their HTML/CSS skills for better webpage layout and design.</p> </div> </details> </div> </div> <script src="https://www.physicsforums.com/mathjax-config.js" async></script> <div class="block block--messages" data-xf-init="" data-type="post" data-href="/inline-mod/" data-search-target="*"> <span class="u-anchorTarget" id="posts"></span> <div class="block-outer"></div> <div class="block-outer js-threadStatusField"></div> <div class="block-container lbContainer" data-xf-init="lightbox select-to-quote" data-message-selector=".js-post" data-lb-id="thread-987179" data-lb-universal="0"> <div class="block-body js-replyNewMessageContainer"> <!-- RSS here --> <article class="message message--post js-post js-inlineModContainer " data-author="julian" data-content="post-6325618" id="js-post-6325618" > <span class="u-anchorTarget" id="post-6325618"></span> <div class="message-header"> <header class="message-attribution message-attribution--split"> <ul class="message-attribution-main listInline "> <li class="u-concealed"> <time class="u-dt" dir="auto" datetime="2020-04-13T01:20:31-0500" data-timestamp="1586758831" data-date="Apr 13, 2020" data-time="1:20 AM" data-short="Apr '20" title="Apr 13, 2020 at 1:20 AM">Apr 13, 2020</time> </li> </ul> <ul class="message-attribution-opposite message-attribution-opposite--list "> <li> <span style="cursor:pointer;" class="message-attribution-gadget" data-xf-init="share-tooltip" data-href="/posts/6325618/share" aria-label="Share" role="button" rel="nofollow"> <i class="fa--xf fal fa-share-alt "><svg xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" ><use href="/data/local/icons/light.svg?v=1767548553#share-alt"></use></svg></i> </span> </li> <li class="u-hidden js-embedCopy"> <a href="javascript:" data-xf-init="copy-to-clipboard" data-copy-text="<div class="js-xf-embed" data-url="https://www.physicsforums.com" data-content="post-6325618"></div><script defer src="https://www.physicsforums.com/js/xf/external_embed.js?_v=4debbbbf"></script>" data-success="Embed code HTML copied to clipboard." class=""> <i class="fa--xf fal fa-code "><svg xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" ><use href="/data/local/icons/light.svg?v=1767548553#code"></use></svg></i> </a> </li> <li> #1 </li> </ul> </header> </div> <div class="message-inner"> <div class="message-cell message-cell--user"> <section class="message-user" > <div class="message-userDetails"> <span class="message-name"><a href="/members/julian.142346/" class="username " dir="auto" data-user-id="142346" data-xf-init="member-tooltip">julian</a></span> <span class="threadstarter" data-xf-init="tooltip" title="Thread Starter"><i class="fa--xf fal fa-user-edit "><svg xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" ><use href="/data/local/icons/light.svg?v=1767548553#user-edit"></use></svg></i></span> <!-- Start Member Achievements --> <div class="post-badges"> <div class="post-badge badge-university" data-xf-init="tooltip" title="Verified Expert in Science and Math" aria-label="Science Advisor"> <i class="fa--xf fal fa-university "><svg xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" ><use href="/data/local/icons/light.svg?v=1767548553#university"></use></svg></i><span> Science Advisor</span> </div> <div class="post-badge badge-star" data-xf-init="tooltip" title="Click to Support PF" aria-label="Gold Member"> <i class="fa--xf fal fa-star "><svg xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" ><use href="/data/local/icons/light.svg?v=1767548553#star"></use></svg></i><span> Gold Member</span> </div> </div> <!-- End Member Achievements --> </div> <div class="message-userExtras"> <dl class="pairs pairs--justified"> <dt><i class="fa--xf fal fa-comments fa-fw "><svg xmlns="http://www.w3.org/2000/svg" role="img" data-xf-init="tooltip"><title>Messages

860
Reaction score
365
TL;DR
Want to know the easiest way modify the html code to I move description to the right of a pdf icon.
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.
 
Computer science news on Phys.org
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.
[CODE lang=html title=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>
[/CODE]
[CODE lang=html title=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>
[/CODE]

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.
 
  • Like
Likes   Reactions: sysprog and Mark44
Thanks. I'm in a stressed out distracted state at the moment, as I think other of people are. I will go through tomorrow.
 
  • Sad
Likes   Reactions: pbuk
julian said:
I'm in a stressed out distracted state at the moment
I'm sorry to hear that, keep yourself safe and healthy.
 
  • Like
Likes   Reactions: sysprog and julian
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.
 
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.
 
  • Like
Likes   Reactions: DaveC426913
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.
 
Last edited:
  • Like
Likes   Reactions: pbuk
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.
 
  • Like
Likes   Reactions: julian and sysprog
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.
 
  • #11
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.