|
Posted by Jonathan N. Little on 01/11/08 23:10
NvrBst wrote:
> And my 2nd question, nothing to do with above; Is there a CSS Property
> that would tell the object not to wrap to the next line. Right now I
> have
>
> <asp:Menu style="float:left;" /><TABLE style="???"><tr><td>*Data1*</
^^^^^^^^
Still have no idea what HTML this "asp:Menu" represents, if you are
*not* going to supply a URL then at least insert what the ASP output
would be...
> td></tr><tr><td>*Data2*</td></tr></TABLE>
>
> Problem is when the window shirnks the table wraps down under the menu
Yep that what floats do when blocks don't fit!
> - I want it to just make a vertical scrollbar instead of wrapping.
> Way I'm thinking is ???="position:absolute; margin-left:180px;". I
> don't like setting margin-left:180px since it has to be updated each
> time the font of the menu changes.
#1 defining *text* blocks in "px" pixels is a *bad* idea. If user has a
different font size (and yes they can do that and you cannot prevent
them) then the text will not fit within your containers and the design
will break. I should use "em" that is proportion to the font used.
#2 "position:absolute" also a bad idea especially for novices that do
not know how to use it properly. Can screw up printing your page...
One way is to set the min-width of your container. Now <=IE6 will not
support "min-width" and there are some workarounds that you can Google
for, or say "screw it!" Works in "real" modern web browsers and now in
IE7 and maybe soon we can "adieu!" to IE6 and it's younger siblings
(Can't wait for IE7's passing too)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>Use min-width</title>
<style type="text/css">
/* use 'em' adjust for min width without wrapping */
body { min-width: 20em; overflow: auto; }
ul.menu { float: left; list-style: none; margin: 1em; padding: 0; }
ul.menu li { margin: 0; padding: 0; }
table { border: 2px solid black; border-collapse: collapse; }
th, td { border: 1px solid black; padding: 0 .25em; }
</style>
</head>
<body>
<ul class="menu">
<li>Menu item1</li>
<li>Menu item2</li>
<li>Menu item3</li>
<li>Menu item4</li>
<li>Menu item5</li>
<li>Menu item6</li>
</ul>
<table>
<tr><th>Row</th><th>Value A</th><th>Value B</th></tr>
<tr><td>0</td><td>A0</td><td>B0</td></tr>
<tr><td>1</td><td>A1</td><td>B1</td></tr>
<tr><td>2</td><td>A2</td><td>B2</td></tr>
<tr><td>3</td><td>A3</td><td>B3</td></tr>
<tr><td>4</td><td>A4</td><td>B4</td></tr>
<tr><td>5</td><td>A5</td><td>B5</td></tr>
<tr><td>6</td><td>A6</td><td>B6</td></tr>
<tr><td>7</td><td>A7</td><td>B7</td></tr>
<tr><td>8</td><td>A8</td><td>B8</td></tr>
<tr><td>9</td><td>A9</td><td>B9</td></tr>
<tr><td>10</td><td>A10</td><td>B10</td></tr>
<tr><td>11</td><td>A11</td><td>B11</td></tr>
<tr><td>12</td><td>A12</td><td>B12</td></tr>
<tr><td>13</td><td>A13</td><td>B13</td></tr>
<tr><td>14</td><td>A14</td><td>B14</td></tr>
<tr><td>15</td><td>A15</td><td>B15</td></tr>
<tr><td>16</td><td>A16</td><td>B16</td></tr>
<tr><td>17</td><td>A17</td><td>B17</td></tr>
<tr><td>18</td><td>A18</td><td>B18</td></tr>
<tr><td>19</td><td>A19</td><td>B19</td></tr>
<tr><td>20</td><td>A20</td><td>B20</td></tr>
<tr><td>21</td><td>A21</td><td>B21</td></tr>
<tr><td>22</td><td>A22</td><td>B22</td></tr>
<tr><td>23</td><td>A23</td><td>B23</td></tr>
<tr><td>24</td><td>A24</td><td>B24</td></tr>
<tr><td>25</td><td>A25</td><td>B25</td></tr>
<tr><td>26</td><td>A26</td><td>B26</td></tr>
<tr><td>27</td><td>A27</td><td>B27</td></tr>
<tr><td>28</td><td>A28</td><td>B28</td></tr>
<tr><td>29</td><td>A29</td><td>B29</td></tr>
</table>
</body>
</html>
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
[Back to original message]
|