Centrer display:block; ?
Résolu
gwenm
Messages postés
594
Date d'inscription
Statut
Membre
Dernière intervention
-
gwenm -
gwenm -
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">
<!--
.rollover a { display:block; width:32px; background-color: #FFFFFF}
.rollover a:hover { background-color: #990000}
-->
</style>
Lien du tuto: http://www.designmeme.com/tutorials/cssrollovers/
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">
<!--
.rollover a { display:block; width:32px; background-color: #FFFFFF}
.rollover a:hover { background-color: #990000}
-->
</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
- Etd control center - Forum Virus
- Catalyst control center - Télécharger - Pilotes & Matériel
- Display fusion - Télécharger - Divers Utilitaires
9 réponses
Pour centrer c'est la propriété text-align:center;
Comme ceci :
.rollover a { display:block; width:32px; background-color: #FFFFFF; text-align:center;}
Comme ceci :
.rollover a { display:block; width:32px; background-color: #FFFFFF; text-align:center;}
Bonjour,
Organise bien tes class html pour que ton css s'affiche bien :
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>
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
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 ?
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 ?
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>
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 ;-)
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 ;-)
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.
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.
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.
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.
Tes bordures sont à angles droits ? Pourtant tu testes avec Firefox ?
Réessaie avec ça :
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 !
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 !
