NWE Help: Web: Authoring: HTML: CSS: Tips

NWE Home :: Help :: Web :: Authoring :: HTML :: CSS

Nifty in-page Scrolling

You can create neat in-page scrolling sections using code that relies on CSS2. While CSS2 isn't yet supported by most browsers, our version of Mozilla supports this trick. Having a scroll bar in your HTML page can be a huge pain if you have a lot of actual content, and it stinks for printing. But, for small elegant sites where you're more concerned with the design than with all of the content, this allows you to control the look of the site without having to rely on frames. Check out this page to see the in-page scrolling.

To do this on your own page, you'll need to use the overflow setting for a block element, and set the overflow to scroll. The options for overflow are visible (the default), scroll, hidden, and auto.

For more, see the W3 site: http://www.w3.org/TR/CSS21/visufx.html

Putting an Image in the Web Address Space

Click on this page and look at the space where you can type in a web address and you should see a green star.

To put an icon in the URL space of one of your own pages, make a very small image. By very small, it should be 16 X 16 pixels and it should only use 16 or 8 colors. The image should be a gif and it should be very basic or it'll be too small to look like anything. Once you have your image the way you want it, rename it to have the extension .ico instead of .gif. It needs to have the .ico extension to be viewed as an icon, and it needs to be an icon for this to work.

Then, use this code inbetween the HEAD tags of the page:

< link REL="shortcut icon" type="image/x-icon" HREF="/path_to_image/favicon.ico" >

Check your page and you now have an icon. If you want the image to appear in someone's Internet Explorer Favorites links as an image, just name your image favicon.ico and it will work.

You can also add an icon to your webpages by simply putting an icon named favicon.ico in the same directory, or in your root directory. For instance, the CLASNet pages all have the CLAS icon because favicon.ico is in the http://www.clas.ufl.edu/ directory, here: http://www.clas.ufl.edu/favicon.ico

Using CSS to Make Drop Down Menus

A List Apart, a webzine covering multiple style aspects, has a great article on using CSS to make drop down menus, here.

Mezzoblue

In order to promote the use of CSS, mezzoblue sponsored a design contest where designers took the same HTML and applied different images and stylesheets for different effects. The contest has all of the HTML and CSS pages, most of which are heavily commented to help new users. Check these CSS and HTML pages out for ideas, but please remember that these are only for reference use. The contest pages are linked from here: http://www.mezzoblue.com/zengarden/alldesigns/

CSS Validator

The World Wide Web Consortium (the people in charge of changes made to the HTML standard) has a handy-dandy CSS validator, which will check your code and display any errors.

CSS2

These pages cover only CSS1 styles, but CSS2 style sheets are supported by newer browsers and allow for more complex formatting. For CSS2 compliance and CSS1 and JavaScript, please note that hyphens are removed from the style attributes because JavaScript reads hyphens as minuses. For CSS2 and CSS1 pages with JavaScript, remove the hyphens and make the first letter of the next word capitalized. So, border-width becomes borderWidth and border-right-width becomes borderRightWidth.

Eric Meyer's CSS/edge demos

Eric Meyer, author of O'Reilly's most recent CSS book, has a website where he posts many of his solutions to how to use CSS to accomplish what only javascript could do before. Included are pure-CSS popups, using nifty backgrounds, and designing text around irregular image layouts. Poke around and see what you find!