Re: [css-d] div alignment problem

[David Laakso]

damon hart wrote:
> David Laakso wrote:
>   A site address [url] could be a nice touch?
>
>   Best,
>   ~d
>
> David,
>
> thanks for responding.  I didn't have it up on any server.  
>
> I just uploaded the some of the site to nomadicdesigns.net/tribe1091/ just 
> for this purpose.
>
> There is a lot I'm still working on.  There are other problems on the site 
> and only the index page is worth looking at right now.  ... and I'm sorry, 
> but it looks f*#king ugly right now.  I've been spending my time working on 
> learning how to use Wordpress and just started playing with designs today.
>
> Damon
>   





Don't forget to add a doctype.


Best,
~d
  









-- 
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] roots tree

[Alan Gresley]

Bob Meetin wrote:
> I have a task to create a roots type family tree.  It is required to 
> display horizontally with a maximum of 3 levels below the top, so it 
> will have a total of 14 fields/boxes.  To see an unsightly handwritten 
> example, visit www.dottedi.biz/images/diagnostics/sample_roots_tree.jpg. 
> 
> I plan to set this up in an HTML table unless someone suggests 
> otherwise.  What I am looking for is a CSS tutorial that will guide me 
> through the lines that I will need to create connecting the elements.  
> Although in the picture I have the names going through the lines, I 
> could probably lay the names above or below the lines.
> 
> Recommendations please?
> 
> -Bob


This is how I plan to layout genealogy trees using table display 
properties and ordered list.




This currently works in IE8 and all other good browsers. IE7- would 
just show this.





For the connecting lines, I plan to use background images with the 
background-size property (was not well supported when I begun) along 
with some of the current borders.


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Elements that create new block formatting contexts

[Thierry Koblentz]

Hi Philippe,

> > I've ran into that one after "Googling" for an hour. I also found
> > https://bugzilla.mozilla.org/show_bug.cgi?id=342531, a post from
> Philippe
> > here and a post of mine on the WSG, but nothing with the spec
> *stamp*...
> 
> As with everything related to form controls, there is no (css) spec
> *stamp* on it. This particular case has grown out of practice and
> mutual reverse engineering.
> 
> HTML5 4.10 gives a complete description of form controls (but, as
> expected, not really about their display).
> http://www.w3.org/TR/html5/forms.html#forms
> 
> CSS2.1:3.2
> The last paragraph is relevant here :-p.
> http://www.w3.org/TR/CSS21/conform.html

That's a beauty ;)

> uhu, I should've re-read html5:10
> http://www.w3.org/TR/html5/the-xhtml-syntax.html#the-fieldset-element-0
> 
> 'The fieldset element is expected to establish a new block formatting
> context.'

Now I see it on the 3rd result page (G.). How did I miss it? :-(

Thanks!

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz




__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Elements that create new block formatting contexts

[Philippe Wittenbergh]

On May 4, 2010, at 12:20 PM, Philippe Wittenbergh wrote:

> HTML5 4.10 gives a complete description of form controls (but, as expected, 
> not really about their display).
> http://www.w3.org/TR/html5/forms.html#forms

uhu, I should've re-read html5:10
http://www.w3.org/TR/html5/the-xhtml-syntax.html#the-fieldset-element-0

'The fieldset element is expected to establish a new block formatting context.'

Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Elements that create new block formatting contexts

[Philippe Wittenbergh]

On May 4, 2010, at 11:20 AM, Thierry Koblentz wrote:

>>> I've been trying to find mention in the specs of fieldsets creating
>> new
>>> block formatting contexts, but I can't find the reference anywhere.
>> 
>> It is not specified, but fieldsets create block formatting contexts.
>> 
>> https://bugs.webkit.org/show_bug.cgi?id=3898#c9
> 
> I've ran into that one after "Googling" for an hour. I also found
> https://bugzilla.mozilla.org/show_bug.cgi?id=342531, a post from Philippe
> here and a post of mine on the WSG, but nothing with the spec *stamp*...

As with everything related to form controls, there is no (css) spec *stamp* on 
it. This particular case has grown out of practice and mutual reverse 
engineering.

HTML5 4.10 gives a complete description of form controls (but, as expected, not 
really about their display).
http://www.w3.org/TR/html5/forms.html#forms

CSS2.1:3.2 
The last paragraph is relevant here :-p.
http://www.w3.org/TR/CSS21/conform.html

Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] div alignment problem

[damon hart]

David Laakso wrote:
A site address [url] could be a nice touch?

Best,
~d

David,

thanks for responding.  I didn't have it up on any server.  

I just uploaded the some of the site to nomadicdesigns.net/tribe1091/ just for 
this purpose.

There is a lot I'm still working on.  There are other problems on the site and 
only the index page is worth looking at right now.  ... and I'm sorry, but it 
looks f*#king ugly right now.  I've been spending my time working on learning 
how to use Wordpress and just started playing with designs today.

Damon

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] div alignment problem

[David Laakso]

damon hart wrote:
> I'll try and include all the relevant info.
>
>   


A site address [url] could be a nice touch?

Best,
~d



-- 
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Elements that create new block formatting contexts

[Thierry Koblentz]

Hi Ingo,

> > I've been trying to find mention in the specs of fieldsets creating
> new
> > block formatting contexts, but I can't find the reference anywhere.
> 
> It is not specified, but fieldsets create block formatting contexts.
> 
> https://bugs.webkit.org/show_bug.cgi?id=3898#c9

I've ran into that one after "Googling" for an hour. I also found
https://bugzilla.mozilla.org/show_bug.cgi?id=342531, a post from Philippe
here and a post of mine on the WSG, but nothing with the spec *stamp*...

Thanks.

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz




__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] div alignment problem

[damon hart]

I'm new to this so forgive me. I'll try and include all the relevant info.

I'm working on a page for a company that will (for complicated reasons) have 
some pages that are built on a Wordpress server and some pages that are built 
with dreamweaver.  My goal is for the layout to be identical on each site so 
the user isn't aware they are jumping between them.

I'm only just starting to use Wordpress.  I'm only mentioning this because I 
need the solution to my problem to be purely in CSS so it's easy for me to 
apply to the Wordpress site.


MY PROBLEM:

I want the body of my page (below the header and above the footer) to have a 
two background images.  The first(content_bkgd.png) is identical to the second, 
except it has a watermarked image that I don't want to repeat as the page 
expands. The second image is (content_bkgd_tile.png) and I'd like it to 
repeat-y below the first image.

The main content is divided into two columns. So far I've set my DIVs as such:
















The CSS for each DIV is:

.contentArea {
width: 100%;
background-color: #3E4D69;
}

.contentArea .container {
padding-top:0px;
padding-bottom: 0px;
border:none;
background-repeat: repeat-y;
background-image: url(images/content_bkgd.png);

}

.contentleft {
width: 750px;
padding-left: 60px;
padding-right: 0px;
float: left;
border-right-style: solid;
border-right-width: 0px;
border-color: #336600;
}

.contentright {
padding-top: 30px;
margin-right:50px;
float: right;
padding-left: O;
width: 225px;
vertical-align:top;
}

I've tried to add another DIV (.contentArea .outercontainer) around 
.contentArea .container with the following CSS but I haven't been able to get 
it to align with the rest of my page.

.contentArea .outsidecontainer {
background-repeat: repeat-y;
background-image: url(images/content_bkgd_tile.png);
}

Damon
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE 7/8 issues

[David Laakso]

Jenni Beard wrote:
>  
>
> http://charlestonhealinghands.com/1/template.html 
>
>  
>
> In IE8, it's almost correct except that the navigation has a white
> background which covers up some of the background image that should show
> (should have no background color on the main nav).  When you mouse over
> "services," the sub-nav also comes up w/a white background instead of yellow
> as it should.
>
>  
>
> In IE7, the same issues exist as in 8, but also the clear left is not
> working so it's pushing the content down with a huge gap left.  It's a mess.
>
>  
>
> Any thoughts?  I am at my wits' end with this!
>
>  
>
> Thanks!
>
>  
>
> Jenni
>
>  
>
>   



Too many corrections to list them all. See corrected markup (valid) and 
corrected CSS (valid). IE 6/7/8 now on-board (sort of).
Cursory checked in Chrome, Safari, Opera, and Firefox.
Name of the game is keep it simple. You were feeding confusing and 
different positioning schemes that confused browsers. I leave the 
remaining corrections to you and/or others.

markup

css



Best, and good luck...
d





-- 
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] After clinking link there is a problem with page display using CSS fixed

[genericmaillists]

I could not find anything to answer my question because I could not
figure out what keywords to use. That should be obvious because my
subject is weak.

here is a URL with a sample page:
http://webpages.charter.net/jlgates/sample.html

I have a header with a dark back ground fixed at the top of the page.
The page scrolls and all the text on the white background scrolls
behind so far so good. I have a sidebar for my menu also fixed on the
left side.

The problem that I have and want to know if there is a simple clean
way to fix it is this:

In Firefox the page does not display correctly when one of the links
is clicked. It scrolls to the point on the page as it should but it
hides the start of that section behind the header. I saw in IE that it
puts it just below the header.

I know this is clear as mud. sorry I just can't wrap my head around
how to ask or explain it. Look at the sample page. click on the 1st
sample link in the sidebar. The text on the page "Sample1 here" should
be visible below the blue header but it goes to the top of the view
window behind the header instead. Is there a way to fix this without
adding a dummy tag with a margin to force the real text to still be
visible below the header before the page scrolls again?

Thanks for the help,

JG

-- 
A government big enough to give you everything you want, is strong
enough to take everything you have.
-Thomas Jefferson
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE 7/8 issues

[David Laakso]

Jenni Beard wrote:
> Thank you so much, I did not realize that was there.  I never really
> understood what that bottom section was there for--I am really trying to
> learn proper CSS but struggling at times.
>
> I am still not clear as to why in IE7 the clear left is not working.  Any
> thoughts on that part??
>
> http://charlestonhealinghands.com/1/template.html 
>
> Thank you again!!
>
> Jenni
>
>
>
>   



It is not working as you intend in IE 6/7/8 because you are feeding 
browsers a confused and mixed bag of positioning schemes.  Hold on a 
bit. I've got a fix for you in an hour or so...

~d

-- 
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE 7/8 issues

[Jenni Beard]

Thank you so much, I did not realize that was there.  I never really
understood what that bottom section was there for--I am really trying to
learn proper CSS but struggling at times.

I am still not clear as to why in IE7 the clear left is not working.  Any
thoughts on that part??

http://charlestonhealinghands.com/1/template.html 

Thank you again!!

Jenni




__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] IE8 discards styles in ul li

[John Fitzgerald]

I've been working with this for a while. Time to ask for help.
I styled an ul dropdown menu. It works great in everything but IE8  
There is supposed to be a sub menu floating to the inside right of the  
outer container. According to Adobe Browser lab, it presents properly  
in everything but IE8. in IE 8, the div drops below the desired target.

All of the files are here: http://www.fitzio.com/newSite/

THanks
-- 
"Science without religion is lame. Religion without science is blind."  
-Albert Einstein




John Fitzgerald
Fitzio, Inc.
2315 Longest Avenue
Louisville, KY 40204
502.454.7204
j...@fitzio.com




__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE 7/8 issues

[Peter Bradley]

On 03/05/10 21:13, Jenni Beard wrote:
> Any thoughts?  I am at my wits' end with this!
>
>

Just a holding answer until someone can get back to you with something 
more constructive...

You have an html error in your  element on line 6.  It just need 
closing, that's all.  That gets your html validating OK.

In your CSS you have a number of errors - according to the validator:


  Sorry! We found the following errors (9)


URI : http://charlestonhealinghands.com/1/main.css

51  #navParse Error ]margin-right:85px;
52  #navParse Error ]left: 400px;
53  
Unknown pseudo-element or pseudo-class :none
54  background-colorParse Error none;
55  background-colorParse Error }
63  #contentValue Error : padding-top 
 -50.0 negative 
values are not allowed : -50px -50px


URI :
http://charlestonhealinghands.com/SpryAssets/SpryMenuBarVertical.css

22  ul.MenuBarVertical  Value Error : background-color 
 none 
is not a color value : none none
59  ul.MenuBarVertical ul   Parse Error ]margin: -5% 0 0 -95%;
60  ul.MenuBarVertical ul   Parse Error }


Correcting these may help.  I haven't been able to check because I can't 
get my hands on IE7 for the moment.

HTH

Cheers


Peter
http://www.peredur.net

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] roots tree

[Bob Meetin]

> -Bob:
>
> The following goes four levels deep, displays horizontally, and uses 
> CSS (thus on topic) as well as requiring PHP:
>
> PHP example and Code:
>
> http://webbytedd.com/ccc/family-tree/
>
> CSS:
>
> http://webbytedd.com/ccc/family-tree/a.css
>
> This example shows you how to do it without using tables, another 
> pro-css point.
>
> Normally, one would populate this layout with data taken from a 
> database or form, thus some programming will be required to get it to 
> work for you. However, this gives you the layout and the code, which 
> is more than what I had at the start.
>
> Cheers,
>
> tedd
>
>   
All 3 responses are good options.  No I am not tied to tables; pure CSS 
works for me just as well.  The data is coming from MySQL and yes I will 
be using PHP to make it happen.  Thanks for help in lining up the 
ducks.  -Bob

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] IE 7/8 issues

[Jenni Beard]

Hi all,

 

In Firefox, this looks exactly as it should.  Same goes for Chrome.

 

http://charlestonhealinghands.com/1/template.html 

 

In IE8, it's almost correct except that the navigation has a white
background which covers up some of the background image that should show
(should have no background color on the main nav).  When you mouse over
"services," the sub-nav also comes up w/a white background instead of yellow
as it should.

 

In IE7, the same issues exist as in 8, but also the clear left is not
working so it's pushing the content down with a huge gap left.  It's a mess.

 

Any thoughts?  I am at my wits' end with this!

 

Thanks!

 

Jenni

 

 

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] roots tree

[tedd]

At 9:20 AM -0600 5/3/10, Bob Meetin wrote:
>I have a task to create a roots type family tree.  It is required to
>display horizontally with a maximum of 3 levels below the top, so it
>will have a total of 14 fields/boxes.  To see an unsightly handwritten
>example, visit www.dottedi.biz/images/diagnostics/sample_roots_tree.jpg.
>
>I plan to set this up in an HTML table unless someone suggests
>otherwise.  What I am looking for is a CSS tutorial that will guide me
>through the lines that I will need to create connecting the elements. 
>Although in the picture I have the names going through the lines, I
>could probably lay the names above or below the lines.
>
>Recommendations please?
>
>-Bob

-Bob:

The following goes four levels deep, displays horizontally, and uses 
CSS (thus on topic) as well as requiring PHP:

PHP example and Code:

http://webbytedd.com/ccc/family-tree/

CSS:

http://webbytedd.com/ccc/family-tree/a.css

This example shows you how to do it without using tables, another 
pro-css point.

Normally, one would populate this layout with data taken from a 
database or form, thus some programming will be required to get it to 
work for you. However, this gives you the layout and the code, which 
is more than what I had at the start.

Cheers,

tedd

-- 
---
http://sperling.com  http://ancientstones.com  http://earthstones.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] fill the sticky footer gap

[David Hucklesby]

On 5/3/10 1:01 AM, Ido dekkers wrote:
> Hi again
>
> i have a site with this sticky footer:
> http://www.cssstickyfooter.com/ works wonderful, BUT: i need the
> background color of the content to fill the gap to the footer if
> there is not enough text to fill it.
[...]

It looks like you are seeking a combination of "sticky footer" and "full
height layout." An example of that is here:



Hope it helps.

Cordially,
David
--

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] roots tree

[Climis, Tim]

-Original Message-
From: css-d-boun...@lists.css-discuss.org 
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Bob Meetin
Sent: Monday, May 03, 2010 11:21 AM
To: CSS-D
Subject: [css-d] roots tree

> I have a task to create a roots type family tree.
> Recommendations please? 

Well, if you're looking for a non-table solution, you can find an example here 
[1] that you might be able to adapt.

But if you're set on tables, you'll just need the following:

table {
  border-collapse: collapse; /* share borders between cells */
}

and then variations on 

td {
  border-left (or right, or top, or bottom): 1px solid black;
}

You can have the "middle" lines (instead of top or bottom) if you do a 
rowspan=2 for your content cells.

[1]: http://www.indiana.edu/~intlserv/ois/org_chart.php
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] roots tree

[David Laakso]

Bob Meetin wrote:
> I have a task to create a roots type family tree. 

> www.dottedi.biz/images/diagnostics/sample_roots_tree.jpg. 
>
> -Bob
>   



It could boggle ones mind... :-)

Best,
~d


-- 
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] semantic accessible animated drop up menu

[David Laakso]

Chris Blake wrote:
> On 03/05/2010, at 10:27 PM, David Laakso wrote:
>
>   
>> Ido dekkers wrote:
>> 
>>> hello
>>>
>>> does anyone know about a drop down/up menu with JS animation that  
>>> is also
>>> accessible and semantic?
>>>
>>> thanks
>>>
>>>   
>> 
>
>
> I've used this before. Small and easy: 
> http://www.leigeber.com/2008/11/drop-down-menu/
>   


Does not work from the keyboard. No drop-downs when js disabled. 

~d 


-- 
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] roots tree

[Bob Meetin]

I have a task to create a roots type family tree.  It is required to 
display horizontally with a maximum of 3 levels below the top, so it 
will have a total of 14 fields/boxes.  To see an unsightly handwritten 
example, visit www.dottedi.biz/images/diagnostics/sample_roots_tree.jpg. 

I plan to set this up in an HTML table unless someone suggests 
otherwise.  What I am looking for is a CSS tutorial that will guide me 
through the lines that I will need to create connecting the elements.  
Although in the picture I have the names going through the lines, I 
could probably lay the names above or below the lines.

Recommendations please? 

-Bob
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] semantic accessible animated drop up menu

[Al Sparber]

From: "Chris Blake" 
> I've used this before. Small and easy: 
> http://www.leigeber.com/2008/11/drop-down-menu/

When using the tab key, tabbing goes through all "hidden" sub-menus, which is 
not good. IOW, to tab from the first root item to the 
second root item, one must tab through multiple items that are hidden, and for 
which there is no focus outline, and so the menu's 
accessibility and usability are greatly diminished.

Additionally, the timers are too quick so it is very easy to lose your desired 
menu when moving a mouse or pointing device on the 
diagonal - which is the natural path.

And one thing to keep in mind for any multilevel menu is that the root items 
should always be real links.

-- 
Al Sparber - PVII
http://www.projectseven.com
Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/hgm
The Ultimate Web 2.0 Carousel

 

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] semantic accessible animated drop up menu

[Chris Blake]

On 03/05/2010, at 10:27 PM, David Laakso wrote:

> Ido dekkers wrote:
>> hello
>>
>> does anyone know about a drop down/up menu with JS animation that  
>> is also
>> accessible and semantic?
>>
>> thanks
>>
>
>
>
> 
> ~d
>


I've used this before. Small and easy: 
http://www.leigeber.com/2008/11/drop-down-menu/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] semantic accessible animated drop up menu

[David Laakso]

Ido dekkers wrote:
> hello
>
> does anyone know about a drop down/up menu with JS animation that is also
> accessible and semantic?
>
> thanks
>   




~d


-- 
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] semantic accessible animated drop up menu

[Al Sparber]

From: "Ido dekkers" 
> does anyone know about a drop down/up menu with JS animation that is also
> accessible and semantic?
> i have this :
> http://test2.dekkers.net/test.html
>
> which is semantic and accessible, but each drop-down script add to it makes
> it not accessible.
> i don't care which JS library to use, as long as it works.

Menu accessibility is often misunderstood. Simply making it so that it works 
when script disabled does not make it accessible. If 
you follow the practices listed in this article, any list-based menu can be 
accessible if you make it so:

http://www.projectseven.com/products/menusystems/pmm2/ug-examples/accessible/index.htm

-- 
Al Sparber - PVII
http://www.projectseven.com
Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/hgm
The Ultimate Web 2.0 Carousel

 

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] fill the sticky footer gap

[Ido dekkers]

Hi again

i have a site with this sticky footer:
http://www.cssstickyfooter.com/
works wonderful, BUT:
i need the background color of the content to fill the gap to the footer if
there is not enough text to fill it.
if i try position:absolute and move the content div down to clear the header
and give it height:100% i get the size of the header div below the footer.
if i use position:relative and height:100% it just ignores the given height.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Elements that create new block formatting contexts

[Ingo Chao]

2010/5/3 Thierry Koblentz :
> I've been trying to find mention in the specs of fieldsets creating new
> block formatting contexts, but I can't find the reference anywhere.

It is not specified, but fieldsets create block formatting contexts.

https://bugs.webkit.org/show_bug.cgi?id=3898#c9

HTH
  Ingo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] semantic accessible animated drop up menu

[Ido dekkers]

hello

does anyone know about a drop down/up menu with JS animation that is also
accessible and semantic?
i have this :
http://test2.dekkers.net/test.html

which is semantic and accessible, but each drop-down script add to it makes
it not accessible.
i don't care which JS library to use, as long as it works.

thanks
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/