28172 sujets

CSS et mise en forme, CSS3

Plusieurs pages html/1feuille de style

Pages :
Bonjour,voilà j'ai un petit problème,j'ai créer une page web avec sa feuille de style
et j'ai également créer plusieurs autres pages html assez identique dans la structure pour ne pas avoir à créer plusieurs feuilles de style.
Lorsque j'associe donc ma deuxième ou troisième page à la feuille de style,
en intégrant à cette derniére une div class="intro" par exemple, qui est la seule classe à se nommer ainsi sur les 4 pages et que je lui applique une margin-left: 15px; par exemple
ou un autre attribut,aucun style ne se retrouve appliqué sur ma page html donc le contenu de la div ne se decale pas ou alors le style que je souhaite voir appliquer sur n'importe quelle balise ne fonctionne pas.
Pourtant une seconde feuille css cela marche !.Pouvez-vous guider un débutant,je vous prie Smiley smile . Merci

p.:si besoin est je mettrais mon html et css.
Modifié par Ildegan29 (06 Apr 2017 - 13:30)
Modérateur
Bonjour,

Tes pages html sont dans le même dossier ? Tu appelle ta feuille css de la meme facon avec le bon chemin ?
Merci de répondre,oui, un seul dossier qui contient 4 feuilles html et le fichier css
et dans la balise de chaque page <head><link rel="stylesheet" media="screen" type="text/css" title="Style" href="style.css" />on trouve ceci. Smiley biggrin
Modifié par Ildegan29 (06 Apr 2017 - 13:41)
Modérateur
Étrange que ca marche sur une mais pas sur les autres. Vérifie bien que tout est identique y compris les class sur tes balise html (une faute de frappe arrive tellement vite).

Tu peux aussi regarder dans la console pour voir si il y a une erreur de chargement.
En fait je garde de commun à chacune de mes pages le bandeau du menu en haut,le
pied de page et un élément .aside commun aux 4 pages.Ainsi que la taille de mon body et de mes marges, à l'intérieur de chaque page cependant, il y a 3 sections différentes contact,blog,gallerie dans le menu et donc par forcément les mêmes div ni les mêmes nom de classe pour chaque page ,avec à la place de la gallerie par exemple du texte sur la page contact.
Mais si dans une feuille de style on applique à un nom de classe unique sur les 4 pages,une valeur ,celle-ci devrait être prise en compte,normalement,non ?
Modifié par Ildegan29 (06 Apr 2017 - 14:00)
Modérateur
Le plus simple pour ce genre de cas est de faire des tests. Essaie (pour le test) d'ajouter cette ligne dans ton fichier de styles et regarde le résultat sur tes 4 pages.
body{background: red !important;}


Le but est simplement d'avoir un code très simple d'application.
- Si tes 4 pages sont rouges, ça veut dire que tu appelles bien tes feuilles de styles correctement.
- Si pas, ton appel aux feuilles des styles est différent.

Aussi, n'hésite pas à ouvrir l'inspecteur d'élément (F12) pour voir si tu n'as pas des erreurs de chargements dans ta console.
Modérateur
Ildegan29 a écrit :
Mais si dans une feuille de style on applique à un nom de classe unique sur les 4 pages,une valeur ,celle-ci devrait être prise en compte,normalement,non ?

Oui oui, si une classe dans le css n'est utilisé que dans une page html ca ne pose aucun soucis. Ça ne regarde absolument pas ça.
Modérateur
Le reste du CSS s'applique bien sur ta page du coup ?
Si oui, c'est que tu t'es viandé dans le sélecteur Smiley lol
Merci,mes pages sont toutes rouges en fait Smiley smile ,donc j'ai bien nommé ma feuille de style.
Mon style est bon,je veux dire les bandeaux et le aside se place bien,je pige pas le reste marche pas impossible de décaler la classe,de même,j'avais personnalisé un formulaire de contact,avec un fichier css associé à une seule feuille de style(cela marche),je copie les mêmes classes du css qui fonctionne associé à une seule page dans le css commun aux 4 pages,ça marche plus Smiley confus .
Modifié par Ildegan29 (06 Apr 2017 - 14:14)
Modérateur
Ildegan29 a écrit :
Mon style est bon,je veux dire les bandeaux et le aside se place bien,je pige pas :s,pourtant mes sélecteurs sont bons Smiley smile

Il y a forcément un erreur (très simple) qui traîne quelque part. Un balise mal fermée, un point virgule manquant... un truc a la con quoi.
Colle nous ton code (html et CSS) si tu veux.
Modérateur
Teste aussi de rafraîchir sans le cache (ton css se met peut etre pas à jour)
ctrl+F5 sous Chrome il me semble
voilàa mon html pour la premiére page:
<!DOCTYPE html>
<html><!-- Ouverture de la balise langage html. -->
<head><!--La balise head permet l'insertion d'une balise titre et de lier une feuille de style
ou les références javascript utilisées au document.
-->

<!-- Spécifie l'encodage des caractéres(par exemple chinois,russe etc...) -->
<meta charset="utf-8" />

<!-- Permet d'attacher la feuille de style css à la page html. -->
<link rel="stylesheet" media="screen" type="text/css" title="Style" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width" />





<!-- Titre de la page du site obligatoire. -->
<title>Ma Gallerie</title>

</head>





<body><!-- Ici le body contiendra à la fois la balise header,l'article,l'élément aside et le pied de page. -->

<!-- Header contient une div class identifié par l'id bandeau contenant la balise titre h1(ma gallerie) et le navigateur
et ses trois composants insérés dans une balise ul li de classe tiret.Font color est ici utilisé pour donner la couleur blanche au texte et le rendre plus visible et conforme selon le modéle. -->
<header>
<div class id="bandeau">
<div class id="texteg"><font color="white"><h1>MA GALERIE</h1></font></div>
<font color="white"><nav>
<ul>
<li class="tiret"><a href="#"><font color="white">ME CONTACTER</font></a></li>
<li class="tiret"><a href="#"><font color="white">LIENS</font></a></li>
<li><a href="#"><font color="white">MON PROFIL</font></a></li>
</font>
</ul>
</nav>
</div>
</header>


<!-- La balise article regroupe le corps de la page du site,qui est constitué d'une class div d'id titre contenant
la balise titre h2 contenant MES DERNIÈRES ŒUVRES ainsi q'un paragraphe qui permet de commenter la galerie d'image qui suit,le tout faisant parti intégrante de l'article,cette gallerie d'images est implémentée dans une balise ul li de classe "zoomarticle" contenant une div class="article_big_img" ainsi que les miniatures des images(<img src=) et en cliquant sur ses derniéres l'accés à la version hd de ses images en étant redirigé vers le site de la gallerie(<a href>),ici encore le font color permet de mettre la couleur souhaitée.-->
<article>
<div class id="titre">

<font color="black"><h2>MES DERNIÈRES ŒUVRES</h2></font>

<font color="black"><p>Voici les derniéres oeuvres que j'ai réalisées,je vous invite à les consulter. Chacune d'elle demande plusieurs jours de travail, sans compter les recherches préalables. N'hésitez pas à me contacter si vous souhaitez faire l'acquisition de l'une d'entre elles ou tout simplement pour obtenir des renseignements sur les dimensions ou tout autre détail.</p>
</font>
</div>





<ul class="images">
<li class="zoomarticle" data-price="120" data-description="Lorem ipsum dolor.">
<div class="article_img">
<a href="http://lorempixel.com/800/800/abstract/1/"><img src="http://lorempixel.com/200/200/abstract/1/"/></a>
</div>
</li>


<li class="zoomarticle" data-price="63" data-description="Quisquam editche volpeso.">
<div class="article_img">
<a href="http://lorempixel.com/800/800/abstract/2/"><img src="http://lorempixel.com/200/200/abstract/2/"/></a>
</div>
</li>

<li class="zoomarticle" data-price="230" data-description="Illum architecto alisca">
<div class="article_img">
<a href="http://lorempixel.com/800/800/abstract/3/"><img src="http://lorempixel.com/200/200/abstract/3/"/></a>
</div>
</li>

<li class="zoomarticle" data-price="94" data-description="Dolores officia permor.">
<div class="article_img">
<a href="http://lorempixel.com/800/800/abstract/4/"><img src="http://lorempixel.com/200/200/abstract/4/"/></a>
</div>
</li>

<li class="zoomarticle" data-price="108" data-description="Quisquam dolores fali">
<div class="article_img">
<a href="http://lorempixel.com/800/800/abstract/5/"><img src="http://lorempixel.com/200/200/abstract/5/"/></a>
</div>
</li>

<li class="zoomarticle" data-price="146" data-description="Quisquam pore adche">
<div class="article_img">
<a href="http://lorempixel.com/800/800/abstract/6/"><img src="http://lorempixel.com/200/200/abstract/6/"/></a>
</div>
</li>

<li class="zoomarticle" data-price="856" data-description="elimmial officia quasi">
<div class="article_img">
<a href="http://lorempixel.com/800/800/abstract/7/"><img src="http://lorempixel.com/200/200/abstract/7/"/></a>
</div>
</li>

<li class="zoomarticle" data-price="485" data-description=" elifi nasilio espiriti">
<div class="article_img">
<a href="http://lorempixel.com/800/800/abstract/8/"><img src="http://lorempixel.com/200/200/abstract/8/"/></a>
</div>
</li>

<li class="zoomarticle" data-price="756" data-description="perco edgo sportifio">
<div class="article_img">
<a href="http://lorempixel.com/800/800/abstract/9/"><img src="http://lorempixel.com/200/200/abstract/9/"/></a>
</div>
</li>
</ul>
</article>

<!-- L'élément aside qui est ici un complément d'information peut se trouver aprés la balise article
dans l'ordre hiérarchique, il contient plusieurs balises h2 h3 et h4,ainsi que des éléments div apportant des informations en complément pour joindre par mail ou par courrier le propriétaire des oeuvres, ainsi q'un lien(<a href=) permettant d'envoyer un message par mail,le tout complété par le font color.-->


<div class="aside">
<h2>CONTACT</h2>
<h3>Par mail</h3>
<h4><a href="mailto:jl.godasse@gmail.com">jl.godasse@gmail.com</a></h4>
<h3>Par courrier</h3>
<div>Jean-Luc Godasse</div>
<div>12 rue du cherche-midi</div>
<div>13008 Marseille</div>
</div>
</aside>



</ul>
<div class="infos">
<div class="oh">
<div class="price"></div>
</div>
<div class="oh">
<div class="description"></div>
</div>
</div>


<!--le footer ou pied de page contient quant à lui le copyright du propriétaire,auquel est appliqué font color
l'élément étant contenu dans un élément div class d'id="bandeaubas". -->

<div class id="bandeaubas">
<font color="white"><footer>© 2015 Jean-Luc Godasse</footer>
</font>
</div>

<script>
var timeout = false;
$('.zoomarticle').on('mouseenter', function(){
clearTimeout(timeout);
var price = $(this).data('price').toLocaleString('fr', {
minimumFractionDigits: 2,
style: 'currency',
currency: 'EUR'
}),
description = $(this).data('description');
$('.infos .price').text(price);
$('.infos .description').text(description);
setTimeout(function(){
$('.infos .price, .infos .description').addClass('visible');
});
});
$('.zoomarticle').on('mouseleave', function(){
$('.infos .price, .infos .description').removeClass('visible');
timeout = setTimeout(function(){
$('.infos .price, .infos .description').text('');
}, 300);

});
</script>



</body><!-- fermeture de la balise contenant body -->
</html><!-- fermeture de la balise language html -->
voici le css :
@charset "utf-8";
/* css Document */

body {

max-width: 840px;
border-width: 0;
margin-left: -5px;
font-family: "HelveticaNeue",Helvetica, Arial, sans-serif;
font-weight : normal;
margin-left: 20%;
margin-right: 10%;
font-size: 93%;

}

header{
font-size: 75%;
}


img{max-width: 100%; height: auto;}



div#bandeau {
width: 1155px;
height:90px;
background-color: #6793D4;
text-decoration: none;
text-indent: 10px;
margin-top: -28px;
margin-left: 5px;
margin-right: -10px;
clear:both;
}

nav {
text-align: right;
margin-top: -4px;
margin-right:22px;
margin-bottom: 0px;
position: relative; top :-2px;
position: relative; right : 0px;
font-size: 104%;
}


h1 {
font-weight: normal;
position: relative; top :35px;
position: relative; left :12px;
font-size: 217%;
}


h1::first-letter {
font-size: 124%;
}

.tiret::before{
content:'-';
margin: 0 8px;
}

div#titre {

margin-left: 23px;
padding:0 10px 0 0;
margin-top: 25px;
}


div#titre h2 {
margin-top:-4px;

}

a {
text-decoration: none;

}


article {
margin-top: 39px;
}


h2 {
font-weight: lighter;
font-size: 165%;
line-height:32px;

}
h3 {

font-size: 150%;
font-weight: normal;
line-height:5px;
}

h4 {

font-size: 90%;
font-weight: lighter;

}



p{
font-size: 81%;
line-height: 17px;
margin-top: -10px;

}

.zoomarticle {
height: auto;
float: left;
margin-bottom: 0.4em;
margin-left: 0.7%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
list-style: none;
display: inline-block;
margin-top: -5px;
}




.zoomarticle {

box-shadow: 0px 0px 5px 2px #999999;
-webkit-box-shadow: 0px 0px 5px 2px #999999;
-moz-box-shadow: 0px 0px 5px 2px #999999;
transform: scale(0.90);
-ms-transform: scale(0.90);
-webkit-transform: scale(0.90);
-o-transform: scale(0.90);
-moz-transform: scale(0.90);
text-align: left;
padding: 0;

}



.zoomarticle:hover{
box-shadow:4px 4px 19px 5px #999999;

}


img:hover {
right: -5px;
top: -5px;
position : relative;
box-shadow:10px 4px 10px 23px #C9C9C9;
-webkit-box-shadow: 10px 4px 10px 23px #C9C9C9;
box-shadow: 10px 4px 10px 23px #C9C9C9;
}





.article_img {
width: 192px;
height: 192px;
overflow: hidden;
padding: 0px;

}


ul{
list-style-type: none;
margin-left: -12px;
}

ul li{
float: right;
margin-right: 0px;
}

ul li a{
text-decoration: none;
}


.aside {
font-weight: normal;
float:right;
margin-right: -172px;
margin-top: -719px;
font-size: 92%;
}

.aside> div{
line-height: 17px;
font-size: 91%;
}

.aside a {

color:blue;

}


div#bandeaubas{
width: 1155px;
height:61px;
background-color: #6793D4;
clear:both;
position: relative; bottom :-19px;
margin-left: 4px;
}
footer {
font-size: 84%;
position: absolute; bottom :25px;
position: absolute; left :12px;
text-align: left;
margin-top: 0px;
margin-left: 2px;
text-indent: 10px;
}

.link{
font-size: 12px;
text-align: center;
margin-bottom: 10px;
}

a{
color: #333;
}


ul.images{
list-style: none;
padding: 0;
overflow: hidden;
margin-left: 32px;
}
.article{
float: left;
width: 24%;
transition: all 300ms;



:not(:last-child){
margin-right: calc(4% / 3);
}

img{
position: relative;
z-index: -1;
display: block;
height: auto;
width: 100%;
margin: 0 auto;
}

img:hover{
box-shadow: 0 -5px 0 0 black inset, 0 -10px 0 0 white inset;
}
}

.infos{
padding: 10px 0;
}
.oh{
overflow:
}
.price{
text-align: right;
font-size: 30px;
height: 50px;
line-height: 50px;
transform: translateY(100%);
transition: all 300ms;
margin-right: -165px;
margin-top: -505px;



}

.description{
text-align: right;
font-size: 14px;
max-width: 300px;
margin: 0 auto;
transform: translateY(100%);
transition: all 300ms;
float:right;
margin-right: -165px;
margin-top: -491px;



}



@media screen and (max-device-width: 614px) {
.aside {
width: 100%;
border-right: none;
border-left: 0px;
margin-left: 0px;
margin-right: -15px;
margin-top: 0px;


}
enfin le code html de la page deux qui associé au même css
auquel j'essaye d'ajouter la modification suivante par exemple
.intro {
margin-left:15px;
}
cela ne marche pas !

<!DOCTYPE html>
<html><!-- Ouverture de la balise langage html. -->
<head><!--La balise head permet l'insertion d'une balise titre et de lier une feuille de style
ou les références javascript utilisées au document.
-->

<!-- Spécifie l'encodage des caractéres(par exemple chinois,russe etc...) -->
<meta charset="utf-8" />

<!-- Permet d'attacher la feuille de style css à la page html. -->
<link rel="stylesheet" media="screen" type="text/css" title="Style" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width" />




<!-- Titre de la page du site obligatoire. -->
<title>Ma Gallerie</title>

</head>





<body id="page2"><!-- Ici le body contiendra à la fois la balise header,l'article,l'élément aside et le pied de page. -->

<!-- Header contient une div class identifié par l'id bandeau contenant la balise titre h1(ma gallerie) et le navigateur
et ses trois composants insérés dans une balise ul li de classe tiret.Font color est ici utilisé pour donner la couleur blanche au texte et le rendre plus visible et conforme selon le modéle. -->
<header>
<div class id="bandeau">
<div class id="texteg"><font color="white"><h1>MON PROFIL</h1></font></div>
<font color="white"><nav>
<ul>
<li class="tiret"><a href="#"><font color="white">ME CONTACTER</font></a></li>
<li class="tiret"><a href="#"><font color="white">LIENS</font></a></li>
<li><a href="#"><font color="white">MA GALLERIE</font></a></li>
</font>
</ul>
</nav>
</div>
</header>




<article>

<div class=intro><p>Bonjour, je m'appelle Jean-Luc Godasse et j'ai une passion : <strong>La Peinture</strong>
à laquelle je me consacre depuis quelques années.
Voici mon profil qui vous aidera à mieux me connaitre: </p></div>




<div class="profil"><font color="blue"><h2> Jean-Luc Godasse</h2></font>
<h3> Professeur de dessin</h3>
<div>région Provence-Alpes-Côte d'Azur | contenus rédactionnels</div>
<div><img src="http://media.ooreka.fr/public/image/conjoint-survivant-succession-preview-8631149.jpg"></div>
<hr width="86%" align=left size="1">
</div>


<div class="titre"><font color="blue"><h3>Mon Parcours</h3></font></div>


<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



</article>

<div class="aside">
<h2>CONTACT</h2>
<h3>Par mail</h3>
<h4><a href="mailto:jl.godasse@gmail.com">jl.godasse@gmail.com</a></h4>
<h3>Par courrier</h3>
<div>Jean-Luc Godasse</div>
<div>12 rue du cherche-midi</div>
<div>13008 Marseille</div>
</div>


<div class id="bandeaubas">
<font color="white"><footer>© 2015 Jean-Luc Godasse</footer>
</font>
</div>

</body><!-- fermeture de la balise contenant body -->
</html><!-- fermeture de la balise language html -->
Modifié par Ildegan29 (06 Apr 2017 - 14:22)
Modérateur
Heu... et du coup c'est quelle classe qui ne fonctionne pas ?

Au passage tu tentes de fermer une balise avec </aside> mais sans l'ouvrir avec...
je sais que c'est complexe à comprendre en gros sur ma page 2,si j'essaye d'ajouter ne serait ce que pour la class=intro au fichier .css commun

.intro avec ma modification pour une marge de 15 pixel à gauche ou un margin-top rien ne se passe Smiley smile
Modérateur
<div class=intro>

bah il manque les guillemets :
<div class="intro">

Modifié par _laurent (06 Apr 2017 - 14:29)
oui,j'ai mis les guillemets

HTML <div class="intro"><p>Bonjour, je m'appelle Jean-Luc Godasse et j'ai une passion : <strong>La Peinture</strong>
à laquelle je me consacre depuis quelques années.
Voici mon profil qui vous aidera à mieux me connaitre: </p></div>

CSS .intro {

margin-right: 55px;
margin-top: 28px;

}
J'essaye ça ne change rien.
Modifié par Ildegan29 (06 Apr 2017 - 14:36)
en gros pour que ce soit plus simple,quelqu'un réussit à décaler une des classes de la page 2 en intégrant une quelconque valeur à l'une de ces classes dans la feuille de style ?
Modifié par Ildegan29 (06 Apr 2017 - 14:39)
Pages :
Sujet clos
Aller à