Our new addition
Our new addition
The Office of Marketing and Communications is pleased to welcome Gina Prodan, to our Web development team.
The Office of Marketing and Communications is pleased to welcome Gina Prodan, to our Web development team. Gina comes to us from Kent State University where, in her capacity as Senior Web/Editorial Specialist, she worked on—among other things—the award winning Kent State Magazine Web site.
Gina is just settling in right now, getting her computers configured and such, but we’ll soon have her busy building sites, answering questions, and sharing her insights here on the Web Development blog. (In fact I’ll be tagging her to follow up on a blog meme later today.)
7 Advanced CSS Menu, A Great Roundup!!
New techniques are being developed and updated all the time for creating unique menu techniques. We keep an eye on the recent developments and collect new ideas and methods for our readers and after all the great appreciation this post got 13 Awesome Javascript CSS Menus, i thought it would be nice to get you […]
New techniques are being developed and updated all the time for creating unique menu techniques. We keep an eye on the recent developments and collect new ideas and methods for our readers and after all the great appreciation this post got 13 Awesome Javascript CSS Menus, i thought it would be nice to get you a fresh round-up of 7 Advanced CSS Menus techniques, that might be useful for you in your next design project.
1) Advanced CSS Menu
Check out this great CSS advanced menu tutorial by Nick La, showing us how to slice up the menu design step by step and putting them together with CSS.
Note: there is an IE6 bug where the hover effect doesn’t display properly. To fix that, you can use Javascript to specify the to display block on mouseover.
2) Advanced CSS Menu Trick
A new concept by altering the non navigation items on hover state which will focus the user’s attention on the item they have hovered on, and create a new look and feel for the site overall. Works perfectly in any modern browser, yet still be fully functional in your older version of IE as well.
3) Son of Suckerfish Dropdowns
The Famous Suckerfish Dropdowns is now back and they’re more accessible, even lighter in weight (just 12 lines of JavaScript), have greater compatibility (they now work in Opera and Safari without a hack in sight) and can have multiple-levels.
4) Tree Frog slide and fly menu
This menu has a vertical sliding first sub level then two flyout levels and demonstrates how it is possible to change positional styling from ‘absolute’ and off screen to ’static’ and expanding the menu vertically.
5) Mike’s Experiment
A useful CSS technique for providing pop-up descriptive content by extending nav menus with tool-tips, alerts, notifications, or additional info.
6) 8 web menus you can’t miss
8 Great CSS based Menus, you just can’t miss.
7) Drop Down Tabs
Drop Down Tabs comes with 5 sleek examples to let you quickly pick your favourite to use on your site. Customize each example’s CSS to modify the look as desired. We got you covered alright!
You can find great resources at the links below:
- 13 Styles Focuses on CSS menu design and also offers free menus for download.
- 14 Free Vertical CSS Menus designed by exploding-boy, simple and various styles.
- CSS only drop-down menu
- Deluxe CSS Dropdowns and Flyouts
- Centered Tabs with CSS
Weekly Links - January 27th
Vector people illustrations - by Stylizedweb, A list of free vector people illustrations that are suitable for all type of sites from personal blogs, to designer showcases, and even professional and corporate sites.. Shadowbox Media Viewer- Cross-browser, cross-platform, cleanly-coded media viewer application written entirely in JavaScript. Liquid styled input element with CSS- This tutorial explains how to […]
Vector people illustrations - by Stylizedweb, A list of free vector people illustrations that are suitable for all type of sites from personal blogs, to designer showcases, and even professional and corporate sites..
Shadowbox Media Viewer- Cross-browser, cross-platform, cleanly-coded media viewer application written entirely in JavaScript.
Liquid styled input element with CSS- This tutorial explains how to implement a simple liquid styled input element using css.
Mootools animated sidebar menu- How to implement an animated sidebar menu using mootools.
12 Steps to Creating a Professional Web Design- Although there is no “one size fits all” process to creating a website, there are a number of things a website designer must do to create a professional web design and website.
Out of Office
I’ll be out of the office until December. If you have questions related to content development for your Case Web site, event postings, news stories or announcements in Case Daily feel free to contact the Office of Marketing and Communications. If you have questions regarding the username and password for your account on the main campus Web server (Aurora) contact webmaster@case.edu. If you need to transfer your account to a new maintainer, fill out an account application form and indicate that it is a transfer. If you have questions about uploading files to your account, review the entry on Uploading…
I’ll be out of the office until December.
If you have questions related to content development for your Case Web site, event postings, news stories or announcements in Case Daily feel free to contact the Office of Marketing and Communications.
If you have questions regarding the username and password for your account on the main campus Web server (Aurora) contact webmaster@case.edu. If you need to transfer your account to a new maintainer, fill out an account application form and indicate that it is a transfer.
If you have questions about uploading files to your account, review the entry on Uploading your files with Dreamweaver.
If you need to download Dreamweaver from the software center it is now part of the Adobe Creative Suite.
Happy Thanksgiving!
Weekly Links - January 7th
Building a Successful Niche Social Media Website: An Interview With Andrew Egenes of Design Float - by Vandelay Design, this is an interview that will give you several ideas in case you plan to run your own social media site. How To Make Walking Links - by Chris Coyier, a “walking link” is a link with […]
Building a Successful Niche Social Media Website: An Interview With Andrew Egenes of Design Float - by Vandelay Design, this is an interview that will give you several ideas in case you plan to run your own social media site.
How To Make Walking Links - by Chris Coyier, a “walking link” is a link with a dotted underline created by a background image. Upon rollover or active state, the dots become animated and begin to walk.
Chosing color and color schemes - Ultimate Resource List- A web color palettes and color palette generators. From desktop software to web software, its all covered here.
9 Essential Principles for Good Web Design- By PSDTuts, What to look for in a good wed design.
Advanced CSS Printing - Using CSS Page Breaks- By David Walsh, One important aspect of making your pages printer-friendly is by using CSS/XHTML page breaks.
CSS Tip: Positioning photos with floats
In the past I’ve discussed how the use of photos can enhance a Web site, but I’ve not discussed the code one uses to incorporate them. On campus, and elsewhere, Web designers use a variety of techniques to include their photos.
Night shot of one of three recently dedicated light pavilions on Superior Avenue.
In the past I’ve discussed how the use of photos can enhance a Web site, but I’ve not discussed the code one uses to incorporate them. On campus, and elsewhere, Web designers use a variety of techniques to include their photos. Some will build complex tables to get their photos positioned just right while others will add something like hspace=”5″ vspace=”5″ align=”right” into the img tag.
Neither of these is recommended by current standards (the latter is deprecated as of HTML 4.1 but is necessary in HTML e-mail) nor do these techniques give you the control you need. A better way to do this is with Cascading Style Sheets (CSS).
Create a CSS class to float your photos to the right or left of your text
An easy way to include photos is to use the CSS property “float” to float the image to the right or left of the content that follows. One can float either the image itself or a container, such as a paragraph enclosing the image. I prefer to do the latter in case I wish to include a caption with the image.
One begins by opening the page’s existing stylesheet and defining a new class to contain the image. On this blog I typically use a class I call “photoright.” The code in the stylesheet looks something like:
.photoright {float: right; padding:2px 0px 8px 10px; margin: 0; font-size:90%; color: #7F8E29; font-style:italic; width: 200px;}
Close-up of different pavilion in daylight.
This picture uses a class without the
width defined. I can add line breaks
(with varying results) or let some of the comment
push past the edge. Note how this moves the photo in.
- .photoright is the name of the class. Usually class names don’t include things like location and color (in case one wants to change those attributes in the future) but I typically include a .photoright and a .photoleft in all of my stylesheets just to offer some flexibility, and in this case the literal naming convention seems practical.
- float: right; indicates that the paragraph (or other entity such as a div) will float to the right of whatever content follows.
- padding:2px 0px 8px 10px; sets the padding for the paragraph. Padding is listed in clockwise order from top to the left, thus this class would have 2 pixels of padding on top, 0 to the right, 8 below and 10 to the left. Given the existing line-height of my regular paragraphs the 2 pixels on top allow me to line up the top of my photo with the top of uppercase letters in the main text. 0 on the right lets me float the picture as far to the right as the text will allow, 8 on the bottom gives me some space for text that wraps below the photo and the 10 to the left gives me some space between the photo and the text.
- margin: 0; specifies that I have 0 pixels of margin on all sides. I’m using padding to set my spacing rather than margins so that my captions will begin at the same left edge as my photos and because Internet Explorer may interpret margins differently than other browsers.
- font-size:90% indicates that my caption text should be 90% the size of my normal text. Some users may prefer .9em. (I’ll leave the merits of various font-sizing methods for a later discussion.)
- color: #7F8E29; indicates that the caption should be lime. In the Case stylesheets this would typically be the same color that one would use for h3’s. Because the text is small I’ve made this slightly darker than the usual lime color.
- font-style:italic; specifies that the caption will be italic.
- width: 200px; is an optional measurement specifying the width of the floated content. This number should match the width of your image and will insure that long captions wrap, rather than extend past the picture. If you plan to always use the same size image, I would recommend setting this width. If you use different sized images, you could establish separate css classes for each image size. Some users may prefer to simply keep their captions shorter than the width of their images or to use
’s to break the caption to fit. Note: manual line breaks will look fine on your own computer, but not necessarily on everyone else’s. Users who have adjusted the font size of their browser/user agent may still see captions jutting past the image, or line breaks that seem to occur in illogical places.
Apply the .photoright (or .photoleft) class to your page
Once the class has been added to your stylesheet you can begin to incorporate it into your pages. As the image will float to the right of any content that follows, you will want to start a paragraph, using the new style, immediately before the accompanying text. For example, in this blog entry I’ve put this at the very beginning of my entry:
Night shot of one of three recently dedicated light pavilions on Superior Avenue.
Close-up of first pavilion, floated left.
In this example I’ve used a class that defines a width of 200 pixels, the same width as the photograph. Note that I’ve included a line break immediately before the caption. This ensures that the caption starts below the image. Without a break (or a space), some browsers might ignore the width and have the caption begin to the right of the image. The other two pictures are placed farther down in the copy, again preceding the adjacent text. (View source to see exact placement.) The middle image uses a different class that doesn’t define the width. I’ve left some of the caption hanging out so you can see how that works.
Using photoright and photoleft with Case templates
I’ve included the classes .photoleft and .photoright in the Case template files. These are in the current, and some past, versions. If you are using an older version that doesn’t include the classes, simply copy them from the appropriate color stylesheet. Not knowing what size photos one might wish to include, the templates do not include the width measurement, but you may add it in based on the sample above.
That is pretty much all there is to it. If you have any questions, comments or other ideas, please submit them in the comments below.