The discussion revolves around modifying HTML code to position a description and a download link to the right of a PDF icon on a webpage. Participants explore various coding techniques and potential solutions, including HTML structure and CSS styling.
Discussion Character
Technical explanation
Debate/contested
Exploratory
Main Points Raised
One participant requests assistance in modifying their HTML to align a description and download link next to a PDF icon.
Another participant identifies several issues in the original HTML code, including misplaced tags and improper use of line breaks.
Suggestions are made regarding the use of a code editor, with recommendations for Visual Studio Code to improve readability.
Participants discuss the importance of matching opening and closing tags in HTML and suggest using semantic HTML elements like
and
instead of and for better structure.
There are mentions of potential alternatives to achieve the desired layout, including using CSS frameworks like Bootstrap or signing up for website building services like Jimdo or WordPress.
One participant shares a link to a jsFiddle demonstrating a possible solution using CSS flexbox, while noting compatibility issues with older browsers.
There is a discussion about the limitations of using float for layout, with some participants suggesting that flexbox or tables might be more effective for the desired alignment.
Areas of Agreement / Disagreement
Participants express differing opinions on the best approach to achieve the layout, with no consensus reached on a single solution. Some prefer using flexbox, while others suggest using floats or tables.
Contextual Notes
Participants note that the original HTML contains several errors and that the desired layout may depend on additional CSS rules not included in the initial code. There is also mention of potential compatibility issues with certain CSS features in older browsers.
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.
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:
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:
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.
I'm in a stressed out distracted state at the moment
I'm sorry to hear that, keep yourself safe and healthy.
#5
DaveC426913
Gold Member
2025 Award
24,488
8,752
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.
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.
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.
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.
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.
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.