Bonjour, 

J'aimerais enlever ci dessous la marge en orange clair superflu car elle décale plusieurs éléments de la page mais je ne vois pas comment faire :

En image :

Mon CSS :

 .bar {
    
        font: 13px 'Lucida sans', Arial, Helvetica;
        color: #eee;
        text-align: center;
        width: 600px;
        margin: auto auto;
        padding: auto ;
        border-radius: 8px;

    }
    
    a {
        color: #ccc;
    }
    
    /*-------------------------------------*/
    
    .cf:before, .cf:after{
      content:"";
      display:table;
    }
    
    .cf:after{
      clear:both;
    }

    .cf{
      zoom:1;
    }

    /*-------------------------------------*/	
    
    .form-wrapper {
        width: 450px;
        height: 100px;
        padding: 15px;
        margin: 50px auto 50px auto;
        background: #444;
        background: rgba(0,0,0,.2);
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        -moz-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
        box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
    }
    
    .form-wrapper input {
        width: 330px;
        height: 20px;
        padding: 10px 5px;
        float: left;    
        font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
        border: 0;
        background: #eee;
        -moz-border-radius: 3px 0 0 3px;
        -webkit-border-radius: 3px 0 0 3px;
        border-radius: 3px 0 0 3px;     
        -webkit-box-shadow: 0 10px 6px -6px #777;
	    -moz-box-shadow: 0 10px 6px -6px #777;
	    box-shadow: 0 10px 6px -6px #777;
    }
    
    .form-wrapper input:focus {
        outline: 0;
        background: #fff;
        -moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
        -webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
        box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
          -webkit-box-shadow: 0 10px 6px -6px #777;
	    -moz-box-shadow: 0 10px 6px -6px #777;
	    box-shadow: 0 10px 6px -6px #777;
    }
    
    .form-wrapper input::-webkit-input-placeholder {
       color: #999;
       font-weight: normal;
       font-style: italic;
    }
    
    .form-wrapper input:-moz-placeholder {
        color: #999;
        font-weight: normal;
        font-style: italic;
    }
    
    .form-wrapper input:-ms-input-placeholder {
        color: #999;
        font-weight: normal;
        font-style: italic;
    }    
    
    .form-wrapper button {
		overflow: visible;
        position: relative;
        float: right;
        border: 0;
        padding: 0;
        cursor: pointer;
        height: 40px;
        width: 110px;
        font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
        color: #fff;
        text-transform: uppercase;
        background: #d83c3c;
        -moz-border-radius: 0 3px 3px 0;
        -webkit-border-radius: 0 3px 3px 0;
        border-radius: 0 3px 3px 0;      
        text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
        -webkit-box-shadow: 0 10px 6px -6px #777;
	    -moz-box-shadow: 0 10px 6px -6px #777;
	    box-shadow: 0 10px 6px -6px #777;
    }   
      
    .form-wrapper button:hover{		
        background: #e54040;
        -webkit-box-shadow: 0 10px 6px -6px #777;
	    -moz-box-shadow: 0 10px 6px -6px #777;
	    box-shadow: 0 10px 6px -6px #777;
    }	
      
    .form-wrapper button:active,
    .form-wrapper button:focus{   
        background: #c42f2f;    
    }
    
    .form-wrapper button:before {
        content: '';
        position: absolute;
        border-width: 8px 8px 8px 0;
        border-style: solid solid solid none;
        border-color: transparent #d83c3c transparent;
        top: 12px;
        left: -6px;
    }
    
    .form-wrapper button:hover:before{
        border-right-color: #e54040;
    }
    
    .form-wrapper button:focus:before{
        border-right-color: #c42f2f;
    }    
    
    .form-wrapper button::-moz-focus-inner {
        border: 0;
        padding: 0;
    }
.byline p{
  text-align:center;
  color:#c6c6c6;
  font: bold 18px Arial, Helvetica, Sans-serif;
  text-shadow: 0 2px 3px rgba(0,0,0,0.1);
}

.byline p a{
  color:#d83c3c;
  text-decoration:none;
}

-
Edité par PierreTanguy4 16 juin 2018 à 16:16:33

Bonjour,

Ne penses-tu pas que le forum html/css serait plus adapté ?

A+

-
Edité par monkey3d 16 juin 2018 à 16:18:25

Si erreur de ma part ^^'

Quelqu'un peut déplacer le topic ?

-
Edité par PierreTanguy4 16 juin 2018 à 16:29:25

Bonjour,

Mauvais forum

Le sujet est déplacé dans le forum approprié : HTML/CSS

Quel est le html correspondant?

-
Edité par AbcAbc6 16 juin 2018 à 16:33:46

Code html de la barre de recherche :

 <div class="bar">
            <form method="get" class="form-wrapper cf" action="">
               <input type="text" name="search" id="search_box" class='search_box' placeholder="Recherche ici..." required/>
               
                <button type="submit" class="search_button">Go !</button>
            </form>
            <br  />
            <div id="searchword">
            Résultats pour : <b><span class="searchword" ></span></b></div>
            
            <ol id="insert_search" class="update" style="color:purple;">
            
            </ol>

utiliser br pour un saut de ligne est une mauvaise pratique,
un <ol> doit se trouver dans un <ul>,
pas besoin de prefixer border-radius et box shadow,
tu peux alléger ton code en regroupant les propriétés CSS,
et pour ton probleme de marges peut être :

.bar {
     
        font: 13px 'Lucida sans', Arial, Helvetica;
        color: #eee;
        text-align: center;
        width: 600px;
        margin: auto 0; /**** Changment des marges ***/
        padding: auto ;
        border-radius: 8px;
 
    }

Oui en fait j'aurais voulu savoir comment sont écrit dans le html les éléments que l'on voit sur la gauche et sur la droite du formulaire;

Tu n'as pas une page en ligne pour voir le comportement?

Les marges de la class .bar sont créer par la ligne 7 de ta css. tu centre la div qui contient le formulaire, mais pourquoi ne pas placer cette div dans la partie centrée de ton document.

PS L8 de ta CSS la valeur auto pour padding est erronée.

PS2 pour un formulaire de recherche, il existe l'input type search

Édit : @Zoki_Marciano décidément, c'est la 2 iem fois que je poste à quelque seconde après toi. lol.

>> un <ol> doit se trouver dans un <ul>,

non ce sont des listes, il faut des <li> comme premier enfant, mais c'est deux balises de liste, l'une ordonnée et l'autre non ordonnée.

-
Edité par AbcAbc6 16 juin 2018 à 17:14:03

Zoki_Marciano en mettant le deuxieme auto a 0 ca décale tout

<div id="left-menu">
<div class="menu-title">Menu rapide</div>
        <div class="smenu">
        	<div class="smenu-item">
                    <div class="smenu-img">
                    	<a href="news/news.php">
                    	<img src="images/icons/new.png" width="45" height="45"  border="0" alt="icon" title="News" />
                        </a>
                    </div>
                    News
            </div>
        	<div class="smenu-item">
                    <div class="smenu-img">
                    	<a href="catalogue/catalogue.php">
                    	<img src="images/icons/GPU.png" width="45" height="45"  border="0" alt="icon" title="Notre catalogue" />
                    	</a>
                    </div>
                    Catalogue
            </div>
            <div class="smenu-item">
            	<div class="smenu-img">
	            <a href="catalogue/occasions.php">
                    <img src="images/icons/defrag.png" width="45" height="45"  border="0" alt="icon" title="Devis" />
                </a>
                </div>
                Occasions
            </div>
        
        <div style="clear:both; height:7px;"></div>
        
        	<div class="smenu-item">
            	<div class="smenu-img">
                	<a href="configs/configs.php">
                <img src="images/icons/Properties.png" width="45" height="45"  border="0" alt="icon" title="Configurations" />
                	</a>
                </div>
                Configs
            </div>
        	<div class="smenu-item">
            	<div class="smenu-img">
	            <a href="configs/devis.php">
                    <img src="images/icons/Shopping cart.png" width="45" height="45"  border="0" alt="icon" title="Devis" />
                </a>
                </div>
                Devis
            </div>
            
            <div class="smenu-item">
            	<div class="smenu-img">
                    <a href="services.php">
                    <img src="images/icons/tinkertool.png" width="45" height="45"  border="0" alt="icon" title="Nos services" />
                    </a>
                </div>
                Prestations Dépannages
            </div>
            <div style="clear:both; height:15px;"></div>
        </div>
        
        <div class="menu-title">Catalogue</div>
        <?php echo $showMenu; ?>
        
    </div>

#left-menu .menu-title { background:url(images/layout/menu_bg.png) no-repeat; height:32px; line-height:20px; font-family:Arial; font-size:20px; text-align:center; color:#FFF;}
#left-menu ul {margin:0px; padding:0px; }
#left-menu li {list-style-type:none; margin-left:10px;}
#left-menu ul ul {list-style-type:none; margin-left:7px;}
#left-menu .smenu {margin-top:10px; padding-left:7px;}
#left-menu .smenu-item {width:50px; text-align:center; font-size:9px; float:left; font-family:Arial, Helvetica, sans-serif; font-weight:bold;}
#left-menu .smenu-img { margin:auto; cursor:pointer;}
#left-menu a,  a:hover, a:active, a:visited {text-decoration:none; color:#000; cursor:pointer;}-

-
Edité par PierreTanguy4 16 juin 2018 à 17:35:49

>> abcabc6 pourquoi mon padding n'est pas bon ?

remarque du validateur CSS

et en consultant la doc du padding, les valeurs possible sont une longueur ou un pourcentage mais pas auto;

Si "Catalogue" et "Menu rapide" sont des titres, tu dois utilisé les balises de titres h1 à h6.

L'attribut border pour les images est obsolètes, si tu veux un style c'est en CSS que cela ce passe.

Pour l'attribut alt il serait mieux d'indiquer plus d'information, c'est l’icône qui fait quelle action. C'est utile pour les personnes qui n'affiche pas les images, mais aussi pour une question de référencement.

 Tu utilises <div style="clear:both; height:15px;"></div>, c'est qu'il y a un flottant qui devrais ce trouver sur  #left-menu mais je ne le vois pas. 

Je pense que tu t'y prend mal pour positionner tes éléments. si, comme je le pense #left-menu flotte, il sort du flux courant, ce qui veux dire que le contenu qui doit ce placer au centre, est écrit  après  #left-menu  ET doit posséder une marge gauche de la largeur de #left-menu.

Mais actuellement il y à plus simple avec les flexbox. Si tu ne sais pas ce que c'est, regarde dans le cours HTML/CSS de ce site.

Tu crées une <div> qui serra le conteneur de trois autres <div>, ce container sera en flex. Ses enfants direct deviendront automatiquement des flexitem aligné de gauche à droite. Le premier enfant contiendra le menu de gauche, le deuxième ton formulaire au centre et le troisième la partie de droite. Il faudra jouer sur la propriété flex qui détermine la possibilité qu'on les flexitem  de rétrécir, de s'agrandir ou d'avoir une taille.  

A toi de voir ce qu'il te convient le mieux.

-
Edité par AbcAbc6 16 juin 2018 à 18:14:50