Forums des Zéros

29 janvier 2006 à 15:50:24

Salut,
pourquoi créer une div supplémentaire, je pense que ce code devrai faire :

.div1 {
margin-bottom:10px;
}
.div2 {
margin-top:0px;
}

29 janvier 2006 à 15:50:32

Pourquoi ne pas jouer tout simplement sur les margin-top et/ou bottom des deux div qui existent déjà ?

Tel que tu le présentes je ne voie pas trop l'intérêt de cette balise vide (au passage c'est une technique qu'il est préférable d'éviter, en général des solutions css existent).

<edit>
Riko tu m'as grillé grave

</edit>

29 janvier 2006 à 15:53:18

Hé bien pour une fois que c'est moi le plus rapide.
Ca fait plaisir.
A+

29 janvier 2006 à 15:54:41

Parce qu'en fait, je n'ai pas deux sortes de div. J'ai fait un copier coller du code de la premiere div et j'ai juste changé le contenu. Le nom de la class est le même.

Citation : jp949

essaie de mettre ca dans ton div
 

Ca ne marche pas !

29 janvier 2006 à 16:05:31

Rien ne t'empêche de rajouter un id au deuxième div (par exemple) ou même si tu préféres de lui donner un deuxième classe par :

Si mes pitits neurones ne m'ont pas trop laché c'est l'espace qui fait office de séparateur entre les deux classes.

29 janvier 2006 à 16:10:36

Tu peux utiliser une class sur plusieurs div si tu veux qu'elles aient la même apparence.

dans ton cas

.div1 {
margin-bottom:10px;
margin-top:0px;

Par contre il y aura un espace de 10px sous la seconde div

29 janvier 2006 à 16:25:18

Ok, c'est incroyable :

margin-bottom ne marche pas sous Firefox et sous IE c'est ok. J'ai essayé de faire deux classes différentes , ca ne marche pas. J'ai essayé d'appliquer le dernier exemple en appliquant margin-bottom, idem. Ces div ne veulent pas se décoller sous FF :colere:

29 janvier 2006 à 16:30:55

Je pense qu'il serait utile que tu donne ton code complet.

OUPS on m'a devancé.

29 janvier 2006 à 16:30:57

A priori il n'y a pas de raison que cela ne marche pas. Le mieux serait que tu nous donne code que tu as écrit. Quelque chose d'allégé hein ? Que ça ne soit noyé dans 15000 lignes

29 janvier 2006 à 17:03:05

Voici pour le html :

<div class="menu">

<div class="cadre_arrondi">

<div class="hg"></div>
<div class="haut"></div>
<div class="hd"></div>

<div class="titre_menu"><span class="titre_texte">Titre</span></div>

<div class="contenu">

<a href="index.php?page=lien1" class="selected">Lien1</a><br>

<a href="index.php?page=lien2">Lien2</a><br>

</div>

<div class="bg"></div>
<div class="bas"></div>
<div class="bd"></div>
</div>

<div class="cadre_arrondi2">

<div class="hg"></div>
<div class="haut"></div>
<div class="hd"></div>

<div class="titre_menu"><span class="titre_texte">Titre2</span></div>

<div class="contenu">

<a href="index.php?page=lien1" class="selected">Lien1</a><br>

<a href="index.php?page=lien2">Lien2</a><br>

</div>

<div class="bg"></div>
<div class="bas"></div>
<div class="bd"></div>
</div>

</div>

Bon j'ai fait light autant que j'ai pu.

Voici le CSS :

.menu{
display: inline; /* MSIE */
float: left;
margin-left: 10px;
height:400px;
width: 190px;
border: 1px dashed #CCCCCC;
}

.cadre_arrondi
{
width: 180px;
margin-top:15px;
}
.cadre_arrondi2
{
width: 180px;
margin-top:20%;
}

.hg, .hd, .bg, .bd
{
width: 10px;
height: 10px;
font-size:2;
}

.haut, .bas
{
width: 150px;
height: 10px;
font-size:2;
}

.titre_menu
{
width: 170px;
background-color: 0099CC;
height:20px;
/*margin-top:-8px;*/
padding-bottom: 4px;
}
.contenu
{
width: 170px;
background-color: 99CCFF;
background-repeat: no-repeat;
padding-top:10px;
padding-bottom: 10px;
}
.contenu a
{
padding-left:10px;
text-decoration: none;
height:25px;
color: Black;
font-weight: bold;
}

.cadre_arrondi div
{
float: left;
}
.cadre_arrondi2 div
{
float: left;
}
.hg,.titre_menu, .bg
{
clear: left;
}

.hg
{ background-image: url(image/tl.gif);
background-repeat: no-repeat; }
.hd { background-image: url(image/tr.gif);
background-repeat: no-repeat; }
.bg { background-image: url(image/bl.gif);
background-repeat: no-repeat; }
.bd { background-image: url(image/br.gif);
background-repeat: no-repeat; }

.bas
{
background-image: url(image/fond_bas.gif);
background-repeat: repeat;
}
.haut
{
background-image: url(image/fond_haut.gif);
background-repeat: repeat;
}

29 janvier 2006 à 17:31:10

Quels sont les éléments concernés par l'écartement que tu souhaites.

Remarque : ayant commencé je continue à te répondre, mais il faudrait quand même que tu fasses un effort pour construire un code html qui ressemble un peu plus à quelque chose (utilisation des titres h1, h2, h3 etc... et balises <p> pour commencer.

29 janvier 2006 à 18:03:53

Les éléments concernés par l'écartement sont : cadre_arrondi et cadre_arrondi2.
J'utilise des titres etc.. simplement j'ai allégé le code au max pr n'avoir que l'essentiel de mon pb.

29 janvier 2006 à 19:02:02

Essaie de mettre ceci:

.cadre_arrondi
{
width: 180px;
margin-top:15px;
margin-bottom: 10px; /*ajoute cette ligne*/
}

.bas
{
background-image: url(fond.png);
background-repeat: repeat;
margin-bottom: 10px; /*ajoute cette ligne*/
}

29 janvier 2006 à 19:10:18

Oui c'est assez curieux le margin-top en pourcentage ne fonctionne pas.

Bon ben tant pis tu peux contourner le problème avec :

.cadre_arrondi2
{
width: 180px;
position:relative;
top:20%;
}