Partage

Espace entre 2 <div>

19 juin 2006 à 14:37:26

Hello

Quelqu'un saurait-il pourquoi il y a un espace ici ?
A priori tous les margin sont à 0 donc je capte pas...
Je vous mets pas le code... si?

kindaichi

19 juin 2006 à 14:52:47

explique moi de quelle espace tu parle ?

MadX

19 juin 2006 à 14:55:28

Haaaaaan c'est quoi ces tableaux tout moches ?

C'est très mal tout ça

Bon sinon, pour régler ton problème, essaye de mettre un margin-top: 0px; pour la balise h1, c'est elle qui fait décaler je pense

EDIT: Non, en fait ça marche pas. Mais déjà, recode ça proprement avec des <div>, on verra après

tofito

19 juin 2006 à 15:04:16

Je parle de l'espace d'environ 5 pixels entre l'entête et le reste en dessous...

A la base j'aurais voulu le faire plus "proprement" sans tableaux mais malheureusement c'est le seul moyen que j'ai trouvé pour que la bordure à droite (le bloc que j'ai appelé "droite") fasse la même taille verticalement dans tous les cas que le contenu (le bloc que j'ai appelé "corps")...

kindaichi

19 juin 2006 à 15:17:40

le code stp

tofito

19 juin 2006 à 15:24:43

A la demande de big_dadi_fat je mets le code... Je pensais pas que c'était nécessaire parce que j'ai donné l'url de la page et donc le code source...
Ca va prendre une tartine mais bon, tu l'as cherché big_dadi_fat

<!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1–strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design3.css" />

<script language='javascript' src='http://127.0.0.1:1025/js.cgi?pa&r=22496'></script>

</head>

<body>

<div id="publicite">
   <p>dasfadsf</p>
   <p>dasfadsf</p>
   <p>dasfadsf</p>
</div>

<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" id="en_tete" colspan="3">
<img src="images/en_tete/en_tete.jpg" />
</td>
</tr>
<tr>

<td valign="top" id="menu4">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" valign="top" id="menu1"> </td>
</tr>
<tr>
<td id="menu2a"> </td>
<td id="menu2b">
   <ul>
<a href="page1.html">Lien</a><br />
<a href="page2.html">Lien</a><br />
<a href="page3.html">Lien</a><br />
</ul>
   </td>
<td id="menu2c"> </td>
</tr>
<tr>
<td colspan="3" valign="top" id="menu3"> </td>
</tr>
</table>

</td>

<td valign="top" id="corps">
<h1>Mon super site</h1>

<p>
Bienvenue sur mon super site !<br />
Vous allez adorer ici‚ c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :–D
</p>

<h2>A qui s'adresse ce site ?</h2>
<p>
A tout le monde ! Si je commence à privilégier certaines personnes‚ on va m'accuser de discrimination ;o)<br />
Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken‚ ce site est fait pour vous ! Si si !
</p>

<h2>L'auteur</h2>
<p>
L'auteur du site ? Bah‚ c'est moi‚ quelle question :–p<br />
Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs‚ de les rendre accros à mon site‚ puis de les mettre en mon pouvoir.<br />
Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait‚ j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
</p>
</td>

<td valign="top" id="droite">

</td>

</tr>
</table>

<div id="pied_de_page">
<p>Copyright "Tout pourri Corporation" 2005‚ tous droits réservés</p>
</div>

</body>
</html>

body
{
width: 1000px;
margin: auto;
margin: 0px;
margin-bottom: 20px;
padding: 0px;
color: #000000;
background-color: #ffffff;
/*background-image: url("images/entete.jpg");*/
}

#publicite
{
float: right;
width: 100px;
color: #B3B3B3;
background-color: #626262;
}

#en_tete
{
width: 800px;
height: 149px;
margin: 0px;
}

#menu1
{
width: 205px;
height: 5px;
background-image: url("images/menu_agences/01.jpg");
background-repeat: no-repeat;
}

#menu2a
{
width: 32px;
background-image: url("images/menu_agences/02-gauche.jpg");
background-repeat: repeat-y;
}

#menu2b
{
width: 144px;
background-image: url("images/menu_agences/02-milieu.jpg");
background-repeat: repeat-y;
}

#menu2c
{
width: 29px;
background-image: url("images/menu_agences/02-droite.jpg");
background-repeat: repeat-y;
}

#menu3
{
width: 205px;
height: 40px;
background-image: url("images/menu_agences/03.jpg");
background-repeat: no-repeat;
}

#menu4
{
width: 205px;
background-image: url("images/menu_agences/04.jpg");
background-repeat: repeat-y;
}

#corps
{
width: 553px;
margin: 0px;
padding: 0px;
/*color: #B3B3B3;*/
background-image: url("images/agences/fonds.jpg");
}

#droite
{
width: 42px;
background-image: url("images/agences/droite.jpg");
background-repeat: repeat-y;
}

#pied_de_page
{
width: 800px;
padding: 5px;

text-align: center;

color: #B3B3B3;
background-color: #626262;

border: 2px solid black;
}

kindaichi

19 juin 2006 à 15:59:31

je ne vois pas l'interet d'utiliser tout ces tableau ;
utilise plutôt des <div> </div> à la place , comme dans le tuto de matieo

je suis sur que tu n'auras aucun prob

utilise des div et reposte ton code ici ;

tofito

21 juin 2006 à 16:08:44

Bon voilà...
Comme demandé j'ai viré les tableaux et mis des div à la place...
Version précédente avec tableaux et design presque parfait si ce n'est l'espace de 5 pixels qui fait toujours ch...: ici
Nouvelle version avec code plus propre mais résultat plus éloigné de celui attendu: ici

L'idéal serait donc de trouver le moyen d'avoir un résultat semblable à la version précédente tout en ayant un code plus propre... Si vous voyez comment faire et pouvez me donner une piste, ça serait super cool...

Je mets ci-dessous le code de la nouvelle version:

<!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1–strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design.css" />
</head>

<body>

<div id="publicite">
   <p>dasfadsf</p>
   <p>dasfadsf</p>
   <p>dasfadsf</p>
</div>

<div id="en_tete">
<?php
// On inclue le haut de la page
include("en_tete.inc.php");
?>
</div>

<div id="menu">
<div class="element_menu1">
</div>
<div class="element_menu2">
   <ul>
<a href="page1.html">Lien</a><br />
<a href="page2.html">Lien</a><br />
<a href="page3.html">Lien</a><br />
</ul>
</div>
<div class="element_menu3">
</div>
<div class="element_menu4">
</div>
</div>

<div id="corps">
<h1>Mon super site</h1>

<p>
Bienvenue sur mon super site !<br />
Vous allez adorer ici‚ c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :–D
</p>

<h2>A qui s'adresse ce site ?</h2>
<p>
A tout le monde ! Si je commence à privilégier certaines personnes‚ on va m'accuser de discrimination ;o)<br />
Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken‚ ce site est fait pour vous ! Si si !
</p>

<h2>L'auteur</h2>
<p>
L'auteur du site ? Bah‚ c'est moi‚ quelle question :–p<br />
Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs‚ de les rendre accros à mon site‚ puis de les mettre en mon pouvoir.<br />
Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait‚ j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
</p>
</div>

<div id="pied_de_page">
<p>Copyright "Tout pourri Corporation" 2005‚ tous droits réservés</p>
</div>

</body>
</html>

body
{
width: 1000px;
margin: auto;
margin: 0px;
/*margin-bottom: 20px;*/
padding: 0px;
color: #000000;
background-color: #ffffff;
}

#publicite
{
float: right;
width: 100px;
color: #B3B3B3;
background-color: #626262;
}

#en_tete
{
width: 800px;
height: 149px;
margin: 0px;
}

#menu
{
float: left;
width: 205px;
margin: 0px;
}

.element_menu1
{
height: 5px;
background-image: url("images/menu_agences/01.jpg");
background-repeat: no-repeat;
}

.element_menu2
{
background-image: url("images/menu_agences/02.jpg");
background-repeat: repeat-y;
padding: 0px;
padding-left: 32px;
padding-right: 29px;
}

.element_menu3
{
height: 40px;
background-image: url("images/menu_agences/03.jpg");
background-repeat: no-repeat;
}

.element_menu4
{
background-image: url("images/menu_agences/04.jpg");
background-repeat: repeat-y;
}

#corps
{
width: 595px;
margin: 0px;
margin-left: 205px;
padding: 0px;
padding-right: 42px;
background-image: url("images/agences/fonds2.jpg");
background-repeat: repeat-y;
}

#pied_de_page
{
width: 800px;
padding: 5px;

text-align: center;

color: #B3B3B3;
background-color: #626262;

border: 2px solid black;
}

mannia

21 juin 2006 à 16:27:37

Salut une tite question qui me trote dans la tete pourquoi ce compliquer la vie avec padding margin left margin top etc etc ....

Pour placer des block utiliser position abolute relatif ou autre selon le choix ensuite meté
top:;tant de px
left :; tant de px
exemple

voila pour le html ensuite le css

#header{
position:absolute;
top:10px;
left:10px;
height:200px;
width:800px;
border: 1px black solid;
}

#menu_1{
height:500px;
width:250px;
position:absolute;
top:230px;
left:10px;
border: 1px black solid;
}
#menu_2{
height:500px;
width:250px;
position:absolute;
top:230px;
left:800px;
border: 1px black solid;
}
#corp{
height:500px;
width:500px;
position:absolute;
top:230px;
left:230px;
border: 1px black solid;
}
#pied_de_page{}

si je me suit pas tromper tout en proprement aligner !!

La solution a ton problème :refaire tout le codage a ma façon.

Oui je sait sa fait prétenituex de faire sa mais je t'assure que le resultat est bien mieu !!

tofito

21 juin 2006 à 18:16:49

Hello

J'ai recodé suivant les conseils de mannia...
Le résultat de cette 3ème version est visible ici.

C'est pas mal, ça résoud certains problèmes quand on connaît les positions absolues... par contre ça entraîne de nouveaux problèmes quand on veut placer un bloc collé sous un autre dont on ne connaît pas la hauteur exacte (concrètement, quelle hauteur indiquer au bloc "menu3" sachant que le bloc du dessus, "menu2", a une hauteur variable?)

<!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1–strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design.css" />
</head>

<body>

<div id="publicite">
   <p>dasfadsf</p>
   <p>dasfadsf</p>
   <p>dasfadsf</p>
</div>

<div id="en_tete">
<?php
// On inclue le haut de la page
include("en_tete.inc.php");
?>
</div>

<div id="menu1">
</div>
<div id="menu2">
   <ul>
<a href="page1.html">Lien</a><br />
<a href="page2.html">Lien</a><br />
<a href="page3.html">Lien</a><br />
</ul>
</div>
<div id="menu3">
</div>
<div id="menu4">
</div>

<div id="corps">
<h1>Mon super site</h1>

<p>
Bienvenue sur mon super site !<br />
Vous allez adorer ici‚ c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :–D
</p>

<h2>A qui s'adresse ce site ?</h2>
<p>
A tout le monde ! Si je commence à privilégier certaines personnes‚ on va m'accuser de discrimination ;o)<br />
Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken‚ ce site est fait pour vous ! Si si !
</p>

<h2>L'auteur</h2>
<p>
L'auteur du site ? Bah‚ c'est moi‚ quelle question :–p<br />
Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs‚ de les rendre accros à mon site‚ puis de les mettre en mon pouvoir.<br />
Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait‚ j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
</p>
</div>

<div id="pied_de_page">
<p>Copyright "Tout pourri Corporation" 2005‚ tous droits réservés</p>
</div>

</body>
</html>

body
{
width: 1000px;
margin: auto;
color: #000000;
background-color: #ffffff;
}

#publicite
{
float: right;
width: 100px;
color: #B3B3B3;
background-color: #626262;
}

#en_tete
{
position: absolute;
top: 0px;
left: 0px;
width: 800px;
height: 149px;
margin: 0px;
}

#menu1
{
position: absolute;
top: 149px;
left: 0px;
width: 205px;
height: 5px;
margin: 0px;
background-image: url("images/menu_agences/01.jpg");
background-repeat: no-repeat;
}

#menu2
{
position: absolute;
top: 154px;
left: 0px;
width: 205px;
margin: 0px;
background-image: url("images/menu_agences/02.jpg");
background-repeat: repeat-y;
padding: 0px;
padding-left: 32px;
padding-right: 29px;
}

#menu3
{
height: 40px;
background-image: url("images/menu_agences/03.jpg");
background-repeat: no-repeat;
}

#element_menu4
{
background-image: url("images/menu_agences/04.jpg");
background-repeat: repeat-y;
}

#corps
{
position: absolute;
top: 149px;
left: 205px;
width: 595px;
margin: 0px;
padding: 0px;
padding-right: 42px;
background-image: url("images/agences/fonds2.jpg");
background-repeat: repeat-y;
}

#pied_de_page
{
width: 800px;
padding: 5px;

text-align: center;

color: #B3B3B3;
background-color: #626262;

border: 2px solid black;
}

mannia

22 juin 2006 à 10:15:57

Salut c'est deja mieux !!

Applique la position absolue a tous tes block ensuite tu les repositionne grace a top et left.

Au lieu d'utiliser margin quelque chose augmente la valeur de left ou de top.

body
{
width: 1000px;
margin: auto;
color: #000000;
background-color: #ffffff;
}

#publicite
{
position: absolute;
float: right;
width: 100px;
color: #B3B3B3;
background-color: #626262;
top:; /* REmplie celonla position voulue */
left:; /* REmplie celonla position voulue */}

#en_tete
{
position: absolute;
top: 10px; /* essaie cela*/
left: 0px;
width: 800px;
height: 149px;
margin: 0px;
}

#menu1
{
position: absolute;
top: 149px;
left: 0px;
width: 205px;
height: 5px;
margin: 0px;
background-image: url("images/menu_agences/01.jpg");
background-repeat: no-repeat;
}

#menu2
{
position: absolute;
top: 154px;
left: 0px;
width: 205px;
margin: 0px;
background-image: url("images/menu_agences/02.jpg");
background-repeat: repeat-y;
padding: 0px;
padding-left: 32px;
padding-right: 29px;
}

#menu3
{
height: 40px;
background-image: url("images/menu_agences/03.jpg");
background-repeat: no-repeat;
}

#element_menu4
{
background-image: url("images/menu_agences/04.jpg");
background-repeat: repeat-y;
}

#corps
{
position: absolute;
top: 149px;
left: 205px;
width: 595px;
margin: 0px;
padding: 0px;
padding-right: 42px;
background-image: url("images/agences/fonds2.jpg");
background-repeat: repeat-y;
}

#pied_de_page
{
position:absolute; /*essaie cela*/
top:500px;/*diminue si il est trop bas*/
left:20px;/*essaie cela*/
width: 800px;
padding: 5px;
text-align: center;
color: #B3B3B3;
background-color: #626262;
border: 2px solid black;
}

tofito

22 juin 2006 à 10:33:41

Ouais... c'est plus propre dans le code mais bon... le résultat est moins bon qu'avec les tableaux

Comment je fais par exemple pour que le bloc "menu4" s'affiche alors qu'il ne contient aucun texte et fasse un repeat-y jusqu'en bas de la page, au pixel près où s'arrête le bloc "corps"...
Moi je veux bien utiliser les absolute mais suivant les pages, le contenu textuel du corps de la page sera plus ou moins long et je ne pense pas que dans ce cas les absolute soient la solution... alors qu'avec un tableau la taille de la cellule s'ajuste automatiquement sur celle de la cellule d'à côté...

mannia

22 juin 2006 à 10:40:47

met moi les images que tu utilise et je vais tous te faire avec des div tu vera c'est plus propre et plus accessible !!

met moi juste le lien de tes images si elle sont sur ton serveur

tofito

22 juin 2006 à 10:50:20

Bon ben soit... je te laisse essayer

Mes images de menu sont ici:
http://www.locations-en-ligne.com/aupair7/images/menu_agences/

Elles sont nommées 01.jpg, 02.jpg, 03.jpg et enfin... celle qui fait chier parce qu'elle devrait s'afficher jusqu'en bas de la page... "04.jpg"

Edit

Bon il semble après lecture de ceci que la méthode à utiliser est bien celle que j'avais préconisé: les tableaux...