Quick Tip: CSS 100% Height | TutWow
I don’t know about you, but I always get frustrated trying to figure out how to get my layout to stretch vertically to 100% of the page. I have a div that I want to stretch, but it just doesn’t stretch. Now why wouldn’t it do that? Say you have coded an HTML file like this: <! And you have a CSS file like this: That gives you this example file. Let me give you a different way of thinking about HTML. When we put the “height: 100%;” style onto the <div id=”content”> box, what we are doing is telling it to stretch to the full height of the box that it is in. To fix this, we need to tell the <body> box to get bigger. So if we change our CSS file to this: And that’s it! Update: Thanks to some very helpful comments, I have updated the final CSS so that the #content div now has “min-height: 100%” instead of just “height: 100%”.
CSS Table Generator | CSS Table
One Page Résumé Site
A friend of mine recently sent me her résumé to look over. I'm definitely not a professional job hunter but I think in these situations any extra set of eyes can help fine tune the final product. As it was, the résumé was a Microsoft Word document, which in itself is fine, but it wasn't particularly well designed. I thought, we're going on 2010 here, we might as well take this thing to the web! I created a really simple design. Then I replaced all her content with good ol' C'thulu so I have a generic template I can give out to you folks. View Demo Download Files Really nothing too amazing here, just a clean layout. Contact information using microformatsMain resume area using what I think is the semantically correct definition list (<dl>)Literally one page (just an index.html file, with optional images)Prints nicely Print Preview Of course feel free to do whatever you want with it. Share On
spin.js
The CSS-Only Accordion Effect
Update: I’ve created an advanced version of this technique that works in IE6! Read more here. The Accordion Effect is fast becoming one of the most commonly used (and perhaps abused?) effects of the Web 2.0 world. First off, what is an “accordion” effect? Our accordion will work exactly the same way: all of the elements will be partially visible when the user loads the page. So how do we accomplish this trick? <div id="accordion"><div id="part1"><p>This text is in part 1. My first div defines where my accordion starts and ends. So now, let’s start building our accordion. All I’ve done is give my accordion a specific width and centered it in the page for a nice visual effect. This snippet floats all of my divs to the left and gives them a specific width and height. The overflow: hidden part here is also crucially important. So now that we’ve created our default state, we need to create our hover or “active” state. The :hover pseudo-class comes into play here again. So there you have it.
liege.mine.nu: Website analytical review | SiteRatios.Com
Athena : apprendre autrement.. Rated 1.6 out of 5 stars, based on 7 metrics Updated on Feb 24,2013 at 2:38 PM [1years ago] LIEGE.MINE.NU is rated 2.21 out of 7 SEO metrics which we consider as an Average rating. The site seems to be popular in Japan with a rank of #3,044 and brings in 31% of the site's traffic which is 26.00% of the total pageviews to the site. When analyzed on Feb 24, 2013 the site was hosted in BELGIUM with the IP address 82.212.151.6. While reviewing the site, we have considered the following metrics for positive ratings: Excellent Alexa Global Rank rating (#14,480) Excellent SEOMoz Subdomain Rank (3.14/10) Very Good Google PageSpeed Score (70/100) Very Good Alexa Speed Score (61/100) Very Good number of daily visitors (approx. #88,074) The site has MyWot Reputation ratings The site has MyWot Confidence ratings The site was negatively rated due to the following metrics:
How to Create a CSS Menu Using Image Sprites
Follow these steps to build your own modern navigation bar design, starting with the initial steps in Photoshop to flesh out the design, then moving on to constructing the HTML and styling with the CSS image sprite technique. However, if all that sounds too strenuous, there’s also a handy download of the source files especially for you! View Demo Download Start work in Adobe Photoshop and create a new document at your desired size. Grab the Rounded Rectangle shape tool and draw a long, thin bar onto the canvas on its own layer. Double click the layer to open the layer style options. Head down to the Stroke options and add a thin outline stroke with a mid grey colour. The bar so far has a soft bevelled appearance, and is ready for being filled with menu options. Use the Text Tool to type out a range of menu options. Double click the text layer, then add a darker Gradient Overlay. On a new layer, use the Mask Tool to draw a 1px line. Group all the layers of the menu together, then make a copy.
Convertir du Flash (SWF) en HTML5 avec Swiffy
Qu'on l'aime ou non, la technologie Flash existe encore et aucune date d'enterrement n'est prévue par Adobe. Utilisé à bon escient, il est toujours possible d'en avoir plein les mirettes avec des animations sexy. Pourtant, une difficulté voit le jour : plusieurs plate-formes ne supportent pas l'installation du plug-in Flash. Alors, pourrait-on rendre ces animations HTML5 friendly ? Cet outil est destiné à convertir le contenu Flash (SWF) en code HTML5, ce qui permet de le faire fonctionner sur des supports qui, à la base, ne supportent pas Flash comme les mobiles et tablettes (Android, iOS...). Test en situation réelle Faisons un essai avec un fichier relativement classique. L'animation boucle Au survol, l'animation réagit Au clic également Il y a différents effets (opacité, flou de mouvement..) Une animation Flash des plus simples, vous en conviendrez Choix de la méthode de conversion L'extension pour le logiciel Flash Swiffy propose une extension à télécharger. Résultat du test Demo
CSS Bubble Tooltips
CSS Bubble Tooltips Avoid cross-browser javascript when you can use css to make tooltips with less code. Honestly you were going to use css to style your tooltips anyway right? Your probably already have most of this code in your css already too. This example will show you how well this tooltip stretches for long descriptions when you hover here! If you dont like how it allows you to hover over the tooltip also then you can adjust the padding and top to separate the tool tip from the link. Download Source
