Bienvenue sur le blog d'un développeur web : Actualités du monde informatique et scientifique, morceaux de programmations et diverses informations intéréssantes.

Placer une image en bas d'un bloc en css

Posté par : Neg le : 2010-07-09 10:22:47



Comment faire pour aligner une image en bas d'un div en css ? Voici une petite astuce qui permet de le faire simplement.

Elle peut servir dans le cas d'une galerie d'image par exemple, dans laquelle chaque image n'as pas le même format. Par défaut les images vont s'aligner à partir du haut de l'élément dans lequel elle se situe, ce qui n'est pas forcément jolie. Dans notre cas nous voulons qu'elle s'aligne à partir du bas.

le résultat Image alignées en bas d'un div


voici les quelques ligne permettant de mettre en place cela, le code html très simple :


<div id="conteneur">
<div class="bloc">
<img src="imagebloc_1.jpg" />
</div>

<div class="bloc">
<img src="imagebloc_2.jpg" />
</div>
<div class="bloc">

<img src="imagebloc_3.jpg" />
</div>
<div class="bloc">
<img src="imagebloc_4.jpg" />

</div>
<div class="bloc">
<img src="imagebloc_5.jpg" />
</div>
<div class="bloc">

<img src="imagebloc_6.jpg" />
</div>
<div class="spacer"> </div>
</div>


au seins d'un conteneur (facultatif) on met donc nos x images dans un bloc. le div "spacer" sert seulement à étendre le conteneur le long de nos élément "bloc" qui vont être flottants.

Le code css pour que tout s'aligne comme sur l'image :


Le conteneur pour centrer nos éléments dans une taille donnée (facultatif)
#conteneur
{
width:800px;
padding:10px;
border:1px solid #000000;
margin-left:auto;
margin-right:auto;
}
.bloc
{
float:left;les éléments sont flottants
margin:5px;
height:200px;avec une hauteur fixe
line-height:200px;cette ligne permet d'aligner les image en bas (taille de la hauteur de l'élément)
border:1px solid #ff0000;
}
on indique que les images des blocs "bloc" doivent s'aligner sur le bas
.bloc img
{
vertical-align:bottom;
}
permet de donner la bonne hauteur à l'élément conteneur (facultatif)
.spacer
{
clear:both;
}


Voila c'est fait, notre galerie est à présent plus agréable à voir.

lien direct : http://www.chezneg.fr/leblog/chezneg-leblog.php?id_art=249&titre=Placer-une-image-en-bas-d'un-bloc-en-css
tags : css (12), développement (4), positionnement (1), div (1), bloc (1), image (3),


J'aime, 10 personnes aiment çaCommentaire(s)(1)

Internet explorer 6 sous la barre des 5% d'utilisateurs

Posté par : Neg le : 2010-06-02 10:30:31



champagneEnfin ! le viiiieux navigateur Internet explorer 6 (IE6 pour les intimes) serait passé sous la barre d'utilisation des 5% en Europe et aux états unis. Le graphique de startcounter nous l'apprends.

Petit rappel : internet explorer 6 c'est LA plaie des navigateurs pour tout développeur web qui se respecte. C'est LA plaie des navigateurs niveau sécurité pour tout utilisateur qui se respecte.

Depuis 2001 le web a fortement évolué, nous sommes passés au "2.0", nous sommes passés d'une mise en page en tableaux (<tr><td> </tr></td>) à une mise en page par bloc (<div>) via l'utilisation des fichiers css. En gros, 9 ans après sa sortie, le pauvre navigateur ne supportait plus grand chose des nouvelles technologies du web. Pourtant, il était encore et toujours utilisé (Par plus de 10% des internautes il y'a un an).

L'annonce de sa chute en deçà des 5% et un soulagement. Les clients comprendront désormais qu'une compatibilité des sites n'est plus nécessaire pour ce navigateur marginal en chute libre.

Pour ma part, étant relativement récent dans le milieu du développement web, j'ai depuis mes débuts essayé de faire comprendre que maintenir un site actuel sous IE6 était inutile et, surtout que ça demandait beaucoup trop de travail supplémentaire pour un résultat approximatif. La pauvre bête ne supportant même pas les niveaux de transparence des images .png

Il ne m'auras donc pas trop fait souffrir. Cette annonce reste une très bonne nouvelle pour le web. Je vais m'emballer en pensant que peut être d'ici 2 ou 3 ans (disons 5 ans) on pourra utiliser les propriétés et attributs de CSS3 et HTML5 à 100%.

Question subsidiaire : pourra-t-on un jour utiliser des variables dans le "langage" css ?

lien direct : http://www.chezneg.fr/leblog/chezneg-leblog.php?id_art=241&titre=Internet-explorer-6-sous-la-barre-des-5%-d'utilisateurs
tags : Informatique (68), internet (34), css (12), navigateur (3), développement (4),


J'aime, 5 personnes aiment çaCommentaire(s)(0)

Maj de mon portfolio de développeur web

Posté par : le : 2010-03-30 12:40:46



Je viens de refaire complétement mon portfolio de développeur web sur Montpellier. Un peu plus design et épuré que la version précédente.

lien direct : http://www.chezneg.fr/leblog/chezneg-leblog.php?id_art=234&titre=Maj-de-mon-portfolio-de-développeur-web
tags : compétences (22), css (12), design (6), php (21), travail (18), montpellier (7), SQL (5),


J'aime, 11 personnes aiment çaCommentaire(s)(4)

Faire une animation en boucle avec jQuery et setInterval()

Posté par : Neg le : 2009-04-28 21:34:34



Après avoir vu il y'a quelque temps comment faire un slider horizontal avec jquery reprenons le même principe pour en faire une animation en boucle dont la démo est ici

le corps de notre page est très simple :

<body>
<div id="conteneur">
<div id="slidebox">
<img src="slideimages/animauto1.jpg"/>
<img src="slideimages/animauto2.jpg"/>
<img src="slideimages/animauto3.jpg"/>
</div>
</div>
</body>


le css pour mettre en page tout ça (dans le head de la page) :

<style type="text/css">
/*fond de la page noir*/
body
{
background:#000000;
}
/*conteneur de la taille des images, centré dans la page avec un overflow hidden pour cacher les images qui dépasse et en position relative pour effectivement cacher les image sous IE*/
#conteneur
{
border:1px solid #ff3300;
margin-left:auto;
margin-right:auto;
height: 400px;
width: 400px;
overflow:hidden;
position:relative;
margin-top:100px;
}
/*slidebox en position relative pour que le slide fonctionne avec une taille trés large pour que les images placées dedans restent alignées horizontalements*/
#slidebox
{
position:relative;
width:5000px;
}
</style>


Il nous manque maintenant que le javascript à appelé aussi dans le header de la page et après avoir inclus la librairie jQuery :


<script type='text/javascript'>
//vitesse de l'annimation
var vitesseSlide='slow';
//largeur d'une image
var tailleMoveSlide=400;
//fonction gérant l'annimation
function anim()
{
//si on est à la troisième position (0+400+400=800px)
if($('#slidebox').css('right')=='800px')
{
//on revient à zéro
$('#slidebox').animate({right: '0'}, vitesseSlide)
}
//si on est à la seconde position (400px)
else if($('#slidebox').css('right')=='0px')
{
//on va à la troisième (position actuelle + taille(400)=800)
$('#slidebox').animate({right: '+='+tailleMoveSlide}, vitesseSlide)
}
//sinon on est dans la 1ère position, on va à la seconde
else
{
$('#slidebox').animate({right: '+='+tailleMoveSlide}, vitesseSlide)
}
}
//au chargement de la page
$(document).ready(function(){
//on lance l'annimation en boucle toute les secondes (1000 miliseconde)
setInterval('anim();',1000);
});
</script>


le travail est terminé.

lien direct : http://www.chezneg.fr/leblog/chezneg-leblog.php?id_art=185&titre=Faire-une-animation-en-boucle-avec-jQuery-et-setInterval()
tags : Informatique (68), compétences (22), css (12), jQuery (12), javascript (9),


J'aime, 10 personnes aiment çaCommentaire(s)(2)

Coder un slider horizontal avec jQuery

Posté par : Neg le : 2009-02-05 15:36:54



Maj du 22 octobre 2012 : J'ai posté un article moins détaillée mais permettant de mettre en place un slider plus élaboré à cette adresse : http://numa-bord.com/miniblog/faire-un-slider-simplement-avec-jquery/


Cet article va nous expliquer comment créer en quelque ligne un slider horizontal avec la librairie jQuery.

Tout d’abord regardons le résultat que l’on va obtenir : le slider

Comment s'y prendre ? pour commencer créons notre page en incluant la librairie jquery dans le "head" de la page


<script type="text/javascript" src="jquery/jquery.js"></script>


Mettons en place la structure de la page en insérant dans le body le code suivant:


<ul>
<li><a href="#" class="slide1">un</a></li>
<li><a href="#" class="slide2">deux</a></li>
<li><a href="#" class="slide3">trois</a></li>
</ul>
<div id="conteneur">
<div id="slidebox">
<img src="slideimages/monimage01.jpg"/>
<img src="slideimages/monimage02.jpg"/>
<img src="slideimages/monimage03.jpg"/>
</div>
</div>


on a donc :
-Une liste de liens qui seront à cliqués pour naviguer entre les images.
-Un div "conteneur" qui sera le cadre dans lequel nos images se déplaceront
-Un div "slidebox" qui contient les images du slide, et que l'on déplacera dans le div "conteneur" pour créer l'effet de mouvement.

remontons dans le head de la page pour styler le tout avec du css :


<style type="text/css">
/*fond de la page noir*/
body
{
background:#000000;
}
/*liens en gras, noir, sans surlignement*/
a {
font-weight: bold;
color: #000000;
text-decoration:none;
}
/*conteneur de la taille des images, centré dans la page avec un overflow hidden pour cacher les images qui dépasse et en position relative pour effectivement cacher les image sous IE*/
#conteneur
{
border:1px solid #ff3300;
margin-left:auto;
margin-right:auto;
height: 488px;
width: 650px;
overflow:hidden;
position:relative;
}
/*slidebox en position relative pour que le slide fonctionne avec une taille trés large pour que les images placées dedans restent alignées horizontalements*/
#slidebox
{
position:relative;
width:5000px;
}
/*on style la liste de lien à notre guise sans importance*/
ul
{
padding:0;
margin-top:10px;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
width:auto;
text-align:center;
}
li
{
display:inline;
border:1px solid #000000;
width:210px;
background:#ffffcc;

}
li a
{
width:220px;
display:inline-block;
}
li a:hover
{
background:#ffcc66;
}
</style>


Voila pour la mise en place il nous manque juste les quelque ligne de jQuery pour réaliser l'effet de déplacement, on reste dans le head de la page et on met le code suivant :


<script type="text/javascript">
//au chargement de la page
$(document).ready(function(){
//largeur de l'image
var tailleMoveSlide=650;
//vitesse du slide
var vitesseSlide='slow';
//au clic sur chaque lien on fait l'annimation correspondante
//c'est à dire qu'on déplace le div slidebox
$(".slide1").click(function(){
$("#slidebox")
.animate({right: "0"}, vitesseSlide)
return false;
});

$(".slide2").click(function(){
$("#slidebox")
.animate({right: tailleMoveSlide}, vitesseSlide)
return false;
});

$(".slide3").click(function(){
$("#slidebox")
.animate({right: tailleMoveSlide*2}, vitesseSlide)
return false;
});
});
</script>

Notre slider et désormais fonctionnel !

lien direct : http://www.chezneg.fr/leblog/chezneg-leblog.php?id_art=170&titre=Coder-un-slider-horizontal-avec-jQuery
tags : Informatique (68), compétences (22), css (12), jQuery (12),


J'aime, 14 personnes aiment çaCommentaire(s)(16)

Page Suivante

propulsé par Neg