Re: [css-d] sliding div in Javascript or CSS

[Leandro Tracchia]

great help. thanks! other thoughts welcome.

On Tue, Oct 14, 2008 at 6:25 PM, Kathy Wheeler
<[EMAIL PROTECTED]> wrote:
>
>  Leandro Tracchia wrote:

 without getting into too much debate, i need to know what is the best
 way of creating a sliding div. should i use javascript or css or a
 combination of both. i'm new at css, but i'm learning very quickly. i
 just want to know what is the right way of doing it before i start
 doing something the wrong way. a good simple example would also be
 helpful.
>
> A combination of both. Used to be referred to as DHTML (Dynamic HTML).
> There's an old one I did (haven't looked at it in 6 years!!!) at:
> http://www.rossoft.com.au/
> The script - css and javascript - is all in the html.
>
> There's also a huge collection of neat tricks at:
> http://www.dhteumeuleu.com/
>
> Have fun!
> KathyW.
>
__
css-discuss [EMAIL PROTECTED]
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] sliding div in Javascript or CSS

[Ryan Doherty]

  Google maps is all Javascript.

And regarding how to create anything that 'slides' in a webpage,  
you'll need JavaScript. I highly recommend jQuery (http:// 
jquery.com/), it's fast, lightweight and has a powerful animation  
core. http://docs.jquery.com/Effects

-Ryan

On Oct 14, 2008, at 3:03 PM, Kevin Rodenhofer wrote:

> Google maps is Flash...not a sliding div.
>
> Leandro Tracchia wrote:
>> yes, or one that moves from the side of the screen. google maps has  
>> an
>> example of this to display more of the map. (http://maps.google.com)
>>
>> On Tue, Oct 14, 2008 at 3:58 PM, Christian Heilmann <[EMAIL PROTECTED] 
>> > wrote:
>>
>>> Leandro Tracchia wrote:
>>>
 without getting into too much debate, i need to know what is the  
 best
 way of creating a sliding div. should i use javascript or css or a
 combination of both. i'm new at css, but i'm learning very  
 quickly. i
 just want to know what is the right way of doing it before i start
 doing something the wrong way. a good simple example would also be
 helpful.
 __


>>> What exactly do you mean by "sliding div"? An animated div that  
>>> moves from a
>>> to b?
>>>
>>> That'll be a mixture of CSS and JavaScript (unless all your users  
>>> are on the
>>> newest Safari/Webkit)
>>>
>>> example: http://developer.yahoo.com/yui/examples/animation/motion.html
>>>
>>>
>> __
>> css-discuss [EMAIL PROTECTED]
>> 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-discuss [EMAIL PROTECTED]
> 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/

Ryan Doherty
[EMAIL PROTECTED]

__
css-discuss [EMAIL PROTECTED]
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] sliding div in Javascript or CSS

[Kevin Rodenhofer]

You're right, Ryan...I stand corrected...I must have been thinking of 
mapquest.

Ryan Doherty wrote:
>  Google maps is all Javascript.
>
> And regarding how to create anything that 'slides' in a webpage, 
> you'll need JavaScript. I highly recommend jQuery 
> (http://jquery.com/), it's fast, lightweight and has a powerful 
> animation core. http://docs.jquery.com/Effects
>
> -Ryan
>
> On Oct 14, 2008, at 3:03 PM, Kevin Rodenhofer wrote:
>
>> Google maps is Flash...not a sliding div.
>>
>> Leandro Tracchia wrote:
>>> yes, or one that moves from the side of the screen. google maps has an
>>> example of this to display more of the map. (http://maps.google.com)
>>>
>>> On Tue, Oct 14, 2008 at 3:58 PM, Christian Heilmann 
>>> <[EMAIL PROTECTED]> wrote:
>>>
 Leandro Tracchia wrote:

> without getting into too much debate, i need to know what is the best
> way of creating a sliding div. should i use javascript or css or a
> combination of both. i'm new at css, but i'm learning very quickly. i
> just want to know what is the right way of doing it before i start
> doing something the wrong way. a good simple example would also be
> helpful.
> __ 
>
>
>
 What exactly do you mean by "sliding div"? An animated div that 
 moves from a
 to b?

 That'll be a mixture of CSS and JavaScript (unless all your users 
 are on the
 newest Safari/Webkit)

 example: http://developer.yahoo.com/yui/examples/animation/motion.html


>>> __
>>> css-discuss [EMAIL PROTECTED]
>>> 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-discuss [EMAIL PROTECTED]
>> 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/
>
> Ryan Doherty
> [EMAIL PROTECTED]
>
>
>


__
css-discuss [EMAIL PROTECTED]
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] sliding div in Javascript or CSS

[Kevin Rodenhofer]

Google maps is Flash...not a sliding div.

Leandro Tracchia wrote:
> yes, or one that moves from the side of the screen. google maps has an
> example of this to display more of the map. (http://maps.google.com)
>
> On Tue, Oct 14, 2008 at 3:58 PM, Christian Heilmann <[EMAIL PROTECTED]> wrote:
>   
>> Leandro Tracchia wrote:
>> 
>>> without getting into too much debate, i need to know what is the best
>>> way of creating a sliding div. should i use javascript or css or a
>>> combination of both. i'm new at css, but i'm learning very quickly. i
>>> just want to know what is the right way of doing it before i start
>>> doing something the wrong way. a good simple example would also be
>>> helpful.
>>> __
>>>
>>>   
>> What exactly do you mean by "sliding div"? An animated div that moves from a
>> to b?
>>
>> That'll be a mixture of CSS and JavaScript (unless all your users are on the
>> newest Safari/Webkit)
>>
>> example: http://developer.yahoo.com/yui/examples/animation/motion.html
>>
>> 
> __
> css-discuss [EMAIL PROTECTED]
> 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-discuss [EMAIL PROTECTED]
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] sliding div in Javascript or CSS

[Leandro Tracchia]

yes, or one that moves from the side of the screen. google maps has an
example of this to display more of the map. (http://maps.google.com)

On Tue, Oct 14, 2008 at 3:58 PM, Christian Heilmann <[EMAIL PROTECTED]> wrote:
> Leandro Tracchia wrote:
>>
>> without getting into too much debate, i need to know what is the best
>> way of creating a sliding div. should i use javascript or css or a
>> combination of both. i'm new at css, but i'm learning very quickly. i
>> just want to know what is the right way of doing it before i start
>> doing something the wrong way. a good simple example would also be
>> helpful.
>> __
>>
>
> What exactly do you mean by "sliding div"? An animated div that moves from a
> to b?
>
> That'll be a mixture of CSS and JavaScript (unless all your users are on the
> newest Safari/Webkit)
>
> example: http://developer.yahoo.com/yui/examples/animation/motion.html
>
__
css-discuss [EMAIL PROTECTED]
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] sliding div in Javascript or CSS

[Christian Heilmann]

Leandro Tracchia wrote:
> without getting into too much debate, i need to know what is the best
> way of creating a sliding div. should i use javascript or css or a
> combination of both. i'm new at css, but i'm learning very quickly. i
> just want to know what is the right way of doing it before i start
> doing something the wrong way. a good simple example would also be
> helpful.
> __
>   
What exactly do you mean by "sliding div"? An animated div that moves 
from a to b?

That'll be a mixture of CSS and JavaScript (unless all your users are on 
the newest Safari/Webkit)

example: http://developer.yahoo.com/yui/examples/animation/motion.html
__
css-discuss [EMAIL PROTECTED]
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] sliding div in Javascript or CSS

[Leandro Tracchia]

without getting into too much debate, i need to know what is the best
way of creating a sliding div. should i use javascript or css or a
combination of both. i'm new at css, but i'm learning very quickly. i
just want to know what is the right way of doing it before i start
doing something the wrong way. a good simple example would also be
helpful.
__
css-discuss [EMAIL PROTECTED]
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] Rounded corners + shaded background. What was I thinking?

[Gunlaug Sørtun]

Jody Levinson wrote:
> I've been tearing my hair over this one and it's my own fault for 
> coming up with the design:

> http://www.ishrgroup.com/
> 
> The rounded corners and flexible width body work fine in FF. In IE 7,
>  the flexible width works ok, but the rounded corners on the main 
> content area refuse to line up consistently. In IE 6, they wont line
>  up at all and the width won't flex.

To start with, add...

* html .bigi {position: absolute;}

...to get that element out of the way in IE6 since it doesn't support
'position: fixed'.

Then, add 'margin-right: -40px;' to all left-floating corners, since IE6
can't line up two 50% wide elements in a 100% wide container - it runs
out of space. That addition will give IE6 a 10px invisible gap it can
put its calculation-bugs in, with no negative effect on other browsers.

To make sure Firefox won't miss a pixel in width in the middle between
those floating corners, it might be a good idea to add 'padding-right:
1px;' on all the left-floating ones.

You probably also want to hide the vertical overflow on those corners,
as they don't look very nice in any browser when subjected to font-resizing.

> The css has one tag that won't validate - Property _width doesn't 
> exist :  700px - an attempt to set a minimum width.

Delete it, it won't work anyway and only cripples IE6' ability to get
the width correct on wide windows.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
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] word-wrap: break-word not working in Firefox

[Jukka K. Korpela]

David Dorward wrote:

> In my
> experience, most people wanting to use break-word are trying to get
> user generated content to not flow out of their design.

Mine too.

> In that case,
> the solution I'd suggest is better sanity checking of the data coming
> from the user

Agreed, but I count preprocessing as sanity checking.

> ("Sorry, words containing over 30 characters are not
> allowed").

Words containing more than 30 characters are often needed in many languages, 
like Finnish, Eskimo, and German. Even English has some fairly long words at 
times, and excluding them is not wise in general. Moreover, many languages 
don't use spaces between words, so the technical concept of "word" (a 
sequence of non-whitespace characters surrounded by whitespace or start or 
end of string) often results in very long words.

There is no good solution, and really nothing in CSS you could do for _word_ 
breaks (as opposite to brutal string breaks via nonstandard CSS). This is 
something that CSS _should_ address (hyphenation is really a presentational 
issue and could well be addressed in CSS at least at the level of "hyphenate 
if you can" vs. "don't hyphenate") but currently doesn't.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/ 

__
css-discuss [EMAIL PROTECTED]
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] Rounded corners + shaded background. What was I thinking?

[Jody Levinson]

I've been tearing my hair over this one and it's my own fault for  
coming up with the design:

http://www.ishrgroup.com/

The rounded corners and flexible width body work fine in FF. In IE 7,  
the flexible width works ok, but the rounded corners on the main  
content area refuse to line up consistently. In IE 6, they wont line  
up at all and the width won't flex.

styles are here:

http://www.ishrgroup.com/ishr-styles.css
http://www.ishrgroup.com/common-styles.css

The css has one tag that won't validate - Property _width doesn't  
exist :  700px - an attempt to set a minimum width.

Thanks!

Jody

--
TroutDream Graphics, Inc.
Always fresh. Never canned.
http://troutdream.com
425-883-8277
928-833-8277 fax

__
css-discuss [EMAIL PROTECTED]
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] Flyout CSS menus and [EMAIL PROTECTED] IE 6

[Jody Levinson]

Ok, so I got this site working in IE7 and FF. But it's an unusable  
mess in IE 6. I'm not even sure where to start!

http://atlas-inspection.com/newsite/

http://www.atlas-inspection.com/newsite/styles.css

Thank you for any assistance!

Jody

--
TroutDream Graphics, Inc.
Always fresh. Never canned.
http://troutdream.com
425-883-8277
928-833-8277 fax

__
css-discuss [EMAIL PROTECTED]
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] Horizontal alignment of dt and dd in IE 6 and 7

[Rachel Mawhood]

>Hi Rachel,
>
>I'd float the DTs.

Thank you.

>As a side note, you cannot use DIVs in these DTs, only inline elements are
>allowed there.

I remember now  - thank you.

>If you "need" them for the border effect around the images, then move that
>styling to the DTs or simply use the images (via padding/border).
>
>--
>Regards,
>Thierry | http://www.TJKDesign.com

__
css-discuss [EMAIL PROTECTED]
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] drop down menus/flash

[Al Sparber]

http://www.projectseven.com/support/answers.asp?id=127

-- 
Al Sparber - PVII
http://www.projectseven.com
Fully Automated Menu Systems | Galleries | Widgets
http://www.projectseven.com/go/Elevators


__
css-discuss [EMAIL PROTECTED]
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] Horizontal alignment of dt and dd in IE 6 and 7

[Thierry Koblentz]

> -Original Message-
> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
> discuss.org] On Behalf Of Rachel Mawhood
> Sent: Tuesday, October 14, 2008 6:34 AM
> To: css-d@lists.css-discuss.org
> Subject: [css-d] Horizontal alignment of dt and dd in IE 6 and 7
> 
> Hi list
> 
> In Firefox and Safari, the text displays alongside the thumbnails as
> desired.  In IE 6 and 7 it doesn't.  I have tried a number of things
> - negative margin on the , adding position:relative, removing
> text-align - but so far without success.  I would appreciate any
> pointers to fixing this.
> 
> http://www.internationalorganbuilders.com/archive/index.php
> 
> The CSS files are here -
> 
> http://www.internationalorganbuilders.com/styles/archive.css
> http://www.internationalorganbuilders.com/styles/iso-images.css
> 
> There's a similar problem on this page (at the foot)
> 
> http://www.internationalorganbuilders.com/journal/index.php
> 
> where the text, the titles of the articles in the journal, appear
> alongside as desired in Firefox and Safari but not in IE 6 and 7.

Hi Rachel,

I'd float the DTs.
As a side note, you cannot use DIVs in these DTs, only inline elements are
allowed there.
If you "need" them for the border effect around the images, then move that
styling to the DTs or simply use the images (via padding/border).


-- 
Regards,
Thierry | http://www.TJKDesign.com




__
css-discuss [EMAIL PROTECTED]
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] drop down menus/flash

[Luis Speciale]

Ed Pybus a écrit :

http://www.communitymx.com/content/article.cfm?cid=E5141

Hope it helps


Luis
> Hi,
>
> Can anyone help me get my dropdown menus coming down in front of a flash 
> player rather than behind it?
>
> http://www.slrecords.net/test_videos.php
>
> CSS here
>
> http://www.slrecords.net/css/master2.css
>
> This is my first website so and other comments/improvements/criticisms 
> welcome.
>
> Thanks,
>
> Ed
>
>
> __
> css-discuss [EMAIL PROTECTED]
> 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-discuss [EMAIL PROTECTED]
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] drop down menus/flash

[Rachel Mawhood]

You've got

z-index: 999;

on your nav a .  Isn't that causing the drop down menu when active to 
be in front of everything else?  Doesn't it need to be something like 
z-index: 2,  and the video and the title above it being z-index: 3 ?

Hope this helps.

Rachel

At 13:01 14/10/2008, Ed Pybus wrote:
>Hi,
>
>Can anyone help me get my dropdown menus coming down in front of a flash
>player rather than behind it?
>
>http://www.slrecords.net/test_videos.php
>
>CSS here
>
>http://www.slrecords.net/css/master2.css
>
>This is my first website so and other comments/improvements/criticisms
>welcome.
>
>Thanks,
>
>Ed

__
css-discuss [EMAIL PROTECTED]
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] Horizontal alignment of dt and dd in IE 6 and 7

[Rachel Mawhood]

Hi list

In Firefox and Safari, the text displays alongside the thumbnails as 
desired.  In IE 6 and 7 it doesn't.  I have tried a number of things 
- negative margin on the , adding position:relative, removing 
text-align - but so far without success.  I would appreciate any 
pointers to fixing this.

http://www.internationalorganbuilders.com/archive/index.php

The CSS files are here -

http://www.internationalorganbuilders.com/styles/archive.css
http://www.internationalorganbuilders.com/styles/iso-images.css

There's a similar problem on this page (at the foot)

http://www.internationalorganbuilders.com/journal/index.php

where the text, the titles of the articles in the journal, appear 
alongside as desired in Firefox and Safari but not in IE 6 and 7.

TVIA
Rachel

__
css-discuss [EMAIL PROTECTED]
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] drop down menus/flash

[Ed Pybus]

Hi,

Can anyone help me get my dropdown menus coming down in front of a flash 
player rather than behind it?

http://www.slrecords.net/test_videos.php

CSS here

http://www.slrecords.net/css/master2.css

This is my first website so and other comments/improvements/criticisms 
welcome.

Thanks,

Ed


__
css-discuss [EMAIL PROTECTED]
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] Layout problems with bkgrd color, footer position, left nav, etc.

[David Laakso]

Kathy Davie wrote:
> I am having myriad issues with this css, 
> http://kddidit.com/CSS/stylesAMTF.css 
>   when its applied to this page, http://kddidit.com/AMTF/ 
> audioList.html.  I recently had to reload the Leopard OS in my  
> computer and this is when I started having these issues.
>
>   

Let the software do its little thing unrestrained, and your stuff will do its 
little thing-- whether your stuff will "ascend" is another matter...
Cursory checked in IE/6. IE/7, and some compliant browsers.

HTH



-- 

A thin red line and a salmon-color ampersand forthcoming.

http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
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/