Css et boutons image avec texte intégré dans le gif

Question

matissed

24 Feb 2010 à 10:08

Bonjour,

avant toute chose, je vous remercie de votre aide et de votre patience car je ne suis pas du tout '"du métier".

je souhaite entreprendre la rénovation d'un site qui au départ était un ensemble de pages htm issues de microsof office...

Et je sais qu'il y a du boulot!

utiliser quelques css pour simplifier ma mise en page et faire des menus horizontaux avec des boutons "image".

Avant de dessiner ces boutons, j'ai fait quelques essais de positionnement et ça ne marche pas bien.

le texte de mes boutons est intégré à mon image. ( choix des polices )
le css me permet il de redimensionner mes images ou dois les faire exactement à la dimension d'affichage?

Comme il n'y a pas de texte pour mes boutons, j'ai bien trouvé la solution d'y mettre des espaces, mais dans ce cas une ligne s'affiche en blanc...

je ne voudrais pas être obligé de passer par une table...

Voici le début de mon code...



<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" 
xmlns="http://www.w3.org/TR/REC-html40">

 

<head>

<meta name="description" content="Alaid association d'aide humanitaire au burkina faso"/>
<meta name="keywords" content="alaid,vitry,burkina,association,ecole,ong,aide,aubineau,à l'aide,a l'aide, brocante, tennis, concert "/>
<META name="author" content="delaplace michel"/>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="fr">
<title>alaid association aide developpement durable burkina</title>
<link href="stylen.css" rel="stylesheet" type="text/css">


<base target="_blank">

</head>
<body>

<table border="0" cellpadding="0" cellspacing="12" style="border-collapse: collapse" bordercolor="#111111" width="97%" id="AutoNumber1" height="124">
   <tr>
     <td width="30%" height="90">   
     &nbsp;&nbsp; <a href="hymneburkina.mid">  
     <img border="0" src="images/img2.gif" width="80" height="50" align="absbottom" alt="drapeau et hymne du Burkina"></a>     </a>
     </td>
     <td width="22%" height="90"><b><a href="sarma.htm" target="_blank" class="bouton1">

     </td>
     
     <td width="22%" height="90"><a href="pabre.htm" target="_blank" class="bouton2">

     </td> 
     
 
   </tr>
</table>

<table border="0" cellpadding="0" cellspacing="12" style="border-collapse: collapse" bordercolor="#111111" width="95%" id="AutoNumber1" height="42">
<tr>
<td width="19%" height="42">   
<a href="statuts.htm" target="_blank" class="bouton5" >
<span style="font-size: 30px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></a>
<td width="19%" height="42">   
<a href="statuts.htm" target="_blank" class="bouton5" >
<td width="19%" height="42">   
<a href="statuts.htm" target="_blank" class="bouton5" >
<td width="19%" height="42">   
<a href="statuts.htm" target="_blank" class="bouton5" >
<td width="19%" height="42">   
<a href="statuts.htm" target="_blank" class="bouton5" >
</td>
</table>

<a onmouseover="bouton.src = 'boutons/bstats2.gif';" onmouseout="bouton.src = 'boutons/bstats1.gif';" title="Les statuts de l'association" href="statuts.htm">
<img src="boutons/bstats1.gif" border=0 width="180" height="40" name=bouton></a>

************************************************************

et celui de mon CSS :



html, body {
background-image:
url('images/fondnoir.jpg')
 
}

#menu {
width:100px;
background-color:#ffffff;
}

#menubas {

margin-left:0;
}

#contenu {
width:740px;
margin-left:20px;
font-size : 125%; 
font-family : Verdana, comic, Arial, Helvetica, Geneva, sans-serif; 
color : black; 
background-image:
url('images/afrique2.gif');

}

p {
font-size : 100%; 
font-family : Verdana, comic, Arial, Helvetica, Geneva, sans-serif; 
color : black; 
margin-left:0;
}

ul, li, td {
font-size : 100%; 
font-family :  Verdana, Arial, Helvetica, Geneva, sans-serif; 
color : blue; 
margin-left:0; 
}

h1 {
font-size : 200%; 
font-family :  Verdana, Arial, Helvetica, Geneva, sans-serif;
color : navy; 
text-align: center;
}

h2 {
font-size : 150%; 
font-family :  Verdana, Arial, Helvetica, Geneva, sans-serif; 
color : red; 
padding-left:15px;
}
h3 {
font-size : 100%; 
font-family :  Verdana, Arial, Helvetica, Geneva, sans-serif;  
padding-left:15px;
}


a:link {color: white; text-decoration:underline;}
a:visited {color: black; text-decoration:underline;}
a:hover {color:red; text-decoration:none;}

.haut {
text-align:right;

}


a.bouton1:link{
width:180px;
height:50px;
text-decoration:none;
text-align:center;
font-size:100px;
font-weight:bold;
background-image:url('boutons/sarma1.gif');
background-repeat:no-repeat;
padding:0px
}

a.bouton1:visited{
width:180px;
height:50px;
text-decoration:none;
text-align:center;
font-size:100px;
font-weight:bold;
background-image:url('boutons/sarma2.gif');
background-repeat:no-repeat;
padding:0px

}

a.bouton1:hover{

width:180px;
height:50px;
text-decoration:none;
text-align:center;
font-size:100px;
font-weight:bold;
background-image:url('boutons/sarma3.gif');
background-repeat:no-repeat;
padding:0px

}
.bouton1{text-align:center;padding:5px;}

a.bouton2:link{
width:180px;
height:50px;
text-decoration:none;
text-align:center;
font-size:100px;
font-weight:bold;
background-image:url('boutons/pabre1.gif');
background-repeat:no-repeat;
padding:0px
}

a.bouton2:visited{
width:180px;
height:50px;
text-decoration:none;
text-align:center;
font-size:100px;
font-weight:bold;
background-image:url('boutons/pabre2.gif');
background-repeat:no-repeat;
padding:0px
}

a.bouton2:hover{

width:180px;
height:50px;
text-decoration:none;
text-align:center;
font-size:100px;
font-weight:bold;
background-image:url('boutons/pabre3.gif');
background-repeat:no-repeat;
padding:0px
}
.bouton2{text-align:center;padding:5px;}

a.bouton5:link{

display:block
width:180px;
height:40px;
background-image:url('boutons/bstatsb1.gif');
background-repeat:no-repeat;
padding:0px

}

a.bouton5:visited{

display:block
width:180px;
height:40px;
background-image:url('boutons/bstatsb3.gif');
background-repeat:no-repeat;
padding:0px

}
a.bouton5:hover{

display block
width:180px;
height:40px;
background-image:url('boutons/bstatsb2.gif');
background-repeat:no-repeat;
padding:0px

}

.bouton5{text-align:center;padding:5px;}

url du site http://pagesperso-orange.fr/alaid.vitry/

url de la page http://pagesperso-orange.fr/alaid.vitry/accueilnouv.htm

pouvez vous m'aider?

matissed
Modifié par matissed (26 Feb 2010 - 10:25)

Mikachu

24 Feb 2010 à 10:10

Salut et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

Bonne continuation Smiley smile

matissed

26 Feb 2010 à 10:26

donc acte, je n'avais pas vu...
bonne journée

Sujet clos

CSS et mise en forme, CSS3

Css et boutons image avec texte intégré dans le gif