Petit souci que je n'arrive pas a décelé help me plz
Résolu
xander18
Messages postés
68
Date d'inscription
Statut
Membre
Dernière intervention
-
xander18 Messages postés 68 Date d'inscription Statut Membre Dernière intervention -
xander18 Messages postés 68 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Voici mon petit problème :
http://img15.hostingpics.net/pics/692472templateerror.jpg
donc vous l'aurez remarqué mes articles lorgne sur mon footer Oo et je n'ai pas trouver d'ou sa venais. J'ai besoin de vos petit yeux plz pour jeté un coup d'oeil a mon code et décelé d'ou cela pourrais provenir merci.
Code HTML :
Code CSS :
Voici mon petit problème :
http://img15.hostingpics.net/pics/692472templateerror.jpg
donc vous l'aurez remarqué mes articles lorgne sur mon footer Oo et je n'ai pas trouver d'ou sa venais. J'ai besoin de vos petit yeux plz pour jeté un coup d'oeil a mon code et décelé d'ou cela pourrais provenir merci.
Code HTML :
<!--home page-->
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>YA creative web design</title>
<!-- CSS LINK -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- font -->
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900italic' rel='stylesheet' type='text/css'>
<!-- script JS -->
</head>
<body>
<div id="structure">
<header class="header"><!-- Début de mon header qui contiendra mon logo + ma navigation -->
<a href="index.php" class="logo">
<img src="img/logo3.png" alt="logo"/>
</a>
<nav>
<a href="index.php" class="active">Home</a>
<a href="portfolio.php" class="">Portfolio</a>
<a href="blog.php" class="">Blog</a>
<a href="skills.php" class="">Skills</a>
<a href="culture.php" class="">Culture</a>
<a href="contact.php" class="">Contact</a>
</nav>
</header>
<div class="stripes"></div><!--stripes (rayure) de séparation-->
<section class="entitle">
<h2>Blog <span>La valeur d'un homme tient dans sa capacité à donner et non dans sa capacité à recevoir. "Albert Einstein"</span></h2>
</section>
<div class="stripes"></div><!--stripes (rayure) de séparation-->
<section class="main-wrap"><!-- Présentation des différents article -->
<div class="articles">
<h2>Titre de l'article - <span>Date de création</span></h2>
<img src="http://wallnen.com/wp-content/uploads/2013/06/Red-Panda-10-HD-Wallpaper.jpg" alt="" class="articles-img">
<p class="description-articles">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in mi id turpis facilisis tristique. Quisque sed lobortis est. Phasellus aliquet sed elit vel porttitor.
</p>
<a href="#">Lire la suite ?</a>
<p class="author"><span>4 commentaires - </span>Xander - <span>Catégorie : </span>Nature <span>Mots clés : </span>ipsum lorem latin</p>
</div>
<div class="articles">
<h2>Titre de l'article - <span>Date de création</span></h2>
<img src="http://wallnen.com/wp-content/uploads/2013/06/Red-Panda-10-HD-Wallpaper.jpg" alt="" class="articles-img">
<p class="description-articles">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in mi id turpis facilisis tristique. Quisque sed lobortis est. Phasellus aliquet sed elit vel porttitor.
</p>
<a href="#">Lire la suite ?</a>
<p class="author"><span>4 commentaires - </span>Xander - <span>Catégorie : </span>Nature <span>Mots clés : </span>ipsum lorem latin</p>
</div>
<div class="articles">
<h2>Titre de l'article - <span>Date de création</span></h2>
<img src="http://wallnen.com/wp-content/uploads/2013/06/Red-Panda-10-HD-Wallpaper.jpg" alt="" class="articles-img">
<p class="description-articles">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in mi id turpis facilisis tristique. Quisque sed lobortis est. Phasellus aliquet sed elit vel porttitor.
</p>
<a href="#">Lire la suite ?</a>
<p class="author"><span>4 commentaires - </span>Xander - <span>Catégorie : </span>Nature <span>Mots clés : </span>ipsum lorem latin</p>
</div>
</section>
<section class="sidebar-wrap"><!-- Sidebar latéral droite -Derniers messages - Catégorie & Archives -->
<div class="lastmessage">
<h4>Derniers Message</h4>
<ul>
<li><a href="#">Xander dans <span>Apprendre le Html5</span></a>
<li><a href="#">Jenny dans <span>Apprendre le Html5</span></a>
<li><a href="#">Peps dans <span>Apprendre le Html5</span></a>
<li><a href="#">Potatoes dans <span>Apprendre le Html5</span></a>
</li>
</ul>
</div>
<div class="categories">
<h4>Catégories</h4>
<ul>
<li><a href="#">Jeux Vidéos</a>
<li><a href="#">Musiques</a>
<li><a href="#">Programmations</a>
<li><a href="#">Socials Networks</a>
</li>
</ul>
</div>
<div class="archives">
<h4>Archives</h4>
<ul>
<li><a href="#">Janvier 2012</a>
<li><a href="#">Juin 2013</a>
<li><a href="#">Février 2014</a>
<li><a href="#">Octobre 2015</a>
</li>
</ul>
</div>
</section>
</div><!-- fin structure -->
<footer class="footer">
<div class="structure">
<div class="wrap">
<div class="about"><!-- petit bloc A propos pour me décrire -->
<h5>A propos de moi</h5>
<div class="traitfooter"></div>
<p><!--
Je m'appelle Al Akkad Youssef, j'ai commencé le développement web et le web design pour développer un
petit site communautaire et c'est rapidement devenu une vraie vocation. J'aime expérimenter, découvrir et apprendre
au fur et à mesure de mes projets pros et perso.-->
</p>
</div>
<!-- derniers tweets -->
<div class="tweets">
<h5>Mes derniers Tweets</h5>
<div class="traitfooter"></div>
<p>A Venir ...</p>
</div>
<!-- réseaux sociaux -->
<div class="social">
<h5>Retrouvez moi sur les réseaux sociaux</h5>
<div class="traitfooter"></div>
<a href="#" title="Twitter"><img src="img/social/twitter.png" height="32" alt="" /></a>
<a href="#" title="Google plus"><img src="img/social/googleplus.png" height="32" alt="" /></a>
<a href="" title="Facebook"><img src="img/social/facebook.png" height="32" alt="" /></a>
<a href="#" title="Linkedin"><img src="img/social/linkedin.png" height="32" alt="" /></a>
</div>
</div><!-- Fin du Wrap -->
</div>
</footer>
<!-- footer --><!--
<div id="footer">Copyright / Created & Designed by Talal Al akkad (Designer - Graphic Designer) & Youssef Al-akkad (Webmaster)</div>
-->
<!--Script JS -->
</body>
</html>
Code CSS :
/* CSS */
/* Constante */
html, body {background: #FFF; font-family: Merriweather,Arial,Helvetica,sans-serif; cursor: url("../img/cursor.png"), pointer; }
#structure { width: 1600px; height: 1200px; background: #FFF; margin-left: auto; margin-right: auto; }
.cb { clear: both; }
/*Header*/
.header { width: 1000px; height: 150px; margin-left: 350px; }
.header nav { margin-left: 150px; margin-top: -80px; }
.header nav a { margin-left: 50px; list-style: none; font-size: 15px; color: #24221f; text-decoration: none; font-weight: 500; }
.header nav a.active{ color: #b2b2b2; }
/*Stripes (Rayure) de séparation*/
.stripes {width: 1000px; height:1px; margin-left: 350px; border-top: solid 1px #e1e5ea; background: #ebeef1;}
/*Slider: Mascotte + En-tête*/
section.slider { height: 267px; position: relative; margin-top: 25px; margin-bottom: 25px; }
section.slider img { position: absolute; width: 400px; margin-left: 350px; }
section.slider div { position: absolute; width: 540px; margin-left: 800px; }
section.slider h2 { font-size: 28px; line-height: 1em; text-align: center; color: #747474; font-weight: 400; }
section.slider p { font-size: 18px; text-align: justify; font-weight: 400; color: #747474; }
section.slider a {text-decoration: none; color: #e89c46; }
/*Section A propos + En cours de formation*/
section.about { width: 500px; height: 150px; float: left; margin-left: 350px; margin-right: 25px; display: inline; }
section.about h2 { font-size: 20px; color: #747474; font-weight: 400;}
section.about p { font-size: 15px; line-height: 1.5em; font-weight: 400; color: #747474; }
section.inprogress { width: 500px; height: 150px; display: inline; }
section.inprogress h2 { font-size: 20px; color: #747474; font-weight: 400; }
section.inprogress img { width: 100px; display: inline; margin-left: 25px; margin-bottom: 25px;}
section.inprogress p { float: left; display: inline; font-weight: 400; color: #747474;}
section.inprogress p span { color: #747474; font-style: italic; line-height: 1.5em; }
/*Mes dernières réalisations*/
section.works { height: auto; margin-left: 350px; }
section.works article { display: inline; float: left; }
section.works h2 { font-size: 20px; color: #747474; font-weight: 400; }
section.works article a img { width: 230px; height: 147px; margin-right: 25px; display: inline; margin-top: 15px;}
section.works article h3 { display: block; font-size: 16px; margin-bottom: 0px; color: #747474; width: 200px; font-weight: 400; }
section.works article span { display: block; font-style: italic; font-size: 14px; color: #747474; width: 200px; }
section.works article aside { display: none; }
/* filtre qui s'applique une foi la souris sur l'image */
section.works article .thumb img { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; }
section.works article .thumb:hover img { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6; }
/*Footer - A propos mini - Twitter ou Article Blog - Réseaux Sociaux*/
.structure { width: 1600px; margin-left: auto; margin-right: auto; }
footer.footer { border-top: solid 5px #e1e5ea; background: #ebeef1; height: 250px; background-color: #61686d; margin-right: -8px; margin-left: -8px; margin-bottom: -8px;}
footer.footer .wrap { width: 1600px; margin-top: 10px; margin-left: 350px; }
footer.footer .wrap div { display: inline; float: left; margin-right: 25px; width: 320px; }
footer.footer h5 { margin-bottom: 10px; color: #FFF; font-weight: 400;}
footer.footer p { color: #FFF; font-size: 12px; }
footer.footer .wrap .social a { margin-left: 10px; margin-right: 25px; }
footer.footer aside { display: none; }
.traitfooter { border-top: solid 0.08em #c2c2c2; margin-bottom: 10px; }
/* entitled */
section.entitle { height: auto; margin-left: 350px; }
section.entitle h2 { font-size: 20px; color: #747474; font-weight: 400; }
section.entitle h2 span { font-size: 12px; font-weight: 400; font-style: italic; }
/* Blog */
/* Articles */
section.main-wrap { float: left; width: 700px; height: auto; margin-left: 350px;}
section.main-wrap .articles { width: 500px; }
section.main-wrap .articles h2 { color: #747474; font-weight: 400; font-size: 20px;}
section.main-wrap .articles-img { width: 500px; border: solid 2px #747474; border-radius: 3px; box-shadow: 1px 1px 12px #555; }
section.main-wrap .description-articles { font-size: 13px; color: #747474; text-align: justify; }
section.main-wrap .articles a { font-size: 18px; text-decoration: none; color: #e89c46; line-height: 0.5em;}
section.main-wrap .author { font-size: 12px; float: right; color: #24221f; }
section.main-wrap .author span { font-style: italic; color: #747474;}
/* Sidebar Droite */
/* Derniers message *//* Catégories *//* Archives */
section.sidebar-wrap { float: right; width: 300px; height: auto; margin-right: 250px; }
section.sidebar-wrap h4 { color: #747474; font-weight: 600; }
section.sidebar-wrap ul { display: block; list-style: none;}
section.sidebar-wrap ul li { list-style-type: none; }
section.sidebar-wrap ul li:before { content: "- "; }
section.sidebar-wrap ul li a { text-decoration: none; color: #747474; font-size: 12px; }
section.sidebar-wrap ul li a span { color: #24221f; font-style: italic; }
A voir également:
- Petit souci que je n'arrive pas a décelé help me plz
- Trier du plus petit au plus grand excel - Guide
- Petit 3 ✓ - Forum Word
- Petit 2 ✓ - Forum Windows
- Petit 9 - Forum Mail
- Comment imprimer une photo en petit ✓ - Forum Photo numérique
3 réponses
Bonjour,
Soigne ton orthographe déjà, ça donnera + envie de lire et répondre ;-)
Mets ceci après tes <div class="articles"> (soit dit en passant, que tu peux transformer en <article> simplement) :
<div class="clear"></div>
en css:
.clear {
clear:both;
}
Soigne ton orthographe déjà, ça donnera + envie de lire et répondre ;-)
Mets ceci après tes <div class="articles"> (soit dit en passant, que tu peux transformer en <article> simplement) :
<div class="clear"></div>
en css:
.clear {
clear:both;
}
C'est pas faux; oui désolé pour l'orthographe je suis tellement concentré dans mon travail que j'ai oublier de me relire.
Et oui le pire c'est que j'aurais pue utilisé <article> comme j'ai fait sur mes autres pages XD et le pire c'est que j'avais aussi créer ma class clear both.
Malheureusement, même après un clear sa ne fixe pas le soucis
Et oui le pire c'est que j'aurais pue utilisé <article> comme j'ai fait sur mes autres pages XD et le pire c'est que j'avais aussi créer ma class clear both.
Malheureusement, même après un clear sa ne fixe pas le soucis
