Primary layout no longer uses table

This commit is contained in:
Sky Johnson 2024-12-13 12:04:19 -06:00
parent ba4719f97a
commit 67cacf7882
2 changed files with 62 additions and 17 deletions

View File

@ -11,6 +11,49 @@ body {
background-image: url('/img/background.jpg'); background-image: url('/img/background.jpg');
} }
div#game-container {
max-width: 1280px;
margin: 0 auto;
padding: 1rem;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: solid 2px black;
padding-bottom: 0.5rem;
}
main {
width: 100%;
display: flex;
margin-bottom: 0.5rem;
}
main section#left {
width: 180px;
border-right: solid 2px black;
}
main section#middle {
flex-grow: 1;
}
main section#right {
width: 180px;
border-left: solid 2px black;
}
footer {
display: flex;
justify-content: space-around;
border: solid 1px black;
background-color: #eeeeee;
font-size: 0.8rem;
padding: 0.5rem;
}
table { table {
border-style: none; border-style: none;
padding: 0px; padding: 0px;

View File

@ -20,23 +20,25 @@ $template = <<<HTML
</script> </script>
</head> </head>
<body> <body>
<center> <div id="game-container">
<table cellspacing="0" width="90%"> <header>
<tr> <img id="logo" src="/img/logo.gif" alt="{{dkgamename}}" title="{{dkgamename}}">
<td class="top" colspan="3"> <nav>{{topnav}}</nav>
<table width="100%"><tr><td><img src="/img/logo.gif" alt="{{dkgamename}}" title="{{dkgamename}}" border="0" /></td><td style="text-align:right; vertical-align:middle;">{{topnav}}</td></tr></table> </header>
</td>
</tr> <main>
<tr> <section id="left">{{leftnav}}</section>
<td class="left">{{leftnav}}</td> <section id="middle">{{content}}</section>
<td class="middle">{{content}}</td> <section id="right">{{rightnav}}</section>
<td class="right">{{rightnav}}</td> </main>
</tr>
</table> <br> <footer>
<table class="copyright" width="90%"><tr> <div>Powered by <a href="http://dragon.se7enet.com/dev.php" target="_new">Dragon Knight</a></div>
<td width="25%" align="center">Powered by <a href="http://dragon.se7enet.com/dev.php" target="_new">Dragon Knight</a></td><td width="25%" align="center">&copy; 2024 Sharkk</td><td width="25%" align="center">{{totaltime}} Seconds, {{numqueries}} Queries</td><td width="25%" align="center">Version {{version}} {{build}}</td> <div>&copy; 2024 Sharkk</div>
</tr></table> <div>{{totaltime}} Seconds, {{numqueries}} Queries</div>
</center> <div>Version {{version}} {{build}}</div>
</footer>
</div>
</body> </body>
</html> </html>
HTML; HTML;