[css-d] Diagonal lines
I am trying to come up with a solution for a diagonal line using HTML
and CSS. I rely on javascript as a solution for this predicament.
I have tried the following items:
- Basic SVG with given width/height such as the following:
http://www.w3.org/2000/svg";>
This approach works, but Internet Explorer < 9 is not compatible with SVG.
- CSS text-decoration:
text-decoration: line-through; adds a line, but has no way to show
it as a diagonal.
- Rotated div (or other block level element):
Background or border can create a line.
Mozilla, Webkit, and even Opera browsers support arbitrary
rotations in degrees.
Internet Explorer uses
object.filters.item("DXImageTransform.Microsoft.BasicImage").Rotation
which only supports rotations of 90 degree intervals.
- Unicode U+2571
This does form a diagonal line, but there is no way to stretch an
individual character in CSS (of which I am aware).
- Diagonal border hacks:
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-diagonal-lines-with-css/
http://nettuts.s3.amazonaws.com/1008_diagonal/index.html
This works in some sense, but there is no "line" per se, there is
simply diagonal clipping.
- Canvas
HTML5 with canvas does allow for drawing of diagonal lines, but is
not supported in older browsers.
Does anyone have any ideas or suggestions that might help with this?
Thanks,
Jack
__
css-discuss [css-d@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] Using CSS to not display submit input text
I have already created an input element of type submit as follows
input type="submit" alt="Next" class="next_button"
That has the following styles applied:
.next_button {
background:transparent url(next.jpg) no-repeat scroll 0 0;
border:none;
height:34px;
width:70px;
color:transparent;
font-size:0;
}
.next_button:hover{
background-position:-70px 0;
}
The background is the button as I would like it to appear, which for
browsers that suppourt :hover in this context shows a nice rollover with the
image being shifted, which also fails gracefully for the rest. The color:
transparent and font-size:0 styles were added because I do not want the
"Next" text to appear if CSS is enabled, but I do want some text to appear
on the button if CSS is not available for some reason.
The color:transparent style works for most browsers, but does not function
as desired in Opera or Internet Explorer. The font-size:0 style presents
the desired appearance in Opera.
In Internet Explorer however the text still appears with a 1px height across
the center of the button. Is there any way in Internet Explorer's
interpretation of CSS to not show any of the value or alt text so that it
will appear if the CSS were to fail?
Thanks,
Jack
__
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] CSS ul/li and inline display
I have a page using an unordered list with a custom list style image. This
works fine until I set the child li elements to use display: inline; at
which point the list style image disappears.I have tried adding margins
and padding, but neither seems to help. Will I need to add a background
image instead, or is there a way to get the list to be displayed inline *and
*have the list style image?
ul.test {
position: absolute;
top: 180px;
left: 370px;
width: 290px;
list-style-image: url('/images/arrow_yellow.gif');
list-style-type: square;
}
.test li {
display: inline;
}
__
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] Rounded Corners
Georg is right about having to wait for major browsers to catch up. You may also wish to take a look at: http://code.google.com/p/curved-corner/ It does not work in Opera (not even 10.20 alpha), but in all the other browsers I have tested on various platforms. On Wed, Dec 2, 2009 at 2:01 PM, Chick Newman wrote: > I would like to know what people are doing to create rounded corners on div > borders in non-mozilla , non-safari browsers. I thought I found a solution, > which at least included opera, but I tried it and it isn't working there, > either. > > Thanks, > Chick > > __ > 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-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] Vertical Align Theory
I disagree. The idea that using display: table-cell does not seem to be any more semantically correct than simply placing the element in a table cell according to the W3C (http://www.w3.org/TR/CSS2/tables.html#value-def-table-cell): table-cell (In HTML: TD, TH) Specifies that an element represents a table cell. Rather, it simply seems to compound the issue by abstracting the placement of non-tabular data in tabular form rather than just setting the display positioning. Are there other methods for vertical alignment that have better suppourt or seem to be less tabular in nature? On Thu, Apr 23, 2009 at 2:23 PM, Brian Hazelton wrote: > The benefit of using display:table-cell over an actual table is that if > the text is not tabular, it does not belong in a table. Using > display:table-cell will allow you to mimic the display of a table cell > while being semantically correct. > > Another thing to note is that not all browsers implement > display:table-cell > > __ > 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-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] Vertical Align Theory
If I am vertically aligning an element it seems that the only way to consistently do so with standard css is to implement a "display: table-cell; vertical-align: middle;" style on the container. Is there any benefit this affords me over just creating a table? I seems odd to me that the new hero for layout and positioning (CSS) has to revert back to table-styled position to center elements vertically. __ 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] max-width in Safari/IE
It seems to be that the table within the div or body element is
pushing the content out beyond the specified widths in Internet
Explorer. If I set the width on the table to 100% it forces the
containing dom element to expand if the elements within the table can
possibly have a width to do so (that is to say that the text contained
therein [rather than wrapping as it does in other browsers] forces the
cell, and therefore table to expand beyond the set boundaries of the
parent dom element).
On Mon, Mar 23, 2009 at 10:50 AM, Jack Blankenships
wrote:
> After experimenting some more I have come up with some code that seems
> to work in most browsers:
>
> .content {
> width: 100%;
> max-width: 960px;
> min-width: 640px;
> margin-left: auto;
> margin-right: auto;
> }
>
> This can be applied to a body or div tag with an embedded table and
> will center the element with a minimum width of 640px and a maximum
> with of 960px while expanding to 100% of the available viewport within
> the given bounds -- but it does not work for Internet Explorer.
>
> I have tried:
>
> .content {
> width: 100%;
> max-width: 960px;
> min-width: 640px;
> margin-left: auto;
> margin-right: auto;
> width: expression(this.width > 960 ? 960 : this.width < 640 ? 640 : true);
> }
>
> As recommended by others, but that does not seem to work. Any
> suggestions as to how to make this work in Internet Explorer without
> some drastic hacks, etc.?
>
> Thanks,
> Jack
>
>
> On Mon, Mar 23, 2009 at 10:26 AM, Gunlaug Sørtun wrote:
>> Jack Blankenships wrote:
>>>
>>> Apparently there was a table there as well, and max-width does not apply
>>> to a table very nicely in Safari or Internet Explorer. Can anyone offer
>>> some more explanation on this?
>>
>> Have only tested for CSS table a year or so back, and it's a known
>> behavior in Safari 3. I haven't tested how neither IE7 nor IE8 handles
>> max-width on HTML table, or how IE8 handles it on CSS table.
>>
>> Some browsers seem to ignore min/max-width on table - which seems ok,
>> while others apply it - which also can be justified I think. So, I don't
>> think Safari and IE8 are wrong, or right, since min/max-width on table
>> seems to be in undefined or under-defined CSS territory.
>>
>> regards
>> Georg
>> --
>> http://www.gunlaug.no
>>
>
__
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] max-width in Safari/IE
After experimenting some more I have come up with some code that seems
to work in most browsers:
.content {
width:100%;
max-width:960px;
min-width:640px;
margin-left: auto;
margin-right: auto;
}
This can be applied to a body or div tag with an embedded table and
will center the element with a minimum width of 640px and a maximum
with of 960px while expanding to 100% of the available viewport within
the given bounds -- but it does not work for Internet Explorer.
I have tried:
.content {
width:100%;
max-width:960px;
min-width:640px;
margin-left: auto;
margin-right: auto;
width: expression(this.width > 960 ? 960 : this.width < 640 ? 640 : true);
}
As recommended by others, but that does not seem to work. Any
suggestions as to how to make this work in Internet Explorer without
some drastic hacks, etc.?
Thanks,
Jack
On Mon, Mar 23, 2009 at 10:26 AM, Gunlaug Sørtun wrote:
> Jack Blankenships wrote:
>>
>> Apparently there was a table there as well, and max-width does not apply
>> to a table very nicely in Safari or Internet Explorer. Can anyone offer
>> some more explanation on this?
>
> Have only tested for CSS table a year or so back, and it's a known
> behavior in Safari 3. I haven't tested how neither IE7 nor IE8 handles
> max-width on HTML table, or how IE8 handles it on CSS table.
>
> Some browsers seem to ignore min/max-width on table - which seems ok,
> while others apply it - which also can be justified I think. So, I don't
> think Safari and IE8 are wrong, or right, since min/max-width on table
> seems to be in undefined or under-defined CSS territory.
>
> regards
> Georg
> --
> http://www.gunlaug.no
>
__
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] max-width in Safari/IE
Apparently there was a table there as well, and max-width does not
apply to a table very nicely in Safari or Internet Explorer. Can
anyone offer some more explanation on this?
Thanks,
Jack
On Mon, Mar 23, 2009 at 9:50 AM, Jack Blankenships
wrote:
> Apparently there was a table there as well, and max-width does not
> apply to a table very nicely in Safari or Internet Explorer. Can
> anyone offer some more explanation on this?
>
> Thanks,
> Jack
>
> On Mon, Mar 23, 2009 at 9:35 AM, Theophan Dort wrote:
>> Sorry, I meant to include a link to the file:
>>
>> http://www.theophan.net/maxwidthtest.html
>>
>> Theophan
>>
>>
>> On Mar 23, 2009, at 11:20 AM, Theophan Dort wrote:
>>
>>> I'm not an expert, just a volunteer webmaster for a couple of churches,
>>> but on my Mac with Safari (3.2.1) that works exactly as it should.
>>>
>>> FYI.
>>>
>>> Theophan
>>>
>>>
>>> On Mar 23, 2009, at 10:49 AM, Jack Blankenships wrote:
>>>
>>>> Is there a way to get a max-width attribute to work in Safari and
>>>> Internet Explorer? Supposedly both browsers suppourt it, but I can't
>>>> find an example of either doing so.
>>>>
>>>> In theory I would like to add a class to a div like so:
>>>>
>>>> .container {
>>>> width: 100%;
>>>> max-width: 960px;
>>>> }
>>>>
>>>> I would expect the application of this class to a div element to
>>>> result in an object that fills 100% of the available viewport up to a
>>>> maximum of 960px. Am I missing something as to why Safari and
>>>> Internet Explorer do not react as the other browsers do?
>>>>
>>>> Thanks,
>>>> Jack
>>>> __
>>>> 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-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] max-width in Safari/IE
Is there a way to get a max-width attribute to work in Safari and
Internet Explorer? Supposedly both browsers suppourt it, but I can't
find an example of either doing so.
In theory I would like to add a class to a div like so:
.container {
width:100%;
max-width: 960px;
}
I would expect the application of this class to a div element to
result in an object that fills 100% of the available viewport up to a
maximum of 960px. Am I missing something as to why Safari and
Internet Explorer do not react as the other browsers do?
Thanks,
Jack
__
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] Same Dynamic Width
Using display: inline-block seems to work for now, but I am wondering what circumstances may cause that to fail. On Tue, Nov 11, 2008 at 3:40 PM, Jack Blankenships <[EMAIL PROTECTED]> wrote: > http://mylittletestsite.com/same_dynamic_width.html > > In theory the first section should have the header stop at 800px. The > second should stop at 400px for both the header and the content. > > On Tue, Nov 11, 2008 at 3:23 PM, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote: >> Jack Blankenships wrote: >>> >>> Any suggestions on how to make two items have the same dynamic width? >>> >> I can think of at least a dozen reasons why neither 'width: >> auto'(default) or 'width: 100%' will work for you, but figuring out >> which one you have run into will be pure guesswork. >> >> Present a link to your creation, so we can see what other styles you >> have in there. >> >> 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] Same Dynamic Width
http://mylittletestsite.com/same_dynamic_width.html In theory the first section should have the header stop at 800px. The second should stop at 400px for both the header and the content. On Tue, Nov 11, 2008 at 3:23 PM, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote: > Jack Blankenships wrote: >> >> Any suggestions on how to make two items have the same dynamic width? >> > I can think of at least a dozen reasons why neither 'width: > auto'(default) or 'width: 100%' will work for you, but figuring out > which one you have run into will be pure guesswork. > > Present a link to your creation, so we can see what other styles you > have in there. > > 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/
[css-d] Same Dynamic Width
Any suggestions on how to make two items have the same dynamic width? For example, if I have two divs with one being a header and a second with content. I want to make the header div expand to fill the same width as the content div. I have tried enclosing both in a parent div and giving the content div a max-width and min-width, and I want the header to match whatever width that actually ends up being. If I set the width of the header to 100% then the container expands beyond the width of the content div, and so does the header div. Thanks, __ 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] :active with display: none
I can click a link that is displayed "off left." On my test page at http://www.cssprovingground.com/ there is a link relatively positioned with left: -220px as the first element on the page. I can tab to the link and activate the link using the enter key in Firefox, Internet Explorer, and even Google Chrome. Furthermore, this test reveals that the problem may in fact be in the speed of the mouse 'click'. Using the same test page and positioning the mouse on 'Option 5' will allow me to tab through all of the links on the page. If I press the Enter key when the desired 'Option 5' link is selected, the link will fire and the display is still set to none properly. Similarly this process works if the mouse and keyboard selection are different, and regardless of which link is selected in either process. This does not work in browsers that do not allow for using the tab key to move between links (which incidentally seems like an accessibility flaw). I will try some experiments using the visibility attribute rather than the display attribute. On Wed, Oct 8, 2008 at 6:38 PM, David Hucklesby <[EMAIL PROTECTED]> wrote: > On Wed, 8 Oct 2008 15:39:17 -0600, Jack Blankenships wrote: > >> How does that "kill the child?" If the link has display: none, why does that >> have any >> effect whatsoever on the clickability or the link or the resulting action? >> Doesn't >> display none simply not show it on the page but allow it to exist in the DOM? >> > > Yup. It's in the DOM - but not on the displayed page. Think of how > you'd copy text that's positioned "off left"? (Or click a link that's > off left, for that matter - though that's a less likely scenario.) > > Cordially, > David > -- > > __ 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] :active with display: none
How does that "kill the child?" If the link has display: none, why does that have any effect whatsoever on the clickability or the link or the resulting action? Doesn't display none simply not show it on the page but allow it to exist in the DOM? On Wed, Oct 8, 2008 at 2:05 PM, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote: > Jack Blankenships wrote: >> >> I want to make it so that an active link makes the parent element >> disappear. The element does disappear when I place an :active pseudo-class >> on the parent element to change the display to none, however the link ceases >> to function (i.e. - clicking on it does nothing). >> >> Working example: http://www.cssprovingground.com > > First: you're "killing the child so it can no longer support its > parent", which is slightly different from what you describe but of > course has the same effect. Only, the effect is immediate, and that > makes it fail for links. > > The :active pseudo-class takes effect first - while the link is > activated, and the link isn't followed until it has being released > _after_ :active, and by then the link has disappeared and can't be followed. > > If Firefox you can hold a link :active for ages without anything > happening. Once you release the link it will be followed. So, :active > can be used to give visual cues - like changing background > or similar, but not for much else. Use script for the effect you're after. > > 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/
[css-d] :active with display: none
I want to make it so that an active link makes the parent element disappear. The element does disappear when I place an :active pseudo-class on the parent element to change the display to none, however the link ceases to function (i.e. - clicking on it does nothing). Working example: http://www.cssprovingground.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/
[css-d] Overflow and no
Any ideas on how to have an element's overflow property apply to some children but not to others? For example, I have a div that contains a table/grid that I want to have set to overflow: auto on a specific height. This way the results stay within a specific set of dimensions and do not push the rest of the layout into undesirable locations. The problem is that I also want to include some css tooltips for specific cells in this table/grid, some of which are large enough that I would like to expand them out of this standard boundary because they would be displayed above the layout content and disappear when :hover is not activated. Thanks, Jack __ 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] CSS Select Box
Please see the example at http://cssprovingground.com. The bottom one
works fine because there is no element to be rendered in the middle of
the element displayed on hover.
On Mon, Oct 6, 2008 at 9:50 AM, BobSharp <[EMAIL PROTECTED]> wrote:
> I would checkout the source of CSS menus
> because this sounds like the same arrangement.
>
>
>
> - Original Message - From: "Jack Blankenships"
> <[EMAIL PROTECTED]>
> To:
> Sent: Monday, October 06, 2008 4:19 PM
> Subject: [css-d] CSS Select Box
>
>
>> I am building a pseudo-"select" with css to allow for
>> submenus/subselects, i.e. when an element with sub options is hovered,
>> another set of options appears to the right. With the provided css
>> and sample HTML below this functionality works just fine, however when
>> I place this into rows of a table for a grid the pseudo-select not
>> hovered appears above the popup for the hovered element. As you can
>> see I tried the application of a z-index, but this did not seem to
>> help. In any case what I am attempting to do is have the ul/li
>> element I am hovering over always be above any similar elements.
>>
>> Any suggestions?
>>
>> CSS:
>>
>> ul.subselect {
>> background: #FF url(text-bg.gif) repeat-x scroll 0 0;
>> font-size: 1.1em;
>> z-index: -10;
>> }
>> ul.subselect:hover {
>> z-index: 10;
>> }
>> ul.subselect, .subselect ul {
>> padding: 0;
>> margin: 0;
>> border: 1px solid silver;
>> }
>> ul.subselect li {
>> list-style-type: none;
>> position: relative;
>> margin: 0;
>> }
>> ul.subselect > li {
>> background: #FF url(pull_down.gif) no-repeat 98% 50%;
>> padding: 4px;
>> padding-right: 20px;
>> }
>> ul.subselect ul {
>> display: none;
>> background-color: #ff;
>> }
>> ul.subselect li:hover > ul {
>> display: inline-block;
>> position: absolute;
>> top: -1px;
>> left: 100%;
>> }
>> ul.subselect li:hover > ul > li {
>> text-wrap: nowrap;
>> white-space: nowrap;
>> }
>> ul.subselect li a, ul.subselect li.sub a {
>> display: inline-block;
>> padding: 3px;
>> padding-right: 5px;
>> text-decoration: none;
>> font-weight: normal;
>> color: black;
>> }
>> ul.subselect li:hover {
>> background-color: #407ad8;
>> }
>> ul.subselect li.sub {
>> background: url(black_triangle.gif) 98% 50% no-repeat;
>> }
>> ul.subselect li.sub:hover {
>> background: #407ad8 url(black_triangle.gif) 98% 50% no-repeat;
>> }
>> ul.subselect > li:hover > ul {
>> left: -1px;
>> }
>>
>> HTML:
>>
>>
>> Select ...
>>
>> Option 1
>> Option 2
>> Option 3
>>
>> Option 3 Sub 1
>>
>>
>> Option 4
>>
>> Option 4 Sub 1
>>
>>
>> Option 5
>>
>>
>>
>> __
>> 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/
>>
>>
>> --
>> No virus found in this incoming message.
>> Checked by AVG.
>> Version: 7.5.526 / Virus Database: 270.7.6/1709 - Release Date: 10/5/2008
>> 09:20
>>
>>
>
>
> --
> I am using the free version of SPAMfighter for Personal use.
> SPAMfighter has removed 88 of my spam emails to date.
> Get the free SPAMfighter here: http://www.spamfighter.com/len
>
> The Trial and Professional version does not have this message in the email
>
>
>
__
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] CSS Select Box
Apparently the problem was the application of the z-index property to
the ul element rather than the li element.
On Mon, Oct 6, 2008 at 10:17 AM, Jack Blankenships
<[EMAIL PROTECTED]> wrote:
> Please see the example at http://cssprovingground.com. The bottom one
> works fine because there is no element to be rendered in the middle of
> the element displayed on hover.
>
> On Mon, Oct 6, 2008 at 9:50 AM, BobSharp <[EMAIL PROTECTED]> wrote:
>> I would checkout the source of CSS menus
>> because this sounds like the same arrangement.
>>
>>
>>
>> - Original Message - From: "Jack Blankenships"
>> <[EMAIL PROTECTED]>
>> To:
>> Sent: Monday, October 06, 2008 4:19 PM
>> Subject: [css-d] CSS Select Box
>>
>>
>>> I am building a pseudo-"select" with css to allow for
>>> submenus/subselects, i.e. when an element with sub options is hovered,
>>> another set of options appears to the right. With the provided css
>>> and sample HTML below this functionality works just fine, however when
>>> I place this into rows of a table for a grid the pseudo-select not
>>> hovered appears above the popup for the hovered element. As you can
>>> see I tried the application of a z-index, but this did not seem to
>>> help. In any case what I am attempting to do is have the ul/li
>>> element I am hovering over always be above any similar elements.
>>>
>>> Any suggestions?
>>>
>>> CSS:
>>>
>>> ul.subselect {
>>> background: #FF url(text-bg.gif) repeat-x scroll 0 0;
>>> font-size: 1.1em;
>>> z-index: -10;
>>> }
>>> ul.subselect:hover {
>>> z-index: 10;
>>> }
>>> ul.subselect, .subselect ul {
>>> padding: 0;
>>> margin: 0;
>>> border: 1px solid silver;
>>> }
>>> ul.subselect li {
>>> list-style-type: none;
>>> position: relative;
>>> margin: 0;
>>> }
>>> ul.subselect > li {
>>> background: #FF url(pull_down.gif) no-repeat 98% 50%;
>>> padding: 4px;
>>> padding-right: 20px;
>>> }
>>> ul.subselect ul {
>>> display: none;
>>> background-color: #ff;
>>> }
>>> ul.subselect li:hover > ul {
>>> display: inline-block;
>>> position: absolute;
>>> top: -1px;
>>> left: 100%;
>>> }
>>> ul.subselect li:hover > ul > li {
>>> text-wrap: nowrap;
>>> white-space: nowrap;
>>> }
>>> ul.subselect li a, ul.subselect li.sub a {
>>> display: inline-block;
>>> padding: 3px;
>>> padding-right: 5px;
>>> text-decoration: none;
>>> font-weight: normal;
>>> color: black;
>>> }
>>> ul.subselect li:hover {
>>> background-color: #407ad8;
>>> }
>>> ul.subselect li.sub {
>>> background: url(black_triangle.gif) 98% 50% no-repeat;
>>> }
>>> ul.subselect li.sub:hover {
>>> background: #407ad8 url(black_triangle.gif) 98% 50% no-repeat;
>>> }
>>> ul.subselect > li:hover > ul {
>>> left: -1px;
>>> }
>>>
>>> HTML:
>>>
>>>
>>> Select ...
>>>
>>> Option 1
>>> Option 2
>>> Option 3
>>>
>>> Option 3 Sub 1
>>>
>>>
>>> Option 4
>>>
>>> Option 4 Sub 1
>>>
>>>
>>> Option 5
>>>
>>>
>>>
>>> __
>>> 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/
>>>
>>>
>>> --
>>> No virus found in this incoming message.
>>> Checked by AVG.
>>> Version: 7.5.526 / Virus Database: 270.7.6/1709 - Release Date: 10/5/2008
>>> 09:20
>>>
>>>
>>
>>
>> --
>> I am using the free version of SPAMfighter for Personal use.
>> SPAMfighter has removed 88 of my spam emails to date.
>> Get the free SPAMfighter here: http://www.spamfighter.com/len
>>
>> The Trial and Professional version does not have this message in the email
>>
>>
>>
>
__
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] CSS Select Box
I am building a pseudo-"select" with css to allow for
submenus/subselects, i.e. when an element with sub options is hovered,
another set of options appears to the right. With the provided css
and sample HTML below this functionality works just fine, however when
I place this into rows of a table for a grid the pseudo-select not
hovered appears above the popup for the hovered element. As you can
see I tried the application of a z-index, but this did not seem to
help. In any case what I am attempting to do is have the ul/li
element I am hovering over always be above any similar elements.
Any suggestions?
CSS:
ul.subselect {
background: #FF url(text-bg.gif) repeat-x scroll 0 0;
font-size: 1.1em;
z-index: -10;
}
ul.subselect:hover {
z-index: 10;
}
ul.subselect, .subselect ul {
padding: 0;
margin: 0;
border: 1px solid silver;
}
ul.subselect li {
list-style-type: none;
position: relative;
margin: 0;
}
ul.subselect > li {
background: #FF url(pull_down.gif) no-repeat 98% 50%;
padding: 4px;
padding-right: 20px;
}
ul.subselect ul {
display: none;
background-color: #ff;
}
ul.subselect li:hover > ul {
display: inline-block;
position: absolute;
top: -1px;
left: 100%;
}
ul.subselect li:hover > ul > li {
text-wrap: nowrap;
white-space: nowrap;
}
ul.subselect li a, ul.subselect li.sub a {
display: inline-block;
padding: 3px;
padding-right: 5px;
text-decoration: none;
font-weight: normal;
color: black;
}
ul.subselect li:hover {
background-color: #407ad8;
}
ul.subselect li.sub {
background: url(black_triangle.gif) 98% 50% no-repeat;
}
ul.subselect li.sub:hover {
background: #407ad8 url(black_triangle.gif) 98% 50% no-repeat;
}
ul.subselect > li:hover > ul {
left: -1px;
}
HTML:
Select ...
Option 1
Option 2
Option 3
Option 3 Sub 1
Option 4
Option 4 Sub 1
Option 5
__
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] Max-width/min-width percentage in IE 6
What I am trying to do is create a set of images in a fluid layout
that adjusts based on the browser size.
The code is really very simple. I have a css-p div that contains an
image placed in a certain spot on the page. The container div is
sized based on the client browser. The idea is to have the large
image inside sized to match the container. Using min-width and
max-width (both set to 100% in this case) as percentages resizes the
image based on the container (yay!) rather than the original image
size (which is not helpful in this case). Using width as has been
suggested refers back to the original image size.
This sample code works in Firefox, Mozilla, Safari, Opera ... but not
in Internet Explorer because there is apparently no suppourt for
min-width and max-width:
.fluidcontainer {overflow: hidden; border: none; position: absolute;}
.fluidimage {min-width: 100%; max-width: 100%; border: none;
position: absolute; top: 0px; left: 0px;}
...
Any other suggestions?
On Mon, Mar 17, 2008 at 10:47 AM, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:
> Jack Blankenships wrote:
> > I am trying to apply a max-width and min-width feature to a page for
> > IE6, but all of the examples I see online appear like this:
> >
> > (see:
> > http://www.antix.co.uk/code/css/imposing_minimum_width/default.htm)
>
>
> > The problem is that instead of having a specific number of pixels I
> > want it to be a percentage, and ideally it should be with respect to
> > the containing block element (ex. a ) rather than the client
> > width.
>
> Apart from the example page and 'min-width' expression being made for
> IE6 quirks mode only, it sounds like you're using 'min/max-width'
> backwards relative to plain 'width' in all browsers.
> Do you have a link so we can see what exactly you're trying to achieve?
>
> In the mean time; here are some working 'min/max-width' solutions, with
> demos, that are not relying on IE6' mode...
>
> <http://www.gunlaug.no/contents/wd_additions_14.html>
>
> 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/
[css-d] Max-width/min-width percentage in IE 6
I am trying to apply a max-width and min-width feature to a page for
IE6, but all of the examples I see online appear like this:
(see: http://www.antix.co.uk/code/css/imposing_minimum_width/default.htm)
#example_3 .main
{
min-width:450px;
/* IE Dynamic Expression to set the width */
width:expression(document.body.clientWidth < 550 ? "450px" : "100%" );
}
The problem is that instead of having a specific number of pixels I
want it to be a percentage, and ideally it should be with respect to
the containing block element (ex. a ) rather than the client
width.
Any suggestions?
__
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] Fluid images
The only problem with this is that I need to resize the image in both height and width aspects. From the information included in this e-mail I gather that until the css3 background-size becomes more widely suppourted this will unlikely be an entirely css based solution. Has anyone had this problem and been able to find a javascript solution that uses as much css as possible? On Jan 25, 2008 5:34 PM, Stephan Wehner <[EMAIL PROTECTED]> wrote: > On Jan 25, 2008 10:42 AM, Jack Blankenships > <[EMAIL PROTECTED]> wrote: > > I have been reading some articles > > (http://www.alistapart.com/articles/elastic/ , > > http://www.htmldog.com/articles/elasticdesign/demo/ , > > http://www.antix.co.uk/code/css/imposing_minimum_width/example_3.htm , > > etc), but I am not finding the answer I am looking for. > > > > I want to have an image (several images) that are dynamically > > sized/fluid based on the browser window/viewport dimensions. I have a > > layout where the divs can be percentages of the available height and > > width, but it seems that whether I put the image inside the div or as > > a background-image I cannot get it to adjust based on the window > > dimensions. When I set the width or height to 100% using css, the > > image is set to 100% of its original size, without respect to its > > container. > > Did you try applying the width to the img ? See > http://myosin3000.sugarmotor.net/imagesize.html > > > I suppose that it makes things more complicated that I need to > > preserve the dimensional relationship between the height/width > > Actually this seems easy. See example above. > > Stephan > > > -- > Stephan Wehner > > -> http://stephan.sugarmotor.org > -> http://www.thrackle.org > -> http://www.buckmaster.ca > -> http://www.trafficlife.com > -> http://stephansmap.org > __ > 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/
[css-d] Fluid images
I have been reading some articles (http://www.alistapart.com/articles/elastic/ , http://www.htmldog.com/articles/elasticdesign/demo/ , http://www.antix.co.uk/code/css/imposing_minimum_width/example_3.htm , etc), but I am not finding the answer I am looking for. I want to have an image (several images) that are dynamically sized/fluid based on the browser window/viewport dimensions. I have a layout where the divs can be percentages of the available height and width, but it seems that whether I put the image inside the div or as a background-image I cannot get it to adjust based on the window dimensions. When I set the width or height to 100% using css, the image is set to 100% of its original size, without respect to its container. I suppose that it makes things more complicated that I need to preserve the dimensional relationship between the height/width The closest example I have seen to getting this to work is at www.opera.com, but the height of the images never changes, and the image gets out of proportion during resizing events. I also found that http://www.cssplay.co.uk/layouts/background.html resizes both dimensions, but not in equal ratios and seems to only work on body backgrounds. I need some help with a css solution for this, and if some javascript integration is necessary, then sobeit. Thanks, __ 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/
