Articles parallèles

Bonjour je viens de rencontrer un problème dans la confection de mon site , j'aurais aimé mettre 3 articles a gauche ainsi que 3 articles a droite c'est a dire en parallèles mais impossible les articles ce mettent a la suite les un des autres .

Code Html d'un article et de la section :

<div class="section">
        <div class="article">
          <a href="#"><img src="Image/2.png" height="250" width="350"></a>
          <h1><a href="#">BONNES AFFAIRES DANS LA BOUTIQUE EN JEU !</a></h1> 
          <p>Promo de malade de la folie oui oui -50% - 40% - 70% tout sa voila voila </p>
        </div>

(la div section est fermé a la fin des six articles ).

et Voici le code Css de l'article et de la section :

.section{
position: absolute;
width: 800px;
height: 1200px;
margin-left: 25%;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
text-align: center;
background-color : rgba(85,120,0,0.6);
}



.article {
  position: relative;
  text-align: left;
  width: 350px;
  height: 350px;
  margin-left:16px;
  margin-right:0px;
  margin-top:16px;
  margin-bottom:0px;
  background-color : rgba(85,85,85,1);

}

J'ai bien essayé de faire varier les margin mais rien y fait j'ai aussi essayer de crée deux sortes d'article avec article-right et article-left mais je n'ai pas réussit .

j'en profite aussi pour demander que mettre pour que la section ne bouge pas quand je dézoom ?

J'ai aussi deux autre petits problémes :
j'aimerais savoir comment je peux mettre mon Logo devant ma Navbar :

body {
    background: url("Image/Logo2.png" )no-repeat 50% 0%,url("Image/Back1.jpg" ) no-repeat 50% 0%;

.navbar{
position: relative;
width: 1921px;
height: 175px;
margin-left: auto;
margin-right: auto;
margin-top: -20px;
margin-bottom: 100px;
text-align: center;
background-color : rgba(35,35,35,0.5);
position: relative;
}

Et en parlant de cette NavBar j'ai un problème d'affichage je lui ai mis 1920px de large mais il persiste a afficher un trou dans l'écran ( qui disparais quand on dézoom ).
http://img4.hostingpics.net/pics/188015Trou.png
Ça fait beaucoup de question mais j’espère que vous seriez y répondre .

Merci d'avance
Modifié par Falender (27 Oct 2014 - 10:09)

Bonjour Falender,

Je vois plusieurs solutions pour ton problème d'articles. Il te faut modifier le positionnement de tes divs, tu trouveras la réponse dans cet article : http://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html, en utilisant la propriété float par exemple.
Je ne sais pas quels sont les navigateurs que tu veux supporter mais tu peux aussi utiliser la propriété flex : http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html

Pour ton problème de dezoom, il peut s'agir du position absolute (cf premier lien plus haut) sur ta section

Je n'ai pas bien compris ton problème de trou (n'y voir aucun jeu de mot débile ), c'est peut être une histoire de margin mais mettre un width de 1920px n'est pas la bonne solution : les écrans plus petits (et il y en a ) verront une scrollbar horizontale apparaitre. Par défaut, si tu ne définis pas de largeur (width) sur ta div elle prendra celle de son parent, si aucune largeur n'a été définie sur l'un de ses parents, alors ton background s'étendra sur toute la largeur du navigateur.

Je ne connais pas ton code HTML mais pour ton logo, tu peux rajouter une balise img dans un lien (qui renverrai sur la home).

Autre point, tu pourrais utiliser les balises HTML5 (comme section, article, nav,...) pour rendre ton code plus sémantique et les attributs (alt et title) sur tes liens/images pour le rendre plus accessible.

Voilà, j'espère que ça répond à ton problème .

Bonne journée

Merci je vais regarder tous ça , je te tiens au courant .

Merci j'ai réussit a régler tout mes problèmes .

tomInCat a écrit :

Autre point, tu pourrais utiliser les balises HTML5 (comme section, article, nav,...) pour rendre ton code plus sémantique et les attributs (alt et title) sur tes liens/images pour le rendre plus accessible.
Bonne journée

Tu pourrais préciser je n'ai jamais utilisé c'est balises .

Salut Falender,

Comme le suggère tominCat, ton souci de "trou" sera résolu par une déclaration css "margin:0;" sur ton body, comme ceci :

body{
  margin: 0;
}

Sinon, concernant l'utilisation des nouvelles balises sémantiques HTML5, je suis tombé sur un bon site qui explique pas mal leur utilisation : http://www.html5-css3-pense-bete.fr/3-les-balises-s%C3%A9mantiques-html5. Elles permettent de segmenter de manière plus sémantique les sections de la page dans le code. Cependant la référence de documentation en la matière est le MDN.

Quant à l'attribut "alt=", il est obligatoire pour avoir un code valide. Cet attribut de la balise <img> sert à renseigner le texte alternatif, celui qui est affiché si l'image n'est pas trouvée et celui qui est "lu" par les VoiceOver pour les malvoyants. Si l'image a un "sens", il faut s’efforcer de décrire l'image, par contre si l'image est uniquement "décorative", tu peux laisser cet attribut vide, présent mais vide.


Bonne soirée.
Matthieu