DreamweaverFAQ.com
Search the site!Search DWfaq.com | Print This PagePrinter Friendly Page
Current: Default | Default: DWfaq Green


DreamweaverFAQ.com » FAQ » CSS FAQs


CSS FAQs

Q. How do I make colored scrollbars?

A. Colored scrollbars (IE 5.5+ PC & AOL 6 only) can be achieved by redefining the body tag using CSS. Here is some sample code:

<style type="text/css">
<!--
BODY {
SCROLLBAR-FACE-COLOR: #0033CC;
SCROLLBAR-HIGHLIGHT-COLOR: #0033CC;
SCROLLBAR-SHADOW-COLOR: #666666;
SCROLLBAR-3DLIGHT-COLOR: #CCCCFF;
SCROLLBAR-ARROW-COLOR: #6699FF;
SCROLLBAR-TRACK-COLOR: #000000;
SCROLLBAR-DARKSHADOW-COLOR: #990000;
}
-->
</style>

Custom Scrollbar Tutorials
URL: http://www.dhtmlshock.com/other/ColoredScrollbars/default.asp
URL: http://wsabstract.com/howto/scrollbarcolor.shtml
URL: http://builder.cnet.com/webbuilding/0-7690-8-4807353-1.html?tag=st.bl.7690.d

You can get the Custom Scrollbar Extension at the Macromedia Dreamweaver Exchange.


Q. How can I make a background that does not repeat?

A. This is done with a CSS declaration of background-repeat: no-repeat.

<style type="text/css">
<!--
body{
background-image : url(http://www.yoursitename/images/backgroundimage.gif);
background-repeat : no-repeat;
}
-->
</style>


Q. How do I make different colors for links on the same page?

A. You will need to set up individual pseudo classes for each link state for each different style that you want. It may sound complicated, but it is really easy once you go through the tutorials listed below. Here is some sample CSS code with CSS comment tags shown in this color:

<style type="text/css">
<!--
/*This is the default link style for any links that you do not apply a class to.*/
a:link { color: #003399}
a:visited { color: #993399}
a:hover { color: #009999}
a:active { color: #993333}
/*Apply this class to the text you'd like a different link color. Text that is not a link will appear in this style.*/ .navbar { color: #333333} /*These are the link style definitions.*/
a.navbar:link { color: #6600CC}
a.navbar:visited { color: #666666}
a.navbar:hover { color: #0066CC}
a.navbar:active { color: #CC6633}
-->
</style>

How to create multiple link styles

-CSS Link Styles Tutorial
by Patty J. Ayers
URL: http://www.thepattysite.com/dreamweaver/linkstyles.html

-The PVII Link Styles Series
by Project VII
URL: http://www.projectseven.com/tutorials/


Q. How do I make a text rollover?

A. This is done using the CSS hover pseudo-class selector. You must list your link styles in the order shown below, Link, Visited, Hover, Active. Place this code (with your color choices) above the closing </head> tag in your HTML document.

<style type="text/css">
<!--
a:link { color: #003399}
a:visited { color: #993399}
a:hover { color: #009999}
a:active { color: #993333}
-->
</style>

Note: The CSS pseudo-classes a:hover and a:active are not supported in Netscape versions 4.xx and below. Internet Explorer and Netscape 6 do support these pseudo-classes.

Please see the CSS Tutorials Page for additional information.


Q. How do I remove the underlines from links?

A. This is done with a CSS declaration of text-decoration: none. Place this code (with your color choices) above the closing </head> tag in your HTML document. This code demonstrates the removal of the underline on hover. Remember, hover is I.E. only.

<style type="text/css">
<!--
a:link { color: #6600CC}
a:visited { color: #666666}
a:hover { color: #0066CC; text-decoration: none}
a:active { color: #CC6633}
-->
</style>

Please see the CSS Tutorials Page for additional information.


Q. My CSS works well except for some styles that Netscape 4 has trouble with. Can I hide these styles from Netscape but still use them for other browsers? Or: What is the @import Trick? Or: How can I link one stylesheet for Netscape and another for Internet Explorer and Netscape 6?

A. First you link an external stylesheet (as you usually do) for all of your styles that agree with Netscape 4.xx. Then you use the @import trick to link all of your Internet Explorer and Netscape 6 CSS. Netscape 4.xx ignores the @import. By placing your IE/NS 6 CSS @import *after* your linked CSS, it is considered more important and will override (or combine with) the styles in your linked CSS.

<link rel="stylesheet"
  href="http://www.dwfaq.com/color_schemes/dwfaq/master.css" 
  type="text/css">
<style type="text/css">
<!-- @import "http://www.dwfaq.com/color_schemes/dwfaq/ieonly.css"; -->
</style>

Q. How can I make a fixed background that does not scroll?

A. This is done with a CSS declaration of background-attachment: fixed.

body{
background-image : url(http://www.yoursitename/images/backgroundimage.gif);
background-attachment : fixed;
}

Note: Attached backgrounds are not supported in Netscape versions 4.xx and below. The image will be thrown in the upper left hand corner of the browser window. To circumvent this issue use this declaration only in a second stylesheet @import.

More CSS FAQs

WebReview.com's CSS FAQ
by Eric A. Meyer
URL: http://www.webreview.com/style/css-faq.shtml

HTML Writer's Guild
- General FAQ's
http://www.hwg.org/resources/faqs/cssFAQ.html
- Specific FAQ's
http://www.hwg.org/resources/faqs/1cssFAQ.html

CSS Tutorials

Please see the CSS Tutorials Page.

CSS Resources

Please see the CSS Resources Page.

::This page last modified 8/13/2013 at 04:35::

Copyright © 2001-2024 DreamweaverFAQ.com All Rights Reserved.
All brands, trademarks, tutorials, extensions, code, and articles are the property of their respective owners.
A production of Site Drive Inc.
Legal Notice | Privacy Policy | Disclaimer & Notice