No replies
NormanW
NormanW's picture
Offline
newbie
Split Dalmatia
Last seen: 5 weeks 5 days ago
Split Dalmatia
Timezone: GMT+2
Joined: 2020-06-15
Posts: 1
Points: 2

I've been asked to be honorary editor of an online magazine and I'm trying to bring it up to date. As well as writing and editing content, I want to look at using a css file for styling and to bring in Bootstrap for display on different devices. The magazine was born in an age when phones were dumb or dumber and everyone viewed pages on a desktop!

I only have basic knowledge of CSS and a reasonable familiarity with HTML, sufficient to know when something is inefficient! Some parts I cannot change, ie the corporate style.

Currently the magazine page is just htm, with each magazine item in a bordered box created using htm table commands.

Is there a way to do this more efficiently with ="stylesheet" in the [head] area, describing the layout of each box.?

Any help would be gratefully received. The existing htm is below. It has failed the html check in almost every element.
I have added a new DTM because the current one is out of the Ark. I have not followed all your suggestion eg adding in [mysite///] locations for images, because they don't exist. I can view the format in CoffeeCup editor, so what is there works, in a fashion.

There just has to be a better, easier way of doing this, I'm just wondering if trying to do it using CSS is "barking up the wrong tree".

Thanks for reading

NW

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (<a href="http://www.coffeecup.com" rel="nofollow">www.coffeecup.com</a>)">
    <meta name="dcterms.created" content="Sun, 28 Jun 2020 13:30:49 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>Magazine 335</title>
 
    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
 
<body topmargin="0">
 
<p align="center" style="margin-top: 0; margin-bottom: 4"><img border="0" src="images305/crest.jpg" width="101" height="140"></p>
 
 
 
<div align="center">
  <center>
  <table border="2" cellpadding="0" cellspacing="0" width="728" bordercolor="#00CCFF">
    <tr>
      <td bgcolor="#c0c0c0">
        <p align="center" style="margin-top: 10; margin-bottom: 10"><font size="6">Article title</font></td>
    </tr>
    <tr>
      <td>
        <p style="margin-left: 10; margin-right: 10; margin-top: 0; margin-bottom: 0">The body text goes here:
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
        <p style="margin-left: 10; margin-right: 10; margin-top: 0; margin-bottom: 0">&nbsp;
        <p style="margin-left: 10; margin-right: 10; margin-top: 0; margin-bottom: 10">Photo title if used</td>
    </tr>
  </table>
  </center>
</div>
 
 
 
<p align="center" style="margin-top: 0; margin-bottom: 4"><img border="0" src="images305/crest.jpg" width="101" height="140"></p>
 
<!--  The next articles follow on, all the way down the page  -->
 
<div align="center">
  <center>
  <table border="2" cellpadding="0" cellspacing="0" width="728" bordercolor="#00CCFF">
    <tr>
      <td bgcolor="#c0c0c0">
        <p align="center" style="margin-top: 10; margin-bottom: 10"><font size="6">Article title</font></td>
    </tr>
    <tr>
      <td>  etc. etc. etc
 
 
 
<p style="margin-top: 0px; margin-bottom: 4" align="center">&nbsp;</p>
 
 
<p style="margin-top: 0; margin-bottom: 0" align="center">©PCC</p>
 
  </body>
</html>