28172 sujets

CSS et mise en forme, CSS3

Placer correctement mes boutons

Bonjour à tous,

tout d'abord, voici mon HTML et mon CSS : 


<!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" xml:lang="fr" lang="fr">
	<head>
		<title>Admin</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Language" content="fr" />
        <link rel="stylesheet" href="admin.css" type="text/css" />
	</head>


<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tableau-top">
  <tr>
    <td >&nbsp;</td>
  </tr>
</table>
<table class="tableau-header" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top" class="tableau-header">
    
    
    <table width="100%" border="0" cellpadding="0" cellspacing="0" class="tableau-header" >
      <tr>
        <td id="logoce"><img src="images/bg-logo.png" alt="LogoCE" width="235" height="83" /></td>
        <td class="tableau-menu-header-actif"><img src="images/rolloon-bouton.png" alt="Rollon Bouton" width="133" height="61" /></td>
        <td class="tableau-menu-header"><img src="images/rollout-bouton.png" alt="bouton non actif" width="125" height="26" /></td>
        <td class="tableau-menu-header"><img src="images/rollout-bouton.png" alt="bouton non actif" width="125" height="26" /></td>
        <td class="tableau-menu-header"><img src="images/rollout-bouton.png" alt="bouton non actif" width="125" height="26"  /></td>
      </tr>
    </table></td>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tableau-body">
  <tr>
    <td id="menu-gauche"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table></td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>




body {
background-color:#d8d8d8;
margin:0em 0em 0em 0em;
}
.tableau-top {
background-color:#FFFFFF;
margin-left: auto ;
margin-right: auto;
width:95% ; height:1%;
}
.tableau-header {
background-image: url("images/bg_header.gif");
width:100% ; height:113px ;
text-align:left;
}
#logoce {
width:325px ; height:100% ;
vertical-align:top;
text-align:center;
}
.tableau-menu-header {
height:100%;
width:10%;
text-align:left;
}
.tableau-menu-header-actif {
height:100%;
width:10%;
vertical-align:bottom;
text-align:left;
}
.tableau-body {
background-color:#FFFFFF;
margin-left: auto ;
margin-right: auto;
width:980px ; height:100%;
}
#menu-gauche {
width:20%;
}


Voici mon problème, j'essaie désespérément d'aligner les boutons "roll out" avec le bas du bouton "roll on". Je n'arrive pas vraiment à m'expliquer, des images vaudront mieux que mes demandes :

Ce que je souhaite :
[EDIT Laurie-Anne : Image trop grande] http://imagik.fr/uploads/176178

Le résultat que j'ai actuellement :
[EDIT Laurie-Anne : Image trop grande] http://imagik.fr/uploads/176181

J'ai bien regardé les différentes astuces CSS etc. mais je ne comprends pas tout...

Pourriez-vous m'aider s'il vous plait ?

Merci d'avance et bonne journée Smiley smile
Modifié par Laurie-Anne (11 Dec 2009 - 11:32)
Sujet clos
Aller à