.HTML5 alternative for frames with 1 fixed (menu)

2019-06-11 11:16发布

站内问答 / Html5
559 1 5

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.

1条回答
祖国的老花朵
2楼-- · 2019-06-11 12:08

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)