Discussion :

[Teo]

Bonjour

Je dois modifer un site que j'ai pas mis en oeuvre.
Le codeur n'est plus dans la boite.
J'ai jamais bien compris le trio CSS/HTML/JS

J'ai besoin d'aide pour mieux comprendre le code qui suit

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
div.navigation div.box_arrondi div.left {
height: 85px;
}
 
div.navigation div.box_arrondi div.left_center {
height: 67px;
}
 
div.navigation div.box_arrondi div.right {
height: 85px;
}
 
div.navigation div.box_arrondi div.right_center {
height: 67px;
}
 
div.navigation div.box_arrondi
{
  height: 85px;
  width: 950px;
}
 
div.navigation div.box_arrondi_content
{
  height: 85px;
  width: 930px;
}

Il y a des div contenant les classes mentionnées.
Ma question est la suivante
Si

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
div.navigation div.box_arrondi div.left {
height: 85px;
}

donne 85pixels de gaut pour les div de class navigation et left
que se passe t'il quand plus bas on se trouve avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
div.navigation div.box_arrondi div.left_center {
height: 67px;
}

div.navigation aura une hauteur de 67px ? ou de 85px ?

Il y a t'il une regle pour la priorité en cas de "contre ordre" ?
C'est le dernier ordre qui prime ?

Le fichier CSS est pleins de "redondances" qui me semblent "contradictoires"
Le fichier est mal ecrit ou c'est moi qui comprend vraiment rien dans les trucs CSS ?

Merci d 'avance pour vos lumieres.

[Invité]

Bonjour,
le mieux est d'apprendre :

• Les meilleurs cours et tutoriels CSS
• Les meilleurs cours et tutoriels (X)HTML
  

Par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
div.navigation div.box_arrondi div.left_center {
height: 67px;
}

Se réfère au div portant la class "left_center" dans cette configuration :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div class="navigation">
  pas ici...
  <div class="box_arrondi">
    pas ici non plus...
    <div class="left_center">Bingo ! C'est ici !</div>
  </div>
</div>

[Teo]

Merci jreaux62.

Je croyais enfin connaitre au moins les bases...

Je crois que je melange les

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
div.navigation div.box_arrondi div.left_center 
{
 ...
}

avec les

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
div.navigation , div.box_arrondi div.left_center 
{
  ...
}

Ca ma toujours enervé que pour afficher un simple menu deroulant, il faille
je ne sais combien de div !

Bien, je dois donc retourner en cours !

[Invité]

Ca ma toujours enervé que pour afficher un simple menu deroulant, il faille je ne sais combien de div !

En fait,
pas tant que ça !

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<div id="menu">
  <ul>
    <li><a href="#">menu1</a></li>
    <li><a href="#">menu2</a></li>
    <li><a href="#">menu3</a>
       <ul>
          <li><a href="#">sous-menu3-1</a></li>
          <li><a href="#">sous-menu3-2</a></li>
       </ul>
   </li>
  <ul>
</div>

Le CSS se gère facilement :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
#menu { .... }
/* menu niveau 1 */
#menu > ul { .... }
#menu > ul > li { .... }
#menu > ul > li > a { .... }
/* menu niveau 2 */
#menu > ul > li > ul { .... }
#menu > ul > li > ul > li { .... }
#menu > ul > li > ul > li > a { .... }

[Bovino]

+1 jreaux62, surtout que si l'on en croit le nom des classes, il ne s'agit pas de faire un menu déroulant mais de gérer des coins arrondis, qui d'ailleurs ne se réalisent plus comme ça depuis un petit moment déjà mais avec la propriété CSS border-radius...

[Invité]

+1 Bovino
=> CSS Border Radius Generator

=> Coins arrondis CSS
=> Créer des coins arrondis à l'aide de Sprites CSS
Le seul intérêt de ces tutos (qui "datent" un peu) serait encore de créer des coins "exotiques" (de forme très spéciales).

Et encore !
Le CSS permet maintenant de grandes libertés : création de forme complexes en CSS3 + pseudo-éléments :before, :after,...
=> De la géométrie avec CSS