A
Anonymous
Guest
Hello:
I am trying to create a result form from mysql and I am having problems formatting my html data tables. The result should be show a picture ( link in mysql ), then next to it a table that will probably contain 4 fields that I have as table0. I want this to be 100%, but when I make it 100%, it automatically drops below the picture. The same goes for the 2 tables, table1 and table2 ( all these names are temp only so that I can see the placement ). I can not get them to be 50% each. I want to add another row of tables that will be hidden in all views accept with a media query of 240. This would then show a little more information for mobile users. I am not worried just yet about the media query. Can anyone help me please. I have added the code here along with a link. I am not using external css until it works.
http://www.pepelepew1962.x10.mx/help.html
<!DOCTYPE html>
<head>
<style type="text/css">
#pager
{
width:75%;
}
#page01
{
margin: 10px auto;
border: 2px solid #191919;
background-color: #2C2C2C;
padding: 10px;
border-radius: 4px;
/* [disabled]margin-bottom: 10px; */
/* [disabled]margin-top: 10px; */
}
#pk01 img
{
width: 75px;
height: 100px;
}
.pix {
display:block;
max-width:100%;
height:auto;
margin:0.0em auto;
float: left;
}
.table0 {
width:90%;
margin:auto;
font-size:12px;
border:1px solid #0000FF;
float: left;
margin-bottom: 5px;
}
.table0 th {
font-weight:bold;
color: yellow;
vertical-align:middle;
text-align:center;
border:1px solid #C1FFC1;
}
.table1 {
width:40%;
margin:auto;
font-size:12px;
border:1px solid #FF1493;
float: left;
}
.table1 th {
font-weight:bold;
color:#00FFFF;
vertical-align:middle;
text-align:center;
border:1px solid #C1FFC1;
}
.table1 tr {
border:1px solid #C1FFC1;
}
.table1 td {
font-weight:bold;
color:#00FF00;
vertical-align:middle;
text-align:left;
padding-left: 15px;
border:1px solid #C1FFC1;
}
.table2 {
width:40%;
margin:auto;
font-size:12px;
border:1px solid #FF1493;
float: left;
}
.table2 th {
font-weight:bold;
color:#00FFFF;
vertical-align:middle;
text-align:center;
border:1px solid #C1FFC1;
}
.table2 tr {
border:1px solid #C1FFC1;
}
.table2 td {
font-weight:bold;
color:#FF0000;
vertical-align:middle;
text-align:left;
padding-left: 15px;
border:1px solid #C1FFC1;
}
</style>
<title>
Test Page
</title>
</head>
<body bgcolor="#000000">
<div id="pager">
<div id="page01">
<div id="pk01">
<img src="300x250_uap.gif" class="pix" />
</div>
<div id="exampleB">
<table class="table0">
<tr>
<th> SOMETHING</th>
<th> SOMETHING</th>
<th> SOMETHING</th>
<th> SOMETHING</th>
</tr>
</table>
</div>
<div id="exampleB">
<table class="table2">
<tr>
<td>Book</td>
<td>$5.00</td>
</tr>
<tr>
<td>Shoe</td>
<td>$10.00</td>
</tr>
<tr>
<td>Flower</td>
<td>$3.00</td>
</tr>
</table>
<table class="table1">
<tr>
<td>Books</td>
<td>$5.00</td>
</tr>
<tr>
<td>Shoes</td>
<td>$10.00</td>
</tr>
<tr>
<td>Flowers</td>
<td>$3.00</td>
</tr>
</table>
</div>
<div style="clear: left;"></div>
</div>
<div id="page01">
<div id="pk01">
<img src="300x250_uap.gif" class="pix" />
</div>
<div id="exampleB">
<table class="table0">
<tr>
<th> SOMETHING</th>
<th> SOMETHING</th>
<th> SOMETHING</th>
<th> SOMETHING</th>
</tr>
</table>
</div>
<div id="exampleB">
<table class="table2">
<tr>
<td>Book</td>
<td>$5.00</td>
</tr>
<tr>
<td>Shoe</td>
<td>$10.00</td>
</tr>
<tr>
<td>Flower</td>
<td>$3.00</td>
</tr>
</table>
<table class="table1">
<tr>
<td>Books</td>
<td>$5.00</td>
</tr>
<tr>
<td>Shoes</td>
<td>$10.00</td>
</tr>
<tr>
<td>Flowers</td>
<td>$3.00</td>
</tr>
</table>
</div>
<div style="clear: left;"></div>
</div>
</div>
</body></html>
I am trying to create a result form from mysql and I am having problems formatting my html data tables. The result should be show a picture ( link in mysql ), then next to it a table that will probably contain 4 fields that I have as table0. I want this to be 100%, but when I make it 100%, it automatically drops below the picture. The same goes for the 2 tables, table1 and table2 ( all these names are temp only so that I can see the placement ). I can not get them to be 50% each. I want to add another row of tables that will be hidden in all views accept with a media query of 240. This would then show a little more information for mobile users. I am not worried just yet about the media query. Can anyone help me please. I have added the code here along with a link. I am not using external css until it works.
http://www.pepelepew1962.x10.mx/help.html
<!DOCTYPE html>
<head>
<style type="text/css">
#pager
{
width:75%;
}
#page01
{
margin: 10px auto;
border: 2px solid #191919;
background-color: #2C2C2C;
padding: 10px;
border-radius: 4px;
/* [disabled]margin-bottom: 10px; */
/* [disabled]margin-top: 10px; */
}
#pk01 img
{
width: 75px;
height: 100px;
}
.pix {
display:block;
max-width:100%;
height:auto;
margin:0.0em auto;
float: left;
}
.table0 {
width:90%;
margin:auto;
font-size:12px;
border:1px solid #0000FF;
float: left;
margin-bottom: 5px;
}
.table0 th {
font-weight:bold;
color: yellow;
vertical-align:middle;
text-align:center;
border:1px solid #C1FFC1;
}
.table1 {
width:40%;
margin:auto;
font-size:12px;
border:1px solid #FF1493;
float: left;
}
.table1 th {
font-weight:bold;
color:#00FFFF;
vertical-align:middle;
text-align:center;
border:1px solid #C1FFC1;
}
.table1 tr {
border:1px solid #C1FFC1;
}
.table1 td {
font-weight:bold;
color:#00FF00;
vertical-align:middle;
text-align:left;
padding-left: 15px;
border:1px solid #C1FFC1;
}
.table2 {
width:40%;
margin:auto;
font-size:12px;
border:1px solid #FF1493;
float: left;
}
.table2 th {
font-weight:bold;
color:#00FFFF;
vertical-align:middle;
text-align:center;
border:1px solid #C1FFC1;
}
.table2 tr {
border:1px solid #C1FFC1;
}
.table2 td {
font-weight:bold;
color:#FF0000;
vertical-align:middle;
text-align:left;
padding-left: 15px;
border:1px solid #C1FFC1;
}
</style>
<title>
Test Page
</title>
</head>
<body bgcolor="#000000">
<div id="pager">
<div id="page01">
<div id="pk01">
<img src="300x250_uap.gif" class="pix" />
</div>
<div id="exampleB">
<table class="table0">
<tr>
<th> SOMETHING</th>
<th> SOMETHING</th>
<th> SOMETHING</th>
<th> SOMETHING</th>
</tr>
</table>
</div>
<div id="exampleB">
<table class="table2">
<tr>
<td>Book</td>
<td>$5.00</td>
</tr>
<tr>
<td>Shoe</td>
<td>$10.00</td>
</tr>
<tr>
<td>Flower</td>
<td>$3.00</td>
</tr>
</table>
<table class="table1">
<tr>
<td>Books</td>
<td>$5.00</td>
</tr>
<tr>
<td>Shoes</td>
<td>$10.00</td>
</tr>
<tr>
<td>Flowers</td>
<td>$3.00</td>
</tr>
</table>
</div>
<div style="clear: left;"></div>
</div>
<div id="page01">
<div id="pk01">
<img src="300x250_uap.gif" class="pix" />
</div>
<div id="exampleB">
<table class="table0">
<tr>
<th> SOMETHING</th>
<th> SOMETHING</th>
<th> SOMETHING</th>
<th> SOMETHING</th>
</tr>
</table>
</div>
<div id="exampleB">
<table class="table2">
<tr>
<td>Book</td>
<td>$5.00</td>
</tr>
<tr>
<td>Shoe</td>
<td>$10.00</td>
</tr>
<tr>
<td>Flower</td>
<td>$3.00</td>
</tr>
</table>
<table class="table1">
<tr>
<td>Books</td>
<td>$5.00</td>
</tr>
<tr>
<td>Shoes</td>
<td>$10.00</td>
</tr>
<tr>
<td>Flowers</td>
<td>$3.00</td>
</tr>
</table>
</div>
<div style="clear: left;"></div>
</div>
</div>
</body></html>