Sujet Précédent Sujet Suivant

Difficulté pour regrouper 2 codes css

Résolu/Fermé
novis - Modifié le 29 janv. 2019 à 15:18
 novis - 30 janv. 2019 à 18:19
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
A voir également:

7 réponses

Réponse 1 / 7
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
29 janv. 2019 à 14:56
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.


0
Réponse 2 / 7
novis
29 janv. 2019 à 14:58
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
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
29 janv. 2019 à 15:02
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......
0
Réponse 3 / 7
novis
29 janv. 2019 à 15:10
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ù...
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
29 janv. 2019 à 15:17
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 ?
0
Réponse 4 / 7
novis
29 janv. 2019 à 15:26
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
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
29 janv. 2019 à 15:35
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 )
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
novis
Modifié le 30 janv. 2019 à 13:25
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
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
30 janv. 2019 à 14:39
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.... )
0
Réponse 6 / 7
novis
30 janv. 2019 à 17:46
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
0
Réponse 7 / 7
novis
30 janv. 2019 à 17:48
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...
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
30 janv. 2019 à 18:09
Ceci est une nouvelle question.
La question initiale étant résolue, merci d'ouvrir une discussion propre à ce nouveau souci.
Bonne soirée
0
novis
30 janv. 2019 à 18:19
Bien sûr! Pardon je poste un nouveau message sans problème!! Merci pour votre aide! Super!
0

Discussions similaires

[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
Great Teacher Onizuka SAISON 2
remi1912 -
Firaz -

34 réponses