CSS Containers and Framing
- by CaffeineAddiction
I am attempting to code a dynamic object for use in an unordered list. I have a mock up of the HTML here:
<ul class='Main'>
<li class='Node'>
<span class='Node_Light'>
</span>
<span class='Node_Control'>
<span class='Ctrl_Name'>
<span class='CtrlN_Text'>Random Name</span>
<span class='CtrlN_Edit'>[%]</span>
</span><br/>
<span class='Ctrl_ID'>ff:ff:ff:ff:ff:ff</span><br/>
<span class='Ctrl_Buttons'>
<span class='CBttn_On'>[%]</span>
<span class='CBttn_Off'>[%]</span>
<span class='CBttn_Blink'>[%]</span>
<span class='CBttn_Config'>[%]</span>
<span class='CBttn_Graph'>[%]</span>
</span>
</span>
<span class='Node_Data'>
<span class='ND_Sens0'>
<span class='Sens_Lable'>temp:</span>
<span class='Sens_Data'>72</span>
<span class='Sens_Units'>°F</span>
</span><br/>
<span class='ND_Sens1'>
<span class='Sens_Lable'>Sens1:</span>
<span class='Sens_Data'>Off</span>
<span class='Sens_Units'></span>
</span><br/>
<span class='ND_Sens2'>
<span class='Sens_Lable'>Sens2:</span>
<span class='Sens_Data'>Off</span>
<span class='Sens_Units'></span>
</span><br/>
<span class='ND_Sens3'>
<span class='Sens_Lable'>Sens3:</span>
<span class='Sens_Data'>Off</span>
<span class='Sens_Units'></span>
</span><br/>
<span class='ND_Sens4'>
<span class='Sens_Lable'>Sens4:</span>
<span class='Sens_Data'>Off</span>
<span class='Sens_Units'></span>
</span>
</span>
</li>
</ul>
and I am attempting to wrangle this HTML into something like:
My first problem was that the 3x Outer elements would stack vertically instead of horizontally ... I solved this with the following CSS, but it doesnt feel like the right solution:
ul {
list-style-type: none;
padding:0;
margin:0;
}
.Node {
}
.Node_Light {
height:6em;
width:2em;
position:absolute;
border-style:solid;
border-width:1px;
}
.Node_Control {
height:6em;
width:15em;
position:absolute;
left:2.55em;
border-style:solid;
border-width:1px;
}
.Node_Data {
height:6em;
width:6em;
position:absolute;
left:17.6em;
border-style:solid;
border-width:1px;
}
One thought was to use a table, but I dont think that is the correct solution either.
Ideas?
I would like to have the content dynamically resize on page resize and am not opposed to doing it all via JavaScript, but I have a feeling it would be more efficient to do it via CSS ... I just dont know where to begin.
