Re: [WSG] Employee Hierarchy in CSS

[Jay Gilmore]

Geoff Pack wrote:

Hi Sarah,

I agree with Jay - it should be a nested list, but I'd avoid floats completely 
and use absolute positioning to lay it out. I'd also change the nesting to 
reflect the org structure, not just the level.

Assuming the managers report to the GM, then:


MD

FC
GM

Manager 1
Manager 2
Manager 3
Manager 4
Manager 5
Manager 6
Manager 7


PA





Geoff, Sarah,

My only suggestion is to have the outer list as an  as there is an 
explicit order of value/importance and it could be indicated when the 
list is unstyled. But this solution looks great.


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
**

RE: [WSG] Employee Hierarchy in CSS

[Geoff Pack]

 Sarah Peeke wrote:
 
> That looks great. I like the idea of the background image, and I
> especially like the mugshot! :)
> 
> > See:
> > http://www.virtualgeoff.com/misc/orgChart.html
> > with background image:
> > http://www.virtualgeoff.com/misc/orgChartB.html
> 
> A couple of thoughts:
> 
> 1. Would it be possible to center the chart within a fixed 
> width design

Just wrap it in a div and center that. Or use absolute positioning on the 
outermost UL and position it exactly where you want it.

> (eg )
> 2. When the font size is increased, the design should ideally *not*
> break the fixed width design.

Change the positioning from ems to pixels and it won't resize when you change 
font sizes. Just allow enough space so that the text doesn't start overlapping 
things until it get really big.


> 3. If styles are switched off, it's a bit ugly having the background
> image sitting there.

Make it a background image on the wrapper div. (issues with printing though).

cheers,
Geoff.

==
The information contained in this email and any attachment is confidential and
may contain legally privileged or copyright material.   It is intended only for
the use of the addressee(s).  If you are not the intended recipient of this
email, you are not permitted to disseminate, distribute or copy this email or
any attachments.  If you have received this message in error, please notify the
sender immediately and delete this email from your system.  The ABC does not
represent or warrant that this transmission is secure or virus free.   Before
opening any attachment you should check for viruses.  The ABC's liability is
limited to resupplying any email and attachments
==
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**

RE: [WSG] Employee Hierarchy in CSS

[Sarah Peeke (XERT)]

Hi Geoff

That looks great. I like the idea of the background image, and I
especially like the mugshot! :)

> See:
> http://www.virtualgeoff.com/misc/orgChart.html
> with background image:
> http://www.virtualgeoff.com/misc/orgChartB.html

A couple of thoughts:

1. Would it be possible to center the chart within a fixed width design
(eg )
2. When the font size is increased, the design should ideally *not*
break the fixed width design.
3. If styles are switched off, it's a bit ugly having the background
image sitting there.

Sarah
-- 
XERT Communications
email: <[EMAIL PROTECTED]>
office: +61 2 4782 3104
mobile: 0438 017 416


web development : digital imaging : dvd production
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**

RE: [WSG] Employee Hierarchy in CSS

[Geoff Pack]

Hi Sarah,

I agree with Jay - it should be a nested list, but I'd avoid floats completely 
and use absolute positioning to lay it out. I'd also change the nesting to 
reflect the org structure, not just the level.

Assuming the managers report to the GM, then:


MD

FC
GM

Manager 1
Manager 2
Manager 3
Manager 4
Manager 5
Manager 6
Manager 7


PA






See:
http://www.virtualgeoff.com/misc/orgChart.html
with background image:
http://www.virtualgeoff.com/misc/orgChartB.html

cheers,
Geoff




==
The information contained in this email and any attachment is confidential and
may contain legally privileged or copyright material.   It is intended only for
the use of the addressee(s).  If you are not the intended recipient of this
email, you are not permitted to disseminate, distribute or copy this email or
any attachments.  If you have received this message in error, please notify the
sender immediately and delete this email from your system.  The ABC does not
represent or warrant that this transmission is secure or virus free.   Before
opening any attachment you should check for viruses.  The ABC's liability is
limited to resupplying any email and attachments
==
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**

Re: [WSG] Employee Hierarchy in CSS

[Sarah Peeke (XERT)]

Hi Jay

Thanks for your reply.

I have achieved a similar result, however what I really need is to be
able to center the overall chart, and maintain columns despite gaps.

I have included an example of what I am trying to achieve below - this
one uses tables.

Please note: I have *not* optimised the css. Also, I have only tested
this on Mac OSX FF, Safari, Opera at this stage.

I also have a screenshot at .

HTML


CSS


Many thanks
Sarah
-- 
XERT Communications
email: <[EMAIL PROTECTED]>
office: +61 2 4782 3104
mobile: 0438 017 416


web development : digital imaging : dvd production
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**

Re: [WSG] Employee Hierarchy in CSS

[Jay Gilmore]

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. 
 


 CAPTION

or


 CAPTION


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)



Top Level Post

Caption


2nd Level Posts

Caption
Caption
Caption



3rd Level Posts

Caption
Caption
Caption
Caption
Caption
Caption
Caption




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
**

Re: [WSG] Employee Hierarchy in CSS

[Sarah Peeke (XERT)]

Hi Seona

Thanks so much for your reply. I think this may just do the trick. I'll
get to work on the best option...

Many thanks
Sarah :)
-- 
XERT Communications
email: <[EMAIL PROTECTED]>
office: +61 2 4782 3104
mobile: 0438 017 416


web development : digital imaging : dvd production
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**

Re: [WSG] Employee Hierarchy in CSS

[Seona Bellamy]

Hi Sarah,

Haven't got time to work this up properly, but what about something like:


  MD information in here


  GM information in here
  Financial Controller information in here
  PA information in here


  Manager 1 information in here
  Manager 2 information in here
  ...
  Manager 7 Information in here


I've used DIVs and SPANs here as generic elements, but you can use
whatever will work best for your structure (such as the DLs or ULs
mentioned earlier, or whatever).

The idea is that then you could do something like:

#tier1 span {
  width: 100%;
  display: block;
  text-align: center;
}
#tier2 span {
  width: 33%;  display: block;
  float: left;
  text-align: center;
}
#tier3 span {
  width: 14%;
  display: block;
  float: left;
  text-align: center;
}

The display block is needed only if your wrapper is an inline element
such as a span - you can't apply widths (or floats, I think) to inline
elements.

It might need some fiddling, since it's untested, but see if it helps you any.

Cheers,

Seona.
On 17/03/06, Sarah Peeke (XERT) <[EMAIL PROTECTED]> wrote:
Hi Micky,> Why do you want to present an empty container?As I already (perhaps badly) explained, I need to show a visualhierarchy 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.> >  CAPTION>> or>> >  CAPTION
Not sure how these examples improve the elegance of the solution.> I do not see the need for classes, at> least not 2 classes, one (for that exception you mention) would> suffice.Understood. I hadn't finalised the css, just wanted to show how my code
differed from Russ's.Any other ideas please?Sarah--XERT Communicationsemail: <[EMAIL PROTECTED]>office: +61 2 4782 3104mobile: 0438 017 416
web development : digital imaging : dvd production**The discussion list for  
http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help
**

Re: [WSG] Employee Hierarchy in CSS

[Sarah Peeke (XERT)]

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. 
 
> 
>  CAPTION
> 
> or
> 
> 
>  CAPTION

Not sure how these examples improve the elegance of the solution.
 
> I do not see the need for classes, at
> least not 2 classes, one (for that exception you mention) would
> suffice.

Understood. I hadn't finalised the css, just wanted to show how my code
differed from Russ's.

Any other ideas please?

Sarah
-- 
XERT Communications
email: <[EMAIL PROTECTED]>
office: +61 2 4782 3104
mobile: 0438 017 416


web development : digital imaging : dvd production
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**

Re: [WSG] Employee Hierarchy in CSS

[Micky Mourelo]

Nope, empty divs are not really nice. But empty divs are just the
symptom, why do you want to present an empty container? I've had
designers do stuff like that, always having 3 boxes for products per
row whether there'd be less than 3 products.

If your case is something like that, and it is a visual problem, like
having 3 blue boxes, or anything of the sort, try having a background
span three columns, thus even if you only have 1 div, you get the
visuals for three. This may be too specific, I know. If you could
expand on this we could try to help.

Just do not use a  or  when you can set the img to block and
get the same results. And I would go, intead of divs, for a UL with
IMG and captions inside the LI.

You could also try this

PSEUDO CODE:


 CAPTION

or


 CAPTION

I have even gone to the extent of using DL's with DD's being the
captions and DT's being the IMG.

Same css method as yours but I do not see the need for classes, at
least not 2 classes, one (for that exception you mention) would
suffice.
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**

[WSG] Employee Hierarchy in CSS

[Sarah Peeke (XERT)]

Hi all

I need to display images, names and job titles for employees in a
company, and am looking to use Russ's tutorial
 instead of a
table layout.

The problem is that there are gaps in the groupings. I have added a new
style "thumbnail2" and left it blank to allow for the kind of gaps I'm
after. However having an empty  may not be the most elegant
solution.

Does anyone have any suggestions please?

I have modified Russ's code below to demonstrate what I mean.

CSS
---

 .thumbnail, .thumbnail2
{
float: left;
width: 60px;
border: 1px solid #999;
margin: 0 15px 15px 0;
padding: 5px;
}

.thumbnail2 {
border: none;
padding: 6px;
}

.clearboth { clear: both; }


HTML




Caption





Caption




Caption



Caption



Caption


---

Many thanks
Sarah
-- 
XERT Communications
email: <[EMAIL PROTECTED]>
office: +61 2 4782 3104
mobile: 0438 017 416


web development : digital imaging : dvd production
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
**