Aide pour finaliser newsletter HTML

par Solid6Snake Dim 18 Oct 2015 - 18:19

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.entraide-youtubers.com/

Description du problème

Bonjour à tous,

Je viens vers vous une nouvelle fois pour avoir un peu d'aide Smile

Cette fois-ci c'est pour m'aider afin de finaliser mon code newsletter en format HTML parce que je suis un peu perdu dans mon code..

Voilà ma newsletter:

Code:: <link href="http://fonts.googleapis.com/css?family=Berkshire+Swash|Playball&subset=latin,latin-ext" rel="stylesheet" type="text/css" /><style>.fond {margin-left: auto; margin-right : auto; width: 550px; background-color: #fcfafb; background-image: url(http://i19.servimg.com/u/f19/17/84/80/30/610.jpg); background-repeat: repeat; border-top:10px solid #858585; border-bottom: 10px solid #858585; border-left: 1px solid #858585; border-right: 1px solid #858585; border-radius: 0px 0px 10px 10px; box-shadow: 0px 0px 0px #858585;}.head {width: 550px; border-bottom: 10px solid #858585}.titre{transition: 2s ease; display: inline; color: #FFFFFF; font-family: 'Berkshire Swash', cursive; font-size: 35px; position: relative; top: -15px}.titre:hover{color: #FFA84A} .soustitre{font-family: 'Playball', cursive; color: #FFA84A; margin-left: auto; margin-right: auto; width: 550px; text-align: center; font-size: 25px; margin-bottom: -5px; transition: 2s ease;} .soustitre:hover{color: #F6ECDB} .bloc{background-color: #fcfafb; border-left: 2px solid #3B1F2D; border-right: 2px solid #3B1F2D; margin-right: auto; margin-left: auto; width: 500px; padding: 5px; text-align: justify; color: #A19D99; font-family: times new roman; font-size: 12px} .mef1,.mef2,.mef3,.mef4,.mef5,.mef6,.mef7 {color: #333333;text-shadow: 0px 0px 2px #C8C6C4; transition: 1s;}.mef1:hover {color: #333333;text-shadow: 0px 0px 2px #333333; }.mef2:hover {color: #FFFFFF;text-shadow: 0px 0px 2px #FFFFFF; }.mef3:hover {color: #FFFFFF;text-shadow: 0px 0px 2px #FFFFFF; }.mef4:hover {color: #FFFFFF;text-shadow: 0px 0px 2px #FFFFFF; }.mef5:hover {color: #FFFFFF;text-shadow: 0px 0px 2px #35A0B7; }.mef6:hover {color: #FFFFFF;text-shadow: 0px 0px 2px #FFFFFF; }.mef7:hover {color: #FFFFFF;text-shadow: 0px 0px 2px #C626BA; }.icone{margin: auto; display: inline-block; border-radius: 50px 50px 50px 50px;border-top: 2px solid #3B1F2D; border-bottom: 2px solid #3B1F2D; transition: 2s; }.icone:hover{transform: rotate(-90deg); -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); }.bulle span{position: absolute; top: auto; left: auto; width: 300px; height: auto; display: none; background-color: #FFA84A; border-left: 2px solid #3B1F2D; border-right: 2px solid #3B1F2D; padding: 5px; text-align: justify; color: #A19D99; font-family: times new roman; font-size: 12px; z-index: 999; }.bulle:hover span{display: block}.titre2{font-family: 'Playball', cursive; color: #FFFFFF; margin-left: auto; margin-right: auto; width: 240px; text-align: center; font-size: 25px; margin-bottom: -5px; transition: 2s ease;} .titre2:hover{color: #858585} .bloc2 {background-color: #858585; border-left: 2px solid #3B1F2D; border-right: 2px solid #3B1F2D; margin-right: auto; margin-left: auto; width: 240px; height: 250px; overflow: auto; padding: 5px; text-align: justify; color: #A19D99; font-family: times new roman; font-size: 12px}#deroulant div {background-color: #FFFFFF; padding: 10px; text-align: justify; color: #333333; font-family: times new roman; font-size: 12px; width: 180px; height: 300px ; border-left: 2px solid #FFFFFF; border-right: 2px solid #FFFFFF; position: relative; overflow: hidden; } #deroulant div img {left: 0px; top: 0px; position: absolute; transition: transform 0.5s ease-in-out; -moz-transition: -moz-transform 0.5s ease-in-out; -webkit-transition: -webkit-transform 0.5s ease-in-out; -o-transition: -o-transform 0.5s ease-in-out;} #deroulant div:hover img { transform: translateX(200px); -moz-transform: translateX(200px); -o-transform: translateX(200px); -webkit-transform: translateX(200px);} #deroulant a {text-decoration : none!important; color: #FFFFFF; transition : 1s} #deroulant {text-decoration : none!important; color: #FFFFFF; text-shadow: 0px 0px 2px #FFFFFF; transition : 1s}</style> <div class="fond"> <img class="head" src="http://wosape.free.fr/saigneur/v5.png" alt="550 de large" /> <center> <span class="titre">Newsletter entraide-youtubers</span> </center> <div style="margin-left: auto; margin-right: auto; width: 300px"> <table> <tbody> <tr> <td> <div class="bulle"> <img class="icone" src="http://i18.servimg.com/u/f18/17/84/80/30/google10.png" alt="100x100" /><span><a href="https://plus.google.com/u/0/communities/108204236234030842609" target="_blank"><strong>La communauté Google + Entraide-Youtubers</strong></a></span> </div> </td> <td> <div class="bulle"> <img class="icone" src="http://i18.servimg.com/u/f18/17/84/80/30/f10.png" alt="100x100" /><span><a href="https://www.facebook.com/forumentraideyoutube" target="_blank"><strong>Rejoins le compte Facebook du forum</strong></a></span> </div> </td> <td> <div class="bulle"> <img class="icone" src="http://i18.servimg.com/u/f18/17/84/80/30/t10.png" alt="100x100" /><span><a href="https://twitter.com/EntraideYT" target="_blank"><strong>La page Twitter Entraide Youtube</strong></a></span> </div> </td> </tr> </tbody> </table> </div> <div style="width: 500px"> <div style="width: 300px; float: left"> <div class="soustitre" style="width: 300px"> La sélection du mois </div> <div class="bloc" style="width: 250px; height: 297px; overflow: auto;"> <span class="mef1">Bonjour à tous et à toutes, ce mois-ci je vous propose un coup de projecteur sur la chaîne PM 3D Animation ! DescriptionPM 3D Animation est spécialisée dans la conception, la création de projets en 3D en tout genre en utilisant les logiciels SketchUp pour la modélisation principale du projet (structures, décors...), Lumion pour les rendus avec l'application de lumières, textures, personnages, animation et Sony Vegas pour faire le montage pour rendre le projet plus vivant avec de la musique et des ambiances sonores. Les projets sont purement fictifs et sont conçus à partir de différents thèmes comme : l’architecture, la vie actuelle, la science fiction, le cinéma ou le jeu vidéo. Ils s'articulent aux travers d'un scénario de fond en y intégrant parfois un concept architectural, mettant en exergue, pour certains projets, des scènes particulières. Pour plus d'informations sur les projets : www.pm3d-animation.fr </span> </div> </div> <div style="width: 200px; float: right"> <div id="deroulant"> <div> <p style="font-family: times new roman; font-size: 12px; text-shadow: none;"> Les dernières vidéos de la chaîne <strong>PM 3D Animation</strong>: </p><img src="http://img11.hostingpics.net/pics/332393Sanstitre1.png" /> </div> </div> </div> </div> <div style="clear:both"> </div><br /> <div class="soustitre"> Prendre un instantané! </div> <div class="bloc"> <span class="mef5">Mieux connaître Maxou, description, activité, profession, avenir ect ect...</span><br /><br /><br /> </div> <div class="head"> </div> <div class="soustitre" id="ancre1"> L'édito </div> <div class="bloc"> Texte sur l'activité et les sujets importants du forum </div><br /> <center> <center> <span class="titre">Nos meilleurs partenaires</span> </center> <div style="margin-left: auto; margin-right: auto; width: 300px"> <table> <tbody> <tr> <td> <div class="bulle"> <img class="icone" src="https://yt3.ggpht.com/-7qz5sN_X5es/AAAAAAAAAAI/AAAAAAAAAAA/UWOtZ1FSuHA/s100-c-k-no/photo.jpg" alt="100x100" /><span></span> <p class="mef1" style="display: inline;"> <a target="_blank" href="https://www.youtube.com/channel/UCEZqHbdfj7eJGRtBevzBa1A"><strong>Cristell</strong></a> </p> </div> </td> <td> <div class="bulle"> <img class="icone" src="https://yt3.ggpht.com/-FCV1F2WVJg8/AAAAAAAAAAI/AAAAAAAAAAA/SNIbWCn1hz4/s100-c-k-no/photo.jpg" alt="100x100" /><span></span> <p class="mef4" style="display: inline;"> <a href="https://www.youtube.com/channel/UCEZqHbdfj7eJGRtBevzBa1A" target="_blank"><strong>TF Movies</strong></a> </p> </div> </td> <td> <div class="bulle"> <img class="icone" src="https://yt3.ggpht.com/-RjlCsd8b6OQ/AAAAAAAAAAI/AAAAAAAAAAA/0ZOQaHKLEf4/s100-c-k-no/photo.jpg" alt="100x100" /><span></span> <p class="mef5" style="display: inline;"> <a href="https://www.youtube.com/channel/UCEZqHbdfj7eJGRtBevzBa1A" target="_blank"><strong>Guyoon</strong></a> </p> </div> </td> </tr> </tbody> </table> </div> <div style="margin-left: auto; margin-right: auto; width: 500px"> <div style="width: 240px; height: 300px; float: left"> <div class="titre2"> La chaîne communautaire </div> <div class="bloc2"> <span class="mef7">Description et News de la chaîne communautaire.....</span> </div> </div> <div style="width: 240px; height: 300px; float: right"> <div class="titre2"> ILS NOUS SOUTIENNENT ! </div> <div class="bloc2"> <span class="mef1">Parlez de gaminiac.fr partenaire du forum.....</span> </div> </div> <div style="clear: both"> </div> </div><br /> <center> <a href="http://www.entraide-youtubers.com/" style="color: #3B1F2D; font-size: 10px">entraide-yoitubers</a> </center> </center> </div>

J'ai besoin d'aide pour plusieurs choses en faite ne trouvant pas la bonne ligne sur le code..

- Mettre le cadre orange des réseaux sociaux de couleur blanc

- Retirer l'effet de flou dans le cadre "La sélection du mois"

- Mettre en noir la description "Prendre un instantané" lors du passage u curseur

- Retirer cette ligne orange qui apparaît sous les trois icônes des membres partenaires et en même temps retirer cet effet de flou en dessous!

- Les deux derniers blocs en bas de la newsletter avoir les descriptions en blanc pour les deux.

J'ai effectué énormément de changement de couleurs sur ce code de base mais le problème c'est que tout est dans le bloc du haut de code alors forcément c'est loin d'être facile pour modifier les couleurs sachant que rien n'est en face ou à la suite des balises Evil or Very Mad

Merci d'avance à celui ou celle qui viendra m'aider à comprendre un peu plus ce code.

par Scoubifitz Dim 18 Oct 2015 - 23:12

Bonjour,

En aérant un peu ?

Code:: <link href="http://fonts.googleapis.com/css?family=Berkshire+Swash|Playball&subset=latin,latin-ext" rel="stylesheet" type="text/css"/> <style> .fond { margin-left:auto; margin-right:auto; width:550px; background-color:#fcfafb; background-image:url(http://i19.servimg.com/u/f19/17/84/80/30/610.jpg); background-repeat:repeat; border-top:10px solid #858585; border-bottom:10px solid #858585; border-left:1px solid #858585; border-right:1px solid #858585; border-radius:0px 0px 10px 10px; box-shadow:0px 0px 0px #858585; } .head { width:550px; border-bottom:10px solid #858585 } .titre { transition:2s ease; display:inline; color:#FFFFFF; font-family:'Berkshire Swash',cursive; font-size:35px; position:relative; top:-15px } .titre:hover { color:#FFA84A } .soustitre { font-family:'Playball',cursive; color:#FFA84A; margin-left:auto; margin-right:auto; width:550px; text-align:center; font-size:25px; margin-bottom:-5px; transition:2s ease; } .soustitre:hover { color:#F6ECDB } .bloc { background-color:#fcfafb; border-left:2px solid #3B1F2D; border-right:2px solid #3B1F2D; margin-right:auto; margin-left:auto; width:500px; padding:5px; text-align:justify; color:#A19D99; font-family:times new roman; font-size:12px } .mef1,.mef2,.mef3,.mef4,.mef5,.mef6,.mef7 { color:#333333; text-shadow:0px 0px 2px #C8C6C4; transition:1s; } .mef2:hover { color:#FFFFFF; text-shadow:0px 0px 2px #FFFFFF; } .mef3:hover { color:#FFFFFF; text-shadow:0px 0px 2px #FFFFFF; } .mef4:hover { color:#FFFFFF; text-shadow:0px 0px 2px #FFFFFF; } .mef6:hover { color:#FFFFFF; text-shadow:0px 0px 2px #FFFFFF; } .mef7 { color:#FFFFFF; } .icone { margin:auto; display:inline-block; border-radius:50px 50px 50px 50px; border-top:2px solid #3B1F2D; border-bottom:2px solid #3B1F2D; transition:2s; } .icone:hover { transform:rotate(-90deg); -moz-transform:rotate(-90deg); -webkit-transform:rotate(-90deg); -o-transform:rotate(-90deg); } .bulle span { position:absolute; top:auto; left:auto; width:300px; height:auto; display:none; background-color:#fff; border-left:2px solid #3B1F2D; border-right:2px solid #3B1F2D; padding:5px; text-align:justify; color:#A19D99; font-family:times new roman; font-size:12px; z-index:999; } .bulle:hover span { display:block } .titre2 { font-family:'Playball',cursive; color:#FFFFFF; margin-left:auto; margin-right:auto; width:240px; text-align:center; font-size:25px; margin-bottom:-5px; transition:2s ease; } .titre2:hover { color:#858585 } .bloc2 { background-color:#858585; border-left:2px solid #3B1F2D; border-right:2px solid #3B1F2D; margin-right:auto; margin-left:auto; width:240px; height:250px; overflow:auto; padding:5px; text-align:justify; color:#A19D99; font-family:times new roman; font-size:12px } #deroulant div { background-color:#FFFFFF; padding:10px; text-align:justify; color:#333333; font-family:times new roman; font-size:12px; width:180px; height:300px; border-left:2px solid #FFFFFF; border-right:2px solid #FFFFFF; position:relative; overflow:hidden; } #deroulant div img { left:0px; top:0px; position:absolute; transition:transform 0.5s ease-in-out; -moz-transition:-moz-transform 0.5s ease-in-out; -webkit-transition:-webkit-transform 0.5s ease-in-out; -o-transition:-o-transform 0.5s ease-in-out; } #deroulant div:hover img { transform:translateX(200px); -moz-transform:translateX(200px); -o-transform:translateX(200px); -webkit-transform:translateX(200px); } #deroulant a { text-decoration:none!important; color:#FFFFFF; transition:1s } #deroulant { text-decoration:none!important; color:#FFFFFF; text-shadow:0px 0px 2px #FFFFFF; transition: 1s } </style> <div class="fond"> <img class="head" src="http://wosape.free.fr/saigneur/v5.png" alt="550 de large"/> <center> <span class="titre">Newsletter entraide-youtubers</span> </center> <div style="margin-left: auto; margin-right: auto; width: 300px"> <table> <tbody> <tr> <td> <div class="bulle"> <img class="icone" src="http://i18.servimg.com/u/f18/17/84/80/30/google10.png" alt="100x100"/><span><a href="https://plus.google.com/u/0/communities/108204236234030842609" target="_blank"><strong>La communauté Google + Entraide-Youtubers</strong></a></span> </div> </td> <td> <div class="bulle"> <img class="icone" src="http://i18.servimg.com/u/f18/17/84/80/30/f10.png" alt="100x100"/><span><a href="https://www.facebook.com/forumentraideyoutube" target="_blank"><strong>Rejoins le compte Facebook du forum</strong></a></span> </div> </td> <td> <div class="bulle"> <img class="icone" src="http://i18.servimg.com/u/f18/17/84/80/30/t10.png" alt="100x100"/><span><a href="https://twitter.com/EntraideYT" target="_blank"><strong>La page Twitter Entraide Youtube</strong></a></span> </div> </td> </tr> </tbody> </table> </div> <div style="width: 500px"> <div style="width: 300px; float: left"> <div class="soustitre" style="width: 300px"> La sélection du mois </div> <div class="bloc" style="width: 250px; height: 297px; overflow: auto;"> <span class="mef1">Bonjour à tous et à toutes, ce mois-ci je vous propose un coup de projecteur sur la chaîne PM 3D Animation ! DescriptionPM 3D Animation est spécialisée dans la conception, la création de projets en 3D en tout genre en utilisant les logiciels SketchUp pour la modélisation principale du projet (structures, décors...), Lumion pour les rendus avec l'application de lumières, textures, personnages, animation et Sony Vegas pour faire le montage pour rendre le projet plus vivant avec de la musique et des ambiances sonores. Les projets sont purement fictifs et sont conçus à partir de différents thèmes comme : l’architecture, la vie actuelle, la science fiction, le cinéma ou le jeu vidéo. Ils s'articulent aux travers d'un scénario de fond en y intégrant parfois un concept architectural, mettant en exergue, pour certains projets, des scènes particulières. Pour plus d'informations sur les projets : www.pm3d-animation.fr </span> </div> </div> <div style="width: 200px; float: right"> <div id="deroulant"> <div> <p style="font-family: times new roman; font-size: 12px; text-shadow: none;"> Les dernières vidéos de la chaîne <strong>PM 3D Animation</strong>: </p> <img src="http://img11.hostingpics.net/pics/332393Sanstitre1.png"/> </div> </div> </div> </div> <div style="clear:both"> </div> <br/> <div class="soustitre"> Prendre un instantané! </div> <div class="bloc"> <span class="mef5">Mieux connaître Maxou, description, activité, profession, avenir ect ect...</span><br/><br/><br/> </div> <div class="head"> </div> <div class="soustitre" id="ancre1"> L'édito </div> <div class="bloc"> Texte sur l'activité et les sujets importants du forum </div> <br/> <center> <center> <span class="titre">Nos meilleurs partenaires</span> </center> <div style="margin-left: auto; margin-right: auto; width: 300px"> <table> <tbody> <tr> <td> <div class="bulle"> <img class="icone" src="https://yt3.ggpht.com/-7qz5sN_X5es/AAAAAAAAAAI/AAAAAAAAAAA/UWOtZ1FSuHA/s100-c-k-no/photo.jpg" alt="100x100"/> <p class="mef5" style="display: inline;"> <a target="_blank" href="https://www.youtube.com/channel/UCEZqHbdfj7eJGRtBevzBa1A"><strong>Cristell</strong></a> </p> </div> </td> <td> <div class="bulle"> <img class="icone" src="https://yt3.ggpht.com/-FCV1F2WVJg8/AAAAAAAAAAI/AAAAAAAAAAA/SNIbWCn1hz4/s100-c-k-no/photo.jpg" alt="100x100"/> <p class="mef5" style="display: inline;"> <a href="https://www.youtube.com/channel/UCEZqHbdfj7eJGRtBevzBa1A" target="_blank"><strong>TF Movies</strong></a> </p> </div> </td> <td> <div class="bulle"> <img class="icone" src="https://yt3.ggpht.com/-RjlCsd8b6OQ/AAAAAAAAAAI/AAAAAAAAAAA/0ZOQaHKLEf4/s100-c-k-no/photo.jpg" alt="100x100"/> <p class="mef5" style="display: inline;"> <a href="https://www.youtube.com/channel/UCEZqHbdfj7eJGRtBevzBa1A" target="_blank"><strong>Guyoon</strong></a> </p> </div> </td> </tr> </tbody> </table> </div> <div style="margin-left: auto; margin-right: auto; width: 500px"> <div style="width: 240px; height: 300px; float: left"> <div class="titre2"> La chaîne communautaire </div> <div class="bloc2"> <span class="mef7">Description et News de la chaîne communautaire.....</span> </div> </div> <div style="width: 240px; height: 300px; float: right"> <div class="titre2"> ILS NOUS SOUTIENNENT ! </div> <div class="bloc2"> <span class="mef7">Parlez de gaminiac.fr partenaire du forum.....</span> </div> </div> <div style="clear: both"> </div> </div> <br/> <center> <a href="http://www.entraide-youtubers.com/" style="color: #3B1F2D; font-size: 10px">entraide-yoitubers</a> </center> </center> </div>