I have been for hours attempting to get several div's to display and align properly. I have looked all over the internet and I just cannot get it right.
What I want is inside a section determined by a theme of a wordpress page, is the title of the space in the top left of that section, an info box to the left of the title, and below both of those a section containing a table.
At this point, I Just need to make a typical web page where I can build the thing i am building and I can worry about adding it into wordpress later.
|-----------------------------------------|-------------------------------------------| |.......................Title......................|...........................Info.....................| |-----------------------------------------|-------------------------------------------| |..........................................................................................................| |.................................................Table.................................................| |..........................................................................................................| |-------------------------------------------------------------------------------------|
Why that is so hard is beyond me.
The other problem is that I wish for this to be browser independent. I would like to figure out a way for it to be displayed in just such a manner on a desktop computer or a tablet or phone screen. (This may not be possible without a little effort but I thought I'd throw it out there.)
The html generated by php:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Knights Tour</title>
<link rel="stylesheet" type="text/css" href="http://bmfmain/kt/game.css">
<script src="http://bmfmain/kt/jquery.min.js"></script>
</head>
<body>
<div id="header">
<div id="title">
<h1>Knight's Tour</h1>
</div>
<div id="info">
<p>adsf</p>
</div>
</div>
<div id="section">
<table id="game">
<tr>
<td class="tdcls" name="0"></td>
<td class="tdcls" name="1"></td>
<td class="tdcls" name="2"></td>
<td class="tdcls" name="3"></td>
<td class="tdcls" name="4"></td>
<td class="tdcls" name="5"></td>
<td class="tdcls" name="6"></td>
<td class="tdcls" name="7"></td>
</tr>
<tr>
<td class="tdcls" name="8"></td>
<td class="tdcls" name="9"></td>
<td class="tdcls" name="10"></td>
<td class="tdcls" name="11"></td>
<td class="tdcls" name="12"></td>
<td class="tdcls" name="13"></td>
<td class="tdcls" name="14"></td>
<td class="tdcls" name="15"></td>
</tr>
<tr>
<td class="tdcls" name="16"></td>
<td class="tdcls" name="17"></td>
<td class="tdcls" name="18"></td>
<td class="tdcls" name="19"></td>
<td class="tdcls" name="20"></td>
<td class="tdcls" name="21"></td>
<td class="tdcls" name="22"></td>
<td class="tdcls" name="23"></td>
</tr>
<tr>
<td class="tdcls" name="24"></td>
<td class="tdcls" name="25"></td>
<td class="tdcls" name="26"></td>
<td class="tdcls" name="27"></td>
<td class="tdcls" name="28"></td>
<td class="tdcls" name="29"></td>
<td class="tdcls" name="30"></td>
<td class="tdcls" name="31"></td>
</tr>
<tr>
<td class="tdcls" name="32"></td>
<td class="tdcls" name="33"></td>
<td class="tdcls" name="34"></td>
<td class="tdcls" name="35"></td>
<td class="tdcls" name="36"></td>
<td class="tdcls" name="37"></td>
<td class="tdcls" name="38"></td>
<td class="tdcls" name="39"></td>
</tr>
<tr>
<td class="tdcls" name="40"></td>
<td class="tdcls" name="41"></td>
<td class="tdcls" name="42"></td>
<td class="tdcls" name="43"></td>
<td class="tdcls" name="44"></td>
<td class="tdcls" name="45"></td>
<td class="tdcls" name="46"></td>
<td class="tdcls" name="47"></td>
</tr>
<tr>
<td class="tdcls" name="48"></td>
<td class="tdcls" name="49"></td>
<td class="tdcls" name="50"></td>
<td class="tdcls" name="51"></td>
<td class="tdcls" name="52"></td>
<td class="tdcls" name="53"></td>
<td class="tdcls" name="54"></td>
<td class="tdcls" name="55"></td>
</tr>
<tr>
<td class="tdcls" name="56"></td>
<td class="tdcls" name="57"></td>
<td class="tdcls" name="58"></td>
<td class="tdcls" name="59"></td>
<td class="tdcls" name="60"></td>
<td class="tdcls" name="61"></td>
<td class="tdcls" name="62"></td>
<td class="tdcls" name="63"></td>
</tr>
</table>
</div>
<script src="http://bmfmain/kt/game.js"></script>
</body>
</html>
Formatting slightly off due to copy/paste.
The css that is currently being used: (Will change as I work the problem.)
html, body
{
margin: 0;
padding: 0;
}
#header
{
width: 800px;
margin: 0 auto;
float: top;
padding: 5px;
}
#title
{
width: 400px;
text-align: center;
float: left;
position: absolute;
}
#info
{
width: 400px;
text-align: center;
float: right;
position: absolute;
}
#section
{
width: 800px;
height: 800px;
margin: 0 auto;
float: bottom;
}
table
{
width: 100%;
height: 100%;
}
table, th, td
{
border: 1px solid #0000cc;
border-spacing: 0.0rem;
}
th, td
{
width: 8%;
height: 8%;
text-align: center;
background-color: transparent;
}
Again, formatting is off due to not being able to copy/paste code straight into stackexchange.com.
The question is: How do I make the div's appear like the picture above? How do I make the div's appear like the picture above on any platform, computer, tablet, or phone?
Thank you.
Aucun commentaire:
Enregistrer un commentaire