Bonjour
Voila je rencontre un petit problème avec mon code.
Je cherche à copier/coller le code html et CSS d'un de mes anciens sites élaboré pour pouvoir modifier le code et élaborer un autre site avec un autre design, mais le code css ne repond pas lorsque j'éssaie de le modifier, je ne sais pas pourquoi.
Décrivez ici votre code ou ce que vous cherchez à faire
Voici l'exemple d'une des pages en question:
code html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="stylestructure.css" />
<!--[if lt IE 9]>
<script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>structure</title>
</head>
<body onload="WinTime(12, 46, 08);" bgcolor="#ffffff;" background-image="lds.jpg" >
<div id="bloc_page">
<header>
<div id="titre_principal">
<p>
<img src="images/ent.png" alt="Logo de lds" id="logo" />
</p>
</div>
<!--
<marquee direction="right">
<h1>LDS.ci</h1>
LE SITE OFFICIEL DE LDS, CONTACTEZ-NOUS POUR VOS SERVICES WEB!
</p>
</marquee>
-->
</header>
<nav>
<ul>
<li><a href="accueil.html">ACCUEIL</a></li>
<li><a href="structure.html">STRUCTURE</a></li>
<li><a href="prestation.html">PRESTATIONS</a></li>
<li><a href="galerie.html">GALERIE</a></li>
<li><a href="inscription.html">INSCRIPTION</a></li>
<li><a href="contact.html">CONTACTS</a></li>
</ul>
</nav>
<div id="banniere_image">
</div>
<!-- PREMIERE PARTIE (section1)-->
<section>
<aside class="gauche">
<h1>STRUCTURE DE L'ENTREPRISE</h1>
<!-- <img src="images/bulle.png" alt="" id="fleche_bulle" /> juste une fleche collée à la bordure du cadre de "INFO EXPRESS"-->
<p id="iphone"><img src="images/camion.jpg" alt="image iphone" />
</p>
<p>L'information que nous vous donnons aujourd'hui porte sur la strucrure de l'entreprise. Elle a été créée le... en Côte d'Ivoire.
</p>
<p>Bien maigre, n'est-ce pas ? C'est pourquoi, aujourd'hui, nous avons décidé décidé d'écrire sa biographie (ou kBiographie,
comme vous voulez !) afin que les fanatiques de la nature sachent qui il est réellement et la merveille qu'il fera dans les jours à venir.
A bientôt pour le subliminal, les gars! ça va teuheu!!!</br>
</br>
</p>
<p>
Voir aussi <a href="page3.html"> La page 3<a/>!
</br>
</br>
</p>
<!--
<p><img src="images/fb.png" alt="Facebook" /><img src="images/twitters.jpg" alt="Twitter" />
<img src="images/deuxiemelogoplupti.png" alt="macreation" /><img src="images/logo-aest.png" alt="aest" />
<!-- <img src="images/globe.png" alt="globe" /></p> -->
</aside>
<article class="milieu1" >
<h1><img src="images/business.png" alt=" main_dans_main" class="main_dans_main" />LE MOT DU DIRECTEUR !</h1><br/><br/>
<p><h2>LDS, structure commerciale basée sur l'assainissement de l'environnement!</h2>
Le site officiel de lds a été conçu pour faciliter le commerce en ligne et la transaction entre nos clients et nous...</p>
<p>Ce site permettra à des particuliers comme des entreprises de rentrer facilement en contact avec nous et
avoir accès à nos offres sans toute fois se deplacer ou même nous chercher dans la ville.</p>
<p>Ceci pour dire que nous sommes à l'air de la mondialisation, donc tout pourra se faire désormais par internet
, vous pouvez nous contacter maintenant dépuis chez vous à domicile et nous soumettre votre commande.
Et bien entendu, vous serrez bien servi chez vous (livraison à domicile, bien sûre)!
Vous n'avez pas à vous en faire et vous n'aurez aucun centime à débourser pour la réussite de cette opération.
Comptez vos sous et comptez sur nous !</p>
<p>Nous nous ouvrons à vous 24h sur 24, à travers ce site, vous avez toutes les opportunités et possibilité.
Donc, pas de panique en ce qui concerne notre contact et nos services! Nous vous faisons savoir également que nous
sommes à votre disposition pour toute opération concernant nos offres!
</br>
</br></p>
</article>
<aside class="droit">
<h1>-----LE JOURNAL DU JOUR-----</h1>
<!-- <h2>À propos de l'auteur</h2> -->
<!-- <img src="images/bulle.png" alt="" id="fleche_bulle" /> juste une flêche collée à la bordure du cadre de "LE JOURNAL DU JOUR"-->
<p id="photo_zozor"><img src="images/lds.jpg" alt="Photo de Zozor" /></p>
<p>Laissez-moi le temps de me présenter : je m'appelle Mr Jack dit La Fouine, je suis né le XX jour / XX mois/ XXXX année.</p>
<p>Bien maigre, n'est-ce pas ? C'est pourquoi, aujourd'hui, j'ai décidé d'écrire ma biographie (ou kBiographie,
comme vous voulez !) afin que les fanatiques de la nature sachent qui je suis réellement et la merveille que je vais faire dans les jours à venir.
A bientôt pour le subliminal, les gars! ça va teuheu!!!</p>
<p><img src="images/fb.png" alt="Facebook" /><img src="images/twitters.jpg" alt="Twitter" />
<img src="images/deuxiemelogoplupti.png" alt="macreation" /><img src="images/logo-aest.png" alt="aest" />
<!-- <img src="images/globe.png" alt="globe" /></p> -->
</aside>
</section>
<!-- FIN DE LA PREMIERE PARTIE -->
<!-- DEUXIEME PARTIE (SECTION2)-->
<section>
<aside class="gauche2">
<h1>STRUCTURE DE L'ENTREPRISE</h1>
<!-- <img src="images/bulle.png" alt="" id="fleche_bulle" /> juste une fleche collée à la bordure du cadre de "INFO EXPRESS"-->
<p>L'information que nous vous donnons aujourd'hui porte sur la présentation de nos outils de travail.
</p>
<p>La machine ici présente est dotée d'une capacité très importante qui lui permet de charger une quantite enorme d'ordure. Elle peut supporter jusqu'à... tonnes d'ordures. comme vous voulez !) afin que les fanatiques de la nature sachent qui il est réellement et la merveille qu'il fera dans les jours à venir.
Il y en a d'autres de très grandes capacités et supérieur à celle que vous voyez ici!!!</br>
</br></br>
</p>
<p>
Voir aussi <a href="page3.html"> La page 3<a/>!
</br>
</br>
</p>
<!--
<p><img src="images/fb.png" alt="Facebook" /><img src="images/twitters.jpg" alt="Twitter" />
<img src="images/deuxiemelogoplupti.png" alt="macreation" /><img src="images/logo-aest.png" alt="aest" />
<!-- <img src="images/globe.png" alt="globe" /></p> -->
</aside>
<article class="milieu2" >
<h1>LDS est une grande structure commerciale basée sur l'assainissement de l'environnement!</h1>
<p>Le site officiel de lds a été conçu pour faciliter le commerce en ligne et la transaction entre nos clients et nous...</p>
<p>Ce site permettra à des particuliers comme des entreprises de rentrer facilement en contact avec nous et
avoir accès à nos offres sans toute fois se deplacer ou même nous chercher dans la ville.</p>
<p>ci pour dire que nous sommes à l'air de la mondialisation, donc tout pourra se faire désormais par internet
, vous pouvez nous contacter maintenant dépuis chez vous à domicile et nous soumettre votre commande.
Et bien entendu, vous serrez bien servi chez vous (livraison à domicile, bien sûre)!
</p>
</article>
<aside class="droit2">
<h1>-----LE JOURNAL DU JOUR-----</h1>
<!-- <h2>À propos de l'auteur</h2> -->
<!-- <img src="images/bulle.png" alt="" id="fleche_bulle" /> juste une flêche collée à la bordure du cadre de "LE JOURNAL DU JOUR"-->
<p id="photo_zozor"><img src="images/lafouine2.png" alt="Photo de Zozor" /></p>
<p>Laissez-moi le temps de me présenter : je m'appelle KOROYOGO Mamadou dit La Fouine, je suis né un 1er Mai 1987.</p>
<p>Bien maigre, n'est-ce pas ? C'est pourquoi, aujourd'hui, j'ai décidé d'écrire ma biographie (ou kBiographie,
comme vous voulez !) afin que les fanatiques de la nature sachent qui je suis réellement et la merveille que je vais faire dans les jours à venir!!!</p>
</aside>
</section>
<!-- FIN DE LA DEUXIEME PARTIE -->
<section>
<article class="gauche3" >
<h1>LDS est une grande structure commerciale basée sur l'assainissement de l'environnement!</h1>
<p>Le site officiel de lds a été conçu pour faciliter le commerce en ligne et la transaction entre nos clients et nous...</p>
<p>Ce site permettra à des particuliers comme des entreprises de rentrer facilement en contact avec nous et
avoir accès à nos offres sans toute fois se deplacer ou même nous chercher dans la ville.</p>
<p>ci pour dire que nous sommes à l'air de la mondialisation, donc tout pourra se faire désormais par internet
, vous pouvez nous contacter maintenant dépuis chez vous à domicile et nous soumettre votre commande.
Et bien entendu, vous serrez bien servi chez vous (livraison à domicile, bien sûre)!
Vous n'avez pas à vous en faire et vous n'aurez aucun centime à débourser pour la réussite de cette opération.
Comptez vos sous et comptez sur nous !</p>
</article>
<article class="droit3" >
<h1>LDS est une grande structure commerciale basée sur l'assainissement de l'environnement!</h1>
<p>Le site officiel de lds a été conçu pour faciliter le commerce en ligne et la transaction entre nos clients et nous...</p>
<p>Ce site permettra à des particuliers comme des entreprises de rentrer facilement en contact avec nous et
avoir accès à nos offres sans toute fois se deplacer ou même nous chercher dans la ville.</p>
</article>
</section>
<img src="images/barfootervert.png" alt="bar_entre_corp_et_footer" />
<footer>
<div id="tweet">
<h1>Mon dernier tweet</h1>
<p>Vous pouvez mous contacter</p>
<p>aussi sur Tweeter !</p>
</div>
<div id="mes_photos">
<h1>Mes photos</h1>
<p>
<img src="images/apres-midi.jpg" alt="dans_lapres_midi" /><img src="images/bananeraie.jpg" alt="Photographie" />
<!-- <img src="images/bananier.jpg" alt="Photographie" /><img src="images/fauteuil.jpg" alt="Photographie" /> -->
</p>
</div>
<div id="mes_liens">
<h1>LIENS UTILES</h1>
<ul>
<li><a href="#">Tweeter</a></li>
<li><a href="#">Facebook.com</a></li>
<li><a href="#">Yahoo.fr</a></li>
<li><a href="#">Commentçamarche</a></li>
</ul>
<ul>
<li><a href="#">Skype</a></li>
<li><a href="#">Gmail.com</a></li>
<li><a href="#">Lesiteduzero.com</a></li>
<li><a href="#">Afrostar.net</a></li>
</ul>
</div>
<img src="images/barfootervert.png" alt="bar_entre_corp_et_footer" />
</footer>
</div>
</body></html>
J'arrive à modifier le code html mais le code css ne repond pas aux modifications que je souhaite lorsque j'éssaie de le modifier.
Ensuite voici le code css de cette page:
code css:
/ Eléments principaux de la page Le body/
body
{
/ background: url('images/lds.jpg') repeat; /
background-color:rgb(128,213,3);
font-family: 'Trebuchet MS', Arial, sans-serif;
color:#181818;
}
{
width: 900px;
margin: auto;
background-color: white;}
section h1, footer h1, nav a
{
font-family: Dayrom, serif;
font-weight: normal;
text-transform: uppercase;
}
/* Header */header
{
background: url('images/pied.png')repeat-x bottom;
margin-bottom: 0px;
}
{
display: inline-block;
margin-bottom: 0px;
margin-right: 0px;
margin-left:0px;
padding-right: 0px;
padding-left: 0px;
margin-bottom: 0px;
border-radius:10px;}
header h1
{
font-family: 'BallparkWeiner', serif;
font-weight: normal;
margin-bottom: 0px;
}
{
float:left;
display: inline-block;
margin-bottom: 0px;
}
header h1
header h2
{
font-family: Dayrom, serif;
font-size: 1.1em;
margin-top: 0px;
font-weight: normal;
}
/ Navigation : Le menu de navigation/
nav
{
border:2px solid black;
border-radius:8px;
display: inline-block;
width: 898px;
text-align: center;
}
nav ul
{
list-style-type: none; /qui permet de retirer l'image ronde servant de puce devant les éléments du menu de navigation./
}
nav li
{
background-color:green;
display: inline-block;
margin-right: 15px;
border:2px solid black;
border-radius:5px;
}
nav a
{
font-size: 1.3em;
color: #181818;
padding-bottom: 3px;
text-decoration: none;
font-family: Arial, Times New Roman;
color:black;
}
nav a:hover
{
background-color:lime;
color:green;
border-bottom: 2px solid green;
}
/ Bannière /
banniere_description{
position: absolute;
bottom: 0;
border-radius: 0px 0px 5px 5px;
width: 99.5%;
height: 33px;
padding-top: 15px;
padding-left: 4px;
background-color: rgb(24,24,24); / Pour les anciens navigateurs/
background-color: rgba(24,24,24,0.8);
color: white;
font-size: 0.8em;
}
.bouton_rouge
{
display: inline-block;
height: 25px;
position: absolute;
right: 5px;
bottom: 5px;
background: url('images/entete.png') repeat-x;
border: 1px solid #760001;
border-radius: 5px;
font-size: 1.2em;
text-align: center;
padding: 3px 8px 0px 8px;
background-color:green;
color: white;
text-decoration: none;
}
.bouton_rouge img
{
background-color:green;
border: 0;
}
/*PREMIERE PARTIE*/.gauche
{
float:left;
position: relative;
width: 240px;
border-right:5px;
border-left:0px;
border-top:5px;
border-bottom:px;
background-color:rgb(12,250,0); /La couleur de fond de l'article !/
color: white; /La couleur de l'ecriture est verte actuellement/
box-shadow: 0px 2px 5px #1c1a19;
border-radius: 5px;
padding: 5px;
margin:5px;
margin-top:5px;
font-size: 0.9em;
vertical-align:top;
border: 1px solid blue;
}
/ Corps /
.milieu1
{
background-color:rgb(0,255,64);
color:white;
display: inline-block;
vertical-align: top;
text-align: justify;
width: 353px;
padding:3px;
margin:5px;
margin-top:5px;
border:2px solid blue;
border-radius:8px;
}
h1
{
background-color:blue;
font-size:17px;
}
.main_dans_main
{
float:left;
vertical-align: middle;
margin-right: 8px;
margin-top:0px;
}
article p
{
font-size: 0.8em;
}
.droit
{
float:right;
position: relative;
width: 240px;
background-color:rgb(128,255,128);
/background-color:rgb(15,250,15); / Pour les anciens navigateurs / background-color: rgba(10,250,15,0.8); */
box-shadow: 0px 2px 5px #1c1a19;
border-radius: 5px;
padding:5px;
margin:5px;
margin-top:5px;
color: white;
font-size: 0.9em;
}
/DEUXIEME PARTIE (DEUXIEME SECTION)/
.gauche2
{
float:left;
position: relative;
width: 240px;
border-right:5px;
border-left:0px;
border-top:5px;
border-bottom:px;
background-color:black; /La couleur de fond de l'article !/
color: green; /La couleur de l'ecriture est verte actuellement/
box-shadow: 0px 2px 5px #1c1a19;
border-radius: 5px;
padding: 5px;
margin:5px;
margin-top:-115px;
font-size: 0.9em;
vertical-align:top;
border: 1px solid blue;
}
/ Corps /
.milieu2
{
background-color:gray;
color:white;
display: inline-block;
vertical-align: top;
text-align: justify;
width: 353px;
padding:3px;
margin:5px;
margin-top:15px;
border:2px solid blue;
border-radius:8px;
}
h1
{
background-color:;
}
article p
{
font-size: 0.8em;
}
.droit2
{
float:right;
position: relative;
width: 240px;
background-color:blue;
/background-color:rgb(15,250,15); / Pour les anciens navigateurs / background-color: rgba(10,250,15,0.8); */
box-shadow: 0px 2px 5px #1c1a19;
border-radius: 5px;
padding:5px;
margin:5px;
margin-top:-115px;
color: white;
font-size: 0.9em;
}
/TROISIEME PARTIE/
.gauche3
{
background-color:orange;
color:white;
display: inline-block;
vertical-align: top;
text-align: justify;
width: 600px;
padding:3px;
margin:5px;
margin-top:15px;
border:2px solid blue;
border-radius:8px;
}
.droit3
{
float:right;
position: relative;
width: 260px;
background-color:blue;
/background-color:rgb(15,250,15); / Pour les anciens navigateurs / background-color: rgba(10,250,15,0.8); */
box-shadow: 0px 2px 5px #1c1a19;
border-radius: 5px;
padding:5px;
padding-top:5px;
margin:5px;
margin-top:0px;
color: white;
font-size: 0.9em;
}
{
position: absolute;
top: 100px;
left: -12px;
}
{
text-align: center;
}
{
border: 1px solid #181818;
}
aside img
{
margin-right: 5px;
}
/ Footer ou pied de page/
footer
{
background-color:green;
padding-top: 25px;
}
footer p, footer ul
{
font-size: 0.8em;
}
footer h1
{
font-size: 1.1em;
}
{
display: inline-block;
vertical-align: top;
}
tweet{
width: 28%;
}
{
width: 35%;
}
{
width: 31%;
}
{
border: 1px solid #181818;
margin-right: 2px;
}
{
display: inline-block;
vertical-align: top;
margin-top: 0;
width: 48%;
list-style-image: url('images/fleche.png');
padding-left: 2px;
}
{
text-decoration: none;
color: #760001;
}
Ce que je veux
Je veux modifier les positions des blocs, modifier l'apparence du site mais aucun élément de mon code css ne repond.
Ce que j'obtiens
Aucun changement ne s'éffectue. J'aimerais savoir comment faire pour que le code css accepte les modifications.
Merci d'avance pour vos aides.
14 réponses
Essaie de le remplacer par :
<link rel="stylesheet" type="text/css" href="stylestructure.css" />
Salut, petite astuce de développeur. (Peut être tu l'as fais, peut être que non)
Pense à désactiver la mise à en cache du navigateur pendant le développement.
Les navigateurs mettent en cache tous les fichiers statiques.
Hello,
Il manque simplement un appel à ton fichier css ?
<link rel="stylesheet" media="screen" href="TONFICHIERCSS.css" />Et ton squelette de page est-il bien correct ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 basic skeleton</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" media="screen" href="TONFICHIERCSS.css" />
</head>
<body>
TON HTML
</html>Je l'ai deja fait Elyanor, je ne sais pas pourquoi ce n'est pas apparu dans le code ici.
Sinon le voici: <link rel="stylesheet" href="stylestructure.css" />
Et puis le squellette de mon site est bioen correcte je pense.
Bonjour,
Que dises les logs ?
Es-tu sur d'avoir renseigner le bon chemin pour ton fichier css ?
Voici le code à nouveau:
Code html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="stylestructure.css" />
<!--[if lt IE 9]>
<script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>structure</title>
</head>
<body onload="WinTime(12, 46, 08);" bgcolor="#ffffff;" background-image="lds.jpg" >
<div id="bloc_page">
<header>
<div id="titre_principal">
<p>
<img src="images/ent.png" alt="Logo de lds" id="logo" />
</p>
</div>
<!--
<marquee direction="right">
<h1>LDS.ci</h1>
LE SITE OFFICIEL DE LDS, CONTACTEZ-NOUS POUR VOS SERVICES WEB!
</p>
</marquee>
-->
</header>
<nav>
<ul>
<li><a href="accueil.html">ACCUEIL</a></li>
<li><a href="structure.html">STRUCTURE</a></li>
<li><a href="prestation.html">PRESTATIONS</a></li>
<li><a href="galerie.html">GALERIE</a></li>
<li><a href="inscription.html">INSCRIPTION</a></li>
<li><a href="contact.html">CONTACTS</a></li>
</ul>
</nav>
<div id="banniere_image">
</div>
<!-- PREMIERE PARTIE (section1)-->
<section>
<aside class="gauche">
<h1>STRUCTURE DE L'ENTREPRISE</h1>
<!-- <img src="images/bulle.png" alt="" id="fleche_bulle" /> juste une fleche collée à la bordure du cadre de "INFO EXPRESS"-->
<p id="iphone"><img src="images/camion.jpg" alt="image iphone" />
</p>
<p>L'information que nous vous donnons aujourd'hui porte sur la strucrure de l'entreprise. Elle a été créée le... en Côte d'Ivoire.
</p>
<p>Bien maigre, n'est-ce pas ? C'est pourquoi, aujourd'hui, nous avons décidé décidé d'écrire sa biographie (ou kBiographie,
comme vous voulez !) afin que les fanatiques de la nature sachent qui il est réellement et la merveille qu'il fera dans les jours à venir.
A bientôt pour le subliminal, les gars! ça va teuheu!!!</br>
</br>
</p>
<p>
Voir aussi <a href="page3.html"> La page 3<a/>!
</br>
</br>
</p>
<!--
<p><img src="images/fb.png" alt="Facebook" /><img src="images/twitters.jpg" alt="Twitter" />
<img src="images/deuxiemelogoplupti.png" alt="macreation" /><img src="images/logo-aest.png" alt="aest" />
<!-- <img src="images/globe.png" alt="globe" /></p> -->
</aside>
<article class="milieu1" >
<h1><img src="images/business.png" alt=" main_dans_main" class="main_dans_main" />LE MOT DU DIRECTEUR !</h1><br/><br/>
<p><h2>LDS, structure commerciale basée sur l'assainissement de l'environnement!</h2>
Le site officiel de lds a été conçu pour faciliter le commerce en ligne et la transaction entre nos clients et nous...</p>
<p>Ce site permettra à des particuliers comme des entreprises de rentrer facilement en contact avec nous et
avoir accès à nos offres sans toute fois se deplacer ou même nous chercher dans la ville.</p>
<p>Ceci pour dire que nous sommes à l'air de la mondialisation, donc tout pourra se faire désormais par internet
, vous pouvez nous contacter maintenant dépuis chez vous à domicile et nous soumettre votre commande.
Et bien entendu, vous serrez bien servi chez vous (livraison à domicile, bien sûre)!
Vous n'avez pas à vous en faire et vous n'aurez aucun centime à débourser pour la réussite de cette opération.
Comptez vos sous et comptez sur nous !</p>
<p>Nous nous ouvrons à vous 24h sur 24, à travers ce site, vous avez toutes les opportunités et possibilité.
Donc, pas de panique en ce qui concerne notre contact et nos services! Nous vous faisons savoir également que nous
sommes à votre disposition pour toute opération concernant nos offres!
</br>
</br></p>
</article>
<aside class="droit">
<h1>-----LE JOURNAL DU JOUR-----</h1>
<!-- <h2>À propos de l'auteur</h2> -->
<!-- <img src="images/bulle.png" alt="" id="fleche_bulle" /> juste une flêche collée à la bordure du cadre de "LE JOURNAL DU JOUR"-->
<p id="photo_zozor"><img src="images/lds.jpg" alt="Photo de Zozor" /></p>
<p>Laissez-moi le temps de me présenter : je m'appelle XXXX, dit La Fouine, je suis né un XX jour, XX mois, XXXX année.</p>
<p>Bien maigre, n'est-ce pas ? C'est pourquoi, aujourd'hui, j'ai décidé d'écrire ma biographie (ou kBiographie,
comme vous voulez !) afin que les fanatiques de la nature sachent qui je suis réellement et la merveille que je vais faire dans les jours à venir.
A bientôt pour le subliminal, les gars! ça va teuheu!!!</p>
<p><img src="images/fb.png" alt="Facebook" /><img src="images/twitters.jpg" alt="Twitter" />
<img src="images/deuxiemelogoplupti.png" alt="macreation" /><img src="images/logo-aest.png" alt="aest" />
<!-- <img src="images/globe.png" alt="globe" /></p> -->
</aside>
</section>
<!-- FIN DE LA PREMIERE PARTIE -->
<!-- DEUXIEME PARTIE (SECTION2)-->
<section>
<aside class="gauche2">
<h1>STRUCTURE DE L'ENTREPRISE</h1>
<!-- <img src="images/bulle.png" alt="" id="fleche_bulle" /> juste une fleche collée à la bordure du cadre de "INFO EXPRESS"-->
<p>L'information que nous vous donnons aujourd'hui porte sur la présentation de nos outils de travail.
</p>
<p>La machine ici présente est dotée d'une capacité très importante qui lui permet de charger une quantite enorme d'ordure. Elle peut supporter jusqu'à... tonnes d'ordures. comme vous voulez !) afin que les fanatiques de la nature sachent qui il est réellement et la merveille qu'il fera dans les jours à venir.
Il y en a d'autres de très grandes capacités et supérieur à celle que vous voyez ici!!!</br>
</br></br>
</p>
<p>
Voir aussi <a href="page3.html"> La page 3<a/>!
</br>
</br>
</p>
<!--
<p><img src="images/fb.png" alt="Facebook" /><img src="images/twitters.jpg" alt="Twitter" />
<img src="images/deuxiemelogoplupti.png" alt="macreation" /><img src="images/logo-aest.png" alt="aest" />
<!-- <img src="images/globe.png" alt="globe" /></p> -->
</aside>
<article class="milieu2" >
<h1>LDS est une grande structure commerciale basée sur l'assainissement de l'environnement!</h1>
<p>Le site officiel de lds a été conçu pour faciliter le commerce en ligne et la transaction entre nos clients et nous...</p>
<p>Ce site permettra à des particuliers comme des entreprises de rentrer facilement en contact avec nous et
avoir accès à nos offres sans toute fois se deplacer ou même nous chercher dans la ville.</p>
<p>ci pour dire que nous sommes à l'air de la mondialisation, donc tout pourra se faire désormais par internet
, vous pouvez nous contacter maintenant dépuis chez vous à domicile et nous soumettre votre commande.
Et bien entendu, vous serrez bien servi chez vous (livraison à domicile, bien sûre)!
</p>
</article>
<aside class="droit2">
<h1>-----LE JOURNAL DU JOUR-----</h1>
<!-- <h2>À propos de l'auteur</h2> -->
<!-- <img src="images/bulle.png" alt="" id="fleche_bulle" /> juste une flêche collée à la bordure du cadre de "LE JOURNAL DU JOUR"-->
<p id="photo_zozor"><img src="images/lafouine2.png" alt="Photo de Zozor" /></p>
<p>Laissez-moi le temps de me présenter : .</p>
<p>Bien maigre, n'est-ce pas ? C'est pourquoi, aujourd'hui, j'ai décidé d'écrire ma biographie (ou kBiographie,
comme vous voulez !) afin que les fanatiques de la nature sachent qui je suis réellement et la merveille que je vais faire dans les jours à venir!!!</p>
</aside>
</section>
<!-- FIN DE LA DEUXIEME PARTIE -->
<section>
<article class="gauche3" >
<h1>LDS est une grande structure commerciale basée sur l'assainissement de l'environnement!</h1>
<p>Le site officiel de lds a été conçu pour faciliter le commerce en ligne et la transaction entre nos clients et nous...</p>
<p>Ce site permettra à des particuliers comme des entreprises de rentrer facilement en contact avec nous et
avoir accès à nos offres sans toute fois se deplacer ou même nous chercher dans la ville.</p>
<p>ci pour dire que nous sommes à l'air de la mondialisation, donc tout pourra se faire désormais par internet
, vous pouvez nous contacter maintenant dépuis chez vous à domicile et nous soumettre votre commande.
Et bien entendu, vous serrez bien servi chez vous (livraison à domicile, bien sûre)!
Vous n'avez pas à vous en faire et vous n'aurez aucun centime à débourser pour la réussite de cette opération.
Comptez vos sous et comptez sur nous !</p>
</article>
<article class="droit3" >
<h1>LDS est une grande structure commerciale basée sur l'assainissement de l'environnement!</h1>
<p>Le site officiel de lds a été conçu pour faciliter le commerce en ligne et la transaction entre nos clients et nous...</p>
<p>Ce site permettra à des particuliers comme des entreprises de rentrer facilement en contact avec nous et
avoir accès à nos offres sans toute fois se deplacer ou même nous chercher dans la ville.</p>
</article>
</section>
<img src="images/barfootervert.png" alt="bar_entre_corp_et_footer" />
<footer>
<div id="tweet">
<h1>Mon dernier tweet</h1>
<p>Vous pouvez mous contacter</p>
<p>aussi sur Tweeter !</p>
</div>
<div id="mes_photos">
<h1>Mes photos</h1>
<p>
<img src="images/apres-midi.jpg" alt="dans_lapres_midi" /><img src="images/bananeraie.jpg" alt="Photographie" />
<!-- <img src="images/bananier.jpg" alt="Photographie" /><img src="images/fauteuil.jpg" alt="Photographie" /> -->
</p>
</div>
<div id="mes_liens">
<h1>LIENS UTILES</h1>
<ul>
<li><a href="#">Tweeter</a></li>
<li><a href="#">Facebook.com</a></li>
<li><a href="#">Yahoo.fr</a></li>
<li><a href="#">Commentçamarche</a></li>
</ul>
<ul>
<li><a href="#">Skype</a></li>
<li><a href="#">Gmail.com</a></li>
<li><a href="#">Lesiteduzero.com</a></li>
<li><a href="#">Afrostar.net</a></li>
</ul>
</div>
<img src="images/barfootervert.png" alt="bar_entre_corp_et_footer" />
</footer>
</div>
</body>
</html>Voici le code css maintenant:
/* Eléments principaux de la page Le body*/
body
{
/* background: url('images/lds.jpg') repeat; */
background-color:rgb(128,213,3);
font-family: 'Trebuchet MS', Arial, sans-serif;
color:#181818;
}
#bloc_page /*<div id="bloc_page">*/
{
width: 900px;
margin: auto;
background-color: white;
}
section h1, footer h1, nav a
{
font-family: Dayrom, serif;
font-weight: normal;
text-transform: uppercase;
}
/* Header */
header
{
background: url('images/pied.png')repeat-x bottom;
margin-bottom: 0px;
}
#titre_principal
{
display: inline-block;
margin-bottom: 0px;
margin-right: 0px;
margin-left:0px;
padding-right: 0px;
padding-left: 0px;
margin-bottom: 0px;
border-radius:10px;
}
header h1
{
font-family: 'BallparkWeiner', serif;
font-weight: normal;
margin-bottom: 0px;
}
#logo
{
float:left;
display: inline-block;
margin-bottom: 0px;
}
header h1
header h2
{
font-family: Dayrom, serif;
font-size: 1.1em;
margin-top: 0px;
font-weight: normal;
}
/* Navigation : Le menu de navigation*/
nav
{
border:2px solid black;
border-radius:8px;
display: inline-block;
width: 898px;
text-align: center;
}
nav ul
{
list-style-type: none; /*qui permet de retirer l'image ronde servant de puce devant les éléments du menu de navigation.*/
}
nav li
{
background-color:green;
display: inline-block;
margin-right: 15px;
border:2px solid black;
border-radius:5px;
}
nav a
{
font-size: 1.3em;
color: #181818;
padding-bottom: 3px;
text-decoration: none;
font-family: Arial, Times New Roman;
color:black;
}
nav a:hover
{
background-color:lime;
color:green;
border-bottom: 2px solid green;
}
/* Bannière */
#banniere_description
{
position: absolute;
bottom: 0;
border-radius: 0px 0px 5px 5px;
width: 99.5%;
height: 33px;
padding-top: 15px;
padding-left: 4px;
background-color: rgb(24,24,24); /* Pour les anciens navigateurs*/
background-color: rgba(24,24,24,0.8);
color: white;
font-size: 0.8em;
}
.bouton_rouge
{
display: inline-block;
height: 25px;
position: absolute;
right: 5px;
bottom: 5px;
background: url('images/entete.png') repeat-x;
border: 1px solid #760001;
border-radius: 5px;
font-size: 1.2em;
text-align: center;
padding: 3px 8px 0px 8px;
background-color:green;
color: white;
text-decoration: none;
}
.bouton_rouge img
{
background-color:green;
border: 0;
}
/*PREMIERE PARTIE*/
.gauche
{
float:left;
position: relative;
width: 240px;
border-right:5px;
border-left:0px;
border-top:5px;
border-bottom:px;
background-color:rgb(12,250,0); /*La couleur de fond de l'article !*/
color: white; /*La couleur de l'ecriture est verte actuellement*/
box-shadow: 0px 2px 5px #1c1a19;
border-radius: 5px;
padding: 5px;
margin:5px;
margin-top:5px;
font-size: 0.9em;
vertical-align:top;
border: 1px solid blue;
}
/* Corps */
.milieu1
{
background-color:rgb(0,255,64);
color:white;
display: inline-block;
vertical-align: top;
text-align: justify;
width: 353px;
padding:3px;
margin:5px;
margin-top:5px;
border:2px solid blue;
border-radius:8px;
}
h1
{
background-color:blue;
font-size:17px;
}
.main_dans_main
{
float:left;
vertical-align: middle;
margin-right: 8px;
margin-top:0px;
}
article p
{
font-size: 0.8em;
}
.droit
{
float:right;
position: relative;
width: 240px;
background-color:rgb(128,255,128);
/*background-color:rgb(15,250,15); /* Pour les anciens navigateurs / background-color: rgba(10,250,15,0.8); */
box-shadow: 0px 2px 5px #1c1a19;
border-radius: 5px;
padding:5px;
margin:5px;
margin-top:5px;
color: white;
font-size: 0.9em;
}
/*DEUXIEME PARTIE (DEUXIEME SECTION)*/
.gauche2
{
float:left;
position: relative;
width: 240px;
border-right:5px;
border-left:0px;
border-top:5px;
border-bottom:px;
background-color:black; /*La couleur de fond de l'article !*/
color: green; /*La couleur de l'ecriture est verte actuellement*/
box-shadow: 0px 2px 5px #1c1a19;
border-radius: 5px;
padding: 5px;
margin:5px;
margin-top:-115px;
font-size: 0.9em;
vertical-align:top;
border: 1px solid blue;
}
/* Corps */
.milieu2
{
background-color:gray;
color:white;
display: inline-block;
vertical-align: top;
text-align: justify;
width: 353px;
padding:3px;
margin:5px;
margin-top:15px;
border:2px solid blue;
border-radius:8px;
}
h1
{
background-color:;
}
article p
{
font-size: 0.8em;
}
.droit2
{
float:right;
position: relative;
width: 240px;
background-color:blue;
/*background-color:rgb(15,250,15); /* Pour les anciens navigateurs / background-color: rgba(10,250,15,0.8); */
box-shadow: 0px 2px 5px #1c1a19;
border-radius: 5px;
padding:5px;
margin:5px;
margin-top:-115px;
color: white;
font-size: 0.9em;
}
/*TROISIEME PARTIE*/
.gauche3
{
background-color:orange;
color:white;
display: inline-block;
vertical-align: top;
text-align: justify;
width: 600px;
padding:3px;
margin:5px;
margin-top:15px;
border:2px solid blue;
border-radius:8px;
}
.droit3
{
float:right;
position: relative;
width: 260px;
background-color:blue;
/*background-color:rgb(15,250,15); /* Pour les anciens navigateurs / background-color: rgba(10,250,15,0.8); */
box-shadow: 0px 2px 5px #1c1a19;
border-radius: 5px;
padding:5px;
padding-top:5px;
margin:5px;
margin-top:0px;
color: white;
font-size: 0.9em;
}
#fleche_bulle
{
position: absolute;
top: 100px;
left: -12px;
}
#photo_zozor
{
text-align: center;
}
#photo_zozor img
{
border: 1px solid #181818;
}
aside img
{
margin-right: 5px;
}
/* Footer ou pied de page*/
footer
{
background-color:green;
padding-top: 25px;
}
footer p, footer ul
{
font-size: 0.8em;
}
footer h1
{
font-size: 1.1em;
}
#tweet, #mes_photos, #mes_liens
{
display: inline-block;
vertical-align: top;
}
#tweet
{
width: 28%;
}
#mes_photos
{
width: 35%;
}
#mes_liens
{
width: 31%;
}
#mes_photos img
{
border: 1px solid #181818;
margin-right: 2px;
}
#mes_liens ul
{
display: inline-block;
vertical-align: top;
margin-top: 0;
width: 48%;
list-style-image: url('images/fleche.png');
padding-left: 2px;
}
#mes_liens a
{
text-decoration: none;
color: #760001;
}Les logs ne disent rien d'anormal. Je code avec notepad++ qui ne m'affiche pas d'erreur.
Balsakup, même je désactive la mise à en cache du navigateur pendant le développement, lorsque je finis de tester une modification et que j'actualise à nouveau ça revient. Oubien tu as une autre manière de le désactiver pendant longtemps?
Sur chrome, tu ouvres la console > network > disable cache
Tant que la console est ouverte, la cache est désactivé.
Garde la console ouverte tant que tu développes.
Fait des testes en mode invité ou privé, pour voir si les modifs sont prises en compte. Le cache y est supprimé à la fin de la session.
Oui mais, et si je dois travailler sur le même code demain par exemple, comment je fais?.