[css-d] css for a:link image replacement
I'm in the situation of wanting to stay true CSS and accessibility standards by separating content and structure but am in a situation where I have an anchor (a:link) but want to replace the standard text based link with an image for those browsers/ that will see the image. The Links are curently sitting in an unordered list as li like so - lia href=https://jr.slimink.com.au/#login; id=a_sloginSecure Login/a/li lia href=https://jr.slimink.com.au/signup; id=a_signupSign Up/a/li I have an images waiting to be used for each but am not quite sure how to go about it. Any help would be appreciated. Thanks Leah Maclean w: http://workingsolo.com.au e: [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 - preserving image-ratio and simulation max-width for images
Gunlaug Sørtun wrote: [...] I haven't found a way to extract an image's real dimensions and use that as part of the expression to smoothen things out. You can get the size once the image has loaded. I'll make a couple of tries and let you know if I could get anything useful. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] footer disapears in ie 6
Hi, My footer disapears in IE6. It seems to happen when my #container is reduced to 800px. Any ideas why? Thanks, R. http://vps.aztechost.co.uk/~suruch1/test/ http://vps.aztechost.co.uk/~suruch1/test/css/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css for a:link image replacement
Leah Maclean wrote: I'm in the situation of wanting to stay true CSS and accessibility standards by separating content and structure but am in a situation where I have an anchor (a:link) but want to replace the standard text based link with an image for those browsers/ that will see the image. [...] If you want to achieve accessibility, don't replace the text. The short reason is that by doing so you will affect (at least) one group of users, the more vulnerable being those that have images disabled (for whatever reason). Now, if you can afford to bother them a little (like everyone else does, hence not being so little), then use the text-indent method; since display:none and even visibility:hidden cause troubles for screen-readers. Look for Joe Clark's opinion on FIR in 'a list apart'. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] footer disapears in ie 6
No luck. I couldn't get the behavior you mention. If the footer actually disappears it may be the peekaboo bug, search the archive google a little (position is everything) to find what triggers it and its workarounds. Ross Hulford wrote: Hi, My footer disapears in IE6. It seems to happen when my #container is reduced to 800px. Any ideas why? Thanks, R. http://vps.aztechost.co.uk/~suruch1/test/ http://vps.aztechost.co.uk/~suruch1/test/css/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Test in IE 6 and IE 7 please
On Wed, 17 Oct 2007 19:29:21 +0200, Georg Portenkirchner wrote: Thank you everybody who sent me screenshots. After some changes finally the site seems to work in Safari, Firefox and Opera on a Mac. But Internet Explorer (6 and 7) still gives me headaches. Maybe someone has a hint for me? Thank you! http://www.theaterjugendring.de/index.php http://www.theaterjugendring.de/wp-content/themes/tjr/style.css It looks like IE Win is not honoring the margin-top on #content. Try changing this to padding-top. (I have not tried this, so no guarantees.) Cordially, David -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE 6 and IE 7 problems
Hello all! Thank you everybody who sent me screenshots yesterday. After a few changes I am still facing problems in IE6 and IE7. As I have no access to a window machine on time I only can check IE using http://browsershots.org/. Hope someone can help me with these problems: IE6 problems: - the items in the navigation are too high - the content is shifted down IE7 problem: - the content is shifted up below the header Thank you everybody. Have a nice day Georg http://portenkirchner.net/ iChat / AIM: portenkirchner http://www.xing.com/profile/Georg_Portenkirchner __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Help
Hello, I'm adding some useful link on a website but some of the link won't validate. Line 39, Column 333: cannot generate system identifier for general entity Params. .nencyclopedia.com/index.cfm?PgNm=TCEParams=A1SEC888157#SEC888172 target=bl? Line 39, Column 333: general entity Params not defined and no default entity. .nencyclopedia.com/index.cfm?PgNm=TCEParams=A1SEC888157#SEC888172 target=bl Line 39, Column 339: reference to external entity in attribute value. .lopedia.com/index.cfm?PgNm=TCEParams=A1SEC888157#SEC888172 target=blankR? Line 39, Column 339: reference to entity Params for which no system identifier could be generated. .lopedia.com/index.cfm?PgNm=TCEParams=A1SEC888157#SEC888172 target=blankR? Line 39, Column 332: entity was defined here. .anencyclopedia.com/index.cfm?PgNm=TCEParams=A1SEC888157#SEC888172 target=b Using XHTML 1.0 Transitional Any suggestion to fix this situation? Regards, Philippe __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help
Philippe- It should validate if you change the Params to amp;Params. Thanks, Taryn Regish Line 39, Column 333: cannot generate system identifier for general entity Params. .nencyclopedia.com/index.cfm?PgNm=TCEParams=A1SEC888157#SEC888172 target=bl? Using XHTML 1.0 Transitional Any suggestion to fix this situation? Regards, Philippe __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] How can I prevent this menu from wrapping?
This is killing me because I should know this, I don't do enough css these days. Anyway, I have a fairly simple horizontal menu I got from CSSplay, which is using floating to line up the items and sliding doors for the images. Of course, when you size down the window small enough, the menu wraps to the next line, which I don't want. I've tried various fixes, but I can't get anything to work without either getting a scrollbar or having the menu be the wrong width. I'm sure there is a fix for this, I just can't seem to find it in my searching. The page in question: http://www.pixelmech.com/rev2/rainbo/index.html The CSS in question: http://www.pixelmech.com/rev2/rainbo/style.cssAny help is appreciated. If you can copy responses to me at pixelmech at gee mail dot com, it would be helpful. Thanks! Tom __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] footer disapears in ie 6
Ross Hulford wrote: Hi, My footer disapears in IE6. It seems to happen when my #container is reduced to 800px. Any ideas why? Thanks, R. http://vps.aztechost.co.uk/~suruch1/test/ http://vps.aztechost.co.uk/~suruch1/test/css/ The footer is not clearing. You can see this behavior by bumping the font size to +2 or +3 in compiant browsers and by ignoring the font-size in IE6 and selecting font-size largest. The content should drive the footer down, rather than shooting out the bottom. The difficulty, I believe, is using absolute positioning for the footer, and setting height to the several containing wrappers. Additionally, the outermost wrapper in not enclosing the floats (or footer) contained within it. Put a red border around that wrapper and you'll see the issue. In general, things go better if you let the software (browsers) and content determine height; and, while absolute positiong might be used with your current layout, it just complicates matters and could be eliminated. Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Advice sought
Hi! Together with a friend I am working on our website: http://results2match.com (CSS: http://results2match.com/r2mgenincl05stylesheet.css). Our minimal requirements: - IE6, IE7 and FF2 - straightforward and maintainable design (xhtml 1.0; css 2.1) - SEO friendly Our assets: - membership of this discussion group - a lot of enthusiasm - improving our knowledge every day Our specific questions: - we do not have IE6; how does it look (can you install IE6 separate from IE7?) - how can we get rid of the division between the upper and lower part in IE7 (FF and Opera are all right) - how can we enforce a list to flow around an image (left under) Generally we consider the current implementation of our design very instable: a small change results in a for us rather unexpected behavior. An example: after the execution of csstidy with the option enabled of sorting the selectors/properties the website will be quite different (and not acceptable!). Thank you in advance! Kind regards, hans -- How much value add profitable requirements to your business? http://requirements-management.nl! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Advice sought
Hans Lodder wrote: Our specific questions: - we do not have IE6; how does it look (can you install IE6 separate from IE7?) Yes, check this page http://tredosoft.com/Multiple_IE __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE 6 and IE 7 problems
Sorry, I forgot the links to the site: http://www.theaterjugendring.de/index.php http://www.theaterjugendring.de/wp-content/themes/tjr/style.css Am 18.10.2007 um 18:12 schrieb Georg Portenkirchner: Hello all! Thank you everybody who sent me screenshots yesterday. After a few changes I am still facing problems in IE6 and IE7. As I have no access to a window machine on time I only can check IE using http://browsershots.org/. Hope someone can help me with these problems: IE6 problems: - the items in the navigation are too high - the content is shifted down IE7 problem: - the content is shifted up below the header Thank you everybody. Have a nice day Georg http://portenkirchner.net/ iChat / AIM: portenkirchner http://www.xing.com/profile/Georg_Portenkirchner __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ http://portenkirchner.net/ iChat / AIM: portenkirchner http://www.xing.com/profile/Georg_Portenkirchner __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How can I prevent this menu from wrapping?
I can't get anything to work without either getting a scrollbar or having the menu be the wrong width. What's the 'Other Option' you're looking for? If the nav is wider than the window, either it wraps or you get a scrollbar, unless you're looking for a way to shrink the nav on the fly? I think I'm confused. Maybe. joel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] footer disapears in ie 6
My footer disapears in IE6. It seems to happen when my #container is reduced to 800px. Any ideas why? Thanks, R. http://vps.aztechost.co.uk/~suruch1/test/ http://vps.aztechost.co.uk/~suruch1/test/css/ I have successfully used footerStickAlt described here http://www.themaninblue.com/writing/perspective/2005/08/29/ Del __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How can I prevent this menu from wrapping?
On 10/18/07, Joel D Canfield [EMAIL PROTECTED] wrote: I can't get anything to work without either getting a scrollbar or having the menu be the wrong width. What's the 'Other Option' you're looking for? If the nav is wider than the window, either it wraps or you get a scrollbar, unless you're looking for a way to shrink the nav on the fly? I think I'm confused. Maybe. I kind of misspoke - I don't mind the horizontal scrollbar when the window gets so small that it would wrap the nav. I meant I was getting a scrollbar when it was not wrapping, which I don't want. I thought there was a way to keep the width of the UL static - so yes I'd get a scrollbar if the window sized down that far, but the nav would not wrap. To me that is preferable than having it drop off like that. Tom __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css for a:link image replacement
On 18/10/07 (06:35) Leah said:
I'm in the situation of wanting to stay true CSS and accessibility standards
by separating content and structure but am in a situation where I have an
anchor (a:link) but want to replace the standard text based link with an
image for those browsers/ that will see the image.
Raphael said:
use the text-indent method; since display:none and even
visibility:hidden cause troubles for screen-readers
As I understand it, the most accessible way of performing image
replacement is the Gilder Levin method. It involves a little extra
markup but unlike most other methods it allows a normal viewer (as well
as screen readers) to read the text when images are off but CSS is on.
Markup (in this case applied to an H1, but that's just an example) would be:
h1span/spanHello world/h1
Note the empty span.
CSS:
h1 {
width: [width of replacement image];
height: [height of replacement image];
position: relative;
}
h1 span {
background: url(myImage.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
The technique does not move the text off to the side, nor make it
invisible, it simply plonks the image over top of it. So if images are
off, the text is revealed instead (whereas with a text-indent method,
images off/css on means that the text cannot be seen).
It also means that you need to use a solid image, not one with a
transparent background
Like I said, it does introduce a non-semantic span but that's probably
better than using a less accessible method.
--
Rick Lecoat
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Best way to do an inline list?
Hi everyone, Please have a look at this test page (resize the page to change the linebreaks): http://www.fjordaan.net/tests/inline-list-test.html I'm trying to do a simple inline list of the sort you use whenever you have a large lists of links in a small area. This calls for an unordered list, but I simply cannot make it behave as well as a simple series of links separated by images or glyphs. Two requests, please -- either/or: (1) Explain or fix the strange behaviour of inline LIs. There seems to be no logic for where it breaks, and occasionally sticks out of the container. (2) Tell me whether the approach using middots is acceptable under WAI-AAA. Any help appreciated! francois __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Can't get height correct on menu
Thanks for the previous help on the padding for the links on my menu. I need more help! I've tweaked the css some and have everything looking good in IE7 and firefox...everything except the menu. I can't get the height the same. In IE it looks right, but can't get it to look the same way in FF. Any suggestions? TIA, Jeralyn Merideth Designs by Jeralyn A Division of 5 Points Interactive Creative Design Solutions for Web and Print [EMAIL PROTECTED] [EMAIL PROTECTED] __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Pulling my hair out with positioning - need help please
Hi, I have a client who wants a send to a friend function on his website. I found some code for a css div that appears when you click a link on the page, but once I got the functionality working, the positioning got messed up. I have been looking at it for so long that my eyes are going screwy. If anyone could help, I would be most grateful. The page is here (I didn't do the design, just the background programming): http://www.grafixer.biz/site/NewVersion/galleries.htm. The part that I need help with starts just under the body tag - I moved the div there in the hopes that it would position itself correctly relative the body of the page. The link that calls this is near the bottom of the page in the div id=stamp. Everything is very rough as I am getting the positioning right before fixing it up. TIA, Riva __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] opinions: horizontal vs vertical menus
Hi all, Here are some thoughts from my blog @ http://www.sunburnt.com.au/publications/design/horizontal-vs-vertical-menus Just yesterday I had a request from a customer to build a vertical menu down the side of the page in their design. I've always had a strong preference for horizontal menus, but have never really known exactly why. When trying to disuade my customer she naturally asked me this question: why? Well, now I've thought about it I've come to the conclusion that there are some good reasons to go horizontal instead of vertical. Here are mine: * Being evenly distributed across the page, they create balance which makes you feel good :) * They make better use of space as there is no vacuum below the menu which is common with vertical menus. * It's easier to read horizontally than vertically. * It's easier to move mouse side to side than vertically. * Submenus are easier to access as they have a larger area for the mouse to enter. * As people are generally lazy, the shorter menu items more common in horizontal menus are easier to read. What do you think? -- Sunburnt Web Services p: +61 7 3117 9661 (UTC +10) f: +61 7 3102 9141 w: http://www.sunburnt.com.au e: [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How can I prevent this menu from wrapping?
Tom Dell'Aringa wrote:
I thought there was a way to keep the width of the UL static - so yes
I'd get a scrollbar if the window sized down that far, but the nav
would not wrap. To me that is preferable than having it drop off like
that.
You have more or less destroyed all options by setting font-size in px
and making all dimensions in the menu depend on fixed dimensions, as
that means it's impossible to calculate a 'width' for the ul that'll
work across browser-land and browser-options.
Anyway, declaring a 'min-width' and/or a 'width' on the ul is the only
option left, but I can not come up with a value that'll work in all
browsers since they react differently on that font-size and the fixed
dimensions.
A more normal, and working, way is to let the anchors and list-items
resize and expand as/when needed, and let the menu-container - the ul -
adjust in both width and height to contain the list-items.
This means: a complete restyle-operation followed by thorough testing.
A start could then be...
ul.mainmenu li a {white-space: nowrap;}
ul.mainmenu {overflow: hidden; height: auto;}
* html ul.mainmenu {overflow: visible; height: 1%;}
...which actually works quite well as an addition/correction to what you
have, right out of the box. Can't take all that much font-resizing with
the existing background though.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css for a:link image replacement
You might to take a look at Thierry's solutions as well:
http://tjkdesign.com/articles/tip.asp
http://tjkdesign.com/articles/a_perfect_Image_Replacement_technique.asp
http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp
E. Michael Brandt
www.divaHTML.com
divaPOP : standards-compliant popup windows
divaGPS : you-are-here menu highlighting
divaFAQ : FAQ pages with pizazz
www.valleywebdesigns.com/vwd_Vdw.asp
JustSo PictureWindow
JustSo PhotoAlbum, et alia
--
Rick Lecoat wrote:
On 18/10/07 (06:35) Leah said:
I'm in the situation of wanting to stay true CSS and accessibility standards
by separating content and structure but am in a situation where I have an
anchor (a:link) but want to replace the standard text based link with an
image for those browsers/ that will see the image.
Raphael said:
use the text-indent method; since display:none and even
visibility:hidden cause troubles for screen-readers
As I understand it, the most accessible way of performing image
replacement is the Gilder Levin method. It involves a little extra
markup but unlike most other methods it allows a normal viewer (as well
as screen readers) to read the text when images are off but CSS is on.
Markup (in this case applied to an H1, but that's just an example) would be:
h1span/spanHello world/h1
Note the empty span.
CSS:
h1 {
width: [width of replacement image];
height: [height of replacement image];
position: relative;
}
h1 span {
background: url(myImage.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
The technique does not move the text off to the side, nor make it
invisible, it simply plonks the image over top of it. So if images are
off, the text is revealed instead (whereas with a text-indent method,
images off/css on means that the text cannot be seen).
It also means that you need to use a solid image, not one with a
transparent background
Like I said, it does introduce a non-semantic span but that's probably
better than using a less accessible method.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] opinions: horizontal vs vertical menus
Roger Keays wrote: Hi all, Here are some thoughts from my blog @ http://www.sunburnt.com.au/publications/design/horizontal-vs-vertical-menus Just yesterday I had a request from a customer to build a vertical menu down the side of the page in their design. I've always had a strong preference for horizontal menus, but have never really known exactly why. When trying to disuade my customer she naturally asked me this question: why? Well, now I've thought about it I've come to the conclusion that there are some good reasons to go horizontal instead of vertical. Here are mine: * Being evenly distributed across the page, they create balance which makes you feel good :) * They make better use of space as there is no vacuum below the menu which is common with vertical menus. * It's easier to read horizontally than vertically. * It's easier to move mouse side to side than vertically. * Submenus are easier to access as they have a larger area for the mouse to enter. * As people are generally lazy, the shorter menu items more common in horizontal menus are easier to read. What do you think? I think this is a matter of opinion and personal preference: that is. of course, unless you can prove with hard science that one is better than the other. Did you have a CSS question? Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] DD next or below DT, depending on DT width?
I have a series of item pairs, for example: SERVICES OFFERED Readin' Writin' 'Rithmetic HOURS Weekdays 9:00 AM - 5:00 PM Weekends 1:00 - 4:00 PM You see how the DDs have a constant left margin, but are aligned inline with _or below_ the DTs depending on whether the DTs are short enough to fit into the DDs' left margin. Should be simple enough, but I'm frazzled and can't figure it out. Thanks for your help, Charles __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] opinions: horizontal vs vertical menus
Roger Keays wrote: Hi all, Here are some thoughts from my blog @ http://www.sunburnt.com.au/publications/design/horizontal-vs-vertical-menus [...] * Being evenly distributed across the page, they create balance which makes you feel good :) * They make better use of space as there is no vacuum below the menu which is common with vertical menus. * It's easier to read horizontally than vertically. * It's easier to move mouse side to side than vertically. * Submenus are easier to access as they have a larger area for the mouse to enter. * As people are generally lazy, the shorter menu items more common in horizontal menus are easier to read. What do you think? Well... what about adding the same menu in both the vertical and horizontal version so we can compare and see your points clearly? I think I understand what you mean, it somehow feels unnatural the movement you must do to chose an option, but I think this issue remains whether is a vertical or an horizontal menu, since we use the same pattern, we just change how do we start (vertical - [horizontal - vertical] / [horizontal - vertical] - horizontal). By the way, how come your comments _require_ JS to work? When disabled, you don't provide the text-boxes neither a message to your users. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Test in IE 6 and IE 7 please
Am 18.10.2007 um 19:10 schrieb David Hucklesby:
It looks like IE Win is not honoring the margin-top on #content. Try
changing this to
padding-top. (I have not tried this, so no guarantees.)
On Thu, 18 Oct 2007 19:20:47 +0200, Georg Portenkirchner wrote:
I also thought about it, but then would the grey content color move up to the
header.
Georg,
Re: http://www.theaterjugendring.de/index.php
I played a little with this. Adding an outer DIV and giving it a
padding-top of 1px seems to contain that margin-top in IE.
The fixed #sidebar seems to take space in IE5.5 and 6, forcing the
content well below it. This seems to work for those versions:
* html #sidebar {position: absolute;}
IE before version 7 does not understand fixed anyway, so that's
the best you can hope for. Similarly, no :hover effect on the DIVs.
Cordially,
David
--
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Named Anchors and Fixed Headers?
Dragoness wrote:
http://www.ladyofdragons.com/test/gallery/art-archive.htm
1) My header is fixed and stretches over my left menu div and middle
content div.
2) My left menu contains sub-links (2003, 2002, etc...) to
corresponding named anchors dispersed throughout the content in the
main body div.
3) When you scroll the content, it’s designed to “fade out” and
disappear beneath the fixed header. That works! (Except in IE6 *sigh*)
3) BUT, If you want to skip to a section instead of scroll, using the
sub-menu links on the left, the appropriate named anchor jumps to the
top of the page... placing it, partially hidden, UNDER the fixed header
layer.
Is there a way around this? A way to set where the named anchors jump
to so the content appears lower on the page, not hidden by the
header?
Add...
#content p a {margin-top: -100px; padding-top: 100px; width: 1px;
display: block;}
...and the anchor will appear 100px below top of window and nicely below
the fixed header.
The anchor is actually around 115px tall and 1px wide with this styling,
but that won't bother any of the browsers that support 'position: fixed'
in the first place. The narrow width is set to prevent the anchor
covering any of the image-links above it.
Tested in IE7, Opera 9, Firefox 2 - perfect result.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to think about designing for resizing?
On 10/18/07, David Laakso [EMAIL PROTECTED] wrote: Edit: resent to css-d after noticing Gmail reply was only to David Laakso. Sorry. Gernot Hassenpflug wrote: What I am worried about is the following: how can one design CSS styles that resize the block elements when the user decided to increase the font (of the inline text)? /../ One way of coping with trying to get a layout to work in any and all screen window widths, is to set min/max width on the outermost container and provide your favorite workaround for IE6 which does not support min/max width. Oops, missed the new posts in threaded mode! Thanks for the tips (and to Gunlaug Sorten---excuse my misspelling in ASCII-only) and warnings about zooming. I had a discussion with a friend who is somewhat experienced also, and he mentioned quite a few points in addition to what I've been told on this list. Most too technical for me to understand without actually testing, but one that stood out was: Declare everything yourself, and use the CSS reset. He's also sent me some useful links for learning more, which perhaps people here might find useful too if they don't know about them already: http://alistapart.com/ http://www.smashingmagazine.com/ http://www.456bereastreet.com/ Here is---according to him---a good example of the CSS reset technique: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ BTW, I found a site that seems to do very nicely under resizing conditions: http://www.hlj.com It generates a wider and wider page as necessary without losing control of the elements, at least in Firefox/Iceweasel under linux. Edit: and then I notice...HTML tables. Oh wellit looked nice! Regards, Gernot __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] forced to set width and related problems
Good evening list, Somehow i'm forced to set a width on my contentwrapper: no width or a width of 100% cuts off the #contentright and the background image i had on my header when resizing to smaller screen resolution. I'm wondering if this is normal behaviour? The way i used widths now gives me a layout that causes a horizontal scrollbar in e.g. 1280X768 and below, but i guess that's something i have to life with. The reason i used the widths on#wrapper and #contentwrapper was the fact that without max and min width on the body, the #contentright dropped underneath the #contentleft which i don't understand: #contentright isn't floated or am i missing something here? And i would like to avoid min and max width on the body so as not to mess with IE expressions. Besides that i seem to have an accessibility problem in Firefox and Mozilla: decreasing the text size makes the #masthead h1 drop below the #masthead. Other problems i ran into and “solved” are commented in the css. http://www.dzinelabs.com/sandbox/madcow/madcowbody.html Css embedded Seems i caught the mad cow disease lol -- Best regards, Luc Powered by The Bat! version 3.99.24 with Windows XP (build 2600), version 5.1 Service Pack 2 and using the best browser: Opera. A friend is one who believes in you when you have ceased to believe in yourself. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
