Connexion | Inscription | FAQ
Anonymous

un espace entrer deux DIV

+ Publier une réponse

2 messages Page 1 sur 1


un espace entrer deux DIV

par scoubi » Jeu Déc 22, 2011 9:35 am

Bonjour à tous,

je suis nouveau sur ce forum et je voulais avant de vous demander de l'aide
me présenter un peu .
Je suis en région parisienne est débutant en html, j'ai commencéil y a plus de dix ans en html
et à ce jour j'essaies d'évoluer en abordant le CSS
merci a tous ceux qui pouront de près ou de loin m'apporter un peu d'aide

J'ai deux DIV l'un au dessus de l'autre qui ont un espacement que je souhaiterais réduire
voir supprimer.
voici le code de ma page

Code: Tout sélectionner
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" CONTENT="">
<meta HTTP-EQUIV="IMAGETOOLBAR" content="no" SCROLLING="yes" >
<meta name="keywords" CONTENT="">
<!-- DEBUT DU SCRIPT -->
<script type="text/javascript">

function yaunclick(){   
   alert('reproduction interdite');
   }
function noclick(scx){
   if (navigator.appName == "Netscape" && scx.which == 3){
      yaunclick();
      return false;
   }

   if (navigator.appVersion.indexOf("MSIE") != -1 && event.button == 2){
      yaunclick();
      return false;
   }
}
document.onmousedown = noclick;

function refresh()
  {
  document.location.reload();
                return false;
  }
document.oncontextmenu = refresh;

<!--
function removeelements(){
  var remove_el=document.all.remove
  if (remove_el!='' && remove_el.length==null){
    remove_el.style.display='none'
  }else{
    for (i=0;i<remove_el.length;i++){
      remove_el[i].style.display='none';
    }
  }
  document.bgColor="white";
  document.body.style.background='';
}

function revertback(){
  setTimeout("window.location.reload()",50);
}
window.onbeforeprint=removeelements;
window.onafterprint=revertback;

// -->
</script>
<!-- FIN DU SCRIPT -->
<style type="text/css">
   body {
      

                background: #FFFFFF;
      color: #000000;
      font-family: Verdana;
   }
   h1 {
      font-size:1.8em;
   }
   #entete {
      text-align: center;
      width: 600px;
      background: #D8BFD8;
      border-radius: 20px;
      padding: 20px;
      margin: 90px auto;
      box-shadow: 0 0 20px #222;
   }
   #corps {
      width: 600px;
      background: #FFFACD;
      border-radius: 20px;
      padding: 20px;
      margin: 85px ;
      box-shadow: 0 0 20px #222;
   }

   p {
      text-align: left;
   }
</style>
</head>

<body>
<div style="float:left;" id="centrage">
    <div id="entete">
       <FONT face="Garamond" size="3"><h1></h1></FONT>
    </div>
    <div id="corps"><FONT face="Verdana" size="2">
       <p></p><br/>
       <div style="text-align:center"><img src="image/image.jpg"  width="197" height="300" border="0" ></DIV> <BR>
        </P></FONT>
    <BR><BR><BR>
                       <div style="text-align:center"><FONT face="Verdana" size="1"></DIV></FONT>
    </div>
</body>
</html>


merci par avance pour un peu d'aide

amicalement scoubi
Avatar de l’utilisateur

scoubi

  • Messages: 1
  • Inscrit le: Jeu Déc 22, 2011 9:26 am

Re: un espace entrer deux DIV

par rapa » Ven Déc 23, 2011 12:19 pm

ton code html est un peu mal structuré et je te conseille de revoir le toturiel html/css.
coté html:
-le vrai probleme c'est qu'il y a des balises que tu n'as pas fermé
-en html,generalement on a 2 types d'element:les elements de type inline et ceux de type block

coté css:
-le vrai probleme ------> c'est margin:
quand tu ecris margin tout court exemple margin:80px,cela signifie margin-left:80px margin-right:80px bottom et top egalement
va sur le tuto css et lis bien la partie sur le modele des boites (padding,margin,border)
-evite d'employer </br>

voici un bout de code largement simple mais bien structuré, essaye le
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>
<title>deux div</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="robots" content="all" />
<link rel="stylesheet" type="text/css" href="" title="default" media="screen" />
<style>
#container{width:700px;margin:auto}
#div1{width:500px;height:200px;border:1px solid #ff0000;text-align:center;}
#div2{width:500px;height:200px;border:1px solid #0000ff;text-align:center}

</style>
</head>
<body>
<div id="container">
<!--div1 bordure rouge-->
<div id="div1">
<p>contenu de ton div 1 (balise p ici n'est qu'un exemple)</p>
</div>
<!--div2 bordure bleu-->
<div id="div2">
<p>contenu de ton div 2</p>
</div>
</div>
</body>
</html>
Avatar de l’utilisateur

rapa

  • Messages: 14
  • Inscrit le: Mer Août 10, 2011 1:14 pm


+ Publier une réponse

Page 1 sur 1