Problème positionnement <header> <body>

11 octobre 2017 à 18:09:43

Bonsoir, j'aurais besoin d'aide j'ai un problème avec la structure de ma page, lorsque je fais afficher la parti de mon header( en bleu) et le body(en vert) , je vois qu'ils sont tout les deux l'un dans l'autre

et je voudrais séparer les deux parties, car lorsque j'essaie de faire monter vers le haut des éléments du body, les éléments du body déplace également les élément de mon header ce qui pose problème voici mon

HTML

<!DOCTYPE "html> 
 

  
  

<head>
<title>AutoShopReunion.re </title>
         
<link href="monstyle.css" rel="stylesheet" media="all" type="text/css"></A> 


<meta charset="utf-8">


</head> 






	



<body>



<header> 

<div class="box">

<IMG width= 30 height=30 SRC="phone.png"></IMG>
<p>XXXXXXXX</p>
</div>


<div class="box2">

<A HREF="file:///C:/Users/ludov/Desktop/ASR/Monsite/FCaccueil.html"><IMG class="logo"  heigh=119 width=384  SRC="asr.jpg"></IMG></A>
<div id="texte1">  &nbsp &nbsp &nbsp &nbsp &nbsp   Votre spÃ©caliste de piÃ¨ces dÃ©tachÃ©es automobile </div>

</div>

<div class="box2point2">

<IMG class="home"  width=60 height=50 SRC="home.png"></IMG>



</div>

</header>







<div class="box3" >


      <div class="milieu"><font size="5"><font face="Copperplate Gothic Light">IDENTIFIEZ VOTRE VÃ‰HICULE</font></div> 

<div class="milieu1"><font size="3"><font face="arial"><center>afin de trouver la liste des piÃ¨ces compatibles</font>
</div>
</div>







 <div id="menu1">IMMATRICULATION</div>
    <div id="menu2">DEMANDE DE DEVIS</div>












</body>

                     </html>

CSS

body
{ border: 2px solid green;
    margin:0px; 
	padding: 0px;
	font-size: 16px;
	font-family: impact; 
    color: black;
}

header {
	
     border: 2px solid  blue ;
	
}
#menu1
{
	position: absolute;
	top:400px;
	left:180px;
	border: 2px solid #FF4500;
	width: 17.8%;
	height: 24.2%;
padding-right:20px;
 padding-left:20px ;
 background-color: black ;
color: white;
 }
#menu2 {
position: absolute;
	top:400px;
	left:510px;
	border: 2px solid #FF4500;
	width: 17.8%;
	height: 24.2%;
	
padding-right:20px;
 padding-left:20px ;
 background-color: black ;
color: white;
}



	



.box{
	position: relative ;
	margin: 0px;
	 height:5.5%;
	 border: 2px solid #FF4500;
	 margin-left: 180px; 
	 margin-right: 180px ;
     padding-left: 50px;
	 overflow:hidden;
}
p { 
position: absolute;
color: orange ;
padding-left: 45px;
padding-top: -45px;
font-size:22 ;
top: -20px;
}



	.box2 
{
	position: relative;
	margin: auto;
     width: 25% ;
	 height: 22% ;
	 border: 2px solid black;
	 margin-left: 180px; 
	
	 overflow: hidden ;

}

#texte1
{   position: relative ;
     margin: 0 auto;
	 width: 102%;
	 border: 1px solid #FF4500;
	 color: #FF4500;
	 background-color:black;
	 float: left ;
	
}

.box3
{
position: relative ;
margin: -85px;
height:20%;
margin-left: 180px; 
margin-right: 180px ;
padding-left: 50px;
text-align: center;
color: black;
overflow:hidden;

}
.milieu1{
	
	margin: 0px;
    margin-right:50px;
}

.milieu {
    
    margin: 0 -180 0 -500px;
    padding: 0;
	padding-left: 270px;
    text-align: center;
}

.milieu:after {
    display: inline-block;
    margin: 0 0 8px 30px;
    height: 0.8%;
    content: " ";
    text-shadow: none;
    background-color: #FF4500;
    width:27.5%;
	
}
.milieu:before {
	
    display: inline-block;
    margin: 0 30px 8px 0;
    height: 0.8%;
    content: " ";
    text-shadow: none;
    background-color: #FF4500;
    width:27.5%;
	
	
	
}


.box2point2 {
	
	margin: auto;
	position: relative ;
		margin: auto;
	top: -150px;
	 height:20%;
	 width:47.3% ;
	 border: 2px solid #FF4500;
	 margin-left: 575px; 
	 margin-right: 180px ;
 
	
}

Passer une bonne soirée et merci d'avance :)) .

-
Edité par FarCry 11 octobre 2017 à 18:49:30

Skull-dragon

11 octobre 2017 à 19:04:06

Salut

bon pas mal d'erreur avec l'usage de tes balises img link auto fermantes

évite les IMG en majuscules perso moi j'aime pas

j'ai corrigé vite fait ton html et ton css (pas tout attention) il y à des choses qui ne servent à rien

le Doctype = pas de guillemet dedans

ensuite pas d'ouverture de balise html

usage de style incorrect dans ton html (évite tu as une page css c'est fait pour)

ton html j'ai ajouté deux autres box après tu fais comme tu veux

<!DOCTYPE html>
<html>  
   <head>
      <title>AutoShopReunion.re </title>
          <link href="monstyle.css" rel="stylesheet" media="all" type="text/css" />
              <meta charset="utf-8" />
   </head>
 
<body>
   
   <header>
   
      <div class="box">
         <img width= 30 height=30 src="phone.png" />
         <p>XXXXXXXX</p>
      </div>
 
 
      <div class="box2">
         <a href="file:///C:/Users/ludov/Desktop/ASR/Monsite/FCaccueil.html"><img class="logo"  heigh=119 width=384  SRC="asr.jpg" /></a>
         <div id="texte1"> Votre spéaliste de pièces détachées automobile </div>
      </div>
 
      <div class="box2point2">
        <img class="home"  width=60 height=50 src="home.png" />
      </div>
 
   </header>
 
      <div class="box3" >
         <div class="milieu" >IDENTIFIEZ VOTRE VÉHICULE</div>
         <div class="milieu1">afin de trouver la liste des pièces compatibles</div>
      </div>
 
     <section>
      <div id="menu1">IMMATRICULATION</div>
      <div id="menu2">DEMANDE DE DEVIS</div>
	  <div id="menu3">DEMANDE DE DEVIS</div>
	  <div id="menu4">DEMANDE DE DEVIS</div>
    </section>
 
</body>
</html>

la partie du css que j'ai corrigée un peu et optimisée

section
{
    border: 2px solid #FF4500;
	display:flex;
	justify-content:space-between;
	padding:5px;
	text-align:center;
 }
#menu1, #menu2, #menu3, #menu4
{
    border: 2px solid #FF4500;
    width: 17.8%;
    height: 24.2%;
    background-color: black ;
    color: white;
 }

attention moi aussi je débute je n'ai aucune prétention de dire que c'est parfait

-
Edité par Skull-dragon 11 octobre 2017 à 19:07:16

FarCry

11 octobre 2017 à 20:06:51

D'accord je note tes conseils, merci beaucoup de ton aide! c'est super sympa de ta part . :))