lundi 25 juin 2012

carrousel fluide 100% CSS

Catégorie : CSS : Valign

Derniere variante et toujours sans javascript:

«»

un

deux

trois

quatre

cinq

six

lundi 14 mai 2012

text-align:justify sur derniere ligne et centrage de boites

Catégorie : CSS : Valign

A quoi sert text-align:justify;

Dans un texte, le nombre de mots et leur nombre de lettre varient et sont a même distance des un des autres, la longeur de chaque ligne peut varier.

justify, compense cette différence en plaçant le premier et dernier mot de chaque ligne aux extrémités en adaptant l'espacement entre les mot pour remplir la ligne de façon homogène.Cela s'appelle justifier le texte.

La dernière ligne, pouvant contenir peu de mot, garde un comportement non justifier.

Ça marche bien, pourquoi forcé la dernière ligne ?

Cette derniere ligne pourrait:

  • - être rempli a 80 ou 90% et justifié sans nuire a sa lisibilité
  • - être une seule ligne comportant des images ou des liens
  • être une ligne avec un mot a gauche et une image a droite que l'on veut a droite et que l'on ne peut pas mettre en flottant
  • etc ...

Comment ?

Pour que le texte soit justifié sur la dernière ligne, il ne faut pas que celle-ci soit la dernière, nous en ajoutons donc une avec :after qui permet d'injecter cette nouvelle et dernière ligne.

Testons voir

Les styles utiles a cet effet :

[selecteur]:after {
content:'';
display:inline-block;
width:100%;
}

La ligne ajouté est visualisée par une bordure jaune.

Ce qui donne :

Phasellus ligula felis, venenatis mollis porta suscipit, ultrices et odio. Sed eget sem nec odio venenatis tempus. Curabitur accumsan viverra libero, eu egestas elit convallis at. Nullam quis est non metus hendrerit faucibus.

Le resultat n'est pas terrible.

Modulons en injectant des portions de lignes de longueurs différentes

redimensionnez votre navigateur en largeur pour tester les différents résultats.

50%

Phasellus ligula felis, venenatis mollis porta suscipit, ultrices et odio. Sed eget sem nec odio venenatis tempus. Curabitur accumsan viverra libero, eu egestas elit convallis at. Nullam quis est non metus hendrerit faucibus.

25%

Phasellus ligula felis, venenatis mollis porta suscipit, ultrices et odio. Sed eget sem nec odio venenatis tempus. Curabitur accumsan viverra libero, eu egestas elit convallis at. Nullam quis est non metus hendrerit faucibus.

10%

Phasellus ligula felis, venenatis mollis porta suscipit, ultrices et odio. Sed eget sem nec odio venenatis tempus. Curabitur accumsan viverra libero, eu egestas elit convallis at. Nullam quis est non metus hendrerit faucibus.

Ce dernier conditionnant la justification à 90% de remplissage n'est pas mauvaise, a moins , c'est désastreux. On peut y trouver une utilité.

une technique de centrage horizontal justifié

Interactions possibles avec des éléments de type inline-block

un mot et une image.

Orchidé une fleur

des images

une fleur une fleur une fleur une fleur

Des boites

un titre sur
2 lignes

un paragraphe a 50% de largeur de la boite , Curabitur accumsan viverra libero

une fleur

Une liste de liens :

Conclusion

text-align:justify et :after peuvent servir a mettre en place une technique de centrage horizontal justifié. en attendant que {flex:justify;} soit utilisable dans nos futur navigateur.

lundi 14 mai 2012

fausses colonnes avec inline-block et linear gradient

Catégorie : CSS : Valign

Attention, troll en embuscade !

Nop, juste pour dire qu'il n'y a pas de soluce universelle pour simuler des colonnes et aligner leurs contenus respectifs.

CSS mis en œuvre

  • margin:auto; pour le conteneur
  • display:inline-block; et vertical-align pour les 2 similis colonnes
  • :before, position:absolute pour les bordures centrales et l'ecart entre les deux simili-colonnes.
  • linear-gradient pour les couleurs de chaque simili-colonne et l'espace entre elles

Selon les version de IE on aura toujours nos deux colonnes avec ou sans séparations.

Démonstration:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae risus tellus. Nam tristique neque in arcu vestibulum a egestas massa rutrum. Suspendisse dictum pharetra tortor, quis commodo purus semper viverra. Donec imperdiet, ligula in posuere tempor, sapien ante rhoncus nibh, eget placerat tellus dolor tristique neque. Donec et libero non nibh blandit congue. Suspendisse potenti. Integer ac urna augue, in fermentum massa. Vestibulum vel enim vitae arcu imperdiet auctor vitae at ante. Nulla et massa mi. Aliquam a enim eros, ut ultricies enim. Pellentesque in lectus quis diam pellentesque adipiscing. Aliquam in dui a elit tincidunt lacinia nec sed eros. Donec condimentum libero ac massa venenatis vulputate.
Phasellus ligula felis, venenatis mollis porta suscipit, ultrices et odio. Sed eget sem nec odio venenatis tempus. Curabitur accumsan viverra libero, eu egestas elit convallis at. Nullam quis est non metus hendrerit faucibus. Praesent euismod elementum nunc, quis interdum erat egestas non. Phasellus condimentum pharetra mi, nec condimentum ligula iaculis vitae.

Pas de tableau ni de display:table-cell; et pour Ie7 et moins , on a 2 colonnes quand même mais on perd les bordures centrales et les 2couleurs.

Si l'alignement vertical ne vous interesse pas , alors float a la place de display:inline-block convient parfaitement, c'est d'ailleurs le choix mis en application comme alternative pour IE7 et inf .

Stop

Arrêtez de confondre table ou display ou float , utilisez donc ce que vous pouvez quand il faut .

samedi 04 décembre 2010

alignement vertical de plusieurs images

Catégorie : CSS : Valign

vertical-align:middle tout simplement

Cette regle s'applique dans la feuille de style de ces façon:

  • Pour toutes les images de votre page:
    img {vertical-align:middle}
  • pour toute les images contenues dans un paragraphe :
    p img {vertical-align:middle}
  • Pour cibler toutes les images avec une class
    img.nomDeLaClasse {vertical-align:middle}
  • Pour cibler les images d'un conteneur ayant une class ou une id :
    #nomDeL-ID img {vertical-align:middle}
    .nomDeLaClass img {vertical-align:middle}

exemple : ces quelques image sont placées dans un paragraphe avec l'id middleimg , la regle a appliquer est :


#middleimg img {vertical-align:middle}

Complements:

samedi 04 décembre 2010

Assiette ou logo

Catégorie : CSS : Valign

♣♣♣♣
<°(((((-{

Pour ce test est utilisé:
text-shadow,
box-shadow,
vertical-align,
display
transform:rotate

Aperçu dans Firefox:
miniature : Aperçu dans Firefox

dimanche 28 décembre 2008

inline-block : tout navigateurs

Catégorie : CSS : Valign

La règle display:inline-block; peut sembler avantageuse la ou un élément de typeinline ou block demande a être stylé d'une façon particulière sans faire usage d'un positionnement en absolue ou en flottement

... Depuis l'avènement de Firefox 3 et de Internet Explorer 8 (bientôt suivie de la version 9 ) , cette règle revient sur le devant de la scène ...

Quels interêts ?

En fait , Une fois cette règle établie , il devient possible d'aligner verticalement chacun de ces éléments , de les centrer dans leur parents avec un text-align:center; , de les dimensionner comme des éléments flottants , de jouer avec white-space ou les directions d'affichages , etc ...

Chacun de ces éléments se comporte comme une balise Image inline , capable de contenir des element de type block qui afficherait un contenu (X)HTML.

Mais !

Pourtant les versions de I.E. et FF ne semblent pas toutes l'implémenter , en tout ou partie .

Pourquoi pas ? , comment régler ces défauts ?

Je vous propose de voir quelques possibilités .

Lire la suite de : inline-block : tout navigateurs

lundi 08 décembre 2008

display & direction , contre table & float

Catégorie : CSS : Valign

Cette fois ci le contenu est externe , ayant évoqué a quelques reprise cette technique , voici plusieurs tentative d'explication plus ou moins réussies.

Il s'agit de mettre en forme un balisage sémantique d'une image et de sa légende avec une pointe d'accessibilité en sus

Ce qui motive cette approche est la volonté de conservé la possibilité d'appliquer un vertical-align a l'image et sa description en les affichant cote à cote .

Lire la suite de : display & direction , contre table & float

mardi 14 octobre 2008

lien en cellule et centrage vertical

Catégorie : CSS : Valign

Des cubes pour menu , demo ci-dessous :

Lire la suite de : lien en cellule et centrage vertical

lundi 18 juin 2007

Complement "vertical-align"

Catégorie : CSS : Valign

Dans cet article , vous trouverez peut-être des compléments intéressant sur l'usage du vertical-align dans une feuille de style.
Un rappel des possibilités actuelles pour la majorité des navigateurs et une astuce pour IE , ... en jouant sur le layout , particularité parfois bien déroutante de ce navigateur omniprésents sur les pc des internautes , que l'on ne peut donc ignorer dans le développement de pages web.

Allez a l'exemple de cette page .

Depuis l'arrivée de Firefox 3 , l'approche proposé ici pour I.E. s'avere aujourd'hui plus pertinente (et moins sujette a confusion avec un tableau) En complément de cette article je vous propose donc aussi de lire celui-ci : inline-block : tout navigateurs . et quitte a semer le trouble parmi les plus débutants d'entre vous autant le faire pour de bon et eveiller votre interêt : image , legende , description et valign .

Voir un exemple plus complexe usant de cette méthode (page fluide en fausse colonnes flottantes , centrage de la page horizontal et vertical )

Lire la suite de : Complement "vertical-align"

page 1 sur 1