Cadre en css

**guillaumedu81** · 25/08/2014, 11h13

Bonjour a tous, je souhaiterais savoir comment faire pour créer une zone colorée sur un site web en haut de page qui prenne toute la place (pas de marges
sur les cotés ni en haut) en CSS. Cette zone doit remplir toute la tête la page donc entre des balises <header>.
Merci d'avance.

**mickan** · 26/08/2014, 17h05

Bonjour,

Code:

header {
background-color: blue;
height: 180px;
margin:0; 
margin-top: 0px;
padding: 0;
}

body {
margin: 0px;

}

**guillaumedu81** · 31/08/2014, 13h32

Merci beaucoup mais maintenant, j'ai le même problème avec le menu horizontal, je voudrais supprimer les marges latérales. Le menu est entre des balises <div id="menu">.
Merci d'avance.

**mickan** · 31/08/2014, 19h08

Code:

#menu{
margin-right: 0;
margin-left: 0;
}

De plus assure toi de regler le padding de la div (ou autre) qui contient le menu si il en a une.

A voir en vidéo sur Futura · Aujourd'hui

**guillaumedu81** · 31/08/2014, 23h26

Merci, j'ai écouté ton conseil et en fait c'était le padding de header qui était à 10px.

**Abdallah-passcal** · 07/09/2014, 20h32

merci bien

c'est parfait de voutre part

**guillaumedu81** · 11/09/2014, 17h48

J'ai encore un problème similaire je veux déplacer ça:
<div id="compte">
<ul>
<li><a href="Inscription.html">Inscri ption</a></li>
<li><a href="Connection.html">Connect ion</a></li>
</ul>
</div>
mais en essayant d'adapter les codes qui m'ont été communiqués plus haut, rien n'a bougé.
PHM.

**mickan** · 11/09/2014, 19h16

Code:

#compte {
 position:absolute;
 top:0;
 right:0;
 width:200px;
 height:200px;
}

Avec les réglages a faire ( ici la div se place en haut a gauche), tu peux remplacer le top par bottom et right par left.
width et height gère la largeur et hauteur de la div. N'hésite pas a mettre une couleur ( color-background) pour bien te positionner, ainsi qu'a réglé les marges (margin) et padding (padding -top -bottom -left -right) et a mettre une bordure (http://css.mammouthland.net/border-css.php).

Si la div compte est a l'intérieur d'une div/section... tu peut utiliser un positionnement relatif.

Voici un lien:
http://deptinfo.cnam.fr/~pons/TOTO/positionement.html

**guillaumedu81** · 11/09/2014, 21h13

Merci. Mais un autre problème est survenu (ça n’arrêtera jamais

) j'ai mis une border-top de 1px sur le menu et voila ce que ça me fait : Nom : prob.PNG
Affichages : 71
Taille : 8,5 Ko

**mickan** · 12/09/2014, 06h36

Tu semble mettre un border sans couleur ni style (il faut toujours mettre un peut de swag)

Ajoute en adaptant le code:

Code:

border-color: red blue green;
  border-style: solid;

Style de bordure:

Code:

none : pas de bordure (par défaut) ;
solid : un trait simple ;
dotted : pointillés ;
dashed : tirets ;
double : bordure double ;
groove : en relief ;
ridge : autre effet relief ;
inset : effet 3D global enfoncé ;
outset : effet 3D global surélevé.

Et si tu souhaite arrondir les coins:

Code:

border-radius: 10px;

**guillaumedu81** · 13/09/2014, 20h54

oui tout ça je connais mais en fait je souhaiterais savoir pourquoi en rajoutant une bordure sa me décale tout mon menu comme ça.

**mickan** · 14/09/2014, 10h08

Essai le code html

Code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" /> 
        <title>Titre</title>
    </head>

    <body>
      <header>
      </header>
      <div id="menu">
        <div class="menu">Menu1</div>
        <div class="menu">Menu2</div>
      </div>
    	<p id="contenu"> 
  			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit porro dolores, delectus quis sit eius iure sunt fuga. Voluptatem itaque adipisci debitis voluptas iure officia quod autem, recusandae quo aut.
		</p>
    	
    </body>
</html>

avec dans le style.css

Code:

header {
background-color: blue;
height: 180px;
margin:0; 
margin-top: 0px;
padding: 0;
}

body {
margin: 0px;

}

#menu {
background-color: green;
height: 20px;
margin:0; 
margin-top: 0px;
padding: 0;
border-top: solid 1px black; 
}

.menu {
background-color: green;
height: 20px;
margin:0; 
margin-top: 0px;
padding: 0;
float:left;
width:150px;

}

**guillaumedu81** · 15/09/2014, 18h34

J'ai essayé de faire des corrections mais je n'ai pas réussi. Peux tu me trouver la ou les fautes stp ?

Code:

CODE CSS

#menu
{
 height: 29px;
 width: 1366px;
 background-color: rgb(108,54,0);
 margin-right: 0;
 margin-left: 0;
 position: absolute;
 top: 130px;

}

#onglets_2
{
    font : bold 16px SF_Archery_Black, arial, serif;
    list-style-type : none; 
    margin-left : 0;
}

#onglets_2 li
{
    padding-right: 70px;
    float : left; /* sert à mettre les onglets en ligne */
    height : 29px; /* à modifier suivant la taille de la police pour centrer le texte dans l'onglet */
    background-color: rgb(108,54,0);
    margin : 0px 2px 0 2px !important;  /* Pour les navigateurs autre que IE */
    margin : 1px 2px 0 2px;  /* Pour IE  */  
}

#onglets_2 a
{
    display : block; /* permet de cliquer partout dans l'onglet pour l'activer */
    color : black;
    text-decoration : none;
    padding : 4px;
}

#onglets_2 a:hover
{
   color: rgb(88,91,98);
}

img.logo{
position: absolute;
left:0px;
top: 0px;
}

html
{
     font-family: 'SF_Archery_Black';
}

@font-face{
     font-family: 'SF_Archery_Black';
	 src: url('SF_Archery_Black.ttf');
}

header 
{
height: 130px;
margin: 0; 
margin-top: 0px;
padding: 0px;
padding-top: 10px;
background-color: rgb(3,84,151);
}


body
{
   margin: 0px;
   padding: 0px;
   outline: 0px;
   background: url("fond.jpg") fixed repeat, top right;
}

#page
{
   background-color: red;
   height: 100%;
   width: 100%;
}

h1
{
   margin-left: 170px;
   margin-bottom: 5px;
}

p
{
  margin-top: 5px;
  margin-left: 170px;
  color: rgb(108,54,0);
}

#compte {
 position:absolute;
 top:0;
 right:0;
 width:200px;
 height:200px;
 
}

#onglets_1
{
 list-style-type: none;
}

#onglets_1 a
{
  text-decoration: none;
  color: black;
}

#onglets_1 li
{
 float: left;
 margin-left: 5px;
}

CODE HTML

<!DOCTYPE html>
<html>
  <head>
     <meta charset="utf-8"/>
     <link rel="stylesheet" href="Code-électron.css"/>
     <title>Code-électron</title>
  </head>	
	
  <header>	
		<h1>Code-électron</h1>
		<p id="devise">La technologie en un clic.</p>
	<div id="compte">
		<ul id="onglets_1">
		   <li><a href="Inscription.html">Inscription</a></li>
		   <li><a href="Connection.html">Connection</a></li>
		</ul>
	</div>
		 
		 <img class="logo" src="capture.png" alt="logo_code_electron" title="Code-électron.com"/>
  </header>
	<body>
	<div id="menu" class="menu">
	 <ul id="onglets_2">
		<li id="active"><a href="Cours.html">Cours</a></li>
	    <li><a href="Banque de schémas.html">Banque de schémas</a></li>
		<li><a href="Forums.html">Forums</a></li>
		<li><a href="Banque de projets.html">Banque de projets</a></li>
		<li><a href="Concours.html">Concours</a></li>
		<li><a href="Boutique.html">Boutique</a></li>
	 </ul>
	</div>
	 
  
	 
</body>
	 

	 
</html>

**mickan** · 15/09/2014, 19h43

Ajoute un

Code:

margin-top: 0px;

dans #onglets_2.

**guillaumedu81** · 15/09/2014, 20h06

A bah oui ça marche merci beaucoup.

**guillaumedu81** · 20/09/2014, 11h48

Bon maintenant, je voudrais maintenant inclure un sous menu a déroulement horizontal mais je n'arrive pas a le faire sans tout dérégler. Comment faire svp ?
Merci d'avance.

**mickan** · 20/09/2014, 18h25

http://fr.openclassrooms.com/informa...roulant-en-css

**guillaumedu81** · 23/09/2014, 21h13

Le problème est que j'ai un menu horizontal et je voudrais dérouler le premier sous menu vers le bas et non a droite de l'onglet comme on le voit dans le cour avec la balise position relative. Donc il me faudrait une balise qui me permette de dérouler verticalement le premier sous menu et le autres sous menus seraient ensuite déroulés vers la droite.
Merci d'avance,

**mickan** · 24/09/2014, 06h26

Essai avec les exemples suivants:
http://www.css-faciles.com/menu-deroulant.php

Cadre en css

Cadre en css

Re : Cadre en css

Re : Cadre en css

Re : Cadre en css

Re : Cadre en css

Re : Cadre en css

Re : Cadre en css

Re : Cadre en css

Re : Cadre en css

Re : Cadre en css

Re : Cadre en css

Re : Cadre en css

Re : Cadre en css

Re : Cadre en css

Re : Cadre en css

Re : Cadre en css

Re : Cadre en css

Re : Cadre en css

Re : Cadre en css

Discussions similaires

cadre lumineux

pharma cadre LMD OU NON ?

Cadre lumineux.

Orsay, cadre de vie

Cadre