Jaycee, do you have an example visually as a screenshot so I can really understand? Sorry.
On Apr 1, 9:22 am, JayCee <[email protected]> wrote: > I'm trying to create a visual representation of a server rack using > data I pull from a db. The goal is to have almost a table style > output with rack U numbers on the left in a column (42-1) and servers > that vary in size on the right in a column. So the left column will > always be numbers from 42 - 1, but the right column will vary > depending on what is in a given rack and what size it is. I would > have used a table but I believe there is no way to get multiple cells > in a column to merge like I would need. > > I'm having trouble with the entries lining up in seemingly random > ways. The layout works great, except that in certain situations the > layout on the right is off by 1 or 2 pixels. It seems a bit random, > in that a 2u server will line up correctly, but another 2u server down > below doesn't line up. In the example I put below here, the first 3 > are fine, but the 32u blank is off a little. > > Example code below (used in IE8, if that matters). The height of the > number divs on the left should be 21px+1px border, so the sizeU divs > are all sized to be 22*Usize - 1 (to account for the bottom border on > the server divs). > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> > <html> > > <head> > <title>MY TITLE</title> > <style type="text/css"> > .rack { > padding: 0; > margin-left: auto; > margin-right: auto; > width: 400px; > border: 1px solid black; > font-size: 6pt; > } > > .rack div{ > text-align: center; > margin: 0; > } > > .numlist{ > float: left; > border-right: 1px solid black; > margin:0; > width: 22px; > text-align: center; > } > > .numlist div{ > border-bottom: 1px solid black; > margin: 0; > height: 21px; > line-height: 21px; > } > > .size1u { > padding-left: 5px; > height: 21px; > line-height: 21px; > border-bottom: 1px solid black; > margin: 0; > } > > .size2u { > padding-left: 5px; > height: 43px; > line-height: 43px; > border-bottom: 1px solid black; > margin: 0; > } > > .size3u { > padding-left: 5px; > height: 65px; > line-height: 65px; > border-bottom: 1px solid black; > margin: 0; > } > > .size32u { > padding-left: 5px; > height: 703px; > line-height: 703px; > border-bottom: 1px solid black; > margin: 0; > } > > </style> > </head> > <body> > <div class='rack'> > <div class='numlist'> > > <div>42</div><div>41</div><div>40</div><div>39</div><div>38</ > div><div>37</div><div>36</div><div>35</div><div>34</div><div>33</ > div><div>32</div><div>31</div><div>30</div><div>29</div><div>28</ > div><div>27</div><div>26</div><div>25</div><div>24</div><div>23</ > div><div>22</div><div>21</div><div>20</div><div>19</div><div>18</ > div><div>17</div><div>16</div><div>15</div><div>14</div><div>13</ > div><div>12</div><div>11</div><div>10</div><div>9</div><div>8</ > div><div>7</div><div>6</div><div>5</div><div>4</div><div>3</ > div><div>2</div><div>1</div> > > </div> > > <div class='size1u'>Switch</div> > <div class='size1u'>EMPTY (1u)</div> > <div class='size1u'>Switch</div> > <div class='size32u'>EMPTY (32u)</div> > <div class='size2u'>Server1</div> > <div class='size2u'>Server2</div> > <div class='size3u'>EMPTY (3u)</div> > </div> > </div> > </body> > </html> -- -- You received this because you are subscribed to the "Design the Web with CSS" at Google groups. To post: [email protected] To unsubscribe: [email protected]
