Menu
The issue I have is that I made a table, and some arrows separately on different div. But those div can not move and become bigger or smaller simultaneously if I change a browser or zoom in the page.
Currently what I am doing is constructing a big table. Inside this big table, there are many small tables: for each row of the blocks, it is a table, so how many rows there are how many tables. The arrows are in a new div, its position is "absolute", I change the left/top position to adjust its position.
Could anyone suggest how can I solve this issue, thanks in advance.
<html>
<head>
<title>Dupont Model</title>
<style type="text/css">
.table { //for tables
position: absolute;
width: 633px;
height: 309px;
left: 0px;
top: -35px;
}
.NetMarginArrow {
Position: absolute;
width: 180px;
height: 115px;
left: 428px;
top: 166px;
}
<------each arrow is asigned with a div class--->
</style>
</head>
<body>
<h3> Model</h3>
<div class="table"> <!--for tables (each block)-->
<table style border="0" cellpadding="0">
<!---a big table contains many small tables---->
<td><table border="0" cellspacing="10" cellpadding="10">
<tr><td bgcolor="#C4E1FF"><b>Net Profit</b></td><td></td></tr>
<tr>
<td bgcolor="#F0F0F0"> {{net_profit}}</td>
<tr><tr><tr>
</tr>
<tr><td bgcolor="#C4E1FF"><b>Sales</td></b></tr>
<tr>
<td bgcolor="#F0F0F0"> {{sales.sales__sum}}</td>
<tr><tr><tr>
</tr>
</td></table>
<td><table border="0" cellspacing="10" cellpadding="10">
<tr><td bgcolor="#D2E9FF"><b>Gross Margin</b></td><td></td></tr>
<tr>
<td bgcolor="#F0F0F0"> {{gross_margin}}</td>
</tr>
<tr>
<tr><td bgcolor="#D2E9FF"><b>Tax</b></td><td></td></tr>
<tr>
<td bgcolor="#F0F0F0"> {{tax}}</td>
</tr>
<tr>
<tr><td bgcolor="#D2E9FF"><b>Total Expenses</b></td></tr>
<tr>
<td bgcolor="#F0F0F0"> {{total_expenses}}</td>
</tr>
<tr><td></td></tr><tr><td></td></tr><tr><tr>
</td></table>
</table>
</div>
<!----each arrow has a div---->
<div class="NetMartinArrow">
<td><table border="0" cellpadding="0"> <!--Arrow after Net profit-->
<td>←<td><table style="height:230px;width:15px;border-color:000000;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-width:2px"><tr><td valign="top"></td></tr></td></table>
</td></table>
</div>
............................same to all arrows.............
</body>
</html>
841
I am not sure where in code you are using the .NetMarginArrow css class. Also, css is case sensitive. In your code, 'p' is capital of position in .NetMarginArrow class. Make sure that html body is taking 100% height. The container acts as a wrapper for all your elements. Please try the code below.
<html>
<head>
<title>Dupont Model</title>
<style type="text/css">
html, body {
height: 100%;
}
#container {
position: relative;
}
.table { //for tables
position: absolute;
width: 633px;
height: 309px;
left: 0px;
top: -35px;
}
.NetMarginArrow {
position: absolute;
width: 180px;
height: 115px;
left: 428px;
top: 166px;
}
<------each arrow is asigned with a div class--->
</style>
</head>
<body>
<h3> Model</h3>
<div id="container">
<div class="table"> <!--for tables (each block)-->
<table style border="0" cellpadding="0">
<!---a big table contains many small tables---->
<td><table border="0" cellspacing="10" cellpadding="10">
<tr><td bgcolor="#C4E1FF"><b>Net Profit</b></td><td></td></tr>
<tr>
<td bgcolor="#F0F0F0"> {{net_profit}}</td>
<tr><tr><tr>
</tr>
<tr><td bgcolor="#C4E1FF"><b>Sales</td></b></tr>
<tr>
<td bgcolor="#F0F0F0"> {{sales.sales__sum}}</td>
<tr><tr><tr>
</tr>
</td></table>
<td><table border="0" cellspacing="10" cellpadding="10">
<tr><td bgcolor="#D2E9FF"><b>Gross Margin</b></td><td></td></tr>
<tr>
<td bgcolor="#F0F0F0"> {{gross_margin}}</td>
</tr>
<tr>
<tr><td bgcolor="#D2E9FF"><b>Tax</b></td><td></td></tr>
<tr>
<td bgcolor="#F0F0F0"> {{tax}}</td>
</tr>
<tr>
<tr><td bgcolor="#D2E9FF"><b>Total Expenses</b></td></tr>
<tr>
<td bgcolor="#F0F0F0"> {{total_expenses}}</td>
</tr>
<tr><td></td></tr><tr><td></td></tr><tr><tr>
</td></table>
</table>
</div>
</div>
<!----each arrow has a div---->
<div class="NetMartinArror">
<td><table border="0" cellpadding="0"> <!--Arrow after Net profit-->
<td>←<td><table style="height:230px;width:15px;border-color:000000;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-width:2px"><tr><td valign="top"></td></tr></td></table>
</td></table>
</div>
............................same to all arrows.............
</body>
</html>
I have added container as a wrapper for all your HTML elements.
54
I believe that your problem could be "or so I think" that you may need to use the percent sign, %. I know that in my first day or so of creating HTML that I learned the hard way that % is better than PX, BECAUSE, if you swap to a different resolution, a problem similar to that of which you are speaking of will arise. So try using 1-100% on your page. I believe it makes it scalable, and is relative to your current screen. Anyway, Do try that. In the case that I underexplained a little: by using percents you may achieve something along the line of being able to do something like this:
<div id="EXAMPLE" style="height:1%;length:100%;"></div>
This would effectively make a DIV element stretching the Entire page and taking up 1% of the screen's relative height, starting from the top of the page. This works with Positioning, and any other place where "PX" May be used, there is also "EM's" and other ways to do it, but I use % personally. That is all.
22
keep everything fixed on their places.
div { position:fixed; }
and use
#someid { position:relative; } for appearence of arrows at respective places
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
