Ok so in my adventure to start with web programming, I have struck a brick wall. According to the interwebz, you should not use tables to layout a page, but as I understand, use CSS/HTML combo. I am really battling with this. Any good resources on this for someone needing a quick overview. I want to do as Here
Top left & top right an icon of 32x32. The header must fill the top of the page ie width - 64px
The error display must be at the bottom and fill the width. For the life of me I cannot event get this right. Here is the HTML and CSS. The #connected, #connecting, #disconnected divs are set visile/invisible by JS on the page.
The page must be responsive so that when the tablet orientation is changed, it adjusts accordingly.
Can anyone help? Somehow I dont understand the whole positioning/layout thing.
Top left & top right an icon of 32x32. The header must fill the top of the page ie width - 64px
The error display must be at the bottom and fill the width. For the life of me I cannot event get this right. Here is the HTML and CSS. The #connected, #connecting, #disconnected divs are set visile/invisible by JS on the page.
The page must be responsive so that when the tablet orientation is changed, it adjusts accordingly.
Can anyone help? Somehow I dont understand the whole positioning/layout thing.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="RemoteDisplay.css" media="screen" />
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="header">
<div id="home"><img src="images/Back32.png" alt=""/></div>
<div id="clientIdentifier">Client</div>
<div id="connecting"><img src="images/Connecting32.gif" alt=""/></div>
<div id="connected"><img src="images/Connected32.png" alt=""/></div>
<div id="disconnected"><img src="images/Disconnected32.png" alt=""/></div>
</div>
<div id=content>
<div id="viewState"></div>
<div id="labelIdentifier"></div>
<div id="weight"></div>
<div id="packContent"></div>
</div>
<div id="errorMessage">Error</div>
</body>
</html>
Code:
#header
{
height: 32px;
}
#home
{
display:inline;
width: 32px;
height: 32px;
background-color: dimgray;
}
#clientIdentifier
{
display:block;
width: calc(100% - 64px);
height: 32px;
background-color: dimgray;
}
#connecting
{
display:inline;
float:right;
background-color: dimgray;
max-width:32px;
max-height:32px;
}
#connected
{
display:inline;
float:right;
visibility:hidden;
background-color: dimgray;
max-width:32px;
max-height:32px;
}
#disconnected
{
display:inline;
float:right;
visibility:hidden;
background-color: dimgray;
max-width:32px;
max-height:32px;
}
#viewState
{
display:block;
visibility: visible
float:right;
}
#errorMessage
{
display:block;
background-color: dimgray;
}
Last edited:
