Menu

Difficulté pour regrouper 2 codes css [Résolu]

-
Bonjour,

Je souhaite regrouper 2 code css. Néanmoins je rencontre des difficultés car il y a des class ayant le même on et lorsque je modifie le code, ma 2eme image ne s'affiche pas... Et regrouper ces 2 codes me permettrait d avoir un code plus "propre".
Merci pour vos conseils et votre aide

novis

h2{
  color:#000;
  font-family: 'raleway', time, sans-serif;
  font-size:400;
    
}
   
  h2 span {
   font-family: 'raleway', time, sans-serif;
  font-weight: inherit;
   font-weight: bold;
  font-weight: 500;
   color:#000;
}
  
p {
  margin-right: 50px;
  margin-left:50px;
  font-weight: normal;
    font-family: 'Josefin Sans', sans-serif;
font-size:400;
   
}
 
#cv {
 
  font-weight: normal;
 text-align:center;
 color:#000;
 background-image:url(http://image1.jpg);
 background-position:center center;
 background-repeat:none;
 background-size:cover;
 -o-background-size:cover;
 background-attachment:fixed;
 box-shadow:inset 0 0 10px 0 #000
}
#cv .container {
 padding:100px 0;
 background-image:linear-gradient(to right bottom,rgba(28,178,189,0.71) 0%,rgba(173,56,228,0.7) 100%)
     
}
 
@media only screen and (max-width:500px) {
 .cv-content {
  -ms-flex-wrap:wrap;
  flex-wrap:wrap
 }
}

#imagefixe1 {
  font-family: raleway, time, sans-serif;
  font-weight: normal;
 text-align:center;
 color:#000;
 background-image:url(http://image2.jpg);
 background-position:center center;
 background-repeat:no-repeat;
 background-size:800px;
 -o-background-size:800px;
 background-attachment:fixed;
}
#cv .container {
 padding:60px 0;
}
 
@media only screen and (max-width:400px) {
 .cv-content {
  -ms-flex-wrap:wrap;
  flex-wrap:wrap
 }
}


<div id="cv">
<div class="container">
<div>
<div class="table-100" title="">
<h2><span>- titre1 </span>suite <span>-</span></h2>
<p1><p1>Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam
licentia crudelitati indulta per suspicionum nebulas aestimati quidam
noxii damnabantur. quorum pars necati, alii puniti bonorum multatione
actique laribus suis extorres nullo sibi relicto praeter querelas et
lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad
voluntatem converso cruentam, claudebantur opulentae domus et clarae.</p1></div>
</div>
</div>
</div>
 
    <div class="imagefixe1" id="imagefixe1" title="">
            <div class="container" title=""><br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
             
            <div class="wr_txtsize4" style="text-align: left; margin-left: 120px;"><span class="cl-effect-14"><t href="#"><font size="2"><a href="http://adresse de page.html" rel="nofollow" target="_blank"><strong>JE LE VEUX</strong></a></font></t></span></div>
            </div>
            </div>


Configuration: Windows / Firefox 64.0


Merci beaucoup, je rame énormément...

Novis
Afficher la suite 

Votre réponse

7 réponses

Messages postés
24504
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 février 2019
1840
0
Merci
Bonjour,

il y a des class ayant le même NOM


Donc soit tu modifie l'un des CSS (et le html qui va avec) en renommant tes class
Soit... ben.. seul le dernier css chargé sera pris en compte.


Commenter la réponse de jordane45
0
Merci
Oui je sais, c'est ce que j'explique dans mon message précédant. En modifiant les noms des class, je fais certainement une erreur car ma 2eme image ne s affiche pas. Pourtant j ai fait le test plusieurs fois mais rien n y fait... je dois faire une erreur et je ne vois pas laquelle...

Merci de votre aide
Novis
jordane45
Messages postés
24504
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 février 2019
1840 -
As tu vidé le cache de ton navigateur ?
et/ou testé en navigation privée ?

99% des questions de ce genre se résolvent par ça......
Commenter la réponse de novis
0
Merci
A chaque fois que je modifie ma feuille de style css, je modifie le titre... par ex. imagefixe v1
puis imagefixe v2 (quand je modifie quelque chose au code)
Ça m'évite les problème de cache. Donc de ce coté la pas de problème.

Je pense que je me plante carrément dans le code... Mais je ne comprends pas où...
jordane45
Messages postés
24504
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 février 2019
1840 -
Quand tu examines le code dans ton navigateur... vois tu l'url de ta seconde image ?
Es tu sûr du chemin et du nom de l'image ?
Si tu ne mets que ton "second" code.. l'image apparait ?

Comment as tu écrit le code css exactement ?
Commenter la réponse de novis
0
Merci
oui, si je mets les deux codes separement, les images s affichent impec.
c est vraiment quand je reunis ces 2 codes.
oui les deux url se voient
jordane45
Messages postés
24504
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 février 2019
1840 -
peux tu nous poster le code css (celui où tu as tout regroupé...) ?
Colles nous également le code source généré (celui que tu peux voir dans ton navigateur lorsque tu fais un CTRL + U )
Commenter la réponse de novis
0
Merci
Ok. Merci pour votre aide

Code css:
code1
h2{
  color:#000;
  font-family: 'raleway', time, sans-serif;
  font-size:400;
    
}
   
  h2 span {
   font-family: 'raleway', time, sans-serif;
  font-weight: inherit;
   font-weight: bold;
  font-weight: 500;
   color:#000;
}
  
p {
  margin-right: 50px;
  margin-left:50px;
  font-weight: normal;
    font-family: 'Josefin Sans', sans-serif;
font-size:400;
   
}
 
#partistique {
 
  font-weight: normal;
 text-align:center;
 color:#000;
 background-image:url(http://image1.jpg);
 background-position:center center;
 background-repeat:none;
 background-size:cover;
 -o-background-size:cover;
 background-attachment:fixed;
 box-shadow:inset 0 0 10px 0 #000
}
#partistique .container {
 padding:100px 0;
 background-image:linear-gradient(to right bottom,rgba(28,178,189,0.71) 0%,rgba(173,56,228,0.7) 100%)
     
}
 
@media only screen and (max-width:500px) {
 .partistique-content {
  -ms-flex-wrap:wrap;
  flex-wrap:wrap
 }
}
code2
#imagefixe1 {
  font-family: raleway, time, sans-serif;
  font-weight: normal;
 text-align:center;
 color:#000;
 background-image:url(http://image2.jpg);
 background-position:center center;
 background-repeat:no-repeat;
 background-size:800px;
 -o-background-size:800px;
 background-attachment:fixed;
}
#cv .container {
 padding:60px 0;
}
 
@media only screen and (max-width:400px) {
 .cv-content {
  -ms-flex-wrap:wrap;
  flex-wrap:wrap
 }
}


Code html
<div id="partistique">
<div class="container">
<div>
<div class="table-100" title="">
<h2><span>- Parcours </span>ARTISTIQUE <span>-</span></h2>

<div class="partistique">
<p>Textedepresentation.......</p>
</div>
</div>
</div>
</div>
</div>

<hr />
<table align="center" border="0" cellpadding="5" cellspacing="1" class="wr_100prct wr_tabletransline" height="113" style="width: 100%;" summary="" width="1000">
 <tbody>
  <tr>
   <td style="width: 620px;">
   <div class="wr_txtsize2" style="text-align: right;"><br />
   <br />
   Un <font size="4"><font face="Waiting for the Sunrise"><strong>Coup de Coeur</strong></font></font> <br />
    </div>

   <div class="wr_txtsize3" style="text-align: right;">N'hésitez-pas, avec la '<strong><a href="http://adresselien.php" title=""></a></strong>' texteexplication</div>

   <div class="wr_txtsize2" style="text-align: right;"><br />
   Et cela <strong>en toute sécurité!</strong><br />
    </div>

   <div style="text-align: justify;"><br />
   <br />
   <br />
    </div>
   </td>
   <td class="wr_dsplymbl" style="width: 643px;">
   <div class="imagefixe1" id="imagefixe1" title="">
   <div class="container" title="Titre"><br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
    
   <div class="wr_txtsize4" style="text-align: left; margin-left: 120px;"><span class="cl-effect-14"><t href="#"><font size="2"><a href="http://adresse.html" rel="nofollow" target="_blank"><strong>JE LE VEUX</strong></a></font></t></span></div>
   </div>
   </div>
   </td>
  </tr>


Voilà j espère que vous pourrez m aider
novis
jordane45
Messages postés
24504
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 février 2019
1840 -
Dans le css ... il ne devrait pas y avoir les textes "code 1" et "code 2".
Retire les ou mets les en commentaire.

Le code html n'est pas complet. Il me faut le code complet de la page. ( et j'insiste bien sur le fait que je veux le code généré... c'est à celui affiché par le navigateur que tu peux récupérer en faisant CTRL + U lorsque tu affiches la page .... pas celui que toi tu as écris dans ton éditeur.... )
Commenter la réponse de novis
0
Merci
Ho Super!! Ça a marché!! Je ne savais pas qu'il fallait mettre des asterix quand on met un commentaire dans le css...

Pour ces effets là, nickel, rien à dire!!
Par contre j'ai une question car du coup, j'ai un décalage avec un autre effet mis plus haut sur mon site.
Mon texte est décalé. Je mets le code pour que vous comprenez mieux:

Mon code css ajouté avec les deux codes réunis

/*code parcours artistique*/
h2{
  color:#000;
  font-family: 'raleway', time, sans-serif;
  font-size:400;
    
}
   
  h2 span {
   font-family: 'raleway', time, sans-serif;
  font-weight: inherit;
   font-weight: bold;
  font-weight: 500;
   color:#000;
}
  
p {
  margin-right: 50px;
  margin-left:50px;
  font-weight: normal;
    font-family: 'Josefin Sans', sans-serif;
font-size:400;
   
}
 
#partistique {
 
  font-weight: normal;
 text-align:center;
 color:#000;
 background-image:url(http://image1.jpg);
 background-position:center center;
 background-repeat:none;
 background-size:cover;
 -o-background-size:cover;
 background-attachment:fixed;
 box-shadow:inset 0 0 10px 0 #000
}
#partistique .container {
 padding:100px 0;
 background-image:linear-gradient(to right bottom,rgba(28,178,189,0.71) 0%,rgba(173,56,228,0.7) 100%)
     
}
 
@media only screen and (max-width:500px) {
 .partistique-content {
  -ms-flex-wrap:wrap;
  flex-wrap:wrap
 }
}

/*code Boutique en Ligne*/

#imagefixe1 {
  font-family: raleway, time, sans-serif;
  font-weight: normal;
 text-align:center;
 color:#000;
 background-image:url(http://image2.jpg);
 background-position:center center;
 background-repeat:no-repeat;
 background-size:800px;
 -o-background-size:800px;
 background-attachment:fixed;
}
#cv .container {
 padding:60px 0;
}
 
@media only screen and (max-width:400px) {
 .cv-content {
  -ms-flex-wrap:wrap;
  flex-wrap:wrap
 }
}



code avec effet au survol de la souris. Trait devient croix au survol de la souris, mais du coup, avec le code précédent, le texte est décalé vers la droite. Comment faire pour le recentrer? Dois ajouter une class?

figure.effect-romeo h3 {font-size:20px;  }

figure.effect-romeo {position: relative;font-size: 18px; font-family: 'Raleway', sans-serif; width : 100%; max-width: 336px; height: 336px; text-align: center; vertical-align: middle; color: #000; margin: 0; }

figure.effect-romeo img{width : 100%; max-width: 336px; height: 336px;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}

 figure.effect-romeo:hover img{width : 100%; max-width: 336px; height: 336px; opacity:.6;-webkit-transform:scale3d(1,1,1);transform:translate3d(1,1,1)}
 
 figure.effect-romeo figcaption::before,figure.effect-romeo figcaption::after{position:absolute;top:48%;left:50%;width:80%;height:1px;background:#000;content:'';-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}
 
 figure.effect-romeo:hover figcaption::before{opacity:.5;-webkit-transform:translate3d(-50%,-50%,0) rotate(45deg);transform:translate3d(-50%,-50%,0) rotate(45deg)}
 
 figure.effect-romeo:hover figcaption::after{opacity:.5;-webkit-transform:translate3d(-50%,-50%,0) rotate(-45deg);transform:translate3d(-50%,-50%,0) rotate(-45deg)}
 
 figure.effect-romeo h3,figure.effect-romeo p{position:absolute;top:45%;left:0;width:100%;-webkit-transition:-webkit-transform .35s;transition:transform .35s}
 
 figure.effect-romeo h3{-webkit-transform:translate3d(0,-50%,0) translate3d(0,-150%,0);transform:translate3d(0,-50%,0) translate3d(0,-150%,0)}
 
 figure.effect-romeo p{-webkit-transform:translate3d(0,-50%,0)
 translate3d(0,50%,0);transform:translate3d(0,-60%,0) translate3d(0,60%,0)}}
 
 figure.effect-romeo:hover h3{-webkit-transform:translate3d(0,-50%,0) translate3d(0,-100%,0);transform:translate3d(0,-50%,0) translate3d(0,-100%,0)}
 
 figure.effect-romeo:hover p{-webkit-transform:translate3d(0,-100%,0) translate3d(0,120%,0);transform:translate3d(0,-100%,0) translate3d(0,120%,0)}


Merci de votre aide, grâce à vous j avance bien!!

Novis
Commenter la réponse de novis
0
Merci
Le décalage est au niveau du p
Mais je ne vois pas comment faire pour que l effet escompté dans le 1er code ne s'adapte pas avec tout les p de mon 2eme code...
jordane45
Messages postés
24504
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 février 2019
1840 -
Ceci est une nouvelle question.
La question initiale étant résolue, merci d'ouvrir une discussion propre à ce nouveau souci.
Bonne soirée
Bien sûr! Pardon je poste un nouveau message sans problème!! Merci pour votre aide! Super!
Commenter la réponse de novis