Right now I am using frames on my website to get a menu with 256px wide pictures on the leftsite of the screen:
<frameset cols="275,*">
<frame src="Menu.html" name="menu" title="menu" marginwidth="0" noresize>
<frame src="MSX.html" name="game" title="game" marginwidth="0">
Site: http://www.file-hunter.com/MSX
I have been looking at iframes which are html5 compliant, but this will still give the standard bookmarking problems. Besides that, it will not allow the emulator to go full screen.
I have also been looking at columns, but I can't find a way to give the first column a fixed width somehow.
I don't mind needing to update all 170 .html files, but I would be really interested in finding a solution which will give me the same layout & functionality in decent .HTML5 and being able to get the emulator run Full Screen.
In the meantime I have placed this request elsewhere as well and have come up with a nice solution using CSS Grids.
CSS:
*
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.header {
grid-area: header;
}
.wrapper {
display: grid;
grid-gap: 1px;
grid-template-columns: 258px 1fr 1fr;
grid-template-areas:
"....... header header"
"sidebar content content";
background-color: #fff;
color: #444;
}
.box1 {
background-color: #000;
color: #fff;
border-radius: 5px;
padding: 1px;
font-size: 150%;
}
.box2 {
background-color: #fff;
color: #000;
border-radius: 5px;
padding: 1px;
font-size: 100%;
}
.header {
background-color: #999;
}
HTML:
<body>
<section class="wrapper">
<div class="box1 sidebar">
A bunch of pictures with links
</div>
<div class="box2 content">
Emulator with content
</div>
</section></body>
I still have to play around with the header and footer a bit, but this seems to work quite nicely.