Re: [css-d] Pure CSS fisheye menu with icons: a demo
#navigation li a:hover,
#navigation li a:active,
#navigation li a:focus {
color: red;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
}
etc.
All this stuff is good to know and I'm glad for the discussion.
However, for the case at hand, it seems like an awful lot of
complicated, proprietary fuss merely in order to use background
images in the menu. May I ask, why not simply use foreground icon
images and change their height or width on hover? That would be
cross-browser-compatible for anything that can parse CSS. I don't see
that having the icon in the foreground is any more of an issue than,
say, having a foreground thumbnail image in a gallery be the link to
its larger counterpart. Isn't this a case where one could argue both
sides of the question, Is it content or is it presentation?
Curiously,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.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] Bulleted list question
At 5/18/2010 04:54 PM, Doug Niven wrote: http://dev.franslanting.com/index.php?module=companypId=100start=0 The bulleted list under Pricing is where I'm having trouble. I'd like the bullets to be in the flush left position they are in now, but I'd like the text --when it goes to a second line--to be indented, instead of going flush left. This is a graphic that illustrates what I'm after: http://www.franslanting.com/drafts/bulleted-list.jpg The trick is to give all items a margin-left where you want text to wrap to (say 1.5em), then give each list item a negative text-indent of the same value (e.g. -1.5em) to reset it to where it would have fallen naturally. The text-indent affects only the beginning of the item's text. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.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] link trickery
At 5/5/2010 11:32 PM, Chris Blake wrote: I have a Joomla module installed that feeds articles into a small block. The module lets me choose show or hide the 'read more' link, which I have hidden. For now I do not want people to click on the title or read more link to go the article, it is simply for show. However the title is still clickable and I don't want it to be. Is there anyway to disable a link via CSS? I want to display it, just not have it working as a link. I have thought that an option (trick) could be to remove text decoration of underline on rollover and possibly change the cursor to be ?? (the standard one when hovering over normal text). At least this way user will not see the cursor for link, and not try clicking. Making a link not a link and making a link not look like a link are two very different things. Even if the titles don't look or act like links, some people may click on them anyway by accident or out of habit, and if that breaks your site then styling them isn't a sufficient solution. That said, one way to disable a link in CSS is to cover it with a transparent layer that itself isn't clickable. Consider also that some user agents may not be interpreting CSS and if your links are present in the markup then they will probably be spidered by search engines, leading readers to the linked pages even if they can't get there from your styled page. I think a much better approach to the problem would be simply to manipulate the markup coming down from the server. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.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] height and margin: auto 0
At 4/28/2010 11:06 AM, Climis, Tim wrote: Would the block center vertically if the containing block had a declared height, or does that not matter either? It would not. Thoughts? If you're in a position be able to specify height on both the block and it's container, then this is pretty easy to accomplish. If you can't do that, then the only ways to do it are resorting to tables or javascript. Don't give up yet! There are the table-mimicking display properties http://www.w3.org/TR/CSS21/visuren.html#display-prop Also don't forget our beautifully recreated wiki: http://css-discuss.incutio.com/wiki/Centering_Block_Element#Vertical_Centering and I also had this one bookmarked: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.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] Alternative format for definitions?
snipped: _Technicians_ are those individuals who perform ... I see a problem with your markup though: DL class=inline-definition DTTechnicians/DT DDare those individuals who perform.../DD /DL I don't think there is room for are those in there. Imho it should be: DTTechnicians/DT DDIndividuals who perform.../DD I understand what you want to use, I'm just saying that I'm not sure about the semantics. DD stands for Definition Description so I don't think these descriptions should start with are those. I think it should be a standalone sentence. You are creating a bridge between DTs and DDs that should not exist (imho). Or, to put it another way, what the OP really wants is not a DL. Can you find any support for this assertion in the spec? http://www.w3.org/TR/html4/struct/lists.html#h-10.3 I'm seeing neither normative nor informative specifications for the linguistic grammar of a description. The HTML spec says nothing about standalone sentences or fragments in this context, probably because that would be outside its purview. If you check I think you'll find that most dictionary definitions are not complete sentences, e.g. http://google.com/search?q=define%3Atechnician. The OP's semantic content is clearly that of a definition list: terms and descriptions. What constructive goal do we achieve by attempting to constrain the grammar (in any given human language) of document content? Curiously, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.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] Re the non-secure login code...
I'd be happy to take a look, I'm always on the lookout for good login scripts and I'd be happy to provide any feedback I can. ONE*** This goes in the head section of the html page: script src=login.js type=text/javascript/script TWO*** Then this form goes in the body section. You decide the content to include other than the form fields. form name=login id=login ... input type=button value=Login! onClick=Login() / THREE*** The you create the login.js file from the following code. We have 13 different logins leading to thirteen different pages. Each one needs just 3 pieces of info: username, password and the page linked to. This is not an appropriate topic for a CSS list. This presentational markup desperately begs to be stripped bare and replaced with nice clean semantic markup and a stylesheet. Any form functionality that depends on JavaScript cannot be secure. Write your security logic in a server-side script, then use JavaScript if you want to enhance the user experience, but asking JavaScript to be your gate-keeper is asking a narcoleptic to be your nightwatchman. Including JavaScript calls in markup is so '90s old-school it's amazes me that people still code this way. Google separation of development layers and progressive enhancement, please. Croggled, Paul __ 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] Re the non-secure login code...
At 4/12/2010 09:56 AM, Philip TAYLOR wrote: Shouldn't input type=text be input type=password ? Otherwise the user's password will remain visible on-screen. FYI I was interested recently to read some push-back against the age-old assumption that password input should be obfuscated: Jakob Nielsen's Alertbox, June 23, 2009: Stop Password Masking Summary: Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn't even increase security, but it does cost you business due to login failures. http://www.useit.com/alertbox/passwords.html [I think this part of the discussion properly belongs over on WSG or Webdesign-L...] Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.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] Zero out a style
At 4/10/2010 06:46 PM, Shanna Cramer wrote: I frequently work on child themes and build custom style sheets in addition to the parent style sheet. Is there a way to zero out a style? Just remove any parent styling that was applied to some element. If we're to take your question literally, the conceptual problem with zeroing out an element's styles is that there isn't really a zero-state in ordinary usage. When we launch a browser, page elements are styled according to the browser's inboard stylesheet plus the user's custom stylesheet if any. I'll assume that the closest to zero you really want to get is to disable author stylesheets but no others. Removing all author stylesheets could be done by using server-side or client-side scripting to intercept the markup and delete or disable pertinent link and style elements on the page. However, you're asking about disabling author styling for specific elements only, so scratch that. If you're OK with your changes reaching most but not all visitors, you could write a JavaScript routine that would seek out and remove style sheet rules that specifically targetted a particular element. However, the problem is complicated by the fact that an element is often styled by rules that refer not merely to it alone but also to others with the same selector pattern (nodeName, class, or ancestry). How can we zero the styles for one such element and not the others? One strategy might be to programmatically change an element's nodeName, id, and/or class so as to produce a new, unique element that isn't covered by the author style sheets at all, then adding style rules for the new element. Again, this could be done by intercepting the markup either server-side or client-side, the latter reaching a majority but not the totality of visiting UAs. Since removing styles is so problematic, I'm guessing that you'll probably settle for the much simpler alternative of setting an element's styles to known base values such as margin: 0; padding: 0; etc. This approach does not remove author styling from the equation leaving browser and user stylesheets in place, it potentially overrides them all. One technical challenge here is how to add your zeroing-out rules with great enough specificity that they trump all other rules in the parent stylesheets. You could try to bludgeon your way through that using !important but that can wreck a lot of furniture in a roomful of nested elements. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.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 selector narrowing
On 4/04/2010, at 8:05 AM, Ingo wrote:
Is there a way to select first-level
ul li only? I ask for the first selector here:
# specific whitlist
.container ul li, # make it first level only (don't select if
wrapped)
At 4/3/2010 02:23 PM, Tim Snadden wrote:
You could use a child selector for this... e.g.
.container ul li { background: url(bullet.png) left 5px no-repeat; }
.container div ul li { background-image: none }
If you want to specify only the top-level list items in the top-level
list, I believe it should be:
.container ul li {}
Omitting either will apply the rule to any descendant list item.
Without using child selectors (to accommodate older browsers), I
don't see any way to do it but:
.container li
{
background: url(bullet.png) left 5px no-repeat;
}
.container li li
{
background-image: none;
}
Regards,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.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] Basic doubt: align - text - font
At 3/3/2010 11:23 AM, Thierry Koblentz wrote: fwiw, I don't think this is tabular data. I'd go with a Definition List. Initially that's what it looked like to me. But then he turned it sideways, and made it look like a group of THs and TDs. imho, the way the OP presented the data has nothing to do with the markup that should be used. This is a CSS list, we should know better ;-) List, table, it makes no difference in my opinion. Relevant points might be: - How do you style DT-DD pairs side by side? I guess you could use negative margin-tops to bring each DT up to the original y-level, but that feels hackish and could easily break with text-only zoom in a fixed-width container. - I don't think tables are simpler markup than divs or lists. To the contrary, they minimally use the same amount of markup table div tr div td p or they use much more if one properly includes thead tbody. - The simplest markup is not always the best, and I would ask the original poster to consider the best or most semantically appropriate ways to mark up the content, not the simplest. - The most practical way to present them side by side is to enclose each head/datum pair in a wrapper or use a table. This eliminates definition lists and leaves us with UL and TABLE. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.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] Floating to bottom-right of content : yet possible ?
At 2/16/2010 09:04 AM, jeffrey morin wrote: On Sat, Feb 13, 2010 at 4:29 PM, Philip TAYLOR p.tay...@rhul.ac.uk wrote: I would like, for design reasons, to float an image to the bottom-right of a page's content (which will be textual by the time we reach bottom right). You could try something like this. http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm it would require you cutting up your image but it looks like you can get the effect you want. I would avoid putting relevant content into your footer. This solution is essentially the same as I had suggested on February 13th, pushing an image down the page a given amount. If you change your browser zoom to text-only and enlarge the text, the image stays put and the text flows below it, breaking the solution. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.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] Floating to bottom-right of content : yet possible ?
At 2/13/2010 01:29 PM, Philip TAYLOR wrote:
I would like, for design reasons, to float an image
to the bottom-right of a page's content (which will
be textual by the time we reach bottom right).
Although I don't have an immediate solution for
your exact problem, I can point to a solution to
a similar problem that might lead you in the
right direction. This particular implementation
requires that you know in advance the distance
from the top of the container to the top of the
image, so you'd have to modify it significantly
for your purposes. You could express that
distance in ems but the vagaries of wrap-around
would ultimately defeat that in extended text-zoom.
The Wiñay Taki Ayllu website
http://winaytaki.org/ (under development)
contains bilingual text in two columns, with
images floated centered between them at various
distances down the page. The specifics of this
complete floated centered technique go beyond
your question, but here's the core idea for a stand-alone column:
Pairs of objects are floated right: first a
one-pixel-wide div and then an image:
__
div class=descent/div
div class=image-frameimg src=example.jpg alt=example //div
pText begins here.../p
__
div.descent
{
clear: right;
float: right;
width: 1px;
height: 200px;
}
div.image-frame
{
clear: right;
float: right;
}
__
The descender pushes the image down the desired
distance without appearing to occupy noticeable room in the flow.
I hope this gives you some food for thought as you chew this one over...
Regards,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.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] Train wreck in IE6
At 2/6/2010 10:09 PM, Kym Costanzo wrote: Could you be more specific about the HTML errors? I did validate the HTML, but the only errors I got were regarding the drop-down menu that I am asking for help with. I can't fix those, as I don't know what I can do differently with that menu. The validation errors have to do with the IE6 hack. Kym, you're making a simple typographical error in the HTML comment syntax. Your source code reads: ...![if gt IE 6]/a![endif]!--[if lte IE 6]tabletrtd![endif]--... For each list item, the first IE conditional comment should be correctly embedded in an HTML comment: ...!--[if gt IE 6]/a![endif]--... Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.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] horizontal, variable height nav bar. Doable with display: table?
At 2/3/2010 09:56 AM, Troy Harshman wrote:
If I'm understanding correctly, you want each item in your menu to
have the same dimensions. You would just need to add height and width
then. Such as...
#nav-menu a {display:block; height:30px; width:60px;}
If you want them to grow with changes in browser text settings than
you would size then using ems or percentages. If your navigation isn't
using any pop-up or drop-down menus, then you generally don't need
JavaScript unless you're doing something out of the ordinary.
Of course the big problem with vertical dimensions is that plain text
is, for practical purposes, unpredictable when it enlarges via
text-only zoom within a confined width. At some point during
enlargement, multi-word text will wrap around; at exactly what point
it wraps will depend on the font the browser uses to render it,
something you can suggest in the stylesheet but not control. Even if
you set your block heights in ems to enlarge with the text, the
framework will break when one of the menu items wraps -- if it's
inside a container whose width does not expand equally with the text.
Solutions that I'm aware of include:
1) Don't let the text wrap. This means not containing it in a
fixed-width block (setting the container's width in ems). This might
mean a) allowing the menu item blocks themselves to wrap so that very
large text will produce a multi-row menu or b) allowing the menu to
widen past the viewport margin creating a horizontal scroll. I really
dislike inflicting horizontal scroll so I prefer a).
2) Mark up the menu in a table or style it as a table to take
advantage of the cells on one row maintaining a fixed height. You
will still have the problem of keeping the anchors a consistent
height; block elements naturally fill their containers horizontally
but not vertically. You can assign the hyperlink href to the table
cell td itself in HTML5 or using JavaScript, and fall back to
different-height anchors for others.
3) Use client-side scripting to adjust all the anchor heights when
text size is changed, and fall back to different-height anchors in
user agents in which scripting is not running.
Regards,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.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] Keeping the footer at the bottom
At 1/19/2010 02:28 AM, Rachel Mawhood wrote: This might help http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page The original poster wasn't asking for sticky footers, he was asking how to clear a float so that his footer sat neatly at the bottom of his longest column. While we digress, however, the sticky footer solution I've found works best is the one published by Cameron Adams a few years ago: http://www.themaninblue.com/writing/perspective/2005/08/29/ Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://www.juniperwebcraft.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] :: page review :
At 10/5/2009 06:42 AM, David Laakso wrote: The initial specs for this proposal call for the 10-item top horizontal navigation. The clinker is it needs to be functional in Blackberry and iPhone as well. Turning the nav to block for handheld is not a problem. But, seems to me, it will present the user with something akin to leaping the Great Wall of China inorder access the primary content. Why not start out with a 'jump to main content' hyperlink, perhaps shifted off-stage but then made visible to handhelds? Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.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] top nav tabs - distorted on laptop?
At 7/9/2009 03:23 PM, Greg Wilker wrote: I just noticed that the top nav tabs are distorted on my laptop with IE8. They work fine on my desktop with a widescreen monitor and they are working fine in FF of the laptop. http://www.achildsdream.com/htn/design3/index.html Anyone know what might be happening? (They are dropping off, or below the div) I wouldn't think this would have anything to do with the type of PC you're using, only the type of browser, its settings, and the window dimensions. The page initially came up fine for me in IE8 (on my laptop), but I was able to get the menu to wrap by increasing text size beyond Medium. It did not wrap when I increased zoom or decreased window width. In Firefox if I turn on Zoom Text Only and increase the size, the menu wraps. Also in Firefox if I turn off text zoom but increase zoom, the rightmost menu tab (View Order) wraps around, then flips back up, then flips back down, etc., with successive increases of size. In my experience this often results from rounding fractional widths and might be cured if you allowed at least one pixel of free space in which the menu can flex, so to speak, as it's enlarging. I see from the source that you're couching your page elements in table cells (ick), so the rounding in this case probably arises from the browser's attempt to fit the table in the allotted space as zoom increases. The menu might increase a fixed number of pixels per zoom notch, but if the table cell width is computed as some fraction of the total table width then any increase of table width that doesn't divide evenly among the cells in the row may result in zero increase in the cell containing the menu, forcing the menu to wrap. Personally I would strip the table markup out of this page and rely on simpler markup slightly more complicated styling to arrange things the way you want. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.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] Some see the style sheet and some don't.
At 6/26/2009 10:53 AM, tedd wrote: http://sperling.com/examples/audio-captcha/ Can anyone tell me why the style sheet here is seen in most browsers but not in *some* versions of Safari and FireFox for the Mac? It's interesting that Opera for the Mac and IE6, 7, and 8 doesn't have any problems seeing the style sheet. What gives? Hey Tedd, This might be related to your problem: When I bring up the stylesheet http://sperling.com/examples/audio-captcha/style.css in Firefox it displays in one lump without honoring carriage returns. Did you save that file in an unusual way or are you serving it with an unusual MIME type? Firefox tells me it's saved with UTF-8 encoding. Are you using a Mac? I wonder if it would help if you began it with a charset declaration, e.g. @charset utf-8; Curiously, Paul __ 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] Some see the style sheet and some don't.
At 6/26/2009 11:31 AM, tedd wrote: with my site I have to declare the Content-Type in all my style sheets. Could you explain that? I've never encountered that necessity before. Paul __ 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] Listings ol and li spacing
At 6/22/2009 01:51 AM, BobSharp wrote:
http://ttphp.open.ac.uk/~bs3578/test1/Week07_05-01.php
BobSharp wrote:
How would you decrease the inherant spacing between
headings on ol: lines and the listings on li: lines ?
To begin, clean up your markup by removing the BReak tags from
between your LIs.
1) XHTML doesn't permit any children of a UL except LI.
2) Avoid using markup to force presentation. Instead, use CSS.
3) LI is by default a block-level element, which means that HTML
lists render vertically by default, so you don't need to force the
list items to render on separate lines.
(If you had styled them as inline or floated so they wanted
to render on the same row, there are better ways of forcing them into
a vertical list than by inserting break tags, even in legal
positions. But you're not creating that situation so all the break
tags are doing (other than invalidating your markup) is increasing
vertical spacing between your unordered list items.
The W3C HTML Validator is your friend:
http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fttphp.open.ac.uk%2F~bs3578%2Ftest1%2FWeek07_05-01.php
The answer to your question is that you can use top bottom margin
and/or padding in your stylesheet to modify the default vertical
spacing between various elements.
Your list markup is:
ul
lih4Surname/h4
ol
li
...
If it's the vertical space between the surname heading and the list
below it that you want to decrease, I'd decrease the margin-bottom on
ul h4 and/or the margin-top on ul ol.
To replace the break tags I've suggested you remove, simply give each
ul li a margin-bottom of 1em or whatever, then counteract that with
ul ol li {margin-bottom: 0);
Regards,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.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] Listings ol and li spacing
At 6/22/2009 03:12 AM, Tim Snadden wrote: On 22/06/2009, at 9:43 PM, Paul Novitski wrote: 3) LI is by default a block-level element, It's probably worth mentioning that the default display property of 'li' is list-item, not block. That's not to take away from the rest of the advice though. I was referring not to li's display property but rather to the fact that it's normally a block-level element. To quote the old spec: 9.2.1 Block-level elements and block boxes Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). Several values of the 'display' property make an element block-level: 'block', 'list-item', and 'run-in' http://www.w3.org/TR/CSS21/visuren.html#block-boxes Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.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] Footer doesn't stick to bottom of page
At 6/19/2009 01:35 PM, Norman Fournier wrote: If anyone knows a way to effect both the footer staying anchored to the bottom of the browser window and/or appearing at the end of the text, that would be fantastic, or is it a choice of one or the other? I've used Cameron Adams' solution several times successfully: footerStickAlt: A more robust method of positioning a footer by Cameron Adams http://www.themaninblue.com/writing/perspective/2005/08/29/ ...the Web page footer to be positioned either at the bottom of the browser window or at the bottom of the Web page whichever is visually lowest. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.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] Weak layout
At 6/6/2007 09:57 PM, David Laakso wrote: A good structural test for a layout is that it should hold without breaking, overlapping, or float dropping at +2 font-zoom in the Gecko browsers. I've never understood the sense of that criterion, e.g. the page should survive two [or three] font size enlargements. Doesn't that depend entirely on what size the smallest font on the page is? If my vision were so weak that I needed to enlarge text to 1/2-inch type on the screen, it wouldn't matter whether that required one click or ten, I'd still need it to become that large. It's not the number of enlargements that's relevant, it's the size of the resulting type. Let me know if I'm missing something there. What I don't know is if there's any kind of a minimum font size that we should ensure our readers can achieve. I doubt that there is one, given the variation in vision impairments, but I'll be curious to know what others think. I apologize if this is considered to be off-topic; it's an accessibility point, but in my mind very pertinent to styling. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hover technique
At 5/22/2007 03:37 AM, Terry O'Leary wrote: I have an ul acting as a menu (so each li in the list is wrapped in anachor), next to that I have a div containing a jumble of words. What i'd like to do is when I hover of the list item some text in the jumble words change color so they stand out of the jumble, any body got a pure css solution for this, i've included some example code below, i'm thinking some spans in the jumbled words and some way of changing color on a:hover ? Terry, CSS :hover exerts its effect 'inward' in the DOM, that is, it's only the children and other descendants of the anchor element that can be affected by the event. It's certainly possible to affect blocks of text that *look like* they're outside the anchor by way of absolute positioning -- see Eric Meyers' demo 'Pure CSS Popups' http://meyerweb.com/eric/css/edge/popups/demo.html. Here's an example from my own portfolio http://eileengunn.com/: hover over the images in the navigation menu and the corresponding sub-menu text brightens. (If I reproduced this today I'd make it resizable, but it does illustrate the basic technique.) Similarly in your case, I see all the 'popup' text as visible at all times and then change on hover, however if those words were positioned absolutely they wouldn't be part of one another's flow, therefore: 1) you'd have to pre-position each word as you would an image, planning in advance their respective sizes and positions; 2) if the words grew in size in response to hover, the word-wrap of the whole cluster wouldn't naturally change; and 3) to make it work with text-resizing you'd need to size the container for the word cloud in ems so that the wrap didn't need to change with text-resizing. So I'm seeing this sort of markup: ul lia href=*ANNUAL REPORTS span id=t01DEDICATED TEAM FOR EACH PROJECT/span span id=t02TYPESETTING/span /a/li lia href=*NEW MEDIA span id=t03CREATIVE/span span id=t04CONCEPTS AND DESIGN DEVELOPMENT/span /a/li ... /ul Then position each of the text blobs absolutely (or relatively?) somewhere beneath or beside the list. You could definitely pull it off if you could control the environment in which the word cloud sat. It would be a little picky if you had to pre-measure each phrase in ems, but if the word cloud doesn't have to change frequently, that solution doesn't sound impractical. Of course, using javascript you can make an event affect unrelated elements anywhere on the page, but personally I think it's cooler when we can pull this off without scripting. One advantage of scripting it is that the markup would be more intuitively obvious -- the word cloud would be separate from the menu, each phrase in the cloud wrapped in a span linked by id or class with the menu item to which it belongs. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hover technique
At 5/22/2007 10:15 AM, Mauricio Samy Silva wrote: I hosted a test case showing a possible solution: Please, look at: http://www.maujor.com/temp/css-d/hover-effect.html Mauricio, this technique as you've used it here doesn't survive text-resizing, but it looks like that can probably be corrected by setting block heights in ems to prevent them from colliding. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two images side by side
At 5/20/2007 11:39 PM, [EMAIL PROTECTED] wrote: Do you also have a suggestion for the solution of the original poster's problem? As I keep saying, it depends on what the OP really wants as the final effect. He said: At 5/19/2007 09:08 PM, Kevin wrote: I have two images that I would like positoned side by side. I have setup a mouseover effect on image#1. After setting up this effect the images are now lined up one ontop of the other. How can I position the images side by side and still keep the effect on image#1. Here is a link to my code. http://www.precisemessenger.com/private/help2.html What does he mean by still keep the effect on image#1? The effect that's evident on the cited page is that a large image replaces a smaller one. The way he's styled it, the enlargement of image #1 overlaps the smaller image #2. My guess, in the absence of further elucidation from the OP, is that he wants both images to remain fully visible when one of them is enlarged. If so then this requires a change in fundamental design strategy that precedes detailed markup decisions. The myriad possibilities include: - position each thumbnail in a space large enough that its large version doesn't cover up or displace any other thumbnail. - display each large image on a page separate from the thumbnails. - display each large image in a window distinct from the one containing the thumbnails. - display each large image in a movable block so that the user can move it aside to click on the other thumbnails. - display each large image in a block that disappears on the next click revealing the other thumbnails. There are a ton of ways to deal with this kind of situation. We can't really make useful suggestions until the designer tells us what the design criteria are. None of the cases I've suggested here mandate any particular markup decisions, tables or otherwise. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two images side by side
At 5/21/2007 05:23 AM, jana coyle wrote:
What I am looking for is to have image#1 and image#2 horizontally
next to each other
on the same line. I want the mouse over large image 1 to overlap
both image 1 and
image 2 without displacing them.
Kevin,
The reason your images aren't side-by-side is that you've contained
the first one in a DIV: (your markup reformatted here for ease of reading):
p
div id=magnify
a class=p1 href=#nogo
img src=images/image1.gif
title=Thumbnail image alt=Thumbnail image /
img class=large src=images/image1large.gif/
/a
/div
img border=2 src=images/image2.gif width=290 height=290
/p
A DIV is by default a block-level element and therefore will act like
a pararaph in starting a new row. See:
CSS 2.1 Specification
9 Visual formatting model
http://www.w3.org/TR/CSS21/visuren.html
I made a quick tweak to your markup and styling:
http://juniperwebcraft.com/test/jana-coyle-help2.html
_
a class=p1 href=#nogoimg src=images/image1.gif
title=Thumbnail image alt=Thumbnail image /img
class=large src=images/image1large.gif//a
img border=2 src=images/image2.gif width=290 height=290
_
- I've removed the DIV from around the first image. (I could also
have changed that div to {display: inline;} but removing it seemed simpler.)
- I also removed the P that enclosed the two images which also seemed
to be extraneous.
- I removed the magnify span from around the hyperlinked images,
since the anchor element by itself serves as sufficient wrapper.
Here's the CSS I added:
_
/* ensure enough room for the large image */
div#center
{
height: 500px;
}
/* define the bounds of the large absolutely-positioned image */
a.p1
{
position: relative;
}
/* remove the large image from display */
a.p1 img.large
{
display: none;
}
/* display the large image on hover */
a.p1:hover img.large
{
display: inline;
position: absolute;
left: 0;
}
_
Tested in Firefox 2 IE 7 (Windows).
Regards,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How do you create this multicolumn dropdown menu?
At 5/21/2007 07:38 AM, John Lee wrote:
Does anyone know how to create the dropdown menu on this site
(rollover the Artist selection in the main nav):
http://www.islandrecords.com
I'm guessing that this is some sort of styled/modified suckerfish
dropdown but I haven't been able to find out how to do it. If anyone
can provide some direction that would really be great.
If you view the JavaScript-generated source, for example using the
Firefox web developer toolbar [1], you'll see that they're using
scripting to display a block of HTML that's set to be invisible in
the stylesheet:
#aa_nav {
...
display: none;
...
}
When you hover over this element:
a href=current_artists.php class=nav_item id=n2
onmouseover=ir_showAaNav() onmouseout=ir_startHideAaNav()
Javascript changes this element:
div id=aa_nav
to this:
div style=display: block; id=aa_nav
The injected inline styling takes precedence over the external
stylesheet in the cascade.
[1] Web Developer Toolbar by Chris Pederick
http://chrispederick.com/work/webdeveloper/
Regards,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two images side by side
At 12:08 AM -0400 5/20/07, Kevin wrote: I have two images that I would like positoned side by side. At 5/20/2007 05:11 AM, tedd wrote: I don't see anything wrong with using a simple table for this. Tedd, I see the question the other way around: Why would you choose to use markup that's mismatched to the meaning of the content? Purely in order to get a desired presentational effect? Ah. Well, either you believe that the semantic integrity of the markup should take priority over presentational convenience or you don't. What's the problem? It's not as though anyone will *actually* shoot you for driving your markup from your presentation... I doubt that you really believe that these two anonymous images constitute tabular data -- you're just squinting so they look like that because you find it convenient to use table markup. If you believe they're data cells that semantically belong in two different columns and then the client changes their mind about the presentation and decides they should go one on top of the other, would you suddenly start believing that they were data cells that belonged in the same column? What happens, for example, when next month the number of images increases and they won't all fit on one row? Do we suddenly 'realize' that all along they belonged in separate rows and columns? Shouldn't our markup decisions be driven primarily by the meaning of the content rather than by presentational circumstance? Anyway, the particular case at hand is a weak excuse to rehash this old argument. There's no need to use table markup merely to position two images side by side. For starters, images are inline by default and will normally present horizontally unless constrained otherwise. Depending on the final effect the designer is after, there are a variety of markup and styling alternatives to explore before shoe-horning those images into table cells. Of course, semantics aside, one of the main practical reasons not to use tables for layout is that doing so constrains future redesign so much. If the markup is versatile and CSS controls presentation, it's possible to change one's mind about the presentation less painfully. Tables are not presentationally versatile. They're perfect for tabular data that inherently belongs in rows and columns; for anything else, it's like choosing rebar and concrete to build something we know perfectly well from past experience is likely to be redesigned. This seems like a good application of Occam's razor -- why complicate the situation more than it requires by using inappropriate and presentationally rigid markup? This topic has been discussed so exhaustively over the past few years, I'm frankly surprised you're raising it again here as though it were new terrain to be explored. And here, like the predictable fish, I've risen to take the bait! Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two images side by side
At 5/19/2007 09:08 PM, jana coyle wrote:
I have two images that I would like positoned side by side. I have
setup a mouseover effect on image#1. After setting up this effect
the images are now lined up one ontop of the other. How can I
position the images side by side and still keep the effect on
image#1. Here is a link to my code.
http://www.precisemessenger.com/private/help2.html
The large version of image 1 is overlapping image 2 because you're
applying {position: absolute}. If you keep position as static or
absolute this problem won't occur unless you force it.
(By the way, in both Firefox 2 and IE7 (Windows) the images aren't
side-by-side, they're one on top of the other. I don't know if you
misspoke or if you're looking at them in a very different browser than I am.)
How you should style this will depend on how you want it to look when
each image is enlarged.
Regards,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Max amount of # Divs
At 5/16/2007 04:03 PM, Phil Turner wrote: I'm designing a page in Illustrator and drawing the divs over the top to work out the page structure ( I'm a visual person) this seems to create the basic : Header, 3 columns in the mid section and a Footer. Now here's the question: Do I carry on putting divs inside divs to put some structure and position to the typography, up to a certain limit ? and then fine tune by apply padding and margin to the text. Whats the best approach? I say use as few HTML elements as possible to mark up your content to support its meaning and its layout. That applies to DIVs as much as to anything else: use them only when necessary. Unless you're so familiar with HTML CSS that you can mark up and style pages with your eyes closed, you probably won't be able to anticipate how many divs it will take to accomplish a typical complex layout until you actually mark it up. To take this a bit further... Personally I think the best pair of mockup tools for web work are a simple text editor and a browser. As you build the page, apply a simple, unique background color to each major container. That way you can quickly easily watch your page come together in a realistic model = the final medium! Illustrator, Photoshop, InDesign, and other tools are seductive because they can give a highly polished mockup, but they're frequently misused for web page mockups. For example, designers nearly always apply anti-aliasing to text, resulting in mockups that look better than the HTML results and leading clients to unrealistic expectations and ultimately disappointment in the final HTML work. Perhaps more importantly, those tools provide only one still shot of what will actually be a stretchable canvas, expandable text, an animated movie. People who are really good with those rendering tools brag about how fast they can use them to produce a mockup, but when you consider that what they produce is only one frame of a feature-length film it down-shifts the efficiency of the tool at least an order of magnitude. I suggest that rendering programs like Illustrator be used for print design where there's a one-to-one correlation between what they produce and what we expect of the final product. There simply is no existing tool that can mimic the complications and convolutions of HTML markup and CSS styling accurately except for HTML and CSS themselves. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Document order versus design breakpoint
At 5/6/2007 12:43 AM, Dave M G wrote: I have a div that contains the main body of content. I have a menu for navigation. For the layout, I'd like to have the menu appear as a horizontal set of links above the main content div. In the current layout, the menu has an absolute position, and is oriented to the top right of the viewport. off-topic: Is this necessary? When you enlarge the text size, don't the menu and the content overlap? If the menu weren't absolutely positioned, it would simply push the content down normally as it enlarged. ... If my menu is to be relatively positioned in the layout, and appear above the content div, then it needs to be in the HTML code before the content. My understanding of good usability requirements for the flow of HTML code is that navigations menus should go below content. That way people with screen readers or non-CSS don't have to move past repetitive content after each page load. Would it help if you positioned the content N ems from the top of the page so that as the menu enlarges the content moves down? That approach can't accommodate the unpredictability of word-wrap, but it might help if a) you keep your menu on one row or b) the user doesn't enlarge too much. Alternatively, I'm under the impression that skip-nav links are a commonly accepted strategy. That enables you to place the menu before the content but still not force anyone to read through it. If your menu is so large that viewing the page without CSS pushes the content below the fold in, say, 800x600, I suggest that your menu might be unnecessarily large. Does it include sub-menus for each section of the site? In recent years I've moved away from the attitude that one should be able to navigate to any page of the site with a single click. Asking the user to click to drill into the site tree isn't really so egregious, and simple menus create a relaxed atmosphere in which the user can visualize all the options at any one time. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] gettting a radiogroup to display horizontally?
At 4/29/2007 03:08 PM, Ross Hulford wrote:
Any ideas how this is done?
The most common ways to present blocks horizontally is to set
{display: inline} or {float: left;} (assuming a left-to-right language flow).
input and label elements are naturally inline, so I'd expect them to
display horizontally unless styled elsewise. If you enclose each
radio button in div, p, li, or another block-level element, you can
override the default by applying {display: inline} to the container.
Regards,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertically Aligning Text in Division - IE 6 Problem
At 4/27/2007 03:28 PM, Lori Lay wrote:
I would like to vertically align and centre some text at the bottom of a
division.
...
div id=footer
div id=footwrap
pHere is the text I want to centre on the bottom/p
/div
/div
CSS:
#footer {
text-align: center;
position: relative;
width: 100%;
height: 50px;
clear: both; }
#footwrap {
position: absolute;
bottom: 0; }
Here's the problem: the text is properly aligned at the bottom of the
footer, but only the start of the paragraph is horizontally centred. As
you can see, I am using text-align: center to centre the text. This
doesn't work in this case (in IE 6 only). The start of the paragraph is
correctly centred, but not the whole thing. So in my example above, the
word Here seems to be centred, but not the entire line.
According to the spec [1] text-align should be inherited, so perhaps
you've stumbled across one of the many spots where IE6 drifts away
from the spec either deliberately or buggily.
I would try applying centering to the paragraph itself with #footwrap
p { text-align: center; }
You might also be able to diagnose the problem more clearly if you
apply a background-color to the paragraph. Does that show that the
first line is centered and the others are flush-left?
[1] CSS 2.1 Specification : 16 Text : 16.2 Alignment: the 'text-align' property
http://www.w3.org/TR/CSS21/text.html#alignment-prop
Regards,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertically Aligning Text in Division - IE 6 Problem
At 4/27/2007 04:04 PM, Lori Lay wrote:
[EMAIL PROTECTED] wrote:
If you change your CSS to the following it will work.
#footer {
height:50px;
position:relative;
}
#footwrap
{
position:absolute;
bottom:0;
width:100%;
}
#footwrap p
{
text-align:center;
}
I got this reply off-list. Changing the code as suggested above and
adding left: 0; to #footwrap worked like a charm.
Another principal at work here is that IE applies text-align not just
inline elements but to block-level elements as well. So, for
instance, a standard way to center a block cross-browser has been:
div id=parent
div id=child
[content...]
/div
/div
#parent
{
/* center child in IE */
text-align: center;
}
#child
{
/* center child in compliant browsers */
margin: 0 auto;
/* don't center child's contents (correction for IE hack) */
text-align: left;
}
Regards,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] shadow over gradient
At 4/26/2007 02:35 PM, Shelly wrote: http://anekostudios.com/test/partial_ss.jpg This one is how I have it currently, with transparent PNG images. I like how this looks, and if I *have* to use a script to get it to work in IE6 and lower, then I will - but I'd *really* like to avoid it. ... So I'm just wondering if there's a way to accomplish this without a script, and with CSS? Shelly, you don't need javascript to work with PNGs IE6, you can use Microsoft's proprietary AlphaImageLoader filter in your stylesheet. Here's a site (in development) where we use pngs to drop a shadow on a textured background on every page: http://tm-athletics.com/ (The content column and the page background image are both centered, so widen shrink your browser window to see the shadow move against the background.) You can find explanations in the CSS-D archives: http://css-discuss.incutio.com/?page=AlphaBetaPngSupport Also try googling PNG +CSS Here are some other PNG support links I've bookmarked: http://homepage.ntlworld.com/bobosola/ http://positioniseverything.net/articles/dropshadows.html http://www.daltonlp.com/view/217 http://www.playingwithfire.com/test/pngbehavior/demo.html I'm stunned to discover that all of my AlphaImageLoader bookmarks in Microsoft's MSDN are broken [1] or come up as 'page not found' [2]. Is it possible that they figure that since they've released IE7 developers no longer need to support earlier versions of IE? Or maybe they've moved them someplace their own search engine can't find them? [1] http://msdn2.microsoft.com/en-us/library/ms532969.aspx [2] http://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] lists in blocks
At 4/17/2007 02:54 AM, David Sharp wrote: David Hucklesby wrote: On Mon, 16 Apr 2007 16:20:40 +0100, Ross Hulford wrote: I have an unordered list of 10 items [...] but I want to diaply it in block of 3 14710 258 369 Is this possible with css or any other method? Did you mean an ORDERED list? Anyway, check out the Wiki: http://css-discuss.incutio.com/?page=MultipleColumnLists Also the swag - http://www.alistapart.com/articles/multicolumnlists/ - or is this out of date now? I don't think the techniques I described in that article are in any way out of date, although I'm always hopeful that someone will add to the list of solutions. (I didn't contribute a separate link to my article in this thread only because the CSS-D wiki already links there.) If I could rewrite the version of this article that appeared in A List Apart I would emphasize that in practice I implement the methods that entail lots of classes or ids (such as my favorite, #6) programmatically using server-side scripting; I don't generally hand-code HTML for cumbersome markup that's so likely to change, but a number of readers were skeptical about these techniques because they assumed that they required hand-coding. (They can also be implemented by client-side scripting, with the usual sacrifice of support when JavaScript is disabled.) When and if CSS3 becomes supported by more browsers we'll be able to take advantage of its own multi-column module: CSS3 module: Multi-column layout http://www.w3.org/TR/css3-multicol/ and as discussed here: Introducing the CSS3 Multi-Column Module by Cédric Savarese http://www.alistapart.com/articles/css3multicolumn/ Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] better CSS option to group image/content
At 5/17/2007 06:56 PM, Bob Meetin wrote:
I commonly do something like:
.clear {margin: 0; padding: 0; border: 0; }
fieldset class=clear
legend class=clear/legend
img src=whatever align=right
pcontent content/p
/fieldset
fieldset class=clear
legend class=clear/legend
img src=whatever align=left
pcontent content/p
/fieldset
All this to keep images horizontally aligned with corresponding data,
be it left or right. Is there a cleaner way to do this with CSS than
fieldset/legend? Works great but seems like overkill. If I do this in an
ordinary div, if the image is large and there is not enough content it
just pushes its way out of the box. Missing something?
FIELDSET and LEGEND are intended for use with input forms:
HTML 4.01 Specification
17 Forms
17.10 Adding structure to forms: the FIELDSET and LEGEND elements
http://www.w3.org/TR/html4/interact/forms.html#h-17.10
Many people use the definition list for image/caption pairs (although
there's disagreement over whether an image and its caption qualify as
a term and its description; personally I don't have a problem with
the metaphor). Google CSS DEFINITION LIST GALLERY for many examples
and discussions.
You could also place an image and a paragraph in each list item of an
unordered list.
In any case you ought to be able to float the images right or left of
the captions with CSS rather than with inline presentational
attributes in the markup.
Regards,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS-based image map - IE7 is driving me insane...
At 4/11/2007 08:59 AM, Roger Gordon wrote: The image map on http://osebeni.dongshiworx.co.za/lodge/look_around.php displays fine in Firefox and IE6, but ... Roger, you're asking about IE7 compatibility and Ingo has solved that for you. I would like to comment tangentially on the user interface you've designed. The way it works now, rooms in the left-hand part of the floor plan display images that cover up the right-hand part of the floor plan. I think it would be a lot nicer (less disconcerting) if all the pop-up images displayed in the same place to the right of the entire floor plan instead of a fixed distance from the hovered-over list item. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE Transparent PNG Background (that repeats)
At 3/27/2007 12:41 PM, BJ Clark wrote: Anyone out there know of a fix for IE that allows repeating (repeat-x or repeat-y) transparent PNG background images? I have never heard of a way to force IE7 to repeat a PNG background image with alpha transparency supported. One work-around is to modify the DOM with javascript, inserting as many new elements as necessary to fill the necessary dimension, each with the same image as its background. Any javascript solution will of course exclude visitors with scripting disabled. Another approach that can work in certain circumstances is to create one very tall PNG for use in IE7 -- non-repeating but long enough to support vertical expansion for anticipated text-size enlargements. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Perfect font sizes across all browser - solved?
At 3/25/2007 02:01 PM, Lee Powell wrote: This weekend I've been working on a way of getting complete control over font sizes without IE's text-resize shrinking text beyond all readable sizes. What I discovered was: px - perfect control using px's to define font sizes, however prevents IE/Win from text resizing. em - almost perfect control using em, although when text-resizing in IE/Win to small and extra small can cause unreadibility. keywords - less than perfect control, however IE/Win never text- resizes smaller than 9px. So while playing around with various options, I discovered a way that we might be able to fix IE/Win's text-resizing problems while still having 'almost' perfect control over font sizes. My solution at presents includes: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; H3 - Heading Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi pellentesque interdum augue. Aenean a ante. Pellentesque ut nulla in dui lacinia ultricies. Nam nibh metus, venenatis nec, eleifend non, feugiat non, nibh. Maecenas commodo fermentum magna. Duis tincidunt viverra sem. Donec id orci. I understand the solution involves using javascript to achieve a solution, however when the document is viewed by browsers that do not support the DOM, it simply reverts back the 'small' keyword, which is only a fraction larger than the font-size we're defining in the javascript. So understandably, you'd select the closest size keyword to the default font-size you're allocating in the javascript. I believe the solution fixes the IE/Win text resizing issue, while providing control over our default font size. Hi Lee, I'd like to read and respond to your technique but I can't see any javascript in the source code for your email, presumably stripped out by virus protection or email client. Please post your example on a server and post its URL. Embedding examples of HTML and active javascript in email is probably always a mistake... If your technique depends on javascript, I suggest that it isn't merely browsers that don't support the DOM that won't execute it but also modern browsers with scripting turned off, whether by user preference, corporate mandate, or other reasons. I mention this merely to indicate that the population your technique excludes is probably larger than you imagine. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] setting width of a
At 3/19/2007 06:59 AM, Sandy wrote:
Another related question - is there a good way, once your link is nicely
tucked into a li of getting the background of the container li to
change colour on mouse over, instead of just the A background colour?
No -- that would require the ability to affect the parent of an
element. We can only affect elements and their descendants.
Here's a spiffy document that details the kinds of selectors you can use:
W3C CSS 2.1 Specification
5 Selectors
http://www.w3.org/TR/CSS21/selector.html
What you can do, however, is to style the link itself as a block
{display: block} and change its background-color on hover.
Right now I dodge this issue by just having the text colour change on
mouse over, but one day this bluff is going to get called!
Is a href=link.htmllilink/li/a acceptable?
No -- there can't be any elements between a list (OL or UL) and its
child list items.
HTML 4.01 Specification
10 Lists
10.2 Unordered lists (UL), ordered lists (OL), and list items (LI)
http://www.w3.org/TR/html4/struct/lists.html#h-10.2
The code:
!ELEMENT UL - - (LI)+
means that the only immediate children an unordered list can have are LIs.
Regards,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] align link in a paragraph
At 3/15/2007 01:13 PM, jeffrey morin wrote:
i have a box with 4 paragraphs in it. one paragraph has nothing but a link
which is 2 words long. my question is can i apply tex-align: right to that
link somehow without adding another class in my code.
i tried #divBox p a:link {text-align: right} and i tried #divBox a
{text-align: right} neither of those worked though. does anyone have a
solution
Try removing :link from your CSS rule and reduce your selector to simply
#divBox p a
You probably clicked on your link during testing after which :link no
longer applied. As the spec says, The :link pseudo-class applies
for links that have not yet been visited.
ref:
CSS 2.1 Specification
5 Selectors
5.11.2 The link pseudo-classes: :link and :visited
http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes
The rule #divBox p a will then apply to ALL links in ALL paragraphs
inside #divBox. If you need to target some links or paragraphs but
not all, you'll need to apply further ids or classes to get as
specific as necessary.
Aside, you'll get much higher quality feedback from technical
listserves such as this if you'll include the actual markup your
styling will apply to -- preferably by linking to an HTML page on a
server somewhere. A test page works fine if you can't link to your
live material.
Regards,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] align link in a paragraph
At 3/15/2007 01:46 PM, jeffrey morin wrote:
so it sounds like there is no way around adding a class to that paragraph
then?
Depends on your markup. Please post the contents of the div so we
can see what you're dealing with.
For example, if the link is the sole contents of the paragraph, you
could apply {display: block} to the link itself and have it center.
Paul
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] align link in a paragraph
At 3/15/2007 02:00 PM, Paul Novitski wrote:
For example, if the link is the sole contents of the paragraph, you
could apply {display: block} to the link itself and have it center.
At 3/15/2007 02:13 PM, jeffrey morin wrote:
so here is a test page. the display block worked but like the test says i
don't know why. any help explaining that?
http://www.melissagerstein.com/tests/link_align.htm
Here's how I understand it:
Two kinds of elements in CSS are inline-level (such as plain text and
anchors) and block-level (such as paragraphs divs). Inline
elements shrink to the width of their contents, while block-level
elements can have width exceeding that of their contents (and in fact
their default behavior is to stretch as widely as their own parents allow).
Centering makes sense only when the container is wider than the
contents. Therefore in order to be centered, text must be contained
by a block-level element.
If you've got:
a href=#This is text/a
the anchor is naturally inline and only as wide as the text it
contains. No centering effect can be perceived.
If you style the anchor {display: block} then in effect what you've got is:
a href=#
anonymousThis is text/anonymous
/a
in which the text is in an anonymous inline-level element inside a
block-level element. Because the anchor can now be wider than the
text, you will be able to see centering occur.
I strongly encourage you to read the W3C CSS spec. Parts of it are
dense but for the most part it's easy illuminating. The material
I'm referring to here is described in these sections:
9 Visual formatting model
http://www.w3.org/TR/CSS21/visuren.html
10 Visual formatting model details
http://www.w3.org/TR/CSS21/visudet.html
Regards,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] align link in a paragraph
At 3/15/2007 02:33 PM, jeffrey morin wrote: When you set a link to display: block, it becomes a block element. Block elements by default take on the full width of their containing element. So now, the text within the link is free to slide across to the right. but when you put text-align : right on a paragraph it works. and that text may not take up the entire width of the block right? That's because the paragraph is a block-level element. You can successfully assign any text-align value to a paragraph and see the text inside it shift accordingly. What you can't do is apply text-align to an inline-level element such as an anchor and see any effect -- unless you force the anchor to be block-level. Clear as mud? Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Language switching
From: Paul Novitski [EMAIL PROTECTED]
Here's an example of one technique that I
produced using English Japanese text:
http://laurietobyedison.com/WOJwords.asp?lang=EN
Every bilingual page on the site contains both
languages, with only one of them displayed at a time.
In the absence of javascript, the
Japanese/English toggle requests the current
page from the server with the requested
language selected (by specifying it in the body class).
With javascript enabled, the language toggle
simply switches the body class and the displayed language changes immediately.
At 3/5/2007 06:28 PM, Chris Chen wrote:
Could you elaborate a bit on what you mean by
switch body class with a simple example?
Hi Chris,
Here's one example of this technique. Plug the
requested language into the body class:
body class=langEN
or
body class=langES
then mark up language-specific strings in the page:
p class=langENThis is English/p
p class=langESEsto es español/p
Then you can style:
/* first hide all the language-specific paragraphs */
p.langEN,
p.langES
{
position: absolute;
left: -1000em;
}
/* now show the current language */
body.langEN p.langEN,
body.langES p.langES
{
position: static;
}
The body class can be changed either by a
server-side script while the page is being
constructed or by a client-side script while the page is being used.
In other situations, I use the body id class to
target styling rules to particular pages from within a global stylesheet:
body id=index
or
body id=about
then:
/* highlight the nav menu item for the current page */
body#index ul#nav li.index,
body#about ul#nav li.about
{
color: #F00;
}
Regards,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] containing floats
At 3/6/2007 10:55 AM, ron zisman wrote: http://www.ricochet.org/adv_buyer/new_tue.html can't seem to get clear on how to contain floats. One way to contain a floated element is to float its parent. Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Language switching
From: Paul Novitski [EMAIL PROTECTED] Every bilingual page on the site contains both languages, with only one of them displayed at a time. In the absence of javascript, the Japanese/English toggle requests the current page from the server with the requested language selected (by specifying it in the body class). With javascript enabled, the language toggle simply switches the body class and the displayed language changes immediately. At 3/5/2007 06:28 PM, Chris Chen wrote: Could you elaborate a bit on what you mean by switch body class with a simple example? Paul Novitski wrote: Here's one example of this technique. Plug the requested language into the body class: body class=langEN or body class=langES At 3/6/2007 01:08 PM, Erik Visser wrote: so for every language you have a seperate html file? No. I suppose that's a possible approach, but I never work like that. Most of the time I keep variable content in an SQL database and merge it with a template (providing the additional advantage of making it easy for a non-technical client to modify the text without mucking with the layout and styling). In any event I wouldn't maintain two marked up pages with different language text unless there were some overriding reason -- such as two languages being so different that they require different markup -- although, again, I'd still be inclined to keep the text in the database and merge it with two separate templates. If a round-trip to the server is used to switch language, each downloaded page instance can contain just one language. If you want to be able to switch language instantly, you have to download all texts in a single page and toggle between them dynamically. This would obviously get sluggish with long texts or a large number of languages. Although it's fun to be able to switch languages instantly, most multilingual sites don't require such immediate response time. Once a visitor selects their preferred language they tend to stay there. Downloading multiple texts when only one is needed seems needlessly inefficient. It might make a lot of sense in a language training website, for example, when the visitor can switch back and forth rapidly to check their own translation of a text with the one offered. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] setting width of a
At 3/6/2007 10:34 PM, Joel D Canfield wrote:
How can I set the width of the navigation on the right so each link is
the same width? Meaning, the background/hover effects, etc.
http://www.grassies.com/g/
Setting the width of a just doesn't seem to have any effect
whatsoever.
Check out the spec:
_
CSS 2.1 Specification
10 Visual formatting model details
10.2 Content width: the 'width' property
http://www.w3.org/TR/CSS21/visudet.html#the-width-property
'width'
...
Applies to: all elements but non-replaced inline
elements, table rows, and row groups
...
This property specifies the content width of boxes generated by
block-level and replaced elements.
This property does not apply to non-replaced inline-level elements.
_
In order to apply a width to an inline element such as A, you have to
change it to block:
#navlist a
{
display: block;
}
Now its width will naturally extend to the limits of its parent, so
you can apply the width you want to either the anchors or their
parent paragraphs.
Speaking of which... You didn't ask for critique of your markup, but
I can't help but suggest that you mark up your navlist as an
unordered list instead of a series of paragraphs in a div:
div id=navlist
pa href=/g/ id=currentHome/a/p
pa href=expo.aspExpo/a/p
pa href=links.aspLinks/a/p
pa href=about.aspAbout/a/p
pa href=faq.aspFAQ/a/p
pa href=contact.aspContact/a/p
/div
to:
ul id=navlist
lia href=/g/ id=currentHome/a/li
lia href=expo.aspExpo/a/li
lia href=links.aspLinks/a/li
lia href=about.aspAbout/a/li
lia href=faq.aspFAQ/a/li
lia href=contact.aspContact/a/li
/ul
Making this change might affect your styling slightly -- but not
enormously since both DIV UL and both P LI are naturally
block-level elements. The advantage of doing so will be to make the
content of your page just that much more structured.
Regards,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Language switching
At 3/4/2007 11:17 PM, Chris Chen wrote: I am help maintain a website that needs to support switching between English and Chinese languages (preferrably just by clicking on a button/link). Does CSS prescribe a recommended way to do such language switching? Thanks, Pai-Hung I would say yes and no. CSS provides a language pseudo-class (:lang) for indicating the language of an expression, for example when mixing two languages together on the same page: CSS 2.1 Specification 5 Selectors 5.11.4 The language pseudo-class: :lang http://www.w3.org/TR/CSS21/selector.html#lang However, the only behavior that CSS really supports for content switching is hover (known in javascript as mouseover). In order to get content to change on click you need either server-side scripting or client-side scripting or both. Here's an example of one technique that I produced using English Japanese text: http://laurietobyedison.com/WOJwords.asp?lang=EN Every bilingual page on the site contains both languages, with only one of them displayed at a time. In the absence of javascript, the Japanese/English toggle requests the current page from the server with the requested language selected (by specifying it in the body class). With javascript enabled, the language toggle simply switches the body class and the displayed language changes immediately. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Splitting a list into two columns
At 2/8/2007 03:25 PM, Seona Bellamy wrote: Creating a sitemap for a client and what they want is for the list to be as follows: 01. Section 1 - Sub-page - Sub-page 02. Section 2 - Sub-page - Sub-page - Sub-page - Sub-page 03. Section 3 - Sub-page - Sub-page etc... However, they also want ti split over two columns so that it doesn't end up just scrolling forever. Fair enough. However, since this is to plug into their CMS, I need to allow for a variable number of sections and sub-pages. I've had a search around, but so far all the examples I'm finding require knowing how many items are in each column or the height of each column. I have no way of knowing either. Is there a way of doing this that will allow the columns to stay more or less equal regrdless of how many items there are? Hi Seona, You probably do need scripting to accomlish this today. Although you can't predict the number of list items, a script can count them on the fly and shape the list accordingly. Although my first choice would be server-side scripting, you can also do it with Javascript if you don't mind the layout breaking when scripting is disabled. I would limit the script to plugging in ids or classes and let CSS handle the positioning. One method I like is to move the first item you want in column 2 up with a negative margin-top, and shift all items in column 2 over with positive margin-lefts. This lets the list flow normally as much as possible and avoids browser-related bugs that affect other CSS-based methods. See example 6 in my ALA article on the subject: http://www.alistapart.com/articles/multicolumnlists/ In these examples I show the list heavily marked up with class names. Of course these can be inserted on the fly and needn't be a part of your original markup. In your scripting logic I imagine you'll want to decide how to handle widows orphans so you don't strand a section title at the bottom of column1 or the last item of a section at the top of column 2. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] why won't my class change the font?
At 2/1/2007 02:12 PM, Scott Povlot wrote: The problem here is CSS specificity. Your .smallcaption class is overridden by the .article p which also sets the font size. If you change your .smallcaption to p.smallcaption or add another version such as .article p .smallcaption, your problem will be solved. Michael, here's where you can read up on selector specificity: CSS 2.1 Specification 6 Assigning property values, Cascading, and Inheritance http://www.w3.org/TR/CSS21/cascade.html Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can I move a TD vertically in relation to another TD?
At 1/30/2007 04:20 PM, Rob Stevenson wrote:
So, generically, the question is: can you use CSS positioning to have
two TDs in the same TR aligned vertically at different heights? If so,
how?
Like all other html elements, table components have default styling
that makes them render as they do.
If you apply td {display: block} the cells will act as ordinary
blocks (to some extent) and will stack vertically.
As I recall my last experiments in this area there are limits to how
much you can undo default table rendering, but this one seems to be easy.
Regards,
Paul
__
Juniper Webcraft Ltd.
http://juniperwebcraft.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners
At 1/30/2007 06:32 PM, Jonathan Carter wrote: I have to implement rounded corners throughout an entire site which includes many different size containers and elements. I'm looking to find the best/cleanest/easiest solution that I can easily implement site wide. I've looked at numerous examples/solutions and am confused as to which one is going to be the best suited for my situation. To get intelligent recommendations, you'll need to explain what your situation is. Resizability? Images? Transparent corners? etc. Regards, Paul __ Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is this a semantic use of the definition list?
At 1/24/2007 01:31 PM, Garth Jantzen wrote: I'm looking for a way to create a 'teaser box' you might call it, which would contain an image say, 80 x 80 floated to the left with a description floated to the right, both of which are wrapped in a box. The box is a link to my portfolio page. I want the background color to change on a mouseover. I currently have it set up as a definition list with a heading as dt image as dd, and the description as a dd. But because I want the whole box to be a link, is it semantic to wrap each 'teaser box' in an anchor tag? I want to use the a as a block element so IE users can see the hover. I would rather not use javascript to change the style. any thoughts on the semantics of my definition list? The first answer is No -- you can't wrap a DT/DD pair in an anchor. Try it and validate it to see. You can also consult the documentation: HTML 4.01 Specification 10 Lists 10.3 Definition lists: the DL, DT, and DD elements http://www.w3.org/TR/html4/struct/lists.html#h-10.3 My guess is that what you're looking at is an unordered list in which the LI is the container for your item data structure. If you want to enclose everything inside the list item in an anchor you can only use inline elements such as spans and images: 12.2 The A element http://www.w3.org/TR/html4/struct/links.html#h-12.2 therefore: ul li a href=xxx img src=xxx alt=xxx / spanDescription/span /a /li ... /ul Then use CSS to format these elements to your heart's content. Personally I don't quite understand why it's kosher to style an inline element as a block when it's in a markup context that only allows inline elements, but those more knowledgeable than myself have said it's OK. Regards, Paul __ Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] how to hyperlink a background image?
At 1/18/2007 09:39 AM, Peggy Coats wrote:
I was actually referring to the background image. I have the client
logo as a bg in the header div. What I wound up doing was putting a
transparent .gif there and linking that back to the home page. Many
people will click on a page logo to return to the home page, and she
wanted that on the site in addition to a text link.
Here's one way to do this:
h1
a href=index.php
spanAcme Widgets/span
/a
/h1
/* make the anchor a dimensioned block with background image */
h1 a
{
display: block;
width: 300px;
height: 100px;
background: url(logo.jpg) left top no-repeat;
}
/* apply a hover state for usability */
h1 a:hover
{
/* both normal hover images are contained in the same image file */
background-position: left -100px;
OR:
/* alternative hover image (doesn't load until hover event) */
background-image: url(logo-hover.jpg);
}
/* hide the text from visual user agents */
h1 a span
{
position: absolute;
left: -1000em;
}
This technique works well. Its main failing is that the logo doesn't
show if images are disabled. For that a foreground image with alt
text is preferred.
Combining both normal and hover images in the same file is a great
technique that obviates the need for preloading images and is
ultimately lighter: two images are heavier than one image twice the
size. Google 'CSS Sprites' for more on that.
Regards,
Paul
__
Juniper Webcraft Ltd.
http://juniperwebcraft.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] mousing over an unordered list and child list item broken
At 1/18/2007 12:44 PM, Ben Liu wrote: http://dev.gelatincube.com/jindo/ The problem: When you mouse over the left-most tab home, the tab should rise slowly and only return to its original position when you mouse out of the entire tab. Instead, the browser (tested on Safari, Firefox, IE6) detects the list item within the tab (unordered list) as being an object outside of the unordered list and considers this a mouseout CSS: Your menu items consist of an anchor nested inside an LI. Which element has been given the onmouseover behavior, A or LI? Are they styled to be the same size? If this points to the problem, I would style the anchor as a block and dimension it to contain its contents, and let the LI simply shrink-wrap around it. I suspect this is the problem because the 'home' item vibrates when I point to the word itself (the anchor text) but not when I point to the (presumably) larger surrounding LI. JS: Another potential problem area might be event propagation, in which an event occurring to a child also occurs to its parent, etc. Try halting event propagation as soon as it's detected. Regards, Paul __ Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] area:hover - why does this not work
At 1/15/2007 04:17 PM, Mark Finney wrote: Ok so I use a:hover and just assumed that it should work with an image map... am i wrong? FYI it is possible to create a pure CSS image map, as Stu Nichols has demonstrated: http://www.cssplay.co.uk/articles/imagemap/ http://www.cssplay.co.uk/menu/old_master.html http://www.cssplay.co.uk/menu/imap.html http://www.cssplay.co.uk/menu/mantis.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Weird Occurrence
At 1/15/2007 09:59 AM, Steve LaBadie wrote: One of our programmers is creating forms with PHP as backend. Most of the input fields (input type=text) have a background color of yellow and there are no styles applied. It happens in both IE7 and FF. All of the drop-downs are not affected. Any ideas? Input fields are INPUT elements while drop-down lists are SELECT elements. Maybe your stylesheet fails to include SELECTs. For better quality suggestions and critique, include with your posting links to a sample page and its stylesheet. Regards, Paul __ Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Loading Graphics
At 12/31/2006 09:46 AM, Donna [EMAIL PROTECTED] Business Connection wrote: For the life of me I can't find the code that you add so that all graphics will load first? I know there is such a thing. I want the background to load first when open a webpage. How can I do that? If you can ensure that a background image is already cached before the rest of the page downloads, it will probably be rendered before other uncached images on the page. Folks call this preloading and it's often done with JavaScript. If you google [javascript preload images] you'll find a ton of references. As has been pointed out it's off-topic for this list, but if you have questions I recommend the LaTech javascript list; see: https://lists.LaTech.edu/mailman/listinfo/javascript Regards, Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Making an anchor not clickable?
At 12/13/2006 11:10 AM, ~davidLaakso wrote: re: Making an anchor not clickable? I may not understand...but, a href=#home/a is still clickable in the sense that the page will flash when clicked. Personally, I think it should be dead in the water. In browsers I'm familiar with, href=# will jump/scroll to the top of the page if the viewport isn't already homed, so I wouldn't categorize that as inert markup. I would imagine that href= would more effectively cancel the link, or, of course, eliminating the anchor from the markup altogether. However, the original poster asked if there were a way to disable a link with CSS. I believe this is possible by positioning a transparent foreground GIF on top of the link, rather like a clear plastic shield over a button. The GIF would have to be in the markup, so semantically it might be seen as extraneous, but with a blank alt it should at least be semantically inert. Regards, Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Making an anchor not clickable?
At 12/13/2006 02:31 PM, Michael Stevens wrote: I'm not scared of JavaScript like a lot of people seem to be... :) I haven't yet figured out why anyone would want to stop javascript, flash, etc. from working when viewing the web... it's akin to wearing a ballcap, sunglasses, blinders, and looking through a pinhole camera to view the world. With some common sense it's not difficult to avoid online viruses (but this is an argument in itself). Would that work without changing the href=link.html to href=#? My only problem with that one is that it requires me to change the link on each page; the same as adding the GIF. Although, I guess I could have the GIF on each link and on the :hover attribute give it a higher z-index. Not a big deal, of course, but the original post was in hopes that CSS could make the link inactive. My idea was to mark up one GIF for the entire menu, then position it over the current link using CSS alone. That way you can use the same menu markup each time, just point to different links via the page id or class. If you're going to modify the menu HTML when each different link becomes current, you might as well just remove the anchor tag and forget the fancy dancing. I think you're right not to be afraid of javascript, but do be sensible: realize that any solution that DEPENDS on javascript will BREAK in browsers with scripting disabled, as is too often the case in corporate environments and in the general population. There's a whole school of thought around creating web pages that work for everyone -- then give some users a faster or nicer experience if they have certain features such as javascript available and enabled. Google unobtrusive javascript and progressive enhancement. From a development point of view, if you can get your page to do what you want without adding widgets, why add widgets? It's just more stuff for you to create and maintain and more stuff for your users to download. Personally I love javascript but I use it extremely sparingly these days. I've learned how to produce most of the effects that I used javascript to achieve with CSS and server-side scripting. Once I've provided a non-scripting solution, why supply a redundant solution using scripting unless it enhances the page? It's like replacing moving parts with solid-state components. The fewer gears and pulleys, the less can break. Regards, Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] margin: 0 auto and float dont work together
At 12/6/2006 03:27 PM, Mark J. Reed wrote: OK, so say I have a block element containing some floated items (say a ul containing li's which are floated so the whole thing will be horizontal instead of vertical). I want that ul to be centered within its parent element. But, in order for it to enclose its floated contents (without giving everything a fixed height), it has to be floated itself. Is there no way to do this? Are you declaring the width of the UL? If not, try that. (This is one of those wryrare/wry instances in which a posted demo page would help us help you.) Regards, Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Moving stuff to the right ?
At 12/5/2006 01:13 AM, Jan Erik Moström wrote: I'm trying to create a page header that should look like this -- | Page Header| Main | About | Blog | ... | -- But I always end up with -- | Page Header | Main | About | Blog | ... | -- In other words I don't understand how to get the menu to move to the right. The HTML code looks like this: div id=page div id=pagetop Page header ul class=sectionlist liMain/li liAbout/li liBlog/li liResearch/li liPhoto/li liCode/li /ul /div It looks like you want the menu to be flush right, letting the page header take up whatever remaining space there is at left. Therefore I'd float the page header left -- requiring that you put it in a tag (ideally h1 or h2 because of its semantic role) -- and float it left, then float the menu right and float its list items left. Among other things I've tried using float but that makes a mess of things ... What kind of a mess, exactly? Is the float problem solved by allowing your UL and LIs to remain a block instead of forcing them to be inline? Or do you simply need to clear the float(s) after the div#pagetop? Regards, Paul __ Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] horizontal scrolling
At 12/3/2006 02:55 PM, Stephen Oravec wrote: Is there any sites that scroll horizontal instead of vertical ? A common objection to horizontal layout is that it's not possible with today's browsers to jump to a local anchor to the left or right of the current cursor position (only above or below), making sub-content on a horizontal page even less possible to bookmark as content in sub-frames. I can't recall off the top of my head whether it's possible to scroll sideways programmatically with JavaScript, but even if so that wouldn't be a CSS solution. One way I can see to address this layout with CSS (plus server-side and/or client-side scripting to facilitate page navigation) would be to compress all the side-by-side panels to very narrow columns, opening up only the current panel to its full width -- rather like a book. But you might not find this idea appealing if you really want to explore horizontally *scrolling* content. Tangentially, one of the most effective uses of horizontal layout I've ever seen is the Flash aspect of Gregory Colbert's photography site http://ashesandsnow.org/ although quickly checking back there today it looks as though he may have abandoned it. It was a long horizontal page, topologically circular (left right edges connecting), in which mouse movements caused the page to scroll to the left or right revealing various photographs. It was beautifully done -- terribly inaccessible, but beautiful -- but then maybe I'm just a sucker for Colbert's exquisite photography. Regards, Paul __ Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Properly toggling the positioning of elements in a DD
At 11/22/2006 11:40 AM, Austin, Darrel wrote:
I'm using this very nice bit of javascript and CSS to create a
expandable/collapsible DL:
http://www.tjkdesign.com/articles/toggle_elements.asp
The specific CSS that is used to toggle the positioning of the DD is
this:
#TJK_DL .showDD {position:relative;top:0}
#TJK_DL dd,.hideDD{top:-px;position:absolute}
The problem I am having is that in IE6, I can't seem to get any nested
elements within the DD to also reposition.
I've had problems trying to position things above the viewport but
I've never had a problem positioning them to the left:
.hide
{
position: absolute;
left: -1000em;
}
Notice I'm using ems, not px, so the distance increases with the font
size, making it less likely the content will intrude into the viewport.
Something like this would be more foolproof:
{
position: absolute;
left: -Luu;
width: 1px;
overflow: hidden;
}
where uu is any length unit and Luu is any measurement large enough
to guarantee that the display will be forced off-screen. This
confines the content to a box that cannot come on-screen regardless
of font size. I imagine the same could be done using top height,
although I've had trouble getting IE to shift absolute children above
a relative parent.
Negative left positioning is not without its critics, but it's always
worked for me.
One problem with these techniques arises when the
absolutely-positioned child has a relatively-positioned parent and
the top or left rule is relative to the parent, not the viewport
itself. Measurements like -1000em or -px are hacks that work
with today's monitors but are not friendly to future monitors of much
higher resolutions. If we could guarantee that we're moving the
object relative to the top or left edge of the window, we could use
much smaller measurements (like 2px) with the overflow: hidden technique.
Regards,
Paul
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS popups - how to display in a different div to the anchor
At 11/16/2006 11:18 AM, James Ward wrote: I'm wanting to use a technique similar to Eric Meyer's: http://meyerweb.com/eric/css/edge/popups/demo.html My problem is that I want the popup text to be positioned in a different div to the anchor to which it is linked. Not using CSS alone. But with the help of client-side or server-side scripting to set the class or id of a common ancestor (such as body), CSS can then toggle the display of any page elements along with the linked anchor. One example: http://novitskisoftware.com/nsindex.asp Once javascript loads, clicking on a menu item changes the body class, changing which section of the page is displayed. The way I express the reason that CSS can't do this by itself is that CSS rules operate downward to descendants and not upward to ancestors or sideways to cousin elements. Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can CSS Help With This Design?
At 11/15/2006 04:33 PM, Robert Tilley wrote: I wish to produce a page with Header, Left, Center, Right, and Footer divs. There are templates aplenty that display these properties. My addition would be a Description div within the Center column. A hover menu would be in the Left div, with each item being a different topic. When a menu item is chosen, the description of that item would appear within the Description div in the Center div. One plan is to create an XHTML-Frameset document and divide the screen into frames which contain each component; Header, Left, Center, etc. This choice could, at best, be described as a crude solution. Without reloading the entire document with each menu selection, is there any way CSS can help me? When you say, When a menu item is chosen, I'll assume you mean click (mouse) or enter (keyboard). While CSS can help show blocks when elements are hovered over, I believe click-activation will, in addition to CSS, require scripting, either client-side (JavaScript) or server-side (PHP, ASP, etc.). For the hover approach, see Eric Meyer's little demo here: http://meyerweb.com/eric/css/edge/popups/demo.html Hover over the left-hand menu items and see the corresponding text blocks appear. For the CSS+scripting approach there are many examples, of which I'll humbly offer an old one of mine: http://novitskisoftware.com/nsindex.asp The page functions properly in the absence of javascript, but with javascript it operates immediately without the server trips. It works like a tab control: all the content is contained in a single page, but only one section is displayed at a time. The technique, described briefly in the About section, is to control the display of pagelets with the body class: first suppress the display of all pagelets, then permit the display of the one that matches the current body class. The body class can be set either by the server-side script that delivers the page or the client-side script that senses the menu click. Regards, Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 100% height minus 2em
This is likely one of those Gordian knots of CSS: how to combine percentages and ems in the same layout. I want to style a block that fills the vertical space of the viewport, minus the 2ems taken up by the header. How to express 100% - 2em in CSS? Before I fall back on JavaScript (or *gasp* table markup), I'd like to plumb the well of CSS community knowledge. None of the 100% height solutions I've found so far address this wrinkle. Here's an illustration of the layout I'm after, but 'cheating' by using a percentage for the header height as well as the content block: http://juniperwebcraft.com/test/PercentMinusEmsProblem.html Please understand that I'm not looking for a faux layout in which the eye is fooled, you know, by giving the content block 100% height and letting the header reside inside or overlay it with absolute positioning. Because my content block will contain a Flash object that will expand to the dimensions of its container, I need the container to truly begin at the bottom of the header. Thanks, Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 100% height minus 2em
At 10/24/2006 12:22 PM, David Merwin wrote:
Couldn't you use padding and negative margins?
div1 {height:100%; padding:2em 0 0 0;}
div2 {height:2em; margin:-2em 0 0 0;}
div id=div1
div id=div2/div
/div
On Oct 24, 2006, at 11:55 AM, Paul Novitski wrote:
http://juniperwebcraft.com/test/PercentMinusEmsProblem.htmlhttp://juniperwebcraft.com/test/PercentMinusEmsProblem.html
Please understand that I'm not looking for a faux layout in which the
eye is fooled, you know, by giving the content block 100% height and
letting the header reside inside or overlay it with absolute
positioning. Because my content block will contain a Flash object
that will expand to the dimensions of its container, I need the
container to truly begin at the bottom of the header.
Thanks, David, but as I said I need a container that is 100% - 2em
high, not a container that is 100% height and contains a 2em high
block. In my limited experience marking up Flash objects, Flash
expands to fill its container without regard to any other content
that might be there, so I really want that content box to be the
header's sibling, not its parent.
Regards,
Paul
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css list
At 10/22/2006 09:20 PM, Brian Jones wrote:
I have a 16px x 16px image that I want to set as the background image
of a li how would i go about setting my css to accomplish this
The simple answer is:
li#example
{
width: 16px;
height: 16px;
background: url(something.jpg) left top no-repeat;
}
If the LI also contains text (as perhaps it should, to provide
content in the absence of image support), what's the relationship of
the text to the 16x16 image? Is the text hidden? Does it lie on top
of the image? What happens to that relationship as the text
resizes? Defining the situation in more detail will lead to more
detailed solutions.
Regards,
Paul
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] positioning
At 9/21/2006 10:36 PM, raumin dehghan wrote: with regards to positioning, when you put numerical values for top, bottom, left, etc., what do these numerical values signify? Please begin by reading the CSS 2.1 Specification: 9 Visual formatting model 9.3 Positioning schemes http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme 14 Colors and Backgrounds 'background-position' http://www.w3.org/TR/CSS21/colors.html#propdef-background-position You can also google 'css position values' and get many useful references, such as: W3C Schools CSS position Property http://www.w3schools.com/css/pr_class_position.asp Regards, Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertically Center
At 9/21/2006 11:17 AM, Steve Craig wrote:
What do I need to add to this to get the pic to be vertically
centered in the div as nothing I have tried seems to work properly?
At 9/21/2006 11:23 AM, Kelley, [EMAIL PROTECTED] wrote:
.centerdiv
{
text-align:center;
}
The poster wants VERTICAL centering; text-align only affects
horizontal centering.
Setting line-height equal to the container height is one approach,
but there are others.
Steve, bookmark the CSS-D wiki, it will answer many questions and
point you to other resources:
http://css-discuss.incutio.com/
In particular:
http://css-discuss.incutio.com/?page=CenteringTextVertically
Regards,
Paul
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Examples of true pure semantic XHTML web sites using css?
At 9/6/2006 03:13 AM, David Dorward wrote: One of the major critisms of CSS Zen Garden is that it is laden down with vast numbers of divs and spans which are there solely to hook CSS onto. I find it hard to take seriously criticism that the Zen Garden page has too many tags! That would be like criticizing an actor for having too many colors of greasepaint in her kit. The Zen Garden page isn't a model for every web page -- it's marked up specifically to achieve its goal of multitudinous reskinnability. No ordinary web page faces that demand. No one claims that CSS is so magical that any HTML markup can be styled to look any old way. There's definitely a relationship between markup and presentation, like skeleton to skin. Perhaps, like Xeno's arrow, we'll never actually achieve complete separation of structure from presentation, but the closer we get the more flexible and manageable our projects become. The CSS Zen Garden is intended to be inspirational, not normative. Regards, Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [OT] Javascript: getElementsByTagName() getElementsById(): How getElementsByClass()?
At 8/20/2006 01:29 PM, Nick Urbanik wrote: This is tangentially related to this list But not closely enough. Here's a great JavaScript list for future scripting questions: https://lists.LaTech.edu/mailman/listinfo/javascript Now I can see that Javascript provides getElementsByTagName(), getElementsById() and getElementsByName(). My question is: getElementsById() is incorrect, it should be getElementById() (singlular); ids are intended to be unique on a page. How do I implement the equivalent of getElementsByClass() (which as far as I can see, is not built into Javascript?). http://google.com/search?q=getElementsByClass Regards, Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Trouble with putting a background-image in container
At 04:30 PM 8/3/2006, Wade Markham wrote:
When I try to create a background by using a jpeg file for container {}, I
get nothing.
container {
width: 703px;
position: absolute;
background-image: url(Images/Paper.jpg);
}
Try giving your block the same height as the image. If it doesn't
have the content to keep it 'inflated' it's going to collapse
vertically as much as it can.
Paul
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling Lists
At 12:22 AM 7/24/2006, Richard Brown wrote:
I am styling a two column list here:
http://wilsonsjewellery.co.uk/range.html
http://www.wilsonsjewellery.co.uk/style/three.css
I am using a technique explained here:
http://alistapart.com/articles/multicolumnlists
However, I am having two problems. Firstly, I cannot get rid of the text
decoration even though I have declared none and secondly the list has
continued into the div below. Any ideas please?
Hi Richard,
When you say text decoration do you mean the bullet on the list
items? If so, that's controlled not by text-decoration but by
list-style-type. You're currently removing the bullet in your
navigation menu using:
#navlist li {
list-style: none;
but not the other list. Personally, since I use mostly unbulleted
lists, I express a generic rule up front: li { list-style-type: none;
} and then add back bullets when needed.
Ref: W3C CSS 2.1 Specification
12 Generated content, automatic numbering, and lists
http://www.w3.org/TR/CSS21/generate.html#lists
To echo David, please correct your markup per
http://validator.w3.org/check?uri=http%3A%2F%2Fwilsonsjewellery.co.uk%2Frange.html
and then let us know if you still need help sorting out your float issues.
Warm regards,
Paul
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Counting Pixels
At 02:48 PM 7/23/2006, Jennifer Knowles wrote: What method can be used to count pixels? I often take a screenshot and paste it into Photoshop [just one of many image-manipulation programs], where I can zoom way in and measure small details more easily. Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] joining classes
At 02:19 AM 7/18/2006, Micky Hulse wrote:
[EMAIL PROTECTED] wrote:
div class=button class=myclass
div class=classOne classTwo classThree.../div
This page might help:
*CSS-Discuss: Multiple Classes*
http://css-discuss.incutio.com/?page=MultipleClasses
Also, go to the source:
W3C CSS 2.1 Specification
5 Selectors
5.8.3 Class selectors
http://www.w3.org/TR/CSS21/selector.html#class-html
Note that the example of multiple class selectors given here:
p.pastoral.marine { color: green }
does not work with Internet Explorer =6 -- for IE you can only
effectively reference one class at a time in your stylesheet,
although IE does recognize multiple classes in the HTML.
Paul
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS mouseover to look like buttons
At 09:37 AM 7/18/2006, Portman wrote: I am changing a JavaScript menu to CSS for the mouseover and wanted to make it look like it was still a button that depresses on mouseover. I tried fiddling with adding a border on mouseover (the same color as the background) but it moves all the links, not just the one I am hovering over. Any ideas/help would be much appreciated. Generally speaking, the trick is to not add any new dimension to your objects on hover but to change the appearance of already-existing properties so that the overall dimensions of each menu item remain the same. For example: - change border color. - swap dimensions of thin left thick right borders so that the whole block retains its width. - swap margin or padding for border. - swap background image on hover (CSS background properties will never affect the size shape of the block). By the way, are you sure you want to make the buttons look depressed when you mouse over them? That doesn't really mimic any real-world object behavior, which is what web page buttons set out originally to do. If a button presses in when you hover over it, does that mean it doesn't react further when you click it? That seems like a user interface glitch to me. I'd consider a three-state menu in which button faces gleam or brighten on hover and depress when clicked. Regards, Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Varying text parameters on same line
At 04:04 PM 7/18/2006, Ian Young wrote:
Using a list and want to specify the tab, text color of both texts. If I use
p class=test it will clearly drop a line.
Tried using span but it doesn't work at all.
Here is what I mean:
head
titletest area/title
style type=text/css
.members{margin-left:25px;color:navy;}
li {font-weight:bold;color:red; list-style-type:none}
/style
/head
body
liTest:span=members Here we go/span/li
I reckon you made a typo. Try:
span class=members
Also, if you've only got one class of span, you don't need the class at all:
liTest: spanHere we go/span/li
li { ... }
li span { ... }
I don't know how partial your included script was, but did you omit
the ul or ol tag to begin the list?
http://www.w3.org/TR/html4/struct/lists.html
Paul
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Three column div
Aaron Gray wrote: Is it possible to have a three column layout with fixed width left and right columns , and variable width center column, WITH a minimum width, using div's ? At 06:02 AM 7/17/2006, Zoe M. Gillenwater replied: - Float one div left - Float one div right - Give middle div matching left and right margins - Wrap all divs in a container with a minimum and maximum width applied Aaron, Zoe's earlier advice was right on, but you may have failed to read it closely enough. The problem with your layout is that your markup sequence is float-left, center, float-right -- so the floated-right block is falling over to the next row regardless of the container width. If you change your markup sequence to left, right, center as Zoe suggested, it will work the way you want. div id=container div id=header header /div div id=left left /div div id=right right /div div id=center center /div /div Rationale: The #left block, floated left, causes the next element on the page to want to sit to its right. That next block is #right, which causes the next element on the page to want to sit to its left. The third block is #center, which sits to the left of #right and to the right of #left -- i.e., in the middle. You just have to remember that floating a block left or right positions it relative to the following elements on the page, not the preceding ones. Clear as mud? Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] images in a grid using DIV's...
At 02:36 PM 7/13/2006, moises wrote: I'm attempting to layout a bunch of images in a grid using DIV's instead of a table. I currently have a 3x6 table that I need to convert to css. I've seen various example of a 3 to 4 column layout. Is this the only way to accomplish this? To see the table in its current format, please go here: http://www.godofmod.com Moises, Here are two ways of doing this, replacing the table with a simple series of anchors: http://juniperwebcraft.com/demo/imageGrid/ If your actual application is to portray a single image, there's no need to slice it up, even if you plan to hover-replace every pane. Each segment of the 18-block grid can use background-position to display a different segment of a single large image. For another example of this, see example 7 in my article CSS Swag: Multi-Column Lists http://www.alistapart.com/articles/multicolumnlists/ Your use of JavaScript serves two purposes: to create the hover effect (here replaced with CSS a:hover) and to pre-load the hover image to avoid the delay on the first mouseover. I would accomplish the latter without scripting simply by combining the normal hover state images in the same image file, and changing the background-position on hover. For more on this technique see CSS Sprites: Image Slicing's Kiss of Death by Dave Shea, http://www.alistapart.com/articles/sprites/ (Download considerations: Because every image file has its own header, one image file that combines several images will be smaller than all of its component images in separate files. On the other hand, with large images or slow connections there might be the subjective impression of one large image taking longer to download than many smaller images even if they add up to more disk space, because they will render one at a time as they download. Also, background images don't appear until they've completely downloaded compared to foreground images that can render progressively during download.) Regards, Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How do you adjust the indent on UL LI elements?
Paul Novitski wrote:
Every browser comes with a default stylesheet; these differ slightly
from one browser to the next. Many people zero out many of these
default styles, making it easier to get the same predictable effects
cross-browser. A very simple example would be:
*
{
margin: 0;
padding: 0;
}
In other words, remove all default margins padding from all
elements on the page. If you do this, you'll then have the
responsibility for adding margins padding back to those elements
from which you expect it, such as Hn P tags. Some web developers
find this a nuisance; I find it an agreeable and necessary part of
deliberate styling.
At 06:04 AM 7/13/2006, Zoe M. Gillenwater wrote:
I'm one of those who finds it a nuisance that results in more CSS not
less. :-) But even if you do choose to use it, do *not* use the
universal selector. This is far too aggressive and results in buttons no
longer acting like buttons, for instance. Read more here:
http://kurafire.net/log/archive/2005/07/26/starting-css-revisited
Zoe, can you be more specific about buttons no longer acting like
buttons? In following links from Faruk Ates' article I saw a couple
of references to this problem but no more precise description nor
examples of the alleged misbehavior.
As I use Mozilla/Firefox as my primary browser and test in others,
have been using the star-selector to eliminate margins padding for
a couple of years now, and have never noticed my buttons acting like
snaps, zippers, or string ties, I'm both curious and bemused.
Regards,
Paul
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] List Style - how would you change to get a -
Robert Lane wrote:
Trying to do a nested nested nested type list and want to use just a -
in front of the list item
At 02:49 PM 7/12/2006, L. Robinson wrote:
li:before { content: - ; }
The :before pseudo-element isn't going to work cross-browser (i.e.,
IE), so you might alternatively consider displaying an image file as
the list item marker, something like:
li
{
list-style-type: none;
padding-left: 10px;
background: url(images/hyphen.jpg) left center no-repeat;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How do you adjust the indent on UL LI elements?
At 03:43 PM 7/12/2006, Robert Lane wrote:
My page is at:
http://www.careercounselingservices.com/test2/outplacement.htm
If you scroll down in the lower half of the page (yes it is long!)
there are some nested unordered lists.
I want to reduce the indents.
...
How would I write a style to get rid of or reduce the indent on the list
items?
Robert,
The most obvious CSS properties affecting the indent of an
unordered list item will be the left padding margin on the UL LI
elements. On first glance I can't see where you've assigned these
styles in your stylesheets, so I'd guess your list items are being
styled by the browser itself.
Every browser comes with a default stylesheet; these differ slightly
from one browser to the next. Many people zero out many of these
default styles, making it easier to get the same predictable effects
cross-browser. A very simple example would be:
*
{
margin: 0;
padding: 0;
}
In other words, remove all default margins padding from all
elements on the page. If you do this, you'll then have the
responsibility for adding margins padding back to those elements
from which you expect it, such as Hn P tags. Some web developers
find this a nuisance; I find it an agreeable and necessary part of
deliberate styling. Other properties I commonly flatten at the
beginning of stylesheets include font-weight family.
Paul
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] fluid left right hugging a fixed-width center
I've got a centered fixed-width block inside a resizable container. I'd like to auto-fill the left right margins with repeating background images. Here's an illustration of the problem: http://juniperwebcraft.com/test/test_stretch.html One catch is that the blocks can't be allowed to overlap, as they've all got transparent image backgrounds and if they overlapped their drop-shadows would conflict. Therefore I can't fudge it, overestimating the width of the side blocks to ensure that they slide underneath the centered image. All two side blocks have to abut the middle block precisely. I've got a work-around that looks good in Firefox IE, splitting the centered block into two halves and using regular floats, but I'm still looking for something more elegant. Suggestions? Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] One-Image Rollovers?
At 07:58 AM 3/31/2006, Mark D Hiatt wrote: I have a link with an image to click on to send you to another page. I know how to create a rollover image and have that thrown up in CSS so that it looks like the black and white image lights up when you hover over it. Kewl. But I was thinking about this a little deeper and wondering if using a single image might not be better? Wow, talk about serendipity. (Christian, did you slip him a shilling to be your shill?) Mark, FYI here's an earlier rendition of this idea: CSS Sprites: Image Slicing's Kiss of Death by Dave Shea March 05, 2004 http://www.alistapart.com/articles/sprites/ (How to combine normal hover states in the same image file) A consideration when using this technique is that a combined image is larger than either of its parts and therefore there can be a longer download time the first time the page loads. However, because every image file has a header, one file containing two images is going to be smaller than both images separately.* If they all have to download anyway, you might as well combine them in a single file. I've combined multiple sets of images in one file with a barely-noticeable initial delay even on dial-up. * An exception to this sum-is-smaller-than-the-parts rule occurs when one of the two images is significantly less rich than the other; for example toggling from black white to color. A bw image, or a very low-contrast image, can be much smaller than its brightly-colored counterpart. Still, I'd use the technique because it's easy and simple and eliminates scripting. Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] The captions! The captions! AUGH!!!!!
At 12:12 PM 3/30/2006, [EMAIL PROTECTED] wrote:
The code below generates a header on the top-left of the table. The text
in the p element, however, rolls up into a ball on the other end of the
table.
It should start right under the heading.
...
caption h2 {
float:left;
display:inline;
}
caption p {
display:inline;
float:left;
}
Well, there you go: don't float them left and don't declare them
inline. Both those rules have the effect of placing them on the same
line and collapsing them to the dimensions of the contained
text. Both H2 and P are block by default, so if you leave them alone
they'll stack nicely one on top of the other.
Paul
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS to format dl as tabbed pane
At 04:08 PM 3/29/2006, Peter Michaux wrote:
I'd like to learn how to use CSS to display a definition list as a
tabbed pane. I think this would be a nice way to relate the tab and
the content in case the browser is not CSS or the document is being
presented aurally. Any tips on how to do this might get me headed in
the right direction.
Peter,
Here's one way to implement a tab control with DL:
_
Apply styling to change the DL to a tab control only when JavaScript
runs. Run the DTs across the top as your tabs, and show only the one
currently-selected DD below:
_
1) In HTML, make each DT a hyperlink to facilitate accessible
navigation. JavaScript will add the jstabs id to the DL so that
the following CSS will apply only when js executes.
dl id= class=
dt class=item1a href=#item1Coffee/a/dt
dd class=item1Black hot drink/dd
dt class=item2a href=#item2Milk/a/dt
dd class=item2White cold drink/dd
/dl
(These enumerated class names could easily be added by JavaScript.)
_
2) JavaScript initializes by adding the id and the class of the
default (or requested) tab:
dl id=jstabs class=item1
...
_
3) In CSS, lay out the DT tabs as a horizontal row of blocks:
dl#jstabs dt
{
display: block;
float: left;
width: #em;
etc.
}
_
4) Show only the currently selected DD panel:
/* set the DL as the framework for its absolutely-positioned children */
dl#jstabs
{
position: relative;
}
/* default = panels hidden */
dl#jstabs dd
{
position: absolute;
left: -1000em;
width: 999em;
}
/* on-state = panel shows */
dl#jstabs.item1 dd.item1,
dl#jstabs.item2 dd.item2,
dl#jstabs.item3 dd.item3,
etc.
{
left: 0;
top: #em; /* move it down below list of DT tabs */
width: ##em;
etc.
}
_
5) When JavaScript initializes, it assigns the onclick behavior to
the DTs (or their As). The onclick function copies the DT's
className to its parent, replacing any existing item# class in the DL.
_
I've used a method of displaying the current panel by matching class
names between parent and child. An alternative method assigning an
active class to the currently-selected DT DD and remove it from
the previously-selected tab panel. The way I usually do that is to
establish a global variable that points to the object that's
currently selected, so when the next item is selected I can easily
remove the class name from the globally-pointed element without
having to search the list for active.
If either JavaScript or CSS is disabled, the markup will render as a
(vertical) sequence of DT-DD pairs.
If you want the tabs to appear at the beginning like a table of
contents to the panels when JS or CSS aren't active, you'll need to
use another markup structure such as a list of links followed by a
list of panels.
Regards,
Paul
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS to format dl as tabbed pane
At 04:56 PM 3/29/2006, Paul Novitski wrote: If either JavaScript or CSS is disabled, the markup will render as a (vertical) sequence of DT-DD pairs. PS: The model I described works in the absence of JavaScript with a server-side script supplying the necessary classNames: __ dl id=jstabs class=item# dt class=item#a href=?item=#Coffee/a/dt dd class=item#Black hot drink/dd ... __ where # is the tab/panel number, suppied by the server-side script. When a tab is clicked, the page reloads, the server-side script supplying the requested item#. Doing so, however, assumes the CSS is enabled. Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Getting rid of the line under a hyperlinked image
At 11:45 PM 3/29/2006, Joanne wrote:
I have image and a text hyperlinked together. In IE only the text is
underlined, but in Firefox Opera, the image is too.
How do I get rid of it?
Try img { border: none; }
Paul
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about and targeting IE/Mac
At 02:13 PM 3/24/2006, Michael Hulse wrote: * htmlbody #hNavdldd The goal is to target IE/Mac only. Michael, you might find this useful -- a table that lists which browsers are targeted by which CSS selectors, rules, and hacks: Will the browser apply the rule(s)? http://centricle.com/ref/css/filters/ Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Screen readers, tabbed index, and display:none issues
At 10:12 AM 3/9/2006, [EMAIL PROTECTED] wrote:
We are looking to implement a three column layout, with the center section
containing a tabbed index, similar to the one found at
www.mediamatters.org, towards the bottom of the page. Lets use that as the
example.
The problem, being that since we are a government web site, we must be
Section 508 compliant, and those tabs just are not. Why? When you reload
the page, the default tab content repopulates the page, rather than
sticking to the content one was reading. The CSS style found on the dl's
dl id=links style=display:none; then makes it noncompliant with
screen reader software.
I have tried the Hiding Text But Not From Screen Readers tricks, but it
does not seem to work. as did not Simon Wilson's Screen readers and
display: none These all seem to be more for hiding one line of html,
rather than a html and JavaScript tabbed index.
Carollynn,
It looks like you're already handling things well in this respect:
when javascript is turned off, your page works properly using its
server-side scripting. Clicking on a tab reloads the page with the
selected tab in the querystring, e.g.:
http://mediamatters.org/?default_tab=most_popular
You could improve this by adding a local anchor:
http://mediamatters.org/?default_tab=most_popular#most_popular
I believe this will make it work properly for both a visual browser
and a screenreader, putting the visual focus and the reading cursor
at the beginning of the selected content.
If you can somehow be sure you're not running in a visual browser,
javascript could change this to #tabbed_content so the tabs appear at
the top of the viewport:
http://mediamatters.org/?default_tab=clips#tabbed_content
[David Gee already mentioned the technique I use for toggling visual
content, but I had already written this so I'll include it anyway:]
Here's one technique I've used for swapping content visually that I
want to remain readable by screenreaders:
div class=toggleableContent 1/div
div class=toggleable toggledContent 2/div
div class=toggleableContent 3/div
.toggleable
{
position: absolute;
left: -100em;
width: 99em;
}
.toggled
{
position: static;
width: auto; /*or whatever's right*/
}
Is there a reason this wouldn't work in your case?
Regards,
Paul
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Screen readers, tabbed index, and display:none issues
At 12:25 PM 3/9/2006, Paul Novitski wrote: If you can somehow be sure you're not running in a visual browser, javascript could change this to #tabbed_content so the tabs appear at the top of the viewport: http://mediamatters.org/?default_tab=clips#tabbed_content I meant to write: If you can somehow be sure you're not running in a SCREENREADER... Pointing the user to the top of the tabbed_content div works ONLY in visual browsers and would totally frustrate someone experiencing the page as plain text, as it would leave them far ahead of the content they had selected. Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Specificity, siblings, descendants
At 10:31 AM 3/8/2006, Lorin Rivers wrote:
I want to style an unordered list so that the top-level elements are
bold with no bullets, while the items inside these have the bullets,
etc...
#content li
{
list-style-image: url(/images/bullet3.gif);
list-style-type: none;
line-height: 1.2;
}
/*Shout out to: http://www.simplebits.com*/
#content p + ul.nested li
{
font-weight: bold;
list-style-type: none;
list-style-image: none;
margin-bottom: 0.5em;
}
#content .nested ul
{
font-weight: normal;
margin-top: .5em;
}
I couldn't figure out a way to do this without sibling selectors,
which makes IE cranky...
Easy: just reverse your CSS rules. First define the top-level
(really, all) items without bullets, then define the inner items with:
#content li
{
font-weight: bold;
list-style-type: none;
margin-bottom: 0.5em;
line-height: 1.2;
}
#content li li
{
font-weight: normal;
list-style-image: url(/images/bullet3.gif);
margin-bottom: 0;
}
Paul
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling Lists
At 01:02 AM 3/7/2006, Richard Brown wrote:
http://www.adl-bp.co.uk/home/
In the footer I have a list but I cannot stop it from placing a styling
element at the start of the list. I cannot work out how to tell it not
to style the element. If anyone could point me in the right direction
on how to unstyle this element I would be very grateful.
Try {list-style-type: none} which you can apply to either UL/OL or LI:
http://www.w3.org/TR/CSS21/generate.html#lists
Regards,
Paul
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floating elements at an 'edge'
At 10:55 AM 3/6/2006, Keith Sader wrote:
I've got a link I'd like to align at the top right of an 80% width
table such that the link's right edge is always in alignment with the
table's right edge.
...
a class=printLink href=/printPrintable Report/a
table id=detailTable
tbody
...
This gets the link pretty close the right edge of the table for most
browser widths but doesn't really 'stick' the link to the correct
place.
Keith,
I would shrinkwrap both the link and the table in a div so that I
could align the anchor right and know that it wasn't going to extend
past the table.
Numerous techniques:
http://google.com/search?q=css+%28shrinkwrap+%22shrink+wrap%22+shrink-wrap%29
My own tendency would be to float the wrapper left, then clear the
float afterward:
div id=wrapper
a href=...
table...
/div
div id=nextItem
#wrapper
{
float: left;
}
#wrapper a
{
text-align: right;
}
#nextItem
{
clear: left;
}
Regards,
Paul
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] formating definition lists
At 03:33 PM 3/4/2006, luis jure wrote:
i want to format definition lists in a way that the definition description
goes in the same line than the definition term, like this:
dt term1 here dd text goes here to the end of the line blah blah blah
and goes on here at the beginning of the next line if long enough
dt term2 here dd text 2 goes here etc.
i tried different values of the 'display' property, and also with 'float'.
but i can't get exactly what i want, that seems to me should be trivial.
I can see two ways to do this:
1) float the DT left and let the DD wrap around it:
dl
{
width: Xem;
}
dt
{
display: block;
float: left;
width: Yem;
}
dd
{
display: inline;
}
...where X is the width of the entire text area and Y is the width of the DT.
2) declare them both inline:
dt,
dd
{
display: inline;
}
DTs are by default inline and DDs are by default block, but it never
hurts to declare your intentions explicitly in order to bring all
browsers into line. A block element will normally begin a new row of
content, while inline elements will follow one another on the same row.
In your examples you've got two or three ems of blank space between
DT and DD. If this is intentional you could use padding or margin to
force that in the presentation as well
Paul
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
