28173 sujets

CSS et mise en forme, CSS3

[RESOLU] L'alignement vertical... mon sujet favoris !!!

Bonsoir,

Je suis en train de réaliser actuellement un site web pour la section Sciences de l'Ingénieur de mon lycée. J'ai fait des jolis bouton et je voudrais centrer du texte au milieu de ces boutons. Pour l'alignement horizontal, aucun problème, mais pour l'alignement vertical... Mes boutons sont des DIV dont l'intégralités des dimensions sont définies en pourcentages.

Voici le code XHTML (tres compliqué...) :
<div id="bouton1">Accueil</div>


Et le code CSS :

#bouton1 {
  display: table-cell;
  position: absolute;
  top: 18%;
  left: 1%;
  width: 8%;
  height: 5%;
  background: #ff8b75;
  color: #ffffff;
  margin: 0 0 0 0;
  padding: 2px 2px 2px 2px;
  border-bottom-style: solid;
  border-bottom-color: #ff5234;
  border-bottom-width: 2px;
  text-align: center;
  vertical-align: middle;
  font-family: "Arial", serif;
  font-size: 12px;
  font-weight: bold;
}


Si quelqu'un a une astuce pour que ça marche... Je suis ouvert à toutes les suggestions !

Merci d'avance.

Emmanuel
Modifié par Manu38 (18 Jul 2006 - 21:39)
Manu38 a écrit :
J'allais oublier : le site est prévu pour MSIE 7 et Firefox 1.5.

Même pas de compatibilité IE6 ? Tss tss…

Sinon, si IE7 supportait le display: table-cell, ça serait plus simple à régler (pour les navigateurs que tu vises… mais ça serait bien d'assurer la compatibilité avec 1/ les standards et 2/ les principaux navigateurs du marché).
Salut,
Déja allège un peu tes propriété css et essayes avec ça.

#bouton1 {
  position: absolute;
  top: 18%;
  left: 1%;
  width: 8%;
  height: 5%;
  background: #ff8b75;
  color: #fff;
  margin: 0;
  padding: 2px;
  border-bottom: 2px solid #ff5234;
  text-align: center;
  font: bold 12px Arial, sans-serif;
  line-height:5%;
}


Comme l'explique Mpop, oublies le table-cell, autant faire un tableau.
Quant tu as 4 valeur de padding ou margin identique, inutilie de les répéter 4 fois. Une seule suffit.
Et puis j'ai eassemblés quelques propriétés en propriété racourcis
Voir http://marcarea.com/tuto/10_astuces_css.php

Je te garantis pas que ça marche avec des valeur de poucentage mais le
line-height te sert à centrer un élément, celui-ci doit être égale à la hauteur de son conteneur.
Inutile de mettre la police arial entre guillemet puisque ce n'est pas un nom
composé séparé d'un espace.
L'equivalent générique est le sans-serif et non le serif.
Modifié par Hermann (12 Jul 2006 - 00:00)
Merci à tous pour vos réponses !

En ce qui concerne MSIE 6, je vais effectivement assurer la compatibilité même s'il refuse un ou deux truc que j'aime bien utiliser...

Je ne voulais pas en arriver à mettre des tableaux partout mais il n'y a que cette solution qui m'a permis d'assurer une compatibilité sur MSIE 6 et 7 ainsi que Firefox 1.5 pour n'importe quelle résolution d'écran, en restant valide aux normes du W3C.

Je tiens à vous indiquer que l'astuce "line-height: 5%" ne marche absolument pas dans ce cas.

Quant au "poids" de mon code, j'allai je réduire une fois la feuille de style terminée. Tant que j'aurais des modifs à faire, je préfère bosser sur une feuille détaillée.

En conclusion : PROBLEME "RESOLU"

@+

Emmanuel
Sujet clos
Aller à