Positionnement d'une div à l'intérieur d'une autre div

**Arsene12** · 16/06/2016, 02h20

Bonjour,

j'ai une DIV centrale entourée d'une div à droite, d'une div à gauche, d'un menu en haut et d'un menu en bas. Ma Div centrale contient d'autres Div.

https://jsfiddle.net/n3mLLteu/6/

Je voudrais faire en sorte que la 1ère Div contenu dans la Div centrale (la Div verte), soit située contre le bord du haut de la Div centrale (Je veux supprimer la bande blanche qui s'intercale). Sauriez-vous faire cela simplement? Merci.

**Arsene12** · 16/06/2016, 08h34

Bonjour,

dans le même exemple, je ne comprends pas pourquoi le bouton N°2 affiche une valeur non nulle quand on clique dessus et pas le bouton N°1.

https://jsfiddle.net/n3mLLteu/8/

**EddiGordo** · 16/06/2016, 09h48

Bonjour

1) c'est ta div section2 qui à un top de 25px... à 17px il n'y a plus de jour
2) C'est un problème de casse : le sélecteur sur le clic du bouton 1 ne ramène rien : $("#Section2") au lieu de $("#section2")

**Arsene12** · 17/06/2016, 06h46

Bonjour,

Merci, c'est Ok pour $("#Section2") au lieu de $("#section2").

Par contre, le Top de la div section2 est déterminé par la hauteur du menu du haut (var posHaut = $("#dock").height()

qui renvoi 25. Je comprends pas pourquoi il me faut soustraire quelques unités pour éviter la bande blanche.

https://jsfiddle.net/n3mLLteu/13/

Si je mets 17, effectivement ça marche même si on redimensionne la fenêtre.

https://jsfiddle.net/n3mLLteu/15/

Invité · 17/06/2016, 08h40

Bonjour Harry Potter,

ton code ressemble à celui d'un apprenti sorcier....

1/

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$('head').append('<style>#section2{position:absolute;top:'+posHaut+'px;padding-top:0%;margin-top:0%;left:'+posGauche+'px;width:'+largeur+'px;height:'+hauteur+';overflow:auto;background-color:whitecolor:black;}</style>');
 
$('head').append('<style>#menuSection2{position:relative;top:0px;padding-top:0%;margin-top:0%;top:0px;height:5%;background:green;}</style>');
 
    });

???

Sais-tu qu'en jQuery, il existe .css() ?
Et je suis curieux de savoir pourquoi tu le positionnes en absolute; ??

2/

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#menuSection2 {
    position:relative;
    margin-top:0;
    padding-top:0;
    margin-left:0;
    padding-left:0;
    /*display:block;*/
    float:top;
    top:0px;
    height:50px;
    /*margin-top:0%;*/
    background-color: magenta;
    background:white;    
}

float:top; ???
:0px; ou :0%; ou :0; -> c'est kif kif bourricot. On met juste :0;
background-color: magenta; background:white; ??
margin-top:0; padding-top:0; margin-left:0; padding-left:0; -> mets juste margin:0; padding:0;, tu seras tranquille.

BREF : corrige et nettoie d'abord les codes CSS et jQuery, et ton code ressemblera déjà plus à celui d'un Gentleman Cabrioleur*

Glossaire des propriétés CSS

3/ Quant à ta problématique :

Certaines balises ont des propriétés par défaut :
Exemple : le <body> a un padding par défaut !

Solution à ton problème :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

html, body { margin:0; padding:0; }

* Arsene Lupin (pour ceux qui n'auraient pas saisi la référence ô combien spirituelle)

**Arsene12** · 18/06/2016, 06h59

Bonjour,

Merci beaucoup de m'avoir apporté la solution.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

html, body { margin:0; padding:0; }

Je débute en css comme vous aurez pu le constater et j'avance à tâtons.

Sais-tu qu'en jQuery, il existe .css() ?

Ma méthode consiste à traduire un code css en jQuery

http://apps.conversionista.se/css-to...or-optimizely/

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('head').append('<style>#section2{position:absolute;top:'+posHaut+'px;padding-top:0%;margin-top:0%;left:'+posGauche+'px;width:'+largeur+'px;height:'+hauteur+';overflow:auto;background-color:whitecolor:black;}</style>');

Si .css() consiste à créer une variable contenant du code css et à l'injecter par la méthode .html, je préfère
conserver ma méthode.

Et je suis curieux de savoir pourquoi tu le positionnes en absolute; ??

Effectivement si je mets en relative, ça ne change rien.

Au niveau de #menuSection2 {} :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

float;Top;

Je l'ai enlevé, il sert à rien

:0px; ou :0%; ou :0; -> c'est kif kif bourricot. On met juste :0;

Merci pour l'info.

background-color: magenta; background:white; ??

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
background-color: magenta; 
background:white;

Là je vois pas. Pour moi le fond est magenta et la couleur de la police est blanche.

margin-top:0; padding-top:0; margin-left:0; padding-left:0; -> mets juste margin:0; padding:0;, tu seras tranquille.

Je vais écouter ces bons conseils.

**Arsene12** · 18/06/2016, 07h18

J'ai juste 2 petits problèmes à régler et puis ça sera bon.

https://jsfiddle.net/n3mLLteu/19/

Le premier, le plus important à resoudre, c'est que je veux que ma section2 aille jusqu'au haut de mon menu du bas, en d'autres termes que la bande blanche du bas disparaisse.

Le second, ça rejoint la question

background-color: magenta; background:white; ??

je veux mettre ce coup-ci la couleur de la police du mot Exemple en Vert.

Invité · 18/06/2016, 07h21

Bonjour,

Je t'ai mis 2 liens. Il suffit de les suivre.

Invité · 18/06/2016, 09h12

Remarque :

Pour de la mise en page, le JavaScript doit être utilisé en DERNIER recours.

Si tu n'arrives pas à faire correctement la mise en page UNIQUEMENT avec du CSS, c'est qu'il y a un problème de conception.

**Arsene12** · 18/06/2016, 11h59

J'ai 2 menus de taille fixe : un en haut et un en bas.
La hauteur de la Div centrale (jaune) doit être égale à la hauteur de l'écran moins les hauteurs de mes 2 menus.
C'est pour cela que j'utilise le javascript.

https://jsfiddle.net/n3mLLteu/19/

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var hauteur = $("#global").height()- $("#dock").height() - $("#footer").height();

Il me faut ajouter 14 ou 15 pour que ça marche

https://jsfiddle.net/n3mLLteu/20/

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var hauteur = $("#global").height()- $("#dock").height() - $("#footer").height() + 14;

J'essaye la fonction calc en css, ça me donne ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#section2 { height:calc(100% - 50px);}

https://jsfiddle.net/n3mLLteu/23/

**Arsene12** · 18/06/2016, 12h05

Pour ce qui est de la couleur, c'est réglé.

Background = black; === Background-color = black; // couleur de fond
color = white; // couleur du texte

**Arsene12** · 18/06/2016, 12h52

J'ai trouvé pourquoi mon code javascript ne fonctionnait pas. J'avais mis height:98% à #global dans le css. Je rectifie et ça marche :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#global { height:100%; }

https://jsfiddle.net/n3mLLteu/24/

J'aimerai savoir si je peux me passer du javascript en utilisant la fonction calc dans le code css.

Positionnement d'une div à l'intérieur d'une autre div

jQuery

Discussions similaires

Partager

Partager