Mise en forme d'un bloc

Mise en forme d'un bloc - HTML/CSS - Programmation

Marsh Posté le 09-04-2005 à 15:46:01    

Bonjour,
j'affiche un menu mis en forme en css
Pour cela j'utilise une liste à puces avec des blocs de 30px de haut
Le seul problème que g'ai est de positionner le texte au centre du bloc verticalement
Si quelqu'un pouvait m'aider
 
Je met les extraits de code nécessaires
 
artdentelle.css

Citation :

#menu {
 position: absolute;
 left: 10px;
 width: 150px;
}
 
 .menugauche {
  list-style-type: none;
  margin: 0;
  padding:0;
  text-align: center;
 }
 
 .menugauche li a {
  display: block;
  background-color: white;
  color: #000000;
  height: 30px;
  text-decoration: none;
  font-size: 10pt;
  margin-top: 10px;
  margin-bottom: 10px;
 }
 
 .menugauche a:hover {
  font-weight: bold;
  color: #FFFFFF;
  background-color: #7D7DFF;
 }


 
page.php

Citation :

<html>
<head>
<link href="/artdentelle.css" rel="stylesheet" type="text/css">
</head>
 
<body>
<div id="conteneur">
 <div id="menu">
  <ul class="menugauche">
  <li><a href="?page=noframes/actu.php">Actualit&eacute;s</a></li>
  <li><a href="?page=noframes/assoc.php">L'association</a></li>
  <li><a href="?page=noframes/historiq.php">Historique de la dentelle aux fuseaux</a></li>
 
  <li><a href="?page=noframes/galerie.php">Galerie photos</a></li>
  <li><a href="?page=noframes/colectif.php">&OElig;uvres collectives</a></li>
  <li><a href="?page=noframes/liens.php">Liens favoris</a></li>
  <li><a href="?page=noframes/contact.php">Nous contacter</a></li>
  <p>&nbsp;</p>
  <li><a href="?page=noframes/janou.php">La grange &agrave; Janou</a></li>
</ul>
 </div>
</body>
</html>

Reply

Marsh Posté le 09-04-2005 à 15:46:01   

Reply

Marsh Posté le 09-04-2005 à 16:17:43    

vertical-align: middle;


---------------
Nos estans firs di nosse pitite patreye...
Reply

Marsh Posté le 09-04-2005 à 16:29:29    

non, j'avais déjà essayé, ça ne marche pas

Reply

Marsh Posté le 10-04-2005 à 21:50:14    

KangOl a écrit :

vertical-align: middle;


Ca ne fonctionne que pour des éléments en display: table-cell... Non géré par IE :D Dans les autres cas, vertical-align ne fait que aligner des éléments inline entre eux

Reply

Marsh Posté le 10-04-2005 à 22:20:32    

astik89 a écrit :

Bonjour,
j'affiche un menu mis en forme en css
Pour cela j'utilise une liste à puces avec des blocs de 30px de haut
Le seul problème que g'ai est de positionner le texte au centre du bloc verticalement
Si quelqu'un pouvait m'aider
 
Je met les extraits de code nécessaires
 
artdentelle.css

Citation :

#menu {
 position: absolute;
 left: 10px;
 width: 150px;
}
 
 .menugauche {
  list-style-type: none;
  margin: 0;
  padding:0;
  text-align: center;
 }
 
 .menugauche li a {
  display: block;
  background-color: white;
  color: #000000;
  height: 30px;
  text-decoration: none;
  font-size: 10pt;
  margin-top: 10px;
  margin-bottom: 10px;
 }
 
 .menugauche a:hover {
  font-weight: bold;
  color: #FFFFFF;
  background-color: #7D7DFF;
 }


 
page.php

Citation :

<html>
<head>
<link href="/artdentelle.css" rel="stylesheet" type="text/css">
</head>
 
<body>
<div id="conteneur">
 <div id="menu">
  <ul class="menugauche">
  <li><a href="?page=noframes/actu.php">Actualit&eacute;s</a></li>
  <li><a href="?page=noframes/assoc.php">L'association</a></li>
  <li><a href="?page=noframes/historiq.php">Historique de la dentelle aux fuseaux</a></li>
 
  <li><a href="?page=noframes/galerie.php">Galerie photos</a></li>
  <li><a href="?page=noframes/colectif.php">&OElig;uvres collectives</a></li>
  <li><a href="?page=noframes/liens.php">Liens favoris</a></li>
  <li><a href="?page=noframes/contact.php">Nous contacter</a></li>
  <p>&nbsp;</p>
  <li><a href="?page=noframes/janou.php">La grange &agrave; Janou</a></li>
</ul>
 </div>
</body>
</html>



 
 
Pas possible. Utilise un padding-top peut résoudre ton problème si tu connais la taille de la police et du conteneur.

Reply

Marsh Posté le 10-04-2005 à 22:22:27    

dommage
merci quand même

Reply

Marsh Posté le 11-04-2005 à 01:51:27    

c'est une balise " [cpp][/cpp] " qu'il faut mettre pas " [quote] "


Message édité par blastman le 11-04-2005 à 01:52:07

---------------
http://www.blastmanu.info
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed