Sarah Peeke (XERT) wrote:
Hi Micky,
Why do you want to present an empty container?
As I already (perhaps badly) explained, I need to show a visual
hierarchy of employees.
The first row has the MD.
The second row the GM, Financial Controller and PA.
The third row all other Managers (7 in total).
I need to keep the MD (in the first row) in the middle of the row.
The second row will have some gaps as there are only 3 staff.
The third row has seven Managers.
All of this needs to be centered on the page.
<UL>
<LI> <P><DFN><IMG>CAPTION</P>
or
<UL>
<LI> <DFN><IMG><P>CAPTION</P></LI>
Not sure how these examples improve the elegance of the solution.
Any other ideas please?
Sarah
Sarah,
Using Russ' layout (which is to achieve a floated gallery) for what
sounds to me to be an organizational root/tree structure seems to fail
if the styles are unavailable. Your relationships between your clusters
or groups will not exist without the CSS and therefore have reduced
meaning.
I would think that you want something like: (example at
http://www.smashingred.com/test/floated_org_chart.html)
<ol>
<li>Top Level Post
<ul>
<li><img><p>Caption</p></li>
</ul>
</li>
<li>2nd Level Posts
<ul id="level2">
<li><img><p>Caption</p></li>
<li><img><p>Caption</p></li>
<li><img><p>Caption</p></li>
</ul>
</li>
<li>3rd Level Posts
<ul>
<li><img><p>Caption</p></li>
<li><img><p>Caption</p></li>
<li><img><p>Caption</p></li>
<li><img><p>Caption</p></li>
<li><img><p>Caption</p></li>
<li><img><p>Caption</p></li>
<li><img><p>Caption</p></li>
</ul>
</li>
</ol>
with the styles similar to what follows:
ol, ul{
bullet-style-type:none;
padding:0;
margin:0;
}
ol li ul li {
display:inline;
float: left;
width: 100px;
border: 1px solid blue;
margin:0 5px;
}
ol ul{
clear:both;
display: block;
height: 150px;
}
li ul li {
text-align:center;
}
I have created a valid test page at
http://www.smashingred.com/test/floated_org_chart.html please let me
know if that helps. If anyone wants to ad to this please let me know and
I will make the changes.
All the best.
Jay
--
Jay Gilmore
Developer / Consultant
SmashingRed Web & Marketing
P] 902.529.0651
E] [EMAIL PROTECTED]
U] http://www.smashingred.com
B] http://www.smashingred.com/blog
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
