Re: [css-d] css for keyboard link focus

2010-01-06 Thread David Laakso 
Ingo Chao wrote:
> 2010/1/5 David Laakso :
>   
>> I am not very adept at all the ins and outs of cross-browser keyboard
>> use. Any suggestions for improvement of the CSS for keyboard users on
>> this site is appreciated.
>> Thanks.
>>
>> markup
>> 
>> css: lines 39-70
>> 
>> 
>
> I'm not an expert here, I had to enable keyboard navigation first
> http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/
> but once the Fx was able to tab through your links, all worked well on
> your site.
>
> Ingo
>
>   



Thanks Ingo.

~d

-- 
http://chelseacreekstudio.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] css for keyboard link focus

2010-01-06 Thread Thierry Koblentz 
Hi David,

> I am not very adept at all the ins and outs of cross-browser keyboard
> use. Any suggestions for improvement of the CSS for keyboard users on
> this site is appreciated.

As long as you're using basic focusable elements to trigger actions and do
*not* remove outline styling (unless you use :focus for a different
styling), you should be good.
If for some reason you need to use a span, a div or else, then use
"tabindex=0" to allow keyboard access.
Finally, make sure actions are not triggered by mouseover alone. 


--
Regards,
Thierry | www.tjkdesign.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] css for keyboard link focus

2010-01-06 Thread David Laakso 
Thierry Koblentz wrote:
> Hi David,
>
>   
>> I am not very adept at all the ins and outs of cross-browser keyboard
>> use. Any suggestions for improvement of the CSS for keyboard users on
>> this site is appreciated.
>> 
>
> As long as you're using basic focusable elements to trigger actions and do
> *not* remove outline styling (unless you use :focus for a different
> styling), you should be good.
> If for some reason you need to use a span, a div or else, then use
> "tabindex=0" to allow keyboard access.
> Finally, make sure actions are not triggered by mouseover alone. 
>
>
> --
> Regards,
> Thierry | www.tjkdesign.com
>
>   


O.K.  Thanks.
~d

-- 
http://chelseacreekstudio.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] float: left; height: 100%?

2010-01-06 Thread Peter Bradley 
Jack Bates wrote:
> How can I style the following,
>
> 
>   Name
>   
> Value
>   
> 
>
> - so it displays with the name on the left, the value on the right, and
> a grey background behind the name?
>
> http://www.sfu.ca/~jdbates/tmp/css/201001050/screenshot.png
>   

Looks like a proper use for a table to me - with a background colour on 
the table cells.

HTH


Peter
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/

[css-d] Text alignment

2010-01-06 Thread bruce . somers 
I hope I'll be excused for another question that is presumably all too simple. 
I must be overlooking something obvious.

I want the image 004.jpg centered in its column. It is indeed, at 
http://www.maireadnesbitt.com/_bruce/news/BSOt.html

I want the paragraph "The Cultur-Casino in Berne ..." centered in that same 
column, but the text within the paragraph justified. 
But the paragraph appears at the left of its column on that page.







The Cultur-Casino in Berne, Switzerland, scene of the New 
Year's Concert, Celtic Tunes, 
of the Bern Symphony Orchestra. 


CSS:
#batch025 {max-width: 1030px; margin:auto;}
#batch025 img {vertical-align:bottom; margin:auto; padding: 0 10px 10px 0;}
#batch025 p {clear:both;}

Bruce

__
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] Text alignment

2010-01-06 Thread Peter Bradley 
bruce.som...@web.de wrote:
> I hope I'll be excused for another question that is presumably all too 
> simple. I must be overlooking something obvious.
>
> I want the image 004.jpg centered in its column. It is indeed, at 
> http://www.maireadnesbitt.com/_bruce/news/BSOt.html
>
> I want the paragraph "The Cultur-Casino in Berne ..." centered in that same 
> column, but the text within the paragraph justified. 
> But the paragraph appears at the left of its column on that page.
>
> 
> 
> 
> 
>
> 
> The Cultur-Casino in Berne, Switzerland, scene of the New 
> Year's Concert, Celtic Tunes, 
> of the Bern Symphony Orchestra. 
> 
>
> CSS:
> #batch025 {max-width: 1030px; margin:auto;}
> #batch025 img {vertical-align:bottom; margin:auto; padding: 0 10px 10px 0;}
> #batch025 p {clear:both;}
>
> Bruce
>
>   
Hi Bruce,

The image was centred for me, already.

You've got one or two funnies in your code there.  For example, you have 
some stray Unicode characters directly in the :



(For copying and pasting into your text??  If so, you should be using 
entities; like ¿ for the inverted question mark.)

You also have at least one empty paragraph, which displays nothing, of 
course.

Your main problem though is in using  in the text you want to 
centre.  Apart from anything else, this gives strange wrapping behaviour 
if you reduce the browser window width.  For example, by reducing my 
viewport width by about 50%, I got the text formatted like this:

"The Cultur-Casino in Berne, Switzerland, scene
of the New Year's
Concert, *Celtic Tunes*, of the Bern Symphony
Orchestra."

-- which kind of defeats whatever purpose there might be in using  
in the first place --

If it was me, I'd ditch the line breaks, put the paragraph you want 
centered in the batch025 div, decide how wide you want it, give the  
a class (e.g. something like 'centred-caption') and then style it with 
equal borders either side using percentages or ems.  Alternatively, you 
could give the centred caption a width and set the left and right 
margins to auto, although that might make IE6 behave badly (hasLayout).

HTH


Peter

__
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] float: left; height: 100%?

2010-01-06 Thread J.M. Knowles 

>
> Looks like a proper use for a table to me - with a background colour on 
> the table cells.
>
> HTH
>
>   
 Could this also be done with a definition list and then styling the 
 tag?
__
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] float: left; height: 100%?

2010-01-06 Thread Thierry Koblentz 
>
> Looks like a proper use for a table to me - with a background colour on 
> the table cells.
>
> HTH
>
>   
 Could this also be done with a definition list and then styling the 
 tag?

We don't know much about the data but I agree, a DL could be another way to
go (definitely not a table).
When using a DL it would be the DDs that would need background styling, not
the DTs though (see David's suggestion).

--
Regards,
Thierry | www.tjkdesign.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] float: left; height: 100%?

2010-01-06 Thread Peter Bradley 
J.M. Knowles wrote:
>  Could this also be done with a definition list and then styling the 
>  tag?
>   

Yeah.  I had a look at that.  Semantically it would be best: but I 
couldn't see a way of doing it offhand.  Then, whilst I was playing, it 
occurred to me that it was strange that the OP gave the actual HTML like 
that.  Then it occurred to me that this looks a bit, or a lot actually, 
like a homework question.

That annoyed me.  So I stopped looking.

I don't mind people asking for help with homework, but I think they 
should be up-front about it and expect to get only pointers to 
solutions.  If my suspicions are correct, this is tantamount to getting 
someone to do their homework for them, by deception.

That's the only reason I can think of for the actual HTML being 
important.  Apologies to the OP if the HTML is actually not important 
and is being used for some completely different purpose.

Cheers


Peter

__
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] Text alignment

2010-01-06 Thread David Laakso 
bruce.som...@web.de wrote:
>
> I want the image 004.jpg centered in its column. It is indeed, at 
> http://www.maireadnesbitt.com/_bruce/news/BSOt.html
>
> I want the paragraph "The Cultur-Casino in Berne ..." centered in that same 
> column, but the text within the paragraph justified. 
> But the paragraph appears at the left of its column on that page.
>
>
> Bruce
>   




CSS

.batch025 {
border: 1px solid red; <- :: test ::
}

Add ruleset:
.batch025 div {
width: 475px;
margin: 30px auto;
border: 1px solid red;<- :: test ::
}

Add ruleset:
.batch025 div p {text-align: justify;}


Amend the markup to read:







The Cultur-Casino in Berne, Switzerland, scene of the New Year's 
Concert, Celtic Tunes,
of the Bern Symphony Orchestra. 



Not all users default to a white screen.
She still has a byte-order-mark embedded in her forehead...

Best,
~d







-- 
http://chelseacreekstudio.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] Text alignment

2010-01-06 Thread Pi Dizayn 
:D
Peter,



This sign is for defigning UTF pages. It is called as "Byte order mark". If you 
open the page and change the encoding to UTF8 you will see that it will be gone.


On 06.01.2010 21:27, Peter Bradley wrote:
> bruce.som...@web.de wrote:
>
> Hi Bruce,
> The image was centred for me, already.
>
> You've got one or two funnies in your code there.  For example, you have
> some stray Unicode characters directly in the:
>
> 
>
> (For copying and pasting into your text??  If so, you should be using
> entities; like¿ for the inverted question mark.)
>
> You also have at least one empty paragraph, which displays nothing, of
> course.
>
> Your main problem though is in using  in the text you want to
> centre.  Apart from anything else, this gives strange wrapping behaviour
> if you reduce the browser window width.  For example, by reducing my
> viewport width by about 50%, I got the text formatted like this:
>
> "The Cultur-Casino in Berne, Switzerland, scene
> of the New Year's
> Concert, *Celtic Tunes*, of the Bern Symphony
> Orchestra."
>
> -- which kind of defeats whatever purpose there might be in using
> in the first place --
>
> If it was me, I'd ditch the line breaks, put the paragraph you want
> centered in the batch025 div, decide how wide you want it, give the
> a class (e.g. something like 'centred-caption') and then style it with
> equal borders either side using percentages or ems.  Alternatively, you
> could give the centred caption a width and set the left and right
> margins to auto, although that might make IE6 behave badly (hasLayout).
>
> HTH
>
>
> Peter
>
> __
> 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/
>

-- 
Boray Eris

pidizayn.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] float: left; height: 100%?

2010-01-06 Thread Pi Dizayn 
On 06.01.2010 06:03, Jack Bates wrote:
> How can I style the following,
>
> 
>Name
>
>  Value
>
> 
>
> - so it displays with the name on the left, the value on the right, and
> a grey background behind the name?
>
> http://www.sfu.ca/~jdbates/tmp/css/201001050/screenshot.png
>
> I almost have it working, http://www.sfu.ca/~jdbates/tmp/css/201001050/
>
> - but the grey background isn't as tall as a long value, as it is in the
> above screenshot : (
>
> How can I get the background to extend the full height of the value (in
> case the value is taller than the name)?
>
> Is there a better way to do this?
>

.field h3
{
width:50px;
float: left;
}

.field div {
width:250px;
float: left;
}



-- 
Boray Eris

pidizayn.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] Text alignment

2010-01-06 Thread bruce . somers 
Peter wrote:

For example, you have some stray Unicode characters directly in the :  
...
If it was me, I'd ditch the line breaks, put the paragraph you want centered in 
the batch025 div, decide how wide you want it, give the  a class (e.g. 
something like 'centred-caption') and then style it with equal borders either 
side using percentages or ems. Alternatively, you could give the centred 
caption a width and set the left and right margins to auto, although that might 
make IE6 behave badly (hasLayout).
-

David wrote:

.batch025 {
border: 1px solid red; <- :: test ::
}

Add ruleset:
.batch025 div {
width: 475px;
margin: 30px auto;
border: 1px solid red;<- :: test ::
}

Add ruleset:
.batch025 div p {text-align: justify;}

Amend the markup to read:







The Cultur-Casino in Berne, Switzerland, scene of the New Year's
Concert, Celtic Tunes,
of the Bern Symphony Orchestra. 



Not all users default to a white screen.
--

Thanks for the replies. That    is indeed a byte-order-mark, inserted 
repeatedly by my editor (the Crimson Editor) for no good reason. It has its 
use, of course, but not in this connection. As far as I know, the browsers all 
try to display it. Fortunately, I've now found out how to convince the editor 
that I don't want it. So, I have my hopes up.

Thanks to Peter for noticing the earlier , which should have been removed 
long ago. 

I'll try Davids's suggestion first. With a little bit of luck ...

Many thanks for your attention.

Bruce


__
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] Text alignment

2010-01-06 Thread Peter Bradley 
Pi Dizayn wrote:
> :D
> Peter,
>
> 
>
> This sign is for defigning UTF pages. It is called as "Byte order mark". If 
> you open the page and change the encoding to UTF8 you will see that it will 
> be gone.
>
>   
Heh!  Yer live an' learn, dontcha.

:-)


Peter

__
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] Text alignment

2010-01-06 Thread Pi Dizayn 
On 06.01.2010 22:50, Peter Bradley wrote:
> Pi Dizayn wrote:
>> :D
>> Peter,
>>
>> 
>>
>> This sign is for defigning UTF pages. It is called as "Byte order 
>> mark". If you open the page and change the encoding to UTF8 you will 
>> see that it will be gone.
>>
> Heh!  Yer live an' learn, dontcha.
>
> :-)
>
>
> Peter
>
:-)

-- 
Boray Eris

pidizayn.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] Text alignment

2010-01-06 Thread Pi Dizayn 
On 06.01.2010 22:50, bruce.som...@web.de wrote:
> Thanks for the replies. That    is indeed a byte-order-mark, inserted 
> repeatedly by my editor (the Crimson Editor) for no good reason. It has its 
> use, of course, but not in this connection. As far as I know, the browsers 
> all try to display it. Fortunately, I've now found out how to convince the 
> editor that I don't want it. So, I have my hopes up.
>
> Thanks to Peter for noticing the earlier, which should have been 
> removed long ago.
>
> I'll try Davids's suggestion first. With a little bit of luck ...
>
> Many thanks for your attention.
>
> Bruce
>
Your welcome Bruce. But there is noting bad at using byte-order-mark. It 
helps editors to understand if the file is utf. Your mistake is this.



It must be



this.
-- 
Boray Eris

pidizayn.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] float: left; height: 100%?

2010-01-06 Thread Jack Bates 
On Wed, Jan 06, 2010 at 11:57:46AM -0800, Thierry Koblentz wrote:
> >
> > Looks like a proper use for a table to me - with a background colour on 
> > the table cells.
> >
> > HTH
> >
> >   
>  Could this also be done with a definition list and then styling the 
>  tag?
> 
> We don't know much about the data but I agree, a DL could be another way to
> go (definitely not a table).
> When using a DL it would be the DDs that would need background styling, not
> the DTs though (see David's suggestion).

Thanks, I just tried following your suggestion and switching to a , but
have the same problem that the  background doesn't extend the full height
of the ,

http://www.sfu.ca/~jdbates/tmp/css/201001060/

The app I'm working on currently uses a , e.g.

http://ica-atom.org/demo/informationobject/show/isad/288

- I'm trying to switch to markup which is more ammenable to restyling with CSS,
while still supporting the old "look"

Is the old "look" acheivable with CSS, without using a ?
__
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] float: left; height: 100%?

2010-01-06 Thread Thierry Koblentz 
On Wed, Jan 06, 2010 at 11:57:46AM -0800, Thierry Koblentz wrote:
> >
> > Looks like a proper use for a table to me - with a background colour on 
> > the table cells.
> >
> > HTH
> >
> >   
>  Could this also be done with a definition list and then styling the 
>  tag?
> 
> We don't know much about the data but I agree, a DL could be another way
to
> go (definitely not a table).
> When using a DL it would be the DDs that would need background styling,
not
> the DTs though (see David's suggestion).

Thanks, I just tried following your suggestion and switching to a , but
have the same problem that the  background doesn't extend the full
height
of the ,

That's because you're styling the wrong elements :)
The elements you apply a background to are the only ones that do not need to
be styled (the DTs),
Use the DLs for the grey background and the DDs for the white one.

--
Regards,
Thierry | www.tjkdesign.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] Screen shot or list an entire site

2010-01-06 Thread Pi Dizayn 
Firefox FireShot addon.

On 31.12.2009 12:44, Rob freeman wrote:
> Hi everyone,
>
> I am planning a new website, but first I would like to take a snapshot of
> the old site including all the pages as png/gifs if not graphics a list,
> like a site map
> So I can a keep a record of them.. does anyone know any software which can
> screen
> shot a whole site, like follow the links and snapshot each page
> automatically?
>
> I have looked at Paparazzi, little snapper.. but they take a screen shot of
> only one url.
>
> This can be for Mac of PC
>
>
> cheers
>
>
>
> Rob Freeman
> lister...@googlemail.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/
>

-- 
Boray Eris

pidizayn.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/