Partage

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 LudovicTaristas 11 octobre 2017 à 18:49:30

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

11 octobre 2017 à 20:06:51

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

Problème positionnement <header> <body>

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown