Forums des Zéros

12 avril 2006 à 21:48:04

Oui et ça ne fonctionne pas ...

12 avril 2006 à 21:56:24

Bonjour, normalement avec le code que tu présentes (hors CSS) il ne devrait pas y avoir de marges.
Cependant si tu mets une balise h1,h2, ect... ,à l'intérieur de la div, un espace apparait entre les deux div, il s'agit en fait des marges par défaut de h1,etc...
Pour supprimer cet espace il faut mettre margin:0px à la balise qui se trouve à l'intérieur des blocs concernés.

baba0076

12 avril 2006 à 21:57:12

J'ai le même problème...

12 avril 2006 à 22:02:01

Citation : Riko

Bonjour, normalement avec le code que tu présentes (hors CSS) il ne devrait pas y avoir de marges.
Cependant si tu mets une balise h1,h2, ect... ,à l'intérieur de la div, un espace apparait entre les deux div, il s'agit en fait des marges par défaut de h1,etc...
Pour supprimer cet espace il faut mettre margin:0px à la balise qui se trouve à l'intérieur des blocs concernés.

Je n'ai pas de balise à l'intérieur :s

pascall

12 avril 2006 à 22:13:52

si tes 2 div sont l'une au dessus de l'autre, as tu essayé de mettre un margin-top:opx à l'un et un margin-bottom:opx à l'autre
ou si l'un à coté de l'autre un margin-left:0px et margin-right:0px

12 avril 2006 à 22:16:25

Oui je viens d'essayer, mais, comme si rien n'était

12 avril 2006 à 22:17:24

Essaie le même code html sans définir de propriété en css
C'est bizarre car moi ça fonctionne.
Voir ICI

pascall

12 avril 2006 à 22:29:44

tu peux essayer un truc

mets un border aux div de 1px par exemple et une couleur identique au fond de ces div plus la manoeuvre que je t'ai indiqué avant.
chez moi ca marche
bon c'est du bidouillage

Thunderseb

12 avril 2006 à 22:31:43

Ben mets un margin-left/right négatif

Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - sdlm.be - Horus.aero

12 avril 2006 à 22:33:47

Mets un display:inline

12 avril 2006 à 22:36:20

Un display:inline devrait mettre les deux blocs cote à cote non?

12 avril 2006 à 22:44:15

Je vait sans doutes me faire tuer mais tu fait un display;inline et un <p></p> pour sauter une ligne .

Je sais que c'est du bidouillage mais c'est parfois le seul moyen pour que ce soit bien interprété, et par IE et par firefox.

12 avril 2006 à 22:46:37

Je ne comprends toujours pas pourquoi il faut autant "bidouiller" pour coller deux blocs div.
(surtout s'il n'y a pas de CSS)

12 avril 2006 à 22:51:09

Hé bien aucun de ces trucs ne fonctionne

Voici mes codes :

Le code de menu.php :

<!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>Bienvenue sur mon site !</title>
<meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" />
</head>
<body>
<div class="menu_element_1">Se connecter</div>

<div class="menu_element_2">
<form action="cible.php" method="post">
Pseudo : <input type="text" name="pseudo" class="input_login" /><br />
Pass : <input type="password" name="mot_de_passe" class="input_login" /><br />
<input type="submit" value="Valider" class="submit_login" />
</form>
</div>

<div class="menu_element_3">Navigation</div>

<div class="menu_element_4">
<table class="tableau_navigation">
<tr>
<td>Accueil</td>
</tr>
</table>
</div>

</body>
</html>

Le code de feuille_css.css

/* 000000000000000000 */
/* ---------Menu ------------- */
/* 000000000000000000 */

#menu
{
width: 169px; /* Largeur de 169 pixels pour le menu */
float: left; /* Le menu flottera à gauche */
}
.menu_element_1
{
width: 169px; /* Largeur du menu */
height: 37px; /* Hauteur du titre SE CONNECTER */
background-image: url('images/menu_element_1.jpg'); /* Image de fond */
background-repeat: no-repeat; /* Pour ne pas qu'elle se répète cette image de fond */
color: #66A9BF; /* Couleur du titre des menus */
padding-left: 45px; /* Ecart de gauche */
padding-top: 13px; /* Ecart en haut */
font-family: Arial; /* Font du texte */
font-size: 12px; /* Taille du SE CONNECTER */
font-weight: bold; /* Petit + pour le mot SE CONNECTER */
}
.menu_element_2
{
width: 169px; /* Largeur du menu */
background-image: url('images/menu_element_2.jpg'); /* Image de fond */
color: #8A8A8A; /* Couleur du titre des menus */
font-family: Arial; /* Font du texte */
font-size: 12px; /* Taille du texte */
text-align: right; /* Texte aligné à droite */
}
.input_login /* CSS des zones de saisie pour le formulaire SE CONNECTER */
{
font-weight: bold; /* Texte en gras */
color: #66A9BF; /* Couleur du texte vert-bleu */
font-size: 10px; /* Taille du texte */
width: 65px; /* Largeur de la zone de saisie */
border: 1px solid #DDDDDD; /* Une petite bordure de 1px */
border-left: 5px solid #66A9BF; /* La bordure de droite un peu plus épaisse */
padding-left: 2px; /* Ecart de 2 px pour que le texte soit déplacé de 2px vers la droite */
margin-right: 15px; /* Ecart de 15px à droite */
}
.submit_login
{
margin-right: 15px;
width: 65px;
}

.menu_element_3
{
width: 169px; /* Largeur du menu */
height: 82px; /* Hauteur du titre NAVIGATION */
background-image: url('images/menu_element_3.jpg'); /* Image de fond */
background-repeat: no-repeat; /* Pour ne pas qu'elle se répète cette image de fond */
color: #66A9BF; /* Couleur du titre des menus */
padding-left: 45px;
padding-top: 42px;
font-family: Arial;
font-size: 12px;
font-weight: bold;
}
.tableau_navigation
{
width: 131px;
border: collapse;
border: 1px solid #DDDDDD;
border-left: 5px solid #66A9BF;
}
.menu_element_4
{
width: 169px; /* Largeur du menu */
background-image: url('images/menu_element_4.jpg'); /* Image de fond */
color: #8A8A8A; /* Couleur du titre des menus */
font-family: Arial; /* Font du texte */
font-size: 12px; /* Taille du texte */
text-align: left;
padding-left: 25px;
}

Voici le lien pour voir le résultat :

http://www.serix-design.com/~tom/rhetos_site/

12 avril 2006 à 22:59:43

Tu enlèves 42px à ton height de element_menu_3.
Le padding_top augmente la hauteur de ton bloc.
Enfin je pense.

Idem pour element_menu_1 avec une valeur de height = valeur désirée - le padding_top = 24px

12 avril 2006 à 23:25:20

Oki, mais alors comment je fais pour mettre le titre de mes blocks ? Ils ne seront pas alignés ces titres...

12 avril 2006 à 23:36:36

Si,si tes titres (se connecter, navigation) seront centrés dans tes images.

12 avril 2006 à 23:47:16

Bon bhein j'ai supprimer les padding-top, voilà le résultat :

http://www.serix-design.com/~tom/rhetos_site/

barbarius

12 avril 2006 à 23:49:37

As tu esssayé de mettre le code CSS suivant:

*
{
margin: 0px;
padding: 0px;
}

Moi ça avait arranger tous mes problemes de positionnement

12 avril 2006 à 23:53:45

Il ne faut pas enlever les padding-top, il faut soustraire la valeur de tes padding-top a ta valeur height.

.menu_element_1
{
width: 169px; /* Largeur du menu */

/* ICI TU METS LA HAUTEUR DE TON IMAGE EN FOND MOINS LA VALEUR DE PADDING-TOP */
/*******height: 37px*****/

/******DONC 37 - 13 = 24PX **************/

height: 24px;
/*****************************************************************************/
background-image: url(menu_element_1.jpg); /* Image de fond */
background-repeat: no-repeat; /* Pour ne pas qu'elle se répète cette image de fond */
color: #66A9BF; /* Couleur du titre des menus */
padding-left: 45px; /* Ecart de gauche 13px */
font-family: Arial; /* Font du texte */
font-size: 12px; /* Taille du SE CONNECTER */
font-weight: bold; /* Petit + pour le mot SE CONNECTER */
padding-top: 13px;
}

12 avril 2006 à 23:53:51

YAHHOOOOOOOOOOOOOOOOOOOOOOOOoo

CA FONCTIONNNNNNNNEEEEEEEEEEEEEEEEE

MERCI BCPPPPPPPPPPPPP

CEPENDANT,

je ne sais pas si tu as vu mon tableau en dessous, mais il y a un rectangle gris qui dépasse, c'est dû à quoi ?

12 avril 2006 à 23:58:56

N'oublies pas cette astuce
-Chaque fois que tu mets du padding-top cela t'augmente d'autant la hauteur de ton bloc.

Regardes également pour remplacer ton tableau dans ton menu par une balise sémantiquement plus adaptée (par exemple ul)

Bon courage

13 avril 2006 à 0:03:59

En effet je vais enlever ce tableau, ça me crée trop de problème

Merci de ton aide

13 avril 2006 à 0:04:57

Le rectangle gris qui se trouve à coté de accueil est du à la répétition de ton fond ,
Pour le supprimer il suffit de mettre
background-repeat: repeat-y; (dans element_menu_4) de cette facon tu répétera ton image que verticalement.

13 avril 2006 à 13:18:30

Citation : Riko

N'oublies pas cette astuce
-Chaque fois que tu mets du padding-top cela t'augmente d'autant la hauteur de ton bloc.

Regardes également pour remplacer ton tableau dans ton menu par une balise sémantiquement plus adaptée (par exemple ul)

Bon courage

Et aussi que si tu mets du margin-top, ca audmente d'autant la hauteur du bloc parent.

Je m'excuse pour mes bidouilles

13 avril 2006 à 13:48:03

merci des vos aides les gas..