L'exprimer

Un autre tut rapide. Voici quelque chose de simple et agréable en utilisant la puissance des CSS ... mais il était d'enfant au difficile (et il n'était sûrement pas moi) pour commencer. Ajout DropShadow, peut-être un peice de gâteau pour beaucoup d'entre nous, en utilisant certains outils d'édition d'image comme Photoshop anf Fireworks etc
La raison pour laquelle, j'ai opté pour une ombre portée en utilisant le CSS, c'est que, généralement, tout en créant un modèle de page / html d'une demande, les exigences garder itération. Ce que je veux dire, c'est, dans un site Web existant avec beaucoup d'images, comme celles Affichage de la liste freinds ou une galerie d'images, il sera difficile de retraiter l'ensemble du chargement des images qui avaient déjà été déchargés d'ajouter ou de supprimer les ombres, pour que question.
Donc, si vous avez fait un peu de réflexion avant tout en créant les HTMLS d'ajouter ces divisions supplémentaires ou plus souvent la situation, c'est que vous avez une logique de boucle générer ces icônes ou vignettes dans XSL, PHP. JAVA ou de toute autre programmation / langage de script, vous pouvez l'ajouter à tout moment, est alors seulement la question de spectacle et de cacher ces ombres en utilisant la propriété CSS display, comme par les clients en constante évolution des exigences ... je havn't fait ce genre de réflexion prospective avant cette ... mais ahev dès maintenant!

Dans l'exemple ci-dessous, l'image originale est libre et l'ombre des dropshadows sont appliquées selon les besoins! AUSSI, je suis allé un peu plus, en utilisant les tours de mon Tut plus tôt (Well! ces sont probablement plus courte variété de tutoriels, de sorte qu'il ne se justifie que les qualifiant de «Tut» 's) au sujet de l'aide de la propriété CSS clip pour montrer que

Image de l'original

Résultats Ombre CSS

Voir la démo | Télécharger SourceFiles

Pourquoi dois-je veux comprendre cela?? Humm ...!!

La plupart des écrivains CSS serait d'accord que la propriété CSS clip est probablement l'un de la plupart des propriétés CSS non utilisés. C'était si vrai pour moi aussi et j'ai été très heureux de le négliger, jusqu'à ce que j'ai commencé à modifier le MooTools DEUX composant Slider Bouton (Pin) (avec Range Indicator) .

Il y avait une bonne suggestion de l'un des utilisateurs de composants pour modifier le composant Slider à l'aide d'images taillées backgroud (contre une division de largeur variable) pour indiquer le domaine du slider. Ainsi vint mon temps pour entrer dans le plaisir, mais affrété par l'ONU (pour moi ofcourse) les eaux de la propriété Clip CSS.

Eh bien! comment il peut être difficile? Pas grand-chose du tout ... OUI et NON. La syntaxe à utiliser la propriété Clip CSS est assez verticale, mais la signification / usuage est un peu croocked. Avec une mémoire comme la mienne, chaque fois que je suis assis à retravailler sur mon script curseur ... J'ai tokeep renvoyant à l'usage de cette propriété CLIP, à me rappeler la logique que j'ai créé dans mon script .... DONC! pensé à l'stylo, avec un espoir de se rappeler qu'il l'avenir (et aussi pour le bénéfice de ceux qui semblent boggled par la propriété Clip CSS)

Qu'est-ce que CSS clip faire?

Clip est une partie du module d'effets visuels de CSS 2.1. Autrement dit, son travail consiste à placer une fenêtre visible sur le dessus d'un objet qui est coupé, donc détourage d'images et de création de vignettes sans avoir à créer des fichiers supplémentaires (j'ai déjà mis cette fonction pour une meilleure utilisation dans le composant Slider )

Utilisation de la propriété Clip CSS, vous pouvez créer une coupure en utilisant la forme rect. Comme beaucoup d'autres propriétés CSS (comme rembourrage, etc marge,), en utilisant rect nécessite quatre coordonnées Haut, Droite, Bas, Gauche (DEFT). La nature croocked de cette propriété reflète quand vous prenez un peu plus près comment calcule clip de la zone de découpage, l'utilisation de ces quatre coordonnées (envoie des cerveaux en un tirage au sort pendant un certain temps). Maintenant, pour vous confondre le fond commence à partir du haut, et le droit commence à partir de la gauche. . Vous voyez ce que j'ai dit? .... Ainsi ce post ...

Ce peu de confusion peut facilement disparaître, avec cette explication visuelle de la CSS Clip / rect propriété comme ci-dessous!!

Exigences clip CSS

La tâche que nous avons commencé est de couper l'image Vignette suivant dans une image plus carrée à la recherche (et aussi une image grand-angle)

Thumbnal origine / Image	Exigences clip pour Sqaure Thumbmail

Résultats clip CSS

Voir la démo | Télécharger SourceFiles

Cette question m'a traversé l'esprit à quelques reprises avant, quand je travaillais sur des sites plus tôt aussi, qui a utilisé WordPress pour afficher des blogs ou nouveau type de contenu dans une partie du site / portal.Being un novice en PHP et autour de WordPress, j'ai gardé il procastinating, pensant «ce n'est pas mon peice de gâteau". Enfin! cette exigence est venu jusqu'à mon nez, quand il commence diggin autour d'un peu de solution.
J'ai été surpris de trouver que c'était vraiment plus facile que je pensais que c'était effectivement, pour afficher une liste de titres ou le dernier message sur une autre page en dehors de la section WordPress alimenté, en utilisant simplement un peu de PHP et l'API WordPress .

Voici ce qu'il faut faire: -
Pour des raisons d'explication, supposons que votre site est http://www.inchembur.com/ et vous avez la section des nouvelles de ce site sur http://news.inchembur.com/ (qui est en cours d'exécution WordPress). Maintenant l'exigence est de montrer le dernier message de http://news.inchembur.com/ sur la page d'accueil du site principal, c.-à- http://www.inchembur.com/index.php

Étape 1: Dans votre index.php ajouter le peice de code suivante, Inclure le fichier WordPress API. Vous pouvez ajouter ceci à la partie supérieure de la page que vous voulez que votre message apparaisse sur.

<? Php
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme define ('WP_USE_THEMES', false); utilisation / / Disbable du thème WordPress
require ('/ var / news.inchembur.com / wp-blog-header.php'); / / Inclure WordPress API
; // Get Latest Post query_posts ('showposts = 1'); / / Obtenir la dernière Message
?>

Dans le peice ci-dessus comprennent des, nous obtenons que le seul poste le plus récent. si vous voulez essayer d'autres variantes, n'hésitez pas à creuser, query_posts() la documentation .

Étape 2: Maintenant, Dans la partie de la page d'index / Accueil où vous voulez montrer le dernier message WordPress à partir de http://news.inchembur.com , utilisez le code suivant. Inutile de dire, n'hésitez pas à ad vos divisions de coiffure, portées et les classes selon vos besoins de conception.

Etape 3: Il n'y a pas l'étape 3 ... Thats il ... vous avez terminé!

Comment afficher une page spécifique de post / au lieu de le dernier message: -
Cela peut facilement celles réalisées en modifiant les arguments pour query_posts() pour inclure l'ID de page ou limace

) ; query_posts ("page_id = 7 ');
) ; query_posts ("pagename = environ ');

ou Vous pouvez contrôler le nombre de postes:
) ; query_posts (showposts = 3);

Parfois, pour garder le pageweight bas ... nous avons divisé nos scripts en fragments ... Ces fragments javascript peut être chargé en cas de besoin (sur un événement ou sur un clic d'un lien ou un bouton, etc.)

Chargement Javascripts est dynamiquement simple et assez simple comme ci-dessous ...

= “text/javascript” > <Script type = "text / javascript">
fonction loadNewScript (source) {
var s = document.createElement ('script');
s.setAttribute ('type', 'text / javascript');
s.setAttribute ("src", source);
document.body.appendChild (s);
}
</ Script>

et vous pouvez avoir le lien ci-dessous l'appel n'importe où dans le corps, ou vous pouvez avoir ce script "onLoad" du document lui-même ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <A href = "javascript: loadNewScript ('myDynamicScript.js');"> Script de charge dynamique </ a>

ou

<body onload="loadNewScript('myDynamicScript.js');">

Si vous êtes une personne css, vous savez la douleur à obtenir vos mises en page de travail multi-navigateur. IE8 est encore un autre bâton dans les roues pour les développeurs nous. Anywaz! si vous frappez sur cette question, comme je l'ai fait hier, où votre parfait état de fonctionnement CSS dans IE7 (et précédentes) et Firefox a soudainement commencé à jeter des crises de colère dans IE8, essayez ceci ... Il semblait bien pour corriger mes problèmes pour le moment ....

Utilisation de la déclaration Meta, nous pouvons spécifier le moteur de rendu, nous aimerions utiliser IE8. Donc, pour forcer IE8 à rendre aussi IE7 ... Insérez la balise META suivante dans la tête de votre document: -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Par défaut Meta IE serait: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
ce qui rendrait IE8 afficher la page en utilisant le nouveau mode de normes.

Si nécessaire, cette syntaxe peut être utilisé pour accueillir d'autres navigateurs comme ci-dessous:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

PLUS A propos de DOCTYPEs:

SI vous êtes encore peu familier avec le genre de l'animal appelé "Doctype" ... voici quelques lecture rapide
Quels sont DOCTYPEs? Quels sont Quirks Navigateur & Mode Strict?
Réglage de la DOCTYPE en XSL

Pour une compréhension plus approfondie sur DOCTYPEs, essayez de visiter ces liens ...
A List Apart: Fixer votre site avec le DOCTYPE droit!
A List Apart: Au-delà de DOCTYPE: Web Standards, la compatibilité ascendante, et IE8

Remarque: Bien que beaucoup d'entre nous HTML / CSS personnes ont été négligeant l'importance de Decleration DOCTYPE dans nos documents, Réglage de la DOCTYPE droite, est généralement la réponse aux questions les plus transversales du navigateur.

Avec une variété de carrousels là-bas, de nombreux pour Mootools que bien, j'ai encore décidé d'écrire mon propre classe Carousel, pour de bonnes raisons
1. Recherché une fonctionnalité de pagination (pour être capable de sauter une diapositive particulière / étape dans le carrousel).
2. Voulaient la liberté avec le placement des touches GAUCHE et DROITE / links, où jamais je s'il vous plaît.
3. Plus de contrôle sur les étapes de diapositives.

J'ai réussi à créer un nouveau carrousel, avec les caractéristiques ci-dessus ... comme ci-dessous ... N'hésitez pas à suggérer toute modification vous auriez besoin!

Mon exemple ressemble à ceci ... [ Voir la démo ]

Voir la démo | Télécharger Mootools Carousel Avec la version 1.0 de pagination (Téléchargé 1965 fois)

1. Paging Carousel

Vous pouvez facilement ajouter la pagination à votre carrousel, tout simplement en définissant l'indicateur de pagination, qui est passé parater dernière lors de la création de l'instance de la MooCarousel à true (paging voulez) ou faux (donot vouloir de pagination).

var = new carousel1 MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft »,« carousel1_moveright », c_ns, c_sss, true); / / ns = nombre de diapositives, sss = taille étape diapositive

Et bien sûr, vous pouvez changer le look-n-feel de ces achors pagination que vous s'il vous plaît en modifiant leur CSS.

. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging actuelle, carousel_paging page {outline: none; largeur:... 15px; hauteur: 15px; line-height: 15px; text-align: center; display: block; float: left; background: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}

. Carousel_paging a: hover, carousel_paging actuelle {background: # 4D4D9B; color: # ffffff;}..

Eh bien! il ya un petit problème cependant, les ancres de pagination si elle est définie, puis elle sera généré toujours après que le composant Carousel. Je voulais le rendre dynamique ainsi, mais alors juste pour garder le script pour le soufflage des proportions, j'ai décidé de l'ignorer.
Mais vous savez un peu de JavaScript, vous pouvez facilement modifier le code de génération de pagination dans la classe MooCarousel à s'il vous plaît vos besoins.

2. Personnalisation des icônes de gauche et droite

Vous pouvez changer l'emplacement, des images ou tout bien displat des boutons gauche et droit tout simplement en jouant avec le CSS. pour être en mesure de modifier les placements des buttoms gauche et droit était la raison réelle pour moi à droite ma classe de notre Carousel.
Depuis cette classe MooCarousel, accepte l'id est un de ces boutons, vous pouvez y placer ces boutons partout sur la page, s'il vous plaît ... il ne doit pas être dans la hiérarchie des éléments, comme dans mon exemple.

var = new carousel1 MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft »,« carousel1_moveright », c_ns, c_sss, true);

CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; position: relative; largeur: 23px; hauteur: 20px; float: left; cursor: pointer;}

. Carousel_container_r {background-position: 0-38px;}

. Carousel_container_l {background-position: 0-58px;}

3. Personnalisation étapes de diapositives

QU'EST-CE QUE JE VEUX DIRE MES PAS SLIDE Personnalisation?
La plupart des carrousels de diapositives de la complète avec de la fenêtre visible. Donc, dire que vous aviez quatre éléments (comme dans mon exemple ci-dessus), il glissera tous les quatre articles. Avec cette composante Carousel, vous passer le nombre de diapositives et de la taille étape de votre choix.

var = new carousel1 MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft »,« carousel1_moveright », c_ns, c_sss, true);
c_ns = nombre de diapositives, c_sss = taille étape diapositive

En outre, dans mon exemple1 j'ai calcuted la taille étape diapositive, basé sur la logique, où, je sais que nombre d'articles, la largeur de chaque élément et les marges qui ont donné après chaque élément dans mon CSS.

/ * Pour Carrousel 1 * /

var = 92 c1_w; Largeur de l'article / / Carrousel

var c1_n = 10; Nombre / / Total des articles Carrousel Comparaison

var c1_pp = 4 / / Nombre de Carrousel Articles perpage Comparaison

var c1_marginFactor = 51;

var = c1_sss c1_w * c1_pp; / / sss = taille étape diapositive

c1_ns var = parseInt (((* c1_w c1_n) / c1_sss) + 0,5); / / ns = nombre de diapositives

c1_sss + = c1_marginFactor; / / sss = taille étape diapositive, 51 pour les marges

Exigences: Mootools 1.2

Voir la démo | Télécharger Mootools Carousel Avec la version 1.0 de pagination (Téléchargé 1965 fois)

Mootools est un MooRating (navigateur croix, bien sûr, comme il utilise la puissance de la bibliothèque MooTools) simple, léger et une excellente solution à base de notation. Il n'est pas qualifié de "Star Rating", tout simplement parce que, l'image Note pourrait être que vous choisissez (que j'ai fournis étoiles, Bars et coeurs avec le téléchargement, mais vous pouvez créer votre propre variété et il suffit de déposer dans).

Comment ça ressemble:

	Note Mootools avec des images différentes Voir la démo
	Note Mootools avec des valeurs en pourcentage Voir la démo
	Note Mootools avec des valeurs fractionnaires Voir la démo

Télécharger Mootols Star Rating Script (Téléchargé 713 fois)

Note: les données nombre entier, décimal ou un pourcentage
Actuellement, le script est conçu pour afficher les données de notation que des valeurs entières (1,2,3,4,5), en décimales (1,24, 3,45 etc) ou en pourcentage (12%, 55% etc). Le choix pour afficher les données dans n'importe lequel des formats cités peuvent être mis en changeant simplement certaines valeurs de drapeau dans le javascript (moorating.js)
Fondamentalement, il existe deux e deux drapeaux pour jouer avec, pour afficher les valeurs dans le format de votre choix ...

var inpercent = false; / / Définissez cet indicateur la valeur true, si vous avez besoin des valeurs de pourcentage à afficher
var isFractional = false / / Mettez cela à true, si vous voulez des valeurs fractionnaires comme 1,24, 1,25, 4,56 plutôt que 1,2 ... 5

Et je ne crois pas qu'il soit nécessaire pour cette explication. En outre. Le script est très simple. Si vous connaissez un peu JavaScripting, vous pouvez modifier le script pour obtenir toute sorte de la valeur affichée. Pour exemple, si vous vouliez trois décimales à afficher ... juste modifier le script comme ci-dessous ...

si (isFractional) {si (x <= 5 | | x> = 0) moostartval [i] = innerHTML formatNumber (x, 3);.} / / 2 est changé à 3
else {moostartval [i] innerHTML = Math.round (x).;

Mise à jour Valeur Note:
I havent tracassé par écrit des scripts AJAX pour mettre à jour la valeur notes, parce que je sais par expérience que le font pas toujours l'intention de mettre à jour le CLASSEMENT dès que l'utilisateur taux de la chose. Vous êtes libre de faire ce que vous voulez avec la valeur nominale, mise à jour en utilisant AJAX ou Soumettez ou Définir une valeur sous forme cachée terrain, pour être soumis avec le formulaire en entier, etc

fonction updateRating (id, note) {
/ / Alert (id + "," + Note);
/ / Faites ce que à la cote
}

Il est fonction dans le javascript appelé "updateRating". Cette fonction a été adoptée l'ID de la de la Div Note, d'identifier à qui notes (s'il ya plus que l'on note sur la page) a été mis à jour et la valeur de la cote [updateRating (id, note)]. Vous pouvez choisir ce que vous voulez avec ces valeurs, comme je l'ai mentionné plus tôt.

Image Note: étoiles, coeurs, Bars ou quelque chose vous s'il vous plaît
Modification de la note à l'un des types ci-dessus (étoiles, coeurs, etc) est très simple. Il suffit de créer une image similaire à celle prévue et déposez-po Rappelez-vous, si vous changez le nom de l'image, ne faire les changements nécessaires dans le fichier CSS, voir ci-dessous.

. Moostar {margin: 0px; padding: 0px; overflow: hidden; largeur: 84px; hauteur: 20px; float: left; background: url ('stars.gif') repeat-x;}
. Moostar span {float: left; margin: 0px; padding: 0px; display: block; largeur: 84px; hauteur: 20px; text-decoration: none; text-indent:-9000px; z-index: 20;}
.. Moostar curr {background: url ('stars.gif') à gauche 25px;}

La plupart des widgets notation utiliser étoiles et demi-étoile des images avec la souris sur les événements de chaque étoile. Notes Moo utilise une image simple sprite comme image de fond pour obtenir les effets visuels requis avec un surcoût très faible.

Exigences: Mootools 1.2
Télécharger Mootols Star Rating Script (Téléchargé 713 fois)

Dans Firefox ... parfois, vous avez sans doute remarqué que le curseur se met à clignoter sur l'écran. Il peut arriver lorsque vous cliquez sur n'importe quel élément sur ​​la page, une division ou une image, etc Ce curseur clignotant dans la fenêtre du navigateur est en fait une fonctionnalité d'accessibilité de FireFox appelé «la navigation au curseur". Cette fonctionnalité permet / permet aux utilisateurs de sélectionner du texte sur la page avec le clavier (ce que nous ont normalement tendance à voir avec l'utilisation de notre souris).

Eh bien! si vous souhaitez que cette fonctionnalité n'a pas forcément ... simple pression "F7" pour qu'il passe à faux et vice-versa (si vous le voulez ON). Vous pouvez également tapez "about: config" dans la barre d'adresse (type "accent circonflexe" dans la boîte de filtre) et il suffit de double cliquer pour changer l'option "accessibility.browsewithcaret" "true" (accent circonflexe tourner la navigation ON) pour "faux "(accent circonflexe tourner la navigation OFF)

J'avais été la recherche d'un double curseur épinglé (curseur avec deux boutons, minimum et maximum) en utilisant mootools. Bien, j'ai trouvé quelques-uns curseur bien fait à double épinglé dans le forum mootools, Le seul problème était que tous ces curseurs force ont le marqueur plage sélectionnée. Enfin! J'ai décidé de créer mon propre. Eh bien! J'ai utilisé le code d'origine et de le modifier pour avoir un fond curseur qui indique la gamme sélectionnée visuellement, comme dans mon exemple ci-dessous. Les zones bleues indiquent la gamme de la valeur choisie.

Voir la version 2.2 Démo | Mootools Télécharger Double Favoris Version 2.2 Curseur (Téléchargé 11130 fois)

Vous pouvez très facilement modifier l'apparence et la sensation de l'indicateur de gamme (en bleu dans l'exemple ci-dessus), le bouton curseur, la piste en modifiant le curseur slider.css comme l'exige.

Ne laissez moi un commentaire si vous le trouvez utile.

Avant, nous avions à traiter avec les CSS pour créer nos mises en page, l'alignement du contenu dans une cellule de tableau semblait jeu juste enfant. Il suffit de mettre le "align" ou "valign" propriété de la table pour avoir l'alignement de votre choix, un morceau de gâteau!
Avec mises en page CSS, si nous avons "vertical-align" propriété pour les éléments, il ne semble pas être aussi simple que le "align" ou "valign" propriétés. Pour être plus specifiic le "vertical-align" ne semble jamais à résoudre tous vos problèmes, surtout si on écrire une pièce de cross-browser CSS.

Sans l'utilisation des tableaux HTML, LE PROBLÈME de centrage sur l'objet, que ce soit une image ou un texte dans une division contenant, a probablement été tous les cauchemar UI / CSS développeurs à un moment donné. Ce problème extrapole encore vos soucis d'alignement, si l'objet à être centré est de nature dynamique, c'est à dire lorsque sa hauteur est variable (hauteur inconnue).

Bien qu'il n'y ait pas de solution connue simple qui fonctionne sur toute la gamme des navigateurs que nous avons à traiter, la solution que j'ai essayé d'arriver à ne semble pas fonctionner dans les navigateurs peu que je l'ai essayé dans (IE6, IE 7 , FF).

SOLUTION:
Dans les navigateurs comme Mozilla, Opera et Safari, L'étrange comportement "vertical-align" propriété peut être mis à la raison, tout simplement en réglant le "display" propriété de la division contenant de "table-cell" (display: table-cell) .

Le problème reste encore avec la famille des navigateurs IE, qui, pourtant ne semble pas comprendre ce qu'il faut avec la "table-cell« la propriété et ignorants qu'ils sont, ils ont juste l'ignorer. La solution donnée ci-dessous, bien que simples, les annonces de quelques éléments plus DOM à votre HTML pour faire bouger les choses.

Le CSS et HTML ressemble à ceci
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/> vues: 3456 </ div>
</ Div>
</ Div>

Le résultat ressemble à ceci: -

voir la démo ici | Les fichiers source Télécharger (téléchargé 446 fois)

TOP Aligner CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/> vues: 1234 </ div>
</ Div>
</ Div>

Le résultat ressemble à ceci: -

Aligner en bas CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/> vues: 1234 </ div>
</ Div>
</ Div>

Le résultat ressemble à ceci: -

voir la démo ici | Télécharger ici

On dirait que les âges, depuis que j'ai essayé de trouver une solution raisonnable à ce problème d'alignement. Mais maintenant, avec cette solution, je me sens à peu de paix.

Avec un espoir qu'un jour

• vertical-alignement propriété CSS fonctionne comme il le fait dans une cellule de tableau, sans avoir à battre beaucoup plus autour du pot
• Au moins, la mise en margin-top: auto et margin-bottom: auto, donnera le même résultat qu'avec la marge gauche et l'ensemble margin-right à auto
• Les guerres du navigateur sera plus un jour.
• Il y aura juste un navigateur pour TOUS.

Télécharger le CSS et HTML de la solution ci-dessus ici (Téléchargé 446 fois) .. pour l'intelligibilité, la CSS n'est pas optimisé

PS: Et en passant, ceux qui sont des vignettes de quelques photos que j'ai cliqué ...