Le positionnement avec le CSS

LezeuS · Message par **LezeuS** » 25 déc. 2003, 18:16

Bonjour, je me mets tout doucement aux codages, mais je n'arrive pas à résoudre un problème de positionnement.

Je fais une page où j'aimerais voir plusieurs titres bleus en mistral positionner en cercle. Et je voudrais qu'à chaque fois que la souris passe sur un titre, les commentaires correspondants apparaissent dans un cadre au milieu du cercle formé par les titres.
Et puis aussi, est-ce que le <a> est obligatoire pour faire les " boutons-titres " ?

Je vous montre mon ébauche de code :
Le html :

Code : Tout sélectionner

<!doctype html public "-//w3c//dtd xhtml.0 transitional//en" "dtd/xhml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
 <link href="style.css" rel="stylesheet" type="text/css">
 <title>Melting Spot 2</title>
</head>

<body>
<div class="objectif"> 
  	<a href="">Objectif<span>Apporter un maximum de fournitures scolaires ( en kilos ) jusqu'au Maroc</span></a>
</div>
<div class="[autres boutons]">
( couic )
</div>
</body>

</html>

Et le CSS :

Code : Tout sélectionner

/*définition de la police pour tous les titres*/
div  {
     font-size : 200% ;
     color : blue ;
     font-family : mistral, sans-serif ;
     font-style : italic ;
     font-weight : 600 ;
     width : 120px ;
     height : 20px ;
     float : left ;
     display : block ;
     text-align : center ;
     text-decoration : none ;
     background : transparent ;
     }

/* définition de la position de chaque bouton du menu */

  /*bouton Objectif*/

div.objectif a {
     position : absolute ;
     left: 30% ; 
     top: 30% ;
     {

div.objectif a:hover {
     border-bottom: 0px;
     }

   /* définition de la balise <span> inclue dans <a> */
div.objectif a span {                       
     display: none;
     }
   /* définition de la balise <span> au survol */ 
div.objectif a:hover span {                 
     display : block ;
     position : absolute ;
     top : 50% ;
     left : 50% ;
     width : 300px ;
     margin-left : -150px ; 
     height : 30px ;
     margin-top : -15px ;
     padding : 3px 3px 3px 3px ;
     font : 40% comic, sans-serif ;
     text-align : center ;
     border : 3px groove #585 ;
     background : #dff ;
     color : #000 ;
     }

  /*bouton ...*/
( couic )

Message par **Benoit** » 26 déc. 2003, 16:28

C'est nécessaire en fonction de la feuille de style que tu donnes, sans doute qu'à l'origine c'est prévu pour faire des liens.

LezeuS · Message par **LezeuS** » 27 déc. 2003, 12:31

Merci, pour ce premier élément de réponses.
Tu connaitrais pas un forum vraiment spécialisé dans le codage ?
Snap m'a ausi parlé de la ML des pompeurs, tu sais où je peux la trouver ?

LezeuS · Message par **LezeuS** » 27 déc. 2003, 14:32

Bon, je me suis débrouiller comme un grand, et voila ce qui en ressort :

Pour le html :

Code : Tout sélectionner

<!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">

<head>
 <link href="style.css" rel="stylesheet" type="text/css">
 <title>Melting Spot 2</title>
</head>

<body><div class="conteneur">

<p class="objectif">Objectif<span>Apporter un maximum de fournitures scolaires ( en kilos&nbsp) au Maroc.</span></p>

</div></body>

</html>

et pour le CSS :

Code : Tout sélectionner

html,body {
     background-color : #afafaf ;
     }

p  {
     font-size : 230% ;
     color : blue ;
     font-family : mistral, sans-serif ;
     font-weight : bold ;
     border : 1px solid #000 ;
     text-align : center ;
     text-decoration : none ;
     }

.conteneur {
     margin-left : auto ;
     margin-right : auto ;
     position : absolute ;
     left : 50% ; 
     top : 50% ;
     width : 753px ;
     margin-left : -376px ;
     height : 686px ;
     margin-top : -343px ;
     background-image : url(image.jpg) ;
     }

p.objectif {
     margin-left : auto ;
     margin-right : auto ;
     position : absolute ;
     left : 68% ; 
     top : 48% ;
     width : 120px ;
     margin-left : -60px ;
     height : 50px ;
     margin-top : -25px ;
     background : transparent ;
     }

p.objectif:hover {
     border-bottom : 0px ;
     }

p.objectif span {
     display : none ;
     }

p.objectif:hover span {
     display : block ;
     position : absolute ;
     top : 60% ;
     left : -140% ;
     width : 200px ;
     margin-left : -100px ; 
     height : 100px ;
     margin-top : -50px ;
     border : 3px groove #585 ;
     background : #9da ;
     padding : 3px 3px 3px 3px ;
     font : 40% comic, sans-serif ;
     text-align : center ;
     color : black ;
     }

Ca fonctionne sous Firebird. Le seul problème, c'est que je vais devoir définir le span pour chaque boutons car le positionnement ne se fait pas par rapport au conteneur, mais par rapport aux boutons. Si vous savez comment changer ce comportement, ca m'interesse

Le gros problème, c'est que ca ne marche pas du tout sous IE

( vraiment merdique ce truc... ).

Message par **Benoit** » 27 déc. 2003, 15:10

Oups c'est ma faute, le lien vers la liste pompeurs était dans le sujet "quelques liens utiles" qui était censé être en post-it, c'est fait maintenant.

LezeuS · Message par **LezeuS** » 27 déc. 2003, 16:07

Merci

Je viens de découvrir le " position : fixed ; ". Ca va m'aider

. Mais ca ne va pas améliorer le rendu sous IE d'après ce que j'ai pus comprendre

PsyDk · Message par **PsyDk** » 27 déc. 2003, 18:03

À la limite tu prévois deux styles. Un qui passe sur les navigateurs modernes, et un qui passe sous IE. Les utilisateurs seront libres de choisir.

LezeuS · Message par **LezeuS** » 27 déc. 2003, 21:36

Oui, c'est ce que j'ai l'intention de faire. Tant pis pour Internet Explorer, ce sera moins joli...

Romuald · Message par **Romuald** » 31 déc. 2003, 14:44

Pas la peine de faire deux feuilles de styles.
Dans ta feuille de style tu mets un ! devant les ligne que tu veux faire ignorer par Mozilla (ou les navigateurs modernes)
Exemple:

Code : Tout sélectionner

.div.test {
  position: fixed;
! position: static;
}

Il faut mettre la ligne avec le point d'exclamation après celle défini. (c'est toujours la dernière ligne qui est lu)
Pour être valide CSS c'est pas top, mais c'est une façon comme une autre pour esquiver les fourberie d'IE. J'étais bien content après avoir trouvé cela. (tout seul comme un grand :p)

LezeuS · Message par **LezeuS** » 31 déc. 2003, 18:19

Merci pour la petite astuce Romuald.

Enfin, j'ai quand même deux feuilles de style, j'ai deux pages complètement différentes, une avec des :hover et des trucs dans le genre où je me suis même amusé à mettre des bords ronds sur les cadres; et une toute bête que IE a pas trop de mal à déchiffrer.

Geckozone

Le positionnement avec le CSS

Le positionnement avec le CSS

Qui est en ligne ?