Bonsoir !
Je suis en train de refaire mon site proprement, et notamment en responsive, et je rencontre quelques problèmes :
voici la page du site qui sert de test : http://www.allo-service-client.com/blog.html
- je n'ai pas fait d'effet de style, et certains paragraphes apparaissent en gras sans raison apparentes, une idée ?
Quand je me connecte via mon téléphone, je souhaite enlever la div de droite ( la verte ), seulement elle n’apparaît pas mais me laisse un espace ' infranchissable ' à sa place ( j'ai utilisé le display : none; )
Le menu est moche et la bannière aussi mais en cours de changement ( bootstrap )
C'est à peu près tout pour l'instant !
voici la page en html et css :
Modifié par Marxkas (06 Jun 2016 - 17:25)
Je suis en train de refaire mon site proprement, et notamment en responsive, et je rencontre quelques problèmes :
voici la page du site qui sert de test : http://www.allo-service-client.com/blog.html
- je n'ai pas fait d'effet de style, et certains paragraphes apparaissent en gras sans raison apparentes, une idée ?
Quand je me connecte via mon téléphone, je souhaite enlever la div de droite ( la verte ), seulement elle n’apparaît pas mais me laisse un espace ' infranchissable ' à sa place ( j'ai utilisé le display : none; )
Le menu est moche et la bannière aussi mais en cours de changement ( bootstrap )
C'est à peu près tout pour l'instant !
voici la page en html et css :
<!DOCTYPE html>
<html lang="Fr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="map.css">
<!-- Page principale -->
<title>Les dernières nouvelles du service client dans le monde </title>
<meta name="description" content="Dans le blog de Allo Service Client vous trouverez les nouvelles du service client dans le
monde, ainsi que les meilleurs services et leurs fonctionnement" />
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-73426038-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body style="background-color:gainsboro">
<div id="containerblog">
<h1><img src="service-client.png" alt= contact allo service client style="width:970px;height:160px;border:0"></h1>
<br><br><div id="menu"><ul id="barre">
<li><a href="http://www.allo-service-client.com/">Accueil</a></li>
<li><a href="http://www.allo-service-client.com/blog.html">Blog</a></li>
<li><a href="http://www.allo-service-client.com/ajouter-service.html">Ajouter un service ?</a></li>
<li><a href="http://www.allo-service-client.com/liste-contact.html">Recherchez un service</a></li>
<li><a href="http://www.allo-service-client.com/contact.html">Contact</a></li>
</ul></div>
<div id="corpsblog">
<table>
<tr>
<td>
<img src="eutelsat.jpg" alt="Devanture d'eutelsat, contact et numéro du service de satellite français"/>
</td>
<td width="20">
</td>
<td valign="top">
<h4><span style="font-size:25px" >13/05 Crise chez Eutelsat, qui chute en bourse</span></h4>
<span style="font-size:19px"><br>Dure épreuve après le rachat par l'ancien DG de Canal+, qui connait une chute de 30% au 13 Mai à la bourse, " Les prévisions de la veille, passants de 4
à 6% de hausse à une baisse de 1 à 3% " suite à une affirmation
sur la baisse de la demande dans le secteur, et donc une baisse des prix. Le groupe devrat éponger une baisse du renouvellement des contrats, comme avec les USA qui ne conservent que 65% de celui-ci, en grande partie
à cause de la concurrence Sud Américaine.
<a href="http://www.lemonde.fr/economie/article/2016/05/13/eutelsat-s-effondre-a-la-bourse-de-paris_4919417_3234.html">Lien vers l'article source</a></</span>
</td>
</tr>
</table>
<br>
<table>
<tr>
<td> </td>
<td width="20"><img src="sav2015.jpg" alt="emblème de la 9ème édition du service client de l'année" />
</td>
<td valign="top">
<br><h4><span style="font-size:20px" ><h4> 08/03 - Election des meilleurs Services client de l'année 2015 </span></h4>
<span style="font-size:18px"><br>Le 15 Octobre 2015 s'est déroulé la 9ème édition de l'élection du service client de l'année. C'est avec près de 225 tests déroulés sous client mystère,
et une note finale sur 20, organisés par Viséo Conseil et réalisés par Inference Operations que les services clients ont été élus en 33 catégories,
donnant par exemple à Speedy le titre de meilleur service client en réparation automobile, Nespresso au sommet du secteur vente spécialisée, ou Mutavie en meilleur service d'assurance.
Parmis ces 33 lauréats, un tier a été renouvelé depuis l'année dernière, ce qui prouve une grande évolution à l'échelle nationale sur le besoin de satisfaire au mieu la clientèle,
et en garantir l'expérience par le biais du contact avec le client. <a href="http://www.lsa-conso.fr/et-les-meilleurs-services-client-de-l-annee-2016-sont-classement,222552">Lien vers l'article source</a>
</td>
</tr>
</table>
<br>
<table>
<tr>
<td>
<img src="mcdo.jpg" alt="image enseigne mcdonald's"/>
</td>
<td width="20">
</td>
<td valign="top">
<h4><span style="font-size:20px" ><h4><br> 08/03 - Election des meilleurs Services client de l'année 2015 </span></h4>
<span style="font-size:18px"><br> McDonald's, premier dans le secteur du fast food mondial, revoit ses techniques commerciales pour 2015, en simplifiant les menus,
en s'aléliorant sur les services du drive, et crée une application pour faciliter les localisations des restaurants, Pour mieux renseigner les clients sur les apports de leurs produits, et proposer
des offres fidélités pour les utilisateurs.
</td>
</tr>
</table>
<br>
<table>
<tr>
<td>
<img src="etihad.jpg" alt="image service client etihad" />
</td>
<td width="20">
</td>
<td valign="top">
<h4><span style="font-size:20px" ><h4><br> 15/05 - Le service client d'Ethiad Airways récompensé pour la 4ème fois </span></h4>
<span style="font-size:18px"><br> Pendant les Middle East Call Center Awards à Dubaï, le 12 Mai 2015, la compagnie Etihad Airways,
compagnie aérienne nationale des Emirats Arabes Unis a obtenu le prix du " meilleur centre d'appels " dans sont industrie, Et le prix du " Meilleur stratégie de développement de carrière et de formation ".
Avec un centre d'appel à Abu dhabi et un à Manchester,
Etihad Airways à répondu, grâce à ses 600 agents, à 2,6 millions d'appels en 15 langues différentes à travers 39 marchés dans le monde en 2014.</p>
<a href="http://www.relationclientmag.fr/Thematique/centre-de-contact-1015/Breves/Ethiad-Airways-reconnu-meilleur-centre-d-appel-au-Moyen-Orient-255676.htm">Lien vers l'article source</a>
</td>
</tr>
</table>
<hr>
<br><a href="http://www.allo-service-client.com/cgu.html">CGU</a>
</div>
<div id="droiteblog">
<h4>Rejoignez nous sur :</h4>
<br><a href="default.asp"><img src="facebook.png" alt="facebook" style="width:54px;height:52px;border:0"></a>
<a href="default.asp"><img src="twitter.png" alt="twitter" style="width:54px;height:52px;border:0"></a>
<a href="default.asp"><img src="googleplus.png" alt="googleplus" style="width:54px;height:52px;border:0"></a>
<h4>Services les plus vus
<br>
<br><a href="http://www.allo-service-client.com/contact-veolia.html">Service Client Veolia</a>
<br><a href="http://www.allo-service-client.com/contact-airfrance.html">Service Client Air France</a>
<br><a href="http://www.allo-service-client.com/contact-engie.html">Service Client Engie</a> </h4>
</div>
</div>
<!-- close #container -->
</body>
</html>
<meta charset="UTF-8"><style type=text/css>
@media (max-width :480px;)
{
#container {margin-left :0px; margin :0px;}
#corps {margin-left :0px;}
#droite {}
#containerblog {margin-left :0px; margin :0px; width :100%; height:2100px; }
div#corpsblog {width:100%; height:2100px; margin-left: 0px; text-align:center; margin-top:20px; margin-bottom:25px; text-align: justify;}
div#droiteblog { display :none;}
#entete {margin-left :0px;}
#menu {margin-left: 0px}
}
@media (min-width: 480px) and (max-width: 780px)
{
#container {margin-left :0px; margin :0px;}
#corps {margin-left :0px;}
#droite {}
#containerblog {margin-left :0px; margin :0px; width :100%; height: 2100px; }
div#corpsblog { width:100%; height:2100px; margin-left: 0px; text-align:center; margin-top:20px;margin-bottom:25px; font-size:120%;
text-align: justify;}
div#droiteblog { display :none;}
#entete {margin-left :0px;}
#menu {margin-left: 0px}
}
@media (min-width:781px) and (max-width: 980px)
{
#container {margin-left :0px; margin :0px;}
#corps {margin-left :0px;}
#droite {}
#containerblog {margin-left :0px; margin :0px; width :100%; height: 2100px; }
div#corpsblog { width:100%; height:2100px; margin-left: 0px; text-align:center; margin-top:20px;margin-bottom:25px; font-size:120%;
text-align: justify;}
div#droiteblog { display :none;}
#entete {margin-left :0px;}
#menu {margin-left: 0px}
}
ul { text-align:center; }
h1 { font-family:verdana; font-size:140%; margin:0px; text-align:center;}
h2 { margin: 0px; font-size:130%}
h3 { margin : 0px; font-size: 130%; text-align:center;}
p { font-size:105%; }
h4 { font-size: 115% }
#container{width:80%; height: 100%; margin:5px; float:left; margin-left:150px;
text-align:center; background-color:white; color: 398C6B}
#containerblog{width:1360px; height: 1900px; margin-left: auto; margin-right:auto; position:relative; text-align:center; background-color:white; color: 398C6B}
div#entete { width:800px; height:100px; margin-left: 130px; background-color:#CCCCCC; text-align:center;}
#menu{width:850px; display:block; height:30px;margin-left:50px;}
ul#barre {padding: 0;}
ul#barre li {display: inline;}
ul#barre li a {background-color: #6CBD9D;
font-size: 105%; color: white; padding: 15px 40px; text-decoration: none; border-radius: 4px 4px 0 0;}
ul#barre li a:hover {background-color:#070707;}
div#corps {float:left; width:68%; height:1100px; margin-left: 30px; background-color:white; text-align:left;margin-top:20px;margin-bottom:25px;}
div#corpsblog {float:left; width:1000px; height:1600px; margin-left: 30px; background-color:white; text-align:left;margin-top:20px;margin-bottom:25px; text-align: justify;}
div#droite { float:left; width:26%; height:900px; background-color:#369669; text-align:left; color:black;margin-top:20px;margin-bottom:25px;}
div#droiteblog { float:left; width:300px; height:1600px; background-color:#369669; text-align:center; color:black;margin-top:20px;margin-bottom:25px;}
div#presentation {font-size:120%;}
div#pagenum {text-align: center;}
/*
div.spacer, permet de faire deux colonne dans #container
*/
div.spacer{clear:both; height:10px; display:block;}
#footer{width:auto; display:block; height:24px;}
</style>Modifié par Marxkas (06 Jun 2016 - 17:25)
