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]
