Le positionnement avec le CSS

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !

Modérateur : Asumbaa

Répondre
LezeuS
Lézard vert
Messages : 158
Enregistré le : 29 juil. 2003, 19:00

Le positionnement avec le CSS

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 )

Benoit
Administrateur
Messages : 4894
Enregistré le : 19 juil. 2003, 10:59

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
Lézard vert
Messages : 158
Enregistré le : 29 juil. 2003, 19:00

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
Lézard vert
Messages : 158
Enregistré le : 29 juil. 2003, 19:00

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 :x ( vraiment merdique ce truc... ).

Benoit
Administrateur
Messages : 4894
Enregistré le : 19 juil. 2003, 10:59

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
Lézard vert
Messages : 158
Enregistré le : 29 juil. 2003, 19:00

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 :x

PsyDk
Lézard à collerette
Messages : 317
Enregistré le : 23 sept. 2003, 09:41

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
Lézard vert
Messages : 158
Enregistré le : 29 juil. 2003, 19:00

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
Gecko
Messages : 88
Enregistré le : 03 sept. 2003, 23:55

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)
Nul besoin d'être comme son voisin pour l'apprécier, c'est la différence qui fait que le monde est intéressant.
Voyons plus loin que le bout de notre nez.

LezeuS
Lézard vert
Messages : 158
Enregistré le : 29 juil. 2003, 19:00

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. ;)

Répondre

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 1 invité