Re: [PATCH htdocs v2] index: replace frameset with a table + iframe
Benson Muite <[email protected]>
| Newsgroups | gmane.comp.lib.newlib |
|---|---|
| Message-ID | <[email protected]> |
Hi Mike, Happy New Year. Thanks for the improvements to the documentation. On 04/01/2024 04.12, Mike Frysinger wrote: > The frameset element has been deprecated for a long time now in favor > of using iframe's. GNU website standards suggest avoiding this as a > result. So replace the 3 frames with a table & 1 iframe. The table > inlines the top.html & left.html into the index, and keeps the main > content as a frame. > > The experience is basically the same for end users. But it gives us > more control over document flow, and will make it easier for us to > adapt the site to different device sizes (e.g. mobile phones) which > the frameset structure does not. > --- > v2 > - fix the background color of the main frame so docs don't end up > black-on-black since iframes default to background-color:transparent > > index.html | 43 +++++++++++++++++++++++++++++++------------ > left.html | 17 ----------------- > top.html | 22 ---------------------- > 3 files changed, 31 insertions(+), 51 deletions(-) > delete mode 100644 left.html > delete mode 100644 top.html > > diff --git a/index.html b/index.html > index af72b0e14d37..8d2ea0a023d4 100644 > --- a/index.html > +++ b/index.html > @@ -4,17 +4,36 @@ > <title>The Newlib Homepage</title> > </head> > > - <frameset rows="100,*" frameborder="NO" border="0" framespacing="0"> > - <frame src="top.html" name="top" noresize> > - <frameset cols="130,*" frameborder="NO" border="0" framespacing="0"> > - <frame src="left.html" name="left" noresize> > - <frame src="info.html" name="main" noresize> > - </frameset> > - </frameset> > - <noframes> > + <body style="margin: 0" text="white" link="#00ccff" vlink="#00cc66"> > > - <body> > - </body> > - > - </noframes> > + <table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0"> > + <tr height="100"> > + <td bgcolor="#cc0000" align="center"><a href="https://www.redhat.com/" target=_top> > + <img src="logo_big2.png" > + width="81" height="69" alt="[redhat.com]" border="0"></a> > + </td> > + <a name="top"></a> > + <td align="center" bgcolor="#ce0000"> > + <a href="https://sourceware.org/" target=_top> > + <img src="/img/topbar.png" > + width="483" height="68" alt="sourceware.org" border="0"> > + </a> > + </td> > + </tr> > + <tr> > + <td bgcolor="black" width="130" align="center" valign="top"> > + <img height="30" width="100" src="newlib.jpg"> > + <p><a href="info.html" target="main">Info</a></p> > + <p><a href="news.html" target="main">News</a></p> > + <p><a href="download.html" target="main">Download</a></p> > + <p><a href="mailing.html" target="main">Mailing List</a></p> > + <p><a href="faq.html" target="main">FAQ</a></p> > + <p><a href="docs.html" target="main">Docs</a></p> > + </td> > + <td> > + <iframe src="info.html" name="main" noresize width="100%" height="100%" frameborder="0"> > + </td> > + </tr> > + </table> > + </body> > </html> > diff --git a/left.html b/left.html > deleted file mode 100644 > index 10a4d54cdeaf..000000000000 > --- a/left.html > +++ /dev/null > @@ -1,17 +0,0 @@ > -<html> > - > - <head> > - </head> > - > - <body bgcolor="black" text="white" link="#00ccff" vlink="#00cc66"> > - <center> > - <img height="30" width="100" src="newlib.jpg"> > - <p><a href="info.html" target="main">Info</a></p> > - <p><a href="news.html" target="main">News</a></p> > - <p><a href="download.html" target="main">Download</a></p> > - <p><a href="mailing.html" target="main">Mailing List</a> > - <p><a href="faq.html" target="main">FAQ</a> > - <p><a href="docs.html" target="main">Docs</a></center> > - </body> > - > -</html> > diff --git a/top.html b/top.html > deleted file mode 100644 > index 14e7b4367466..000000000000 > --- a/top.html > +++ /dev/null > @@ -1,22 +0,0 @@ > -<html> > - > - <head> > - </head> > - > - <body bgcolor="#ce0000" text="black"> > - <table width="100%" cellspacing="0" cellpadding="0" border="0"> > - <tr> > - <td bgcolor="#cc0000"><a href="https://www.redhat.com/" target=_top> > - <img src="logo_big2.png" > - width="81" height="69" alt="[redhat.com]" border="0"></a></td> > - <a name="top"></a> > - <td align="center" valign="bottom" bgcolor="#ce0000"> > - <a href="https://sourceware.org/" target=_top> > - <img src="/img/topbar.png" > - width="483" height="68" alt="sourceware.org" border="0"></a></td> > - </tr> > -</table> > - > - </body> > - > -</html> Tables are not very good for aligning items - in particular the reduce screen reader accessibility. May consider using a nav element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav For other parts in the table, consider using flexbox or one of the other layout methods described at: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout Just suggestions though.