Re: [css-d] how to vertically align text?
On Jan 24, 2006, at 3:30 PM, Francesco wrote: The text inside the LI appears lower slightly lower (almost subscripted) to the custom image. We usd to fix such things with vertical-align: middle; before CSS. How is this corrected now? Francesco, This is often a headache for me, too. I'd play around with the padding, height, line-height, and vertical-align of the list items. However, I usually resort to adding a few rows of transparent pixels to the top of my bullet images. -- Matthew Levine (http://www.infocraft.com/) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is redefining a property within CSS appropriate?
On Jan 24, 2006, at 4:27 PM, Peach Lynda L CTR USAF 96 CG/SCTA wrote: I thought it would make more sense to define all the borders then set the border-top to none. Now it works -- but my question are -- Is redefining as I have done above valid CSS? And is it -appropriate- CSS? Lynda, I agree -- I think it does make more sense to define it your way. What you've done is certainly *valid*. The validator just issues a *warning* to let you know that you might have unintentionally overridden a property. No worries though: I think it's completely appropriate. -- Matthew Levine (http://www.infocraft.com/) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Calling a class within a class
On Jan 23, 2006, at 4:37 PM, Paul Kahl wrote:
Is it possilble to do something like this:
.clsBold {font-weight: bold;}
.clsItalic {font-style: italic;}
.clsRed {color: #F00;}
.clsTitleDiv {clsBold; clsItalic; clsRed;}
In other words, can I call a previously defined class inside
another class,
in some fashion, thus saving me time and code?
I already know that I can stack classes inside a tag in this
fashion: [div
class=clsX clsY clsZ][/div]. That's not really what I'm looking
for. I'm
looking for something that is handled purely inside the stylesheet.
I'm
hoping there's a greater way to do re-usability.
~Paul Kahl
Paul,
I'm afraid that you can't define blocks of CSS rules the way you
described above. The closest thing would be more along these lines:
.clsBold, .clsTitleDiv { font-weight: bold; }
.clsItalic, .clsTitleDiv { font-style: italic; }
.clsRed, .clsTitleDiv { color: #F00; }
In this case, you get .clsTitleDiv sharing the same declarations as
above without a separate rule. In general, however, I'd advise
against spreading out a definition of a class like this unless it
makes sense for it to inherit from multiple (mostly orthogonal) rules.
As far as reusability goes in general, just make sure to keep your
classes meaningful (error instead of clsRed, for instance) and
use a consistent style throughout your markup, and your CSS should be
svelte. I rarely find that I'm repeating myself in CSS, other than
perhaps reusing color values (across borders, backgrounds, and actual
text color) and occasionally sizes. For these things, CSS-SSC might
be a good tool if you're concerned about the way repetition can
impact maintainability:
http://www.shauninman.com/plete/2005/08/css-constants
--
Matthew Levine, (http://www.infocraft.com/)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] using display:table-cell blows up in IE
On Jan 22, 2006, at 4:33 PM, John Haas wrote:
I finally figured out how to achieve the look of what used to be
floated divs, centered in a page (when I don't know the width of
the parent div).
Right now, I'm using a wrapper div with a display:table and an
inner wrapper div with a display:table-row. The colored boxes for
the movie campaigns are set to display:table-cell.
However, in IE, this displays all the campaign divs one on top of
the other, as opposed to the intended horizontal layout.
Hrmmm -- you mentioned you don't know the width of the parent div;
but I assume you know the width of the centered div.
Is there a reason you're not using the following:
div id=centeredSome content.../div
#centered { width: 600px; margin: 0 auto; }
This will work regardless of the width of the parent element, or even
if there is no parent element.
--
Matthew Levine (http://www.infocraft.com/)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Collumn Divider for Liquid Multi-column Layout, any Column Longest
On Jan 20, 2006, at 11:19 AM, Dagmar Noll wrote:
Hey folks. My brain is hurting. Can someone nudge me along a bit (at
this point, if it is hopeless, I wouldn't mind being put out of my
misery either)?
I am trying to have a line along the left nav extend to the base of
the
content. It works just as I'd like it on this page:
I'd recommend checking out the One True Layout -- it allows you to
get equal-height columns using divs for layout.
http://www.positioniseverything.net/articles/onetruelayout/equalheight
The basic concept is that you add padding to the bottom of the column
elements, but a negative margin to the container:
div id=container
div id=center class=column/div
div id=left class=column/div
div id=right class=column/div
/div
#container { margin-bottom: -1000em; overflow: hidden; }
.column { padding-bottom: 1000em; }
This will let you add a border to the left column that will extend to
the bottom of the page, no matter which column is tallest.
Unfortunately, there's a bug with Opera 8.5's overflow: hidden, but
you can work around this (see the URL above) or trust Opera users to
upgrade to 9.0.
--
Matthew Levine (http://www.infocraft.com/)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Spacing/text size question
On Jan 16, 2006, at 4:07 PM, Amal Bala wrote:
I have achieved my goal of controlling text size (and thus spacing) in
Internet Explorer, but when I visited my site on a Mac, which uses
Safari as the browser, I realized the spacing and sizing get
distorted. In other words, the style sheet seems not to work at all.
Is there something special I need to do so the style sheet works on
Mac browsers as well as PCs?
Hi Amal,
There's nothing special you need to do to support Safari, Firefox,
Opera (usually), and so forth. In general, each of these browsers
provideds good support for the W3C standards for HTML and CSS. It's
IE that provides pretty poor support, so we usually have to modify
our stylesheets to account for IE's quirks.
As you continue to develop your CSS skills, I'd actually recommend
starting by developing on Firefox, since it should respond
predictably to your changes, and then work around IE's quirks.
As for font sizing, I should preface my remarks by saying that fonts
are always going to be different between browsers and platforms. You
shouldn't expect pixel-perfect accuracy, but should design so that
your site looks good and won't break in a variety of situations. Dan
Cederholm's book Bulletproof Web Design has some great information
on this.
I took a look at your site, and saw that you're using points for font
sizing. Points are great for print, but they're pretty lousy for web
design. Pixels are a bit better, but you can't resize pixels with IE,
so visitors reading the text are out of luck. Relative units (small,
medium, large; ems, and percentages) are usually the way to go.
I'd suggest setting a base font size for your document like this:
body { font-size: small; }
And then modifying the elements using ems or percentages, like this:
h2 { font-size: 1.5em; }
or
h2 { font-size: 150%; }
Hope that helps!
--
Matthew Levine (http://www.infocraft.com/)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] target attribute of anchor
On Jan 15, 2006, at 1:19 PM, Francesco wrote: Has the target attribute of the anchor tag been deprecated? If so, how are we now supposed to specify a target window? Francesco, There are two primary uses for targets: frames and popups. Many people (myself included) are of the opinion that frames are generally unfriendly to your visitors. HTML, CSS and Javascript have evolved to the point that Almost anything that you can do with frames you can also do in a single document. For these solutions, the target attribute just isn't necessary. However, if you absolutely require frames, you can use a FRAMESET doctype declaration, which will still validate with the (deprecated) target attribute. There are some cases in which opening new windows (for which targets are also used) is a good idea. The example that springs to mind is Amazon's now-standards What's This? link, which brings up a helpful explanation in a small popup. For this, a bit of unobtrusive Javascript is almost definitely the best way to go, so target is again unnecessary. -- Matthew Levine (http://www.infocraft.com/) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] stuck on the last bits of validation.
On Jan 14, 2006, at 5:19 PM, Tina Clarke wrote: I have validated as much as I am able with this site http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F% 2Ffrontpage-tips.com%2F I can't understand what is wrong with the margins .. or even where they are for the two errors... Tina, The errors are coming from inline CSS, embedded in style attributes within the HTML itself. The offending lines look like this: style=margin-top: 3 The problem with these declarations are that you need to specify the units of the margins, i.e.: style=margin-top: 3px That should do the trick. I'll refrain from the obligatory comment on the irony of using valid CSS with a page that showcases FrontPage tips... Whoops. Good luck! -- Matthew Levine (http://www.infocraft.com/) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] stuck on the last bits of validation.
On Jan 14, 2006, at 8:06 PM, Tina Clarke wrote: Ah the schoolboy humour It's the nut behind the wheel that does the job and yes I'm not that good at it .. it's merely my hobby and I'm just a housewife, so who cares? I hope you didn't read my comment about FrontPage as a judgement on you or users of FrontPage in general -- that's just not the case. Like the forthcoming iWeb, I think these tools are great for the democratization of the web, despite the fact that they produce less- than-admirable HTML and CSS. I would, however, love to see better standards support in the future. Why is it ,it's always men making the usual 'FrontPage put down'? Oh.. yeah ... 'my car is bigger, sorry better than your car' syndrome ... so THAT'S why you guys do that another lightbulb moment. http://www.molly.com/2004/02/06/ms-frontpage-gotcha/ http://www.meryl.net/blog/archives/001464.php#001464 Molly and Meryl are both women: it's not about gender or competitiveness, it's about pride in our craft and the medium we love. And if you're helping people improve their pages, regardless of what tool they're making them with, you're doing a Good Thing too, and you have my support. I'll just have to be better about framing my offhand remarks in the future :) -- Matthew Levine (http://www.infocraft.com/) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] default p margins
On Jan 10, 2006, at 9:39 AM, Torp wrote:
Without css a p gets a blank line before and after
1) even when there is an image
2) except when the p is on top.
But when changing the margins with css, these two behaviours are gone.
Is there a workaround for this?
The reason (1) and (2) happen is because, with most browsers, there's
a default style rule that behaves like this:
p { margin: 1em 0; }
So p will always have a single line-height margin on top and on
bottom, regardless of contents (images, texts, input elements,
whatever).
If the p is on top, I'm not sure exactly what you mean by this.
On top of what?
My best guess is that you mean on top of another p. In this case,
the vertical margins collapse, which means that the space between the
two p tags (or any other elements with vertical margins) will be
the greater of the two margins, not the sum of the two margins. For
two unstyled p tags, that means there will only be 1em of space
between them, not 2em (as it would be if you added the margins).
As for workarounds, I'm not exactly sure what you're trying to
accomplish. The effects you describe are margins -- but you want to
apply different margins?
If you want to preserve this exactly behavior, make sure that your
vertical margins are 1em. You can set the horizontal margins to
whatever else you want.
I hope that helps. Send out a clarification of the effect you're
trying to achieve (or a link), and I'll try to do a better job of
explaining it :)
--
Matthew Levine (http://www.infocraft.com/)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] default p margins
On Jan 10, 2006, at 2:43 PM, Torp wrote: This works. So by adding the #col2 rule the specifity gets higher? Almost a hack... I wouldn't quite call it a hack; it's not exploiting any browser problems like the * html hack. It's just making use of normal specificity rules from the CSS spec: http://www.w3.org/TR/CSS21/cascade.html#specificity Specificity is a great tool I use constantly in my work. Glad it helped out! -- Matthew Levine (http://www.infocraft.com/) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Spread words evenly.
On Jan 10, 2006, at 6:02 PM, Daniel Liljeberg wrote:
I have a string of words like this.
Foo1 Foo2 Foo3 Foo4
How do I do to place them evenly within a div?
I tried to do something like this and thought that MIGHT place the
spans
like I wanted them to.
div style=text-align: justifyspanFoo1/spanspanFoo2/span.
But as you can guess. No go :P
So, any ideas?
Daniel,
I'd mark up these words as a list and float the list items. Here's
what it would look like:
HTML:
ul class=even-words
liFoo1/li
liFoo2/li
liFoo3/li
liFoo4/li
/ul
CSS:
ul.even-words {
margin: 0;
padding: 0;
list-style: none;
}
ul.even-words li {
margin: 0;
padding: 0;
float: left;
width: 25%;
}
Be aware of a couple of issues with this method.
First, you might run in to rounding problems with IE, so it'll
probably a good idea to decrease the width to something more like 24.9%.
Second, since you're floating the list, you'll need to clear the
floats to preserve your layout. If it makes sense to clear the
element directly after this list, do that (you might also want to
float the ul in this case, if you need it to be tall enough to
contain the floats; i.e. if it's background is important).
Otherwise, you might want to auto-clear the ul. You can do it with
this code:
.even-words:after {
content: ;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .even-words {
height: 1%;
}
This will make the ul act as a normal block-level element; no need
to worry about its floating contents.
Hope that helps!
--
Matthew Levine (http://www.infocraft.com/)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Link states getting confused
On Jan 9, 2006, at 10:57 AM, Bart Hook wrote:
The states of my links seem to be getting confused. They all end up
looking like the footer links. Any idea why this may be happening?
Any help
is greatly appreciated.
Here is the CSS:
.footer a:link, a:visited {
color: #ff;
text-decoration: none;
}
.footer a:hover, a:active {
color: #ff;
text-decoration: underline;
}
Bart,
The problem is with the last two declarations. After the comma, it's
an entirely new selector -- the a:visited selector doesn't know that
it's supposed to come under the .footer. Same with a:active. A
visited link will always look like what you intend to be a footer
visited link.
Here's how the declarations should read:
.footer a:link, .footer a:visited {
color: #ff;
text-decoration: none;
}
.footer a:hover, .footer a:active {
color: #ff;
text-decoration: underline;
}
That should do the trick.
Good luck!
--
Matthew Levine (http://www.infocraft.com/)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Full Page Height
On Jan 8, 2006, at 3:22 PM, - Eli - wrote:
Hi,
I'm trying to convert this page - http://www.jhu.edu/liondance/ - that
uses frames into one that doesn't use frames. The difficult part is
that the middle section with the content is resizeable dependent upon
the height of the browser window, so that there is never a scroll-bar
anywhere else except in the content pane itself. I tried to replicate
with with CSS, but was unable to do so correctly. I would post the
code that I have so far, but I don't know the proper method to do so.
I don't think pasting all the code here would work. I'll try a file
attachment, though.
Thanks,
- Eli
You want to use the overflow: auto property on the middle content.
That will get it to scroll when it overflows. To force the container
to be exactly the height of the window, my initial impulse would be
to use absolute positioning with top: 1em and bottom: 1em (to
give it a little padding). However, I believe there are some browser
problems that crop up with this approach (although it's been awhile
since I've tried).
You can use the incredibly tall but clipped concept on the
container from the One True Layout (http://
www.positioniseverything.net/articles/onetruelayout/equalheight). It
would look something like this:
#main { padding-bottom: 1001em; }
body { overflow: hidden; margin-bottom: -1000em; }
Hope that helps. Good luck!
Matthew Levine (http://www.infocraft.com/)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] perspective diff in firefox/ie
On Jan 8, 2006, at 1:08 PM, [EMAIL PROTECTED] wrote: Just wondering - although sites looks the same in both Firefox and IE, IE displays everything slightly larger, very slight. Is that normal for the web browser? If I were to adjust text slightly smaller for IE, they are similar. I've noticed the same thing. It's normal. In general, pixel-perfect fidelity between browsers or platforms is impossible to achieve -- but if you've got everything else looking the same, as you say, then you're in good shape. The key is to avoid making anything depended on a precise font width. For a whole book on make sure your website behaves well under adverse conditions, check out Dan Cederholm's excellent Bulletproof Websites. Other question - I am using the CSS dropdown menu from an Eric Meyer book. Works wonderfully in Firefox IE. (with ie I use the csshover.htc file), but not Konqueror. With Konqueror's limited use, should I be concerned and is there a fix? I'm not sure which one you're referring to in particular, but the answer is usually check your browser stats. Unless you're getting a significant number of visitors using Konqueror, it shouldn't be a problem. The same goes for Safari, Opera, IE5.5, IEMac, etc (although supporting Opera and Safari usually aren't too much, if any, extra work). Cheers, Matthew Levine (http://www.infocraft.com/) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site check Please
On Jan 7, 2006, at 6:45 PM, Sam Leathers wrote: Hey everyone. I finally got a chance to work on my own site, and I think it's pretty good, but I'd like the experts opinions on if theres anything I should change either for aesthetics or accessibility. the site is www.samleathers.com. Your markup is very clean; well done on that count. As far as markup and accessibility a couple things jump out at me: 1) You've definitely got a good handle on image replacement. In the case of the picture, however, I'd recommend using an img tag instead for three reasons: - Since it's an actual image, it would make more semantic sense to use an img tag instead of a div. - Browsers without images or CSS support won't see anything; they should see Sam Leathers Computer Services. You can accomplish this either with the alt tag on an image, or by placing the text inside the div and adding text-indent: -1em property. - An image tag would be easier to wrap in an anchor to link to the homepage (a good usability practice). 2) I'd consider adding some :hover effects to your links. From an accessibility perspective, it's a good visual cue that you're correctly targeting the link, particularly for users with limited vision or mobility who might otherwise have trouble telling when they're able to click. Cheers, Matthew Levine ([EMAIL PROTECTED]) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Boxy in Foxy...
On Jan 7, 2006, at 10:11 PM, Joe Friend wrote:
I'm missing something. I know it, but I can't find
it. Need another set of eyes. It's one of those 'it
works in IE but not Firefox' sort of issues but I only
use Firefox so it's bugging me.
I'm having a DIV in a DIV issue where the parent is
not resizing to the contents of the container. Here
is the link: http://www.burnbaby.net/manifesto.htm if
anyone feels like popping their eyes over to it. I
tried the validator, went through the archives here,
read a bunch of Eric's articles- no dice.
Thanks, in advance, for any replies.
Hi Joe.
It looks like you're floating both the children of #middlebox. If an
item is floated, it's non-floating container should *not*
automatically expand to contain it. IE does this, but it's a bug.
Firefox is exhibiting the proper behavior, which is giving the
container the minimum height you assigned it.
There are a couple of ways to fix this.
First, you could float the #middlebox. Floating elements WILL expand
to the height of their floated contents. You just need to make sure
that the footer has clear: both on it.
Second, you could auto-clear the #middlebox. This is a bit of a hack,
but the formula is straightforward:
#middlebox:after {
content: ;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html #middlebox { height: 1%; } /* For IE */
Hope this helps. Good luck!
Matthew Levine (http://www.infocraft.com/)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layout Consultation/Analysis
On Jan 6, 2006, at 10:14 AM, Thomas Hall wrote: Group, I have been asked to recode an existing site for seo purposes - http://www.bestlubrication.com http://www.bestlubrication.com/ As you can see in the code it is not properly structured using a plethora of tables and inline styling. After poking around the site a bit you can see it is a pretty elaborate site but the layout seems consistent from page to page. That being said I am curious to know what type of div layout you see from looking at it. I see a header section across the top, a nav section on the left, and a main content section. This would be a 2-column layout with a header and a footer no? Hi, Thomas. It looks to me like this layout is the infamous Holy Grail of CSS -- the three column layout with fixed sidebars and a liquid center. There are a number of techniques for achieving this effect: One True Layout: http://positioniseverything.net/articles/onetruelayout/appendix/ holygrail Sheriar Designs: http://www.manisheriar.com/holygrail/index.htm Glish (although this version lacks full-width footers): http://glish.com/css/7.asp I also happen to be working on a version of this layout that achieves the same effect with more flexibility and less markup. I'm preparing it for publication now, but if you're interested in an advance copy please contact me privately. Cheers, Matthew Levine ([EMAIL PROTECTED]) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS and RSS Feeds
On Jan 6, 2006, at 11:01 AM, Ionize wrote:
I have a couple of questions if you folks out there don't mind
answering.
1: Can CSS be used to contain an RSS Feed, what i mean by this is
that if
you create a div container and insert the RSS code in there will
it be
bound by the rules placed on it by the style sheet, not so much in a
formatting type of way but in more of a size way.
2: With the background-image for individual divs can sepearte
images be used
in each and every div?
3: How do you replace url's with images?
4: Not sure about asking this question here, but in the css zen garden
files, any text content within a div is encolsed by span tags. Can
somebody explain this?
Sorry if these are silly questions, but the only way I will learn
is by
asking heehee.
Not at all, Dave; that's what this list is for.
As for your answers:
1) Since RSS code isn't actual HTML, it will probably just display as
a string of plain text, which won't be very readable at all. I
believe you could use XSLT to transform the RSS into HTML, so it will
then behave properly, but I'm afraid I don't know too much about that.
2) You can use as many different background images you like in
separate divs. A common arrangement is like this:
div id=container
div id=center-column/div
div id=left-column/div
div id=right-column/div
/div
And the CSS:
#center-column { background: url(center-image.png); }
#left-column { background: url(left-image.png); }
#right-column { background: url(right-image.png); }
Repeat for as many different divs as you need.
3) I like to use the text-indent method. HTML:
a id=my-link href=/some/web/siteCome on in!/a
CSS:
#my-link {
display: block;
text-indent: -1em;
width: 120px; /* width of image */
height: 90px; /* height of image */
}
4) When Dave Shea put the Zen garden together, he wanted to put as
many hooks for CSS in as possible to allow maximum style flexibility
with a single HTML file. That's the reason for the extraneous markup,
like the spans inside the divs and the extra divs at the bottom.
These basically just give the designers an extra element to work with
when they're writing their style sheets. I wouldn't recommend using
spans inside divs in all of your work, though :)
Cheers,
Matthew Levine ([EMAIL PROTECTED])
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] move scrollbar to far right
On Jan 6, 2006, at 11:59 AM, Tim Robertson wrote:
Hi,
I have created a CSS page with 3 main sections a little header,
content, footer with white space around them all.
I have managed to make it so the header footer remain static, but
the content scrolls if necessary. (so far it works on Mac IE 5.2,
Firefox 1.0.6 and Safari 2.0.2
The problem is the scrollbar for the content appears just within the
content area itself, I would like to have it so it appears on the far
right as a full, normal vertical scrollbar, any suggestions?
A link to an example is at:
http://www.m-2-design.com/Innovus/
Thanks for any input
Tim
Hi Tim.
I think the solution is to use position: fixed on the header and
footer. As you may well know, this works fine in Safari, Firefox and
Opera, but (as usual) IE doesn't support position: fixed.
However, you can trick IE into simulating position: fixed by
absolutely positioning them with respect to the html element and then
moving the scrolling mechanism to the body element.
I believe the code goes something like this:
/* Move the scrolling mechanism for IE */
* html { overflow: hidden; }
* body { height: 100%; overflow: auto; }
/* Set the positions */
#header { position: absolute; left: 0; right: 0; top: 0; }
#footer { position: absolute; left: 0; right: 0; bottom: 0; }
/* Fixed position for standards-compliant browsers */
html #header { position: fixed; }
html #footer { position: fixed; }
Check out this article on tagsoup for more info:
http://tagsoup.com/-dev/null-/css/fixed/
Good luck!
- Matthew Levine (http://www.infocraft.com/)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Button Style
On Jan 6, 2006, at 1:12 PM, Conyers, Dwayne, Mr [C] wrote:
I have a style that makes a hyperlink look like a button -- but
have been
using JavaScript onFocus() and onBlur() to affect button like behavior
(i.e., a depressed and raised state). I would like to do this with
CSS and
would appreciate advice.
The current CSS is:
a.button:link, a.button:visited, a.button:hover
{
text-decoration:none; font-variant: small-caps; border-style:
outset; border-width: 2; padding-left: 2; padding-right: 2; padding-
top: 0;
padding-bottom: 0; background-color: #C0C0C0
}
a.button:active, a.button:focus
{
text-decoration:none; font-variant: small-caps; border-style: inset;
border-width: 2; padding-left: 2; padding-right: 2; padding-top: 0;
padding-bottom: 0; background-color: #C0C0C0
}
Dwayne,
If you want the button to look depressed when the user clicks a link,
it looks like you're on the right track. The :active pseudo-selector
will pick out links that are currently being clicked, no Javascript
necessary. Your CSS works fine for me. I simplified it a a bit,
taking advantage of inheritance:
a.button {
text-decoration: none;
font-variant: small-caps;
border: 2px outset #999;
padding: 0 2px;
background-color: #C0C0C0;
}
a.button:active {
border-style: inset;
}
I put an example online here:
http://www.infocraft.com/examples/buttons.html
The effect works in Safari and Firefox; I didn't test elsewhere. If
there's a problem with another browser, it's most likely due to lack
of support for inset and outset borders, in which case you could set
the colors explicitly to achieve the same effect.
Cheers,
Matthew Levine (http://www.infocraft.com/)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS newbie books
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of ghvyghvy Sent: Thursday, January 05, 2006 8:31 AM To: css-d@lists.css-discuss.org Subject: [css-d] CSS newbie books I joined this group and I daily receive messages. I am a newbie to CSS. I would like to learn CSS. Please give me a set of books with authors so that I can learn from start in a step by step way. I know HTML (almost). I need to learn CSS now. Please advice. I'd recommend the Definitive Guide to CSS, by Eric Meyer (you can't go wrong with Eric Meyer). I haven't read all the way through it, but it's aimed towards those learning CSS: http://www.amazon.com/gp/product/0596005253/ (CSS: The Definitive Guide) However, I have read his excellent New Riders books, for when you've got the basics down. He walks you through dozens of projects, with practical examples, advice, and tips throughout: http://www.amazon.com/gp/product/073571245X/ (Eric Meyer on CSS) http://www.amazon.com/gp/product/0735714258/ (More Eric Meyer on CSS) Good luck! - Matthew Levine (http://www.infocraft.com/) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
