Centrer display:block; ?

Résolu/Fermé

gwenm Messages postés 594 Date d'inscription lundi 6 octobre 2008 Statut Membre Dernière intervention 17 mai 2024 - Modifié par gwenm le 9/06/2011 à 17:16
gwenm - 4 mai 2011 à 15:08

Bonjour,

Après une longue recherche d' effet rollover sur images j' ai enfin trouvé exactement ce que je cherchais, mais il y a un bémol, car je n' arrive pas à centré l' image dans le block. Lorsque que l' on survole l' image avec la souris, la couleur qui apparait se situ qu' à droite et en bas de l' image, alors que je voudrais que cela face le tour..j'ai essayé divers choses et d' autre, mais comme je n' y connais pas grand chose...je galère assez :(

Voici les srcipt:

<body>
<div class="rollover">
<p>
<a href="#"><img src="stuart.gif"
width="32" height="32" border="0"></a>
</p>
</div>

----------------
<header>
<style type="text/css">

</style>

Lien du tuto: http://www.designmeme.com/tutorials/cssrollovers/

A voir également:

Display center avis
Control center 4 - Télécharger - Divers Utilitaires
Copytrans control center - Télécharger - Divers Utilitaires
Display fusion - Télécharger - Divers Utilitaires
Catalyst control center - Télécharger - Pilotes & Matériel
Wireless display edenwood ✓ - Forum TV & Vidéo

9 réponses

Réponse 1 / 9

magot
3 mai 2011 à 08:56

Pour centrer c'est la propriété text-align:center;
Comme ceci :

.rollover a { display:block; width:32px; background-color: #FFFFFF; text-align:center;}

Réponse 2 / 9

gwenm Messages postés 594 Date d'inscription lundi 6 octobre 2008 Statut Membre Dernière intervention 17 mai 2024 30
3 mai 2011 à 09:13

merci Magot, mais cela ne fait pas bouger l' image..

Réponse 3 / 9

Eastchild Messages postés 319 Date d'inscription lundi 23 juillet 2007 Statut Membre Dernière intervention 28 mars 2012 31
3 mai 2011 à 10:19

Bonjour,

Organise bien tes class html pour que ton css s'affiche bien :

<body>
<div class="rollover">
<p>
<a class="lien" href="#"><img src="stuart.gif"
width="32" height="32" border="0"></a>
</p>
</div>

----------------
<header>
<style type="text/css">
<!--
.rollover { text-align:center; }
.lien { display:block; width:32px; background-color: #FFFFFF}
.lien:hover { background-color: #990000}
-->
</style>

Réponse 4 / 9

gwenm Messages postés 594 Date d'inscription lundi 6 octobre 2008 Statut Membre Dernière intervention 17 mai 2024 30
3 mai 2011 à 13:37

ca ne marche pas non plus...ca fait 2 jours que je suis dessus, je crois que je vais voir autre chose..

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 9

coeus Messages postés 3021 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 119
3 mai 2011 à 19:50

Salut !

Je crois que je ne comprends pas tellement ce que tu essaies de faire, mais si c'est ce que je pense... Au lieu de chercher à faire bouger l'image, pourquoi ne pas y aller avec des borders ? C'est ça que le site semble faire : il met une border:2px solid #FFF; et sur un hover, ça change à border:2px solid #F80; ou quelque chose comme ça...

Est-ce que je comprends bien ?

Réponse 6 / 9

gwenm Messages postés 594 Date d'inscription lundi 6 octobre 2008 Statut Membre Dernière intervention 17 mai 2024 30
3 mai 2011 à 21:04

tu a très bien compris;), mais moi par contre je débute avec le css et le border je ne trouve pas vraiment comment l' installer..je me base sur le site(j' essai de le refaire) pour comprendre comment ca marche.Mais c'est dure dure:(, où place tu le hover?

<html>
<head>
<style>

table { border-color: rgb( 100, 100, 255); 
border-style: dashed; } 

td { border:2px solid #FFF;; 
border-style: ridge; }

p { border:2px solid #F80;
border-style: solid; }

</style>
</head>
<body>
<h2>CSS Borders</h2>
<p>This paragraph has a black border.</p>
<table>
  <tr><td>This table has an outset border</td></tr>
  <tr><td>and each cell has</td></tr>
  <tr><td>a dotted border.</td></tr>
</table>
</body>
</html>

coeus Messages postés 3021 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 119
3 mai 2011 à 21:14

Le hover, tu le places dans le CSS. Par exemple :
a {...} va définir les attributs des balises d'hyperliens ;
a:hover {...} va définir les attributs des balises de liens quand la souris passe par-dessus ;
a:active {...} va définir les attributs des balises de liens pendant qu'une action s'exécute sur elles (par exemple quand on clique dessus) ;

Tu peux appliquer des :hover sur à peu près toutes les balises. Tu peux donc définir des styles div:hover, p:hover, img:hover, etc. C'est moins "standard" mais ça fonctionne.

Après, si tu veux arrondir tes bordures comme dans le site que tu donnes en exemple, tu devras définir le border, puis rajouter un border-radius ET un -moz-border-radius.

Note aussi : si tu fais :
p { border:2px solid #F80; }
tu n'as pas à re-définir le border-color, border-style, ou border-width. Tout est déjà là. Tu peux le définir directement :
p { border:2px ridge #F80; }

Petit truc comme ça ;-)

magot
4 mai 2011 à 01:31

déjà tu devrait ouvrir une page(bouquin ou web) avec la liste des propriètés CSS, ça aide de l'avoir sous les yeux et tu teste ce qui sembles intéressant.
Sinon pour le centrage au pire si tu n'est pas en strict tu peut toujours rajouter la balise <center></center>

Le positionnement en CSS étant la partie importante tu devrait aller voir un tuto là dessus, qui expliques bien les marges et bordures.

Réponse 7 / 9

gwenm Messages postés 594 Date d'inscription lundi 6 octobre 2008 Statut Membre Dernière intervention 17 mai 2024 30
3 mai 2011 à 21:25

merci, je vais me plonger la dessus..

Réponse 8 / 9

gwenm
4 mai 2011 à 10:48

je fait pas mal de teste, mais ca ne donne jamais comme ca devrais. Par exemple je suis ce tuto: http://css.mammouthland.net/border-css.php, je fait le dernier exemple soit:

je copie/colle le style css dans mon css, ensuite je copie/colle le Code (x)html dans ma page html, et non, non,non, mes bordures sont toujours en angle droit..j'ai testé plein de tuto mais rien n' y fait..

Pour construire mon site j' utilise cet exemple http://www.w3.org/Style/Examples/011/firstcss.fr.html .. et suis hébergé chez phpnux.

coeus Messages postés 3021 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 119
4 mai 2011 à 14:50

Tes bordures sont à angles droits ? Pourtant tu testes avec Firefox ?
Réessaie avec ça :

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

Si ça ne fonctionne pas, c'est soit que tu testes avec Internet Explorer 6 ou une version précédente, ou que ton CSS est mal lié à ton code HTML... Alors là, assure-toi que les noms de tes classes correspondent.

Note aussi, le border-radius ne s'appliquera pas sur une image. Il va falloir que tu mettes le border-radius ET le border sur un <span>, un <a>, ou une <div> qui va encadrer ton image. Aussi, ça peut être bon de rajouter un overflow:hidden; sur ce "cadre"... Pour ne pas que les coins droits de l'image dépassent des coins arrondis !

gwenm
4 mai 2011 à 15:08

merci coeus..
j' utilise le dernier Firefox et Explorer, mais il est clair que le css ne se lie pas toujours..

Réponse 9 / 9

gwenm
4 mai 2011 à 11:37

en fait j' ai fait un systeme rollover avec 2 images..c'est plus simple pour moi et au moins ca marche:)

coeus Messages postés 3021 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 119
4 mai 2011 à 14:50

Ça peut être une solution. Moins adaptable, mais... tant que ça marche ! ;-)

gwenm
4 mai 2011 à 15:08

Ouai!

Discussions similaires

Connexion Smart TV Edenwood

A quoi sert ETDctrl ? Peut-on le supprimer ?

Wireless display

Connecter iphone sur tv sans fil

Qu'est ce que Nvidia Display Container LS ?