Forums d'assistance et de discussion sur les logiciels produits par Mozilla ou créés à partir des technologies Mozilla. Ce site ne dépend pas de la fondation Mozilla et est maintenu par un collectif de bénévoles.
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 !
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 " ?
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 ?
<!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 ) au Maroc.</span></p>
</div></body>
</html>
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... ).
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.
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:
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.
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.