Posts Tagged ‘CSS’
Posted on Mar 3, 2010 by Rich to Web Development
So you’re not really into flash?
Don’t know how to code flash?
Don’t want to know how to code flash?
Love jQuery?
Well all this is pretty much me. Now a days most of the things you can do in flash, you can know do with jQuery; well somewhat. But that doesn’t stop us developers from trying right? One of latest clients wanted a cool feature that I thought would be nicely shared with the rest of my web development community.
Let’s think of a box with rotating images inside. along with the images, we have a navigation menu that slides up / down while the images rotate. Pretty cool huh? well lets show you how I made this happen.
Lets begin with the Basics of what is needed:
1. JQuery/ custom js
2. css/html/images
Javascript
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="bg-rotate-slide-up-js.js"></script> <script type="text/javascript"> $(document).ready(function(){ mainImageFlow(); }); </script>
CSS
body{margin:0;padding:0;} #mainImageBox{position:relative;height:300px;margin-top:20px;margin-bottom:20px;margin-left:20%;} #mainImageBox img{float:left;position:absolute;margin:0;padding:0;border:1px solid #6a39b3;} #mainImageBox img.show{z-index:100} .snapShot{margin:0;padding:9px;left:0;position:absolute;top:0;z-index:0;} #mainImageBox #subNavBox{position:absolute;z-index:200;top:1px;left:1px;width:650px;height:300px;} #mainImageBox #subNavBox .sNavWrap{float:left;position:relative;bottom:0;background-color:#6a39b3;margin:0 0 0 20px;padding:0;font-size:12px;text-align:center;top:269px;} #mainImageBox #subNavBox .sNavWrap a{margin:0;padding:8px 10px;font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#f9f9f9;text-decoration:none;text-align:center;display:block; text-transform:uppercase;font-weight:bold;} #mainImageBox #subNavBox .sNavWrap .sSub{border-top:1px solid #ddd;margin:0;padding:0;} #mainImageBox #subNavBox .sNavWrap .sSub a{display:block;margin:5px 0;padding:5px 0 8px 0;font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#080808;text-decoration:none;text-align:center;display:block;text-transform:uppercase;font-weight:normal;} .clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}.clearfix:after {clear: both;content:' ';display: block;font-size: 0;line-height: 0;visibility: hidden;width: 0;height: 0;}.clearfix {display: inline-block;}* html .clearfix {height: 1%;}.clearfix {display: block;}
HTML
<!-- begin main image box --> <div id="mainImageBox"> <img src="one.jpg" alt="One" width="650" height="300" class="snapShot show" /> <img src="two.jpg" alt="Two" width="650" height="300" class="snapShot" /> <img src="three.jpg" alt="Three" width="650" height="300" class="snapShot" /> <!-- begin sub nav slide up box --> <div id="subNavBox" class="sNav"> <!-- list 1 --> <div class="sNavWrap"> <div class="sHead"> <a href="#">Header Link 1</a> <div class="sSub"> <a href="#">sub link for 1</a> <a href="#">sub link 2 for 1</a> <a href="#">sub link 3 for 1</a> </div> <div class="clear"></div> </div> <div class="clear"></div> </div> <!-- list 2 --> <div class="sNavWrap"> <div class="sHead"> <a href="#">Header Link 2</a> <div class="sSub"> <a href="#">sub link for 2</a> <a href="#">sub link 2 for 2</a> <a href="#">sub link 3 for 2</a> </div> <div class="clear"></div> </div> <div class="clear"></div> </div> </div> <!-- end sub nav slide up box --> </div> <!-- end main image box -->
Well building off of a carousel foundation I found, I stripped down to the bare minimum and ran from there. Here is all the Javascript written for this example:
Javascript (bg-rotate-slide-up-js.js)
$(document).ready(function(){ /***************************************************************************** dealing with the navigation *****************************************************************************/ $(".sSub").each(function(){ var newWidth = $(this).width(); $(this).prev().css("width",newWidth); $(this).css("display","none"); //alert( 300 - $(this).height() ); }); // Deal with Sub Nav $(".sNavWrap").hover(function(){ // I Loath you IE fix if ($.browser.msie && $.browser.version.substr(0,1)<8){var minusPX = "33";} else{var minusPX = "32";} var newHeight = (300 - $(this).children().children(".sSub").height() ) - minusPX +"px"; //alert(newHeight); $(this).animate({ top: newHeight }, 300, function() { $(this).children().children(".sSub").show(); }).stop(true, true); $(this).children().children(".sSub").slideDown(300); },function(){ $(this).animate({ top: '269px' }, 300, function() { $(this).children().children(".sSub").hide(); }).stop(true, true); $(this).children().children(".sSub").slideUp(300); }); }); // END THE DOM /***************************************************************************** dealing with the rotating images *****************************************************************************/ function mainImageFlow() { // set the opacity of image(s) to 0 (can't see them) $('#mainImageBox img').css({opacity: 0.0}); // set the first image to be seen $('#mainImageBox img:first').css({opacity: 1.0}); // set the function for 'mainImageGallery' to run every 3 seconds. setInterval('mainImageGallery()',3000); } function mainImageGallery() { // if the images have no class (class='show') then show the first one anyway var current = ($('#mainImageBox img.show')? $('#mainImageBox img.show') : $('#mainImageBox img:first')); //Get next image, if it reached the end of the slideshow, rotate it back to the first image var next = ((current.next().length) ? ((current.next().hasClass('sNav'))? $('#mainImageBox img:first') :current.next()) : $('#mainImageBox img:first')); //Set the fade in effect for the next image, show class has higher z-index next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 1000); //Hide the current image current.animate({opacity: 0.0}, 1000) .removeClass('show'); $("#subNavBox").removeClass('show'); }
OR
Download the zip file
Tags: CSS, html, jQuery, jQuery examples, jQuery HTML, jQuery tutorial
Posted on Jun 8, 2009 by Rich to Technology Trends, Web Design
So I have been reading lately on the evolution of web development and how it will affect our culture as a whole. I have seen many blogs and articles state that mobile development will grow substantially. I totally agree with this item. Most websites now have evolved into thinking of mobile website presentation as an important part of their design and development. Some may argue in having a separate presentation for your mobile edition like yoursite.com/mobile or m.yoursite.com others might argue that something like “Progressive Enhancement” might be the solution. While others still might have their own reasons for doing what they do. I personally feel like there is no right answer. The biggest question to me is something that plagues us as developers and designers on the regular computer browsers. That is cross-browser compatibility. For example, I went from a sidekick slide to a G1 and now to the iPhone. Each phone supports different functionality and such. which makes it very difficult to have the mobile edition look the same across all phones. Yikes!
Another thing I have read about lately has been on the “I hope IE 6 Dies” mentality. While me as a Developer would truly hope so, we might not have that even in 2012. With the prices of these systems, licensing costs, lack of IT manpower or whatever else could be impeding the upgrade of computer systems in larger corporations we might still have to deal with this disease.
Frameworks Frameworks Frameworks. Developers have their preference. Some might tell you to learn all, some might say stick to one. At the end of the day, I can see them integrating concepts together to form the ultimate framework like voltron.js
I would talk about HTML5 and CSS3, but why. If not all browsers support it, then we are back to 2009.
Tags: CSS, CSS3, Dojo, HTML5, jQuery, Progressive Enhancement, Prototype
There is a popular commercial on television for a company that claims to “move at the speed of business.” As anyone who owns a small business can tell you, time truly is money, and sometimes, it helps to have a system for web design that cuts down on the mistakes and maximizes the number of people you can reach with your site. The 960 Grid System is named for the web design idea of having 960 lines per web page.
Read the rest of this entry »
Tags: 960 grid, CSS, Page Layout, web design
TypeChart is a simple and easy to use font CSS generator which comes in very handy when you need just the right “browser friendly” font. It easily allows you to view all web-safe fonts in your browser and it even renders what they would look like in other operating systems.
Along with simply viewing the CSS font showcase you can download the CSS for various sizes and treatments of selected fonts. Overall it’s an extremely helpful CSS font tool for developers and designers alike.
When writing CSS you’ll often find yourself with an extremely long CSS doc that could pass the 1000 line mark. Commenting every block of CSS can be very helpful and benificial especially if working within a team of developers who may need to change items in the future.
Aside from just commenting your individual blocks of code there’s also another VERY helpful method that we often use here at THAT Agency. We simply break our stylesheets into several documents and link them through a CSS import. Breaking everything apart into it’s base elements is a handy way of navigating. Some basic categories could be:
Reset – a full CSS reset to alleviate cross browser issues
Structure – base structure of the layout
Text – controls all copy, header tags, horizontal rules, etc.
Navigation – Primary navigation
Header – Logo header, contact information, etc.
Footer – The all important closing statement
First we’ll start off with a base StyleSheet.css which would house all classes that don’t necessarily fall within the above mentioned categories. Here is a sample stylesheet header:
/*********************************************************************
Sample Cascading Stylesheet (c) 2008
Written by: THAT Agency LLC
All rights reserved.
Any reproduction or intentional misuse is strickly prohibited
*********************************************************************/
/* Reset CSS */
@import url(“reset.css”);
/* All Text CSS */
@import url(“text.css”);
/* 960 Grid CSS */
@import url(“960.css”);
/* Global Navigation CSS */
@import url(“global_nav.css”);
/* jQuery Tooltip CSS */
@import url(“jquery.cluetip.css”);
/* jQuery Facebox Lightbox CSS */
@import url(“facebox.css”);
/*********************************************************************
By using the @import url to bring in corresponding stylesheets allows easy access to the block items such as primary navigation CSS, base Text CSS and various other items that may otherwise get lost within a long CSS document. This also serves as a major help when working with a team of developers as each can then focus on just a particular block of CSS without the need to adjust the main CSS doc.
Tags: CSS
One of the most vital considerations when designing any website is how it will display in different browsers, at different resolutions and on different screens. While one person views your site with Firefox, another is using Internet Explorer and both are displaying specific elements in their own special way. To counteract this, it is a matter of finding a loophole to work around the browsers’ shortcomings, or opting for a solution that agrees with both, but compromises the final product.
It tends to be a time-consuming process and lose-lose for everyone involved. That is why it is helpful to have a clever community that consistently churns out new fixes to old problems. It is something I had recently had some trouble with, stretching images with CSS, but was eventually overcame. Alex Walker offers his one-stop reference guide for avoiding this nuance.
The first three solutions (Embedding everything into an SWF with Flash, HTML5, and Seam Carving) are brief overviews of methods that have worked in the past or have some glimmer of an effective future, but at present lack the clout. They are all precursor to his more efficient method that basically boils down to playing with CSS attributes.
The technique involves layering multiple transparent images, and instead of focusing the stretching on prominent foreground elements, focusing it on the menial and the background; almost creating an illusion of sorts without the once-problematic image tearing.
Walker provides a more in-depth discussion of the process, code snippets, and working examples of Image Stretching at http://www.sitepoint.com.
Tags: CSS
One major struggle we all have as CSS designers is keeping the consistency across multiple browsers and most of the problems come from the default setting that browsers have for common elements. By using a basic CSS reset and working from there you can override the browser’s settings and start fresh from ground zero.
After doing some research I’ve put together a simple CSS reset. I’ve seen some more complicated ones but this one seems to work fine for general use. I’ve even added in a few additions I have yet to see in other CSS resets such as the dotted border that Firefox commonly puts around links and an overflow-x issue I’ve commonly run into.
Enjoy!
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
html {
margin: 0;
padding: 0;
overflow-x: hidden;
}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style: normal;
font-weight: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-size: 100%;
font-weight: normal;
margin: 0;
padding: 0;
}
q:before,q:after {
content: ”;
}
abbr,acronym {
border: 0;
}
a {
outline: none;
}
Tags: CSS
I recently had a conversation with a fellow designer in Chicago about the state of the web and and the constantly evolving coding structures. He, as with a lot of web designers out there, has a general fear of CSS if not the simple lack of time to learn new techniques. He is accustomed to using simple image slices and table based layouts but in todays webby world this technique will be the death of you.
CSS and XHTML based sites are easier for search engines to pick up, quicker to load and are more accessible to people with disabilities than any other type of site. Often times image/table based sites are skipped over by search engines as their content is hidden within image files which are not accessible to the disabled let alone the search engine spiders. Old swap_image markup for rollovers is also thing of the past as this this requires the user to download several unnecessary graphics in order to use the navigation. CSS handles this gracefully and quickly.
Also table based sites are slower to load, require much more HTML markup than CSS/XHTML. Speed is key when it comes to web users. The longer the user has to wait for the information the more likely they won’t wait at all.
My advice to those out there still afraid of the big bad CSS is to head to Amazon or your local bookstore and pick up a couple books and find some in-house project for which to play with. A couple good ones to start with would be CSS, The Missing Manual by David Sawyer McFalarland and the beautifully illustrated The Zen of CSS Design by Shea and Holtzschlag.
CSS is here and as far as I can tell, it’s going to be here for quite a while so take the time to learn it. It may just save your job.
Tags: CSS
Posted on Dec 7, 2006 by Damien to Web Design
You may think that’s there’s some complicated procedure for doing this but the answer is actually quite simple.
Most CSS layouts have background images for basic image rollovers. A lot of web browsers have a tendency to “flicker” the image to white just after the mouse enters the live area of the desired link. One way to avoid this is to preload all background images specified in CSS into the browsers cache, thus allowing the user to continue without waiting for CSS to load and cache out the image.
To preload the image(s) you’ll just need to create a basic CSS id like this:
.preloadImage {display:none;}
Once that’s done just create a <div> container at the bottom of your html document with all of your needed imagery.
<div class=”preloadImage”>
<img src=”myimage.jpg” alt=”My Image”/>
</div>
Because the CSS display property is set to “none” the image will not show up in the layout at all but the image itself will be loaded into the browser cache for on-demand use when the user key’s your rollover. Simple yet very effective.
Tags: CSS
Making flowplayer.swf files play in IE where gzip is enabled
Ipad 2, get ready
THAT Agency launches hotel website for Iron Horse Hotel
2010 Social Media Statistics
THAT Agency designs and develops website for Club Safari
THAT Agency launches Scozia Insurance
NYJTL partners with THAT Agency for new website
THAT Agency launches WhyWeight
Online B2B Advertising with LinkedIn DirectAds
A Quick Way to Measure the SEO Value of Press Releases
Kat : Thanks so much. Great little s
cili : When having images and text, t
Jean Has Been Shopping : I figured it out. In style.cs
Jean Has Been Shopping : Love this theme, and all of th
egollas : How can I change the slide up
Liberty wrestling : You know, I wish there had bee
Lovers : This is good stuff...right her
hunter : I am so lazy sometimes, althou
Rick : You've not had success with us
Dorothy : Love the theme. But can't figu
-
Newsletter Signup
-
Find Us On...
