28173 sujets

CSS et mise en forme, CSS3

Questions / Réponses pour débutant [RESOLU]

Bonjour à tous, je suis nouveau, j'apprends le CSS. J'ai pratiqué beaucoup d'actionScript, du Flash, etc. Et franchement question positionnement, c pas génial le CSS. Pas de coordonnées (x,y), tu dois sans cesse essayer de te débrouiller avec des margin, la plupart du temps il faut utiliser des margin négatives, etc. enfin tout ça pour dire que je galère bien au début, et que c'est pas franchement intuitif niveau logique si il y en a.

si je vous écris, c'est que je me pose pas mal de questions, vous pourrez peut-être y répondre :

Peut on dire que le padding d'un block est équivalent au margin d'un autre block contenu dans le premier ?
Dans ces cas là, il vaut mieux modifier la parent ou l'enfant ?

le hover pose beaucoup de problèmes à IE. Est-ce que je dois forcément passer par JavaScript pour que fonctionne li:hover ? ( en imaginant un menu horizontal fait de ul et li)

Je rajouterai mes questions au fur et à mesure. Comme ça tout le monde aura les réponses aux questions que nous devosn tous débutants nous poser.
Modifié par Lille (01 Jun 2006 - 16:05)
a écrit :
Peut on dire que le padding d'un block est équivalent au margin d'un autre block contenu dans le premier ?

en quelque sorte oui.
apres, le faire dans la parent ou dans le bloc lui meme, je dirais que c'est à toi de voir... tout dépends si tu veux utiliser des bordures ou pas..Etc..

a écrit :
le hover pose beaucoup de problèmes à IE. Est-ce que je dois forcément passer par JavaScript pour que fonctionne li:hover ? ( en imaginant un menu horizontal fait de ul et li)

la pseudo classe :hover ne fonctionne que sur l'élément a (lien).
ceci dit, cela ne devrait pas te poser de problème puisque tu veux l'utiliser dans un menu
Merci pour votre réactivité.
Une question supplémentaire :

Dans mon menu horizontal :

Je modifie la hauteur de la balise <a> qui elle même se trouve dans une balise li elle même dans ul, lui même dans un block div appelé menu grace à un identifiant.

Pour modifier la hauteur, je transforme la balise a en block à l'aide display:block. je transforme la hauteur ensuite grace a height et je tombe sur un os : le texte n'est pas aligné verticalement. Comme c'est un block maintenant, quand je modifie le padding-top de la balise parent, ici <li>, elle déplace tout le block et non plus juste le texte pour l'aligner verticalement. hmm, comment faire ?

Je vous donne le code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="test" href="test.css" />

   </head>
   <body>
   </body>
  
  <div id="menu">
   <ul>
   <li><a href="#">menu1</a></li>
   <li><a href="#">menu2</a></li>
   <li><a href="#">menu3</a></li>
   <li><a href="#">menu4</a></li>
   </div>

  </html>



#menu li {
float: left;
margin-left: 5px;
list-style-type: none;
padding-left: 4px;
background: #aaa;
}
#menu a {
display: block;
width: 8em;
height: 3em;
text-align: center;
text-decoration: none;
color: #fff;
background: #ccc;
}
#menu a:hover {
color: #bbb;
background: #eee;
}
le plus simple est d'appliquer le padding sur a mais que ce soit sur a ou sur li lorsque tu rajoutes du padding il faut diminuer la dimension affectée par ce padding de la meme valeur que le padding.
ex: si tu mets 0.2em de padding-top tu enleves 0.2em du height
Lille a écrit :

Dans mon menu horizontal :
Pour modifier la hauteur, je transforme la balise a en block à l'aide display:block. je transforme la hauteur ensuite grace a height et je tombe sur un os : le texte n'est pas aligné verticalement.


Dans un menu horizontal, tu peux utiliser l'attribut line-height (hauteur de ligne)...
par défaut le texte est centré verticalement, si la hauteur du bloc = la hauteur de la ligne => le texte est centré....

Cette méthode convient s'il n'y qu'une ligne...
Modifié par JeanLoup (01 Jun 2006 - 15:38)
Je ne connais pas line-height ? que dois-je mettre center middle comme valeur ?
Modifié par Lille (01 Jun 2006 - 15:54)
Sujet clos
Aller à