Sujet Précédent Sujet Suivant

Création de blocs CSS

Fermé
moutonpolaire - 28 oct. 2011 à 18:37
 moutonpolaire - 29 oct. 2011 à 13:22
Bonjour,

Je suis actuellement en train de créer un site internet en html. J'aimerais sur ma page d'accueil incorporer 3 blocs comme sur le site de Quick ( http://www.quick.fr/-400107.html ) afin d'inscrire les actualités et les promotions de mon site.
J'ai un peu fouillé sur les forum et j'ai réussie à créer des blocs mais impossible de les mettre en ligne.

De plus il semblerait qu'il soit possible de configurer des coins arrondis sans passé par une images en arrière plan.

Enfin j'aimerai que le survol de la souris provoque un changement de couleur comme sur le site de Quick.

Merci d'avance pour votre aide

A voir également:

1 réponse

Réponse 1 / 1
Gwopro Messages postés 38 Date d'inscription vendredi 28 octobre 2011 Statut Membre Dernière intervention 15 mai 2012 14
28 oct. 2011 à 18:53
Pour les arrondies sans image, tu peux les faire en CSS3 grâce à "border-radius".
-> https://www.alsacreations.com/tuto/lire/891-coins-arrondis-css-sans-images.html

Pour le survol, tu peux le faire de deux façons.
*Soit en en CSS normal avec ":hover".
->
.test{
background : white;
}
.test:hover{
background : grey;
}

*Soit en CSS3 avec ":hover" + "transition" pour un rendu plus beau.
-> https://www.alsacreations.com/tuto/lire/879-transitions-css3-evenements-javascript.html

Pour les blocs, ça dépend de si la largeur de la partie qui les héberges à une taille fixe ou non.
0
moutonpolaire
28 oct. 2011 à 19:08
Merci de ta réponse rapide,
alors avec tes indications j'ai réussie à obtenir les rectangles de la bonne taille, avec les angles arrondis. Mon code CSS est le suivant : 

div#promo {
	border-radius: 10px;
	width:300px;
	height:180px;
	margin: 10px;
    border: solid 1px #C9C;
	}


Je n'arrive cependant pas à appliquer les paramètre :hover sur ce code, je suis novice en création de site internet.

De plus ils apparaissent les uns sous les autres alors que j'aimerais les mettre sur la même ligne.
Ma page à une largeur de 1024 px et une hauteur infinie.

Encore merci
0
Gwopro Messages postés 38 Date d'inscription vendredi 28 octobre 2011 Statut Membre Dernière intervention 15 mai 2012 14
Modifié par Gwopro le 28/10/2011 à 19:19
div#promo {
border-radius: 10px;
width:300px;
height:180px;
margin: 10px;
border: solid 1px #C9C;
background : red;
}
div#promo:hover{
background : yellow;
}

Voilà pour le fond. Mais, cela ne marche pas sous IE car il n'accepte pas le ":hover" sur une autre balise que "a". À cela, tu peux te demander si c'est vraiment important. Ce sera un plus pour certains, mais pour les autres...

Ensuite pour ton problème, la solution serait d'utiliser "display : inline-block;", néammoins, ça ne marche qu'avec les navigateurs modernes...

->

div#promo {
border-radius: 10px;
width:300px;
height:180px;
margin: 10px;
border: solid 1px #C9C;
background : red;
display:-moz-inline-box;
display : inline-block;
}
div#promo:hover{
background : yellow;
}
0
moutonpolaire
28 oct. 2011 à 19:28
Merci beaucoup, j'avais trouver certaines de ces informations mais impossible de les organiser correctement dans le code !

Encore merci pour le coup de main.
0
Gwopro Messages postés 38 Date d'inscription vendredi 28 octobre 2011 Statut Membre Dernière intervention 15 mai 2012 14
28 oct. 2011 à 19:57
J'espère t'avoir aidé...
Si tu as d'autres problèmes, n'hésite pas, la communauté CÇM est là...
0
moutonpolaire
29 oct. 2011 à 13:22
Bonjour, Encore une question :

Toujours avec ces même blocs, comment gérer l'alignement pour avoir sur une même ligne : Div#promo-1 tout à fait à gauche, Div#promo-2 au centre et enfin Div#promo-3 à droite, en sachant que ces blocs sont contenu dans 

div#contenu {
	margin-left: auto;
	margin-right: auto;
	width:1024px;
	background-color:#f9f9f9;
	}


merci d'avance.
0