28173 sujets

CSS et mise en forme, CSS3

Bonjour,
Comme je suis venue 2 fois ici, et que vos réponses ont été plus que
satisfaisantes... je reviens.

volià je voudrais réaliser un plan de site simple : du texte et des images sous forme de vignettes contenu dans une div cliquable avec rollover, mais je rencontre des difficultés ...
ça marche parfaitement pour la première, mais pas les suivantes...

je me permets de mettre le CSS



/* container */

#support{

width:627px;
float:left;
display:block;

height: 60px;

margin: 10px;

}

	
/* contient images et la mise en forme du texte*/

#support a.online{

width:627px;

height:70px;

border:1px solid #999999;

display:block;

background-color:#FFFFFF;

font-weight:normal;

text-transform:none;

text-decoration:none;

font-size: 12px;

color: #333333;

text-align: left;

background-repeat: no-repeat;

background-position: right center;

font-family: Geneva, Arial, Helvetica, sans-serif;

background-image: url(images/agrafagejaune01.jpg);

}

	

/*change la couleur du fond par rollover*/

#support a.online:hover{

background-color:#999999;

color:#FFFFFF;

	

/*div de titre*/

#Titres {
font-family: Geneva, Arial, Helvetica, sans-serif;

font-size: 14px;

color: #FFFFFF;

background-color: #666666;

margin-left: 12px;

width: 624px;

}

/*change bien l'image de fond... mais n'ai plus le rollover */


#support a.online1 {

width:627px;

height:70px;

border:1px solid #999999;

display:block;

background-color:#FFFFFF;

font-weight:normal;

text-transform:none;

text-decoration:none;

font-size: 12px;

color: #333333;

text-align: left;

background-repeat: no-repeat;

background-position: right center;

font-family: Geneva, Arial, Helvetica, sans-serif;

background-image: url(images/recouvrose01.jpg);

}



si qq'un a une solution, merci d'avance. smile]
PS : sujet déjà posté, maism'a conseillé de changer de titre...
Bonjour et Bienvenu à toi Smiley smile

En survolant ton code, il m'apparait que tu te compliques un peu la tâche.
Si tu souhaites construire un plan de site, il me semble que la première chose à faire est d'utiliser une liste. (<ul>)

Une fois ta liste en place et ses propriétés définies, il faut effectivement que tu demandes à tes liens d'occuper la totalité de tes éléments de liste (<li>) via un display : block; puis que tu leur affectes un background.

Au rollover (hover), tu n'as qu'à modifier le background, et le tour est joué. Smiley cligne

Enfin, sache que fournir un CSS sans code HTML revient à donner la page d'un livre sans en indiquer les références ! Smiley ravi
Modifié par Cygnus (22 Nov 2007 - 21:03)
Cygnus a écrit :
Enfin, sache que fournir un CSS sans code HTML revient à donner la page d'un livre sans en indiquer les références ! Smiley ravi

<hs>Mais quelle belle métaphore Cygnus! Smiley smile </>
a écrit :
Enfin, sache que fournir un CSS sans code HTML revient à donner la page d'un livre sans en indiquer les références ! ravi


oui j'ai effectivement oublié cela, désolé

http://www.pierreburaglio.com/plan1.php

Sachant que chaque vignette est différente, ainsi que les commentaires of course.
Je patauge...
Je viens de tester sous FF et IE6-7.
A priori, je ne vois pas de problème...

Quel est le comportement anormal que tu rencontres, que voudrais-tu obtenir ?
Plus d'explications ne seraient pas inutiles.