Alignement de 2 cadres div impossible?!
Résolu/Fermé
RomantikA-
Messages postés
82
Date d'inscription
samedi 13 août 2011
Statut
Membre
Dernière intervention
28 novembre 2019
-
Modifié par RomantikA- le 4/03/2012 à 01:43
RomantikA- Messages postés 82 Date d'inscription samedi 13 août 2011 Statut Membre Dernière intervention 28 novembre 2019 - 5 juin 2012 à 14:08
RomantikA- Messages postés 82 Date d'inscription samedi 13 août 2011 Statut Membre Dernière intervention 28 novembre 2019 - 5 juin 2012 à 14:08
A voir également:
- Alignement de 2 cadres div impossible?!
- 2 comptes whatsapp - Guide
- Word numéro de page 1/2 - Guide
- 2 ecran pc - Guide
- Jdownloader 2 - Télécharger - Téléchargement & Transfert
- Fusionner 2 pdf - Guide
7 réponses
nEm3sis
Messages postés
710
Date d'inscription
lundi 20 août 2007
Statut
Membre
Dernière intervention
9 avril 2012
113
4 mars 2012 à 02:24
4 mars 2012 à 02:24
Vu que le bloc vert est plus petit que le formulaire tu peux le mettre en position: absolute sans que ça décale le reste
pour que tu puisse régler facilement la position absolue commence par mettre une position: relative sur ton "corps", comme ça la position de l'absolute sera par rapport à ton "corps"
ex:
pour que tu puisse régler facilement la position absolue commence par mettre une position: relative sur ton "corps", comme ça la position de l'absolute sera par rapport à ton "corps"
ex:
<div id="corps" style="position: relative;">
<div id="cadreContact" style="position:absolute; right:23px; top:50px;">
nEm3sis
Messages postés
710
Date d'inscription
lundi 20 août 2007
Statut
Membre
Dernière intervention
9 avril 2012
113
Modifié par nEm3sis le 4/03/2012 à 02:39
Modifié par nEm3sis le 4/03/2012 à 02:39
Ce que je te conseille c'est d'utiliser un layout en grille à l'aide de http://grids.heroku.com/
avec Column width = 300
Number of columns = 3
et Gutter width = 20
dans ce cas tu auras juste à faire
(ne pas oublier le div avec la class clear que j'ai rajouté)
avec Column width = 300
Number of columns = 3
et Gutter width = 20
dans ce cas tu auras juste à faire
<div id="corps" class="container_3"> <form method="post" action="/contact.php" class="grid_2">...</form> <div id="cadreContact" class="grid_1">...</div> <div class="clear"> </div> </div>
(ne pas oublier le div avec la class clear que j'ai rajouté)
RomantikA-
Messages postés
82
Date d'inscription
samedi 13 août 2011
Statut
Membre
Dernière intervention
28 novembre 2019
8
Modifié par RomantikA- le 4/03/2012 à 02:48
Modifié par RomantikA- le 4/03/2012 à 02:48
heu, j'ai visioné ton lien et j'ai testé.. mais j'ai pas tout compris.. désolé :s le cerveau qui beug à force là :'(
En faite ça te code ta mise en page c'est ça? ya plus qu'à insérer les donnézs dans les block? comme si je posais des td et tout pour des tableaux et que je remplissais les lignes?
correct?
----
Edit: pour info ton ancien post m'a aidé à résoudre.... avec tes indications:
c'est la position relative dans le corps qui manquait. du coup ça fonctionne bien, mais comme tu dis, faut pas que mon cadre soi trop grand... et je vais vite être bloqué là quand je vais mettre mes données... va falloir je gère ça..
Merci en tou cas, tu sauves mes derniers cheveux ^^
visiblement ça roule impec :p
A l'impossible... nul n'est tout nu... mdrrr
A part mes connaissances!
En faite ça te code ta mise en page c'est ça? ya plus qu'à insérer les donnézs dans les block? comme si je posais des td et tout pour des tableaux et que je remplissais les lignes?
correct?
----
Edit: pour info ton ancien post m'a aidé à résoudre.... avec tes indications:
c'est la position relative dans le corps qui manquait. du coup ça fonctionne bien, mais comme tu dis, faut pas que mon cadre soi trop grand... et je vais vite être bloqué là quand je vais mettre mes données... va falloir je gère ça..
Merci en tou cas, tu sauves mes derniers cheveux ^^
visiblement ça roule impec :p
A l'impossible... nul n'est tout nu... mdrrr
A part mes connaissances!
nEm3sis
Messages postés
710
Date d'inscription
lundi 20 août 2007
Statut
Membre
Dernière intervention
9 avril 2012
113
4 mars 2012 à 02:50
4 mars 2012 à 02:50
exactement ça
tu dis au site ce que tu aimerais, pour ton cas j'ai trouvé que 3 colonne ça serait bien ça fait à gauche 2 colonne pour le formulaire et à droite 1 pour ta boite verte
ensuite une fois que tu as indiqué les dimensions tu as un fichier css à inclure dans ta page
et puis voila tu fais des divs et des class comme dans mon exemple et paf ça marche
(je précise que pour les 2 solutions différentes j'ai testé en modifiant ta page avec chrome et ça marche)
si tu as besoin de plus d'aide sur comment utiliser ma solution n'hésite pas à demander
tu dis au site ce que tu aimerais, pour ton cas j'ai trouvé que 3 colonne ça serait bien ça fait à gauche 2 colonne pour le formulaire et à droite 1 pour ta boite verte
ensuite une fois que tu as indiqué les dimensions tu as un fichier css à inclure dans ta page
et puis voila tu fais des divs et des class comme dans mon exemple et paf ça marche
(je précise que pour les 2 solutions différentes j'ai testé en modifiant ta page avec chrome et ça marche)
si tu as besoin de plus d'aide sur comment utiliser ma solution n'hésite pas à demander
RomantikA-
Messages postés
82
Date d'inscription
samedi 13 août 2011
Statut
Membre
Dernière intervention
28 novembre 2019
8
Modifié par RomantikA- le 4/03/2012 à 03:24
Modifié par RomantikA- le 4/03/2012 à 03:24
oula.... ça m'a l'air un peu trop technique. le cerveau veu plus suivre là :(.
même si l'autre solution fonctionne, tu pensses que celle-ci est mieux? perso l'autre j'ai compris, pas là... mdr (enfin j'ai compris le but, mais pour le fonctionnement, je vais craquer. lol
même si l'autre solution fonctionne, tu pensses que celle-ci est mieux? perso l'autre j'ai compris, pas là... mdr (enfin j'ai compris le but, mais pour le fonctionnement, je vais craquer. lol
nEm3sis
Messages postés
710
Date d'inscription
lundi 20 août 2007
Statut
Membre
Dernière intervention
9 avril 2012
113
4 mars 2012 à 03:26
4 mars 2012 à 03:26
l'autre à l'avantage d'être simple, mais ça reste du bidouillage, ça marchera pour là, mais la prochaine fois que tu aura un soucis du même genre pas sur que ça marche
la 2è méthode par contre est bien plus générique donc une fois que tu aura compris ça fonctionnera pour tous
je te fais un tuto simple
1) télécharge le css http://grids.heroku.com/grid?column_width=300&column_amount=3&gutter_width=20
2) à la fin de ton <head> juste avant le </head> ajoute la feuille css que tu as téléchargé en 1)
3) modifie les class du html comme sur l'image
http://imagebin.org/201908
4) pense à supprimer le margin-left: 600px; du #cadreContact
5) voila :)
la 2è méthode par contre est bien plus générique donc une fois que tu aura compris ça fonctionnera pour tous
je te fais un tuto simple
1) télécharge le css http://grids.heroku.com/grid?column_width=300&column_amount=3&gutter_width=20
2) à la fin de ton <head> juste avant le </head> ajoute la feuille css que tu as téléchargé en 1)
<link type="text/css" rel="stylesheet" href="lien de ton css">
3) modifie les class du html comme sur l'image
http://imagebin.org/201908
4) pense à supprimer le margin-left: 600px; du #cadreContact
5) voila :)
RomantikA-
Messages postés
82
Date d'inscription
samedi 13 août 2011
Statut
Membre
Dernière intervention
28 novembre 2019
8
4 mars 2012 à 05:06
4 mars 2012 à 05:06
merci beaucoup :) c'est très gentil de ta part :) ça va pa trop mal :)
merci aussi à Rodolphe.
bonne continuation
merci aussi à Rodolphe.
bonne continuation
Rodolphe_
Messages postés
1481
Date d'inscription
samedi 7 mai 2005
Statut
Membre
Dernière intervention
20 décembre 2014
285
Modifié par Rodolphe_ le 4/03/2012 à 11:42
Modifié par Rodolphe_ le 4/03/2012 à 11:42
Bonjour,
en plus du float left pour le formulaire il te fallait tout simplement définir une hauteur pour le bloc div.
En effet en positionnant le formulaire avec float, celui-ci sort du flux donc le reste de la page vient ce caler en dessous du bloc div.
pas besoin d'utiliser un script de grid ici...
en plus du float left pour le formulaire il te fallait tout simplement définir une hauteur pour le bloc div.
En effet en positionnant le formulaire avec float, celui-ci sort du flux donc le reste de la page vient ce caler en dessous du bloc div.
pas besoin d'utiliser un script de grid ici...
Rodolphe_
Messages postés
1481
Date d'inscription
samedi 7 mai 2005
Statut
Membre
Dernière intervention
20 décembre 2014
285
4 mars 2012 à 01:02
4 mars 2012 à 01:02
Bonsoir,
définit un width ( 400px par exemple) pour ton form ainsi qu'au div puis décale le div avec margin-left=450px
définit un width ( 400px par exemple) pour ton form ainsi qu'au div puis décale le div avec margin-left=450px
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
RomantikA-
Messages postés
82
Date d'inscription
samedi 13 août 2011
Statut
Membre
Dernière intervention
28 novembre 2019
8
4 mars 2012 à 01:41
4 mars 2012 à 01:41
bonsoir Rodolphe et merci pour ton attention et ta proposition.
le width j'ai déjà mis. mais j'ai fais en sorte que mon code corresponde à ce que tu veux me faire faire.
donc le blocdiv formulaire et bien à gauche.
le bloc div vert d'infos et bien envoyé à droite avec le margin-left,
mais il se trouve tout de même en dessous du bleu (il n'est pas envoyé à coté, donc quand je vais rajouter les info du bloc vert, ça va me faire bizard :s lol).
et avec le float:left ça résoudrait mon problème, sauf que si je met le div formulaire en float:left, ça me monte mon pied de page sous le formulaire... donc ça me beug tout mon css de base :(
le width j'ai déjà mis. mais j'ai fais en sorte que mon code corresponde à ce que tu veux me faire faire.
donc le blocdiv formulaire et bien à gauche.
le bloc div vert d'infos et bien envoyé à droite avec le margin-left,
mais il se trouve tout de même en dessous du bleu (il n'est pas envoyé à coté, donc quand je vais rajouter les info du bloc vert, ça va me faire bizard :s lol).
et avec le float:left ça résoudrait mon problème, sauf que si je met le div formulaire en float:left, ça me monte mon pied de page sous le formulaire... donc ça me beug tout mon css de base :(
RomantikA-
Messages postés
82
Date d'inscription
samedi 13 août 2011
Statut
Membre
Dernière intervention
28 novembre 2019
8
4 mars 2012 à 02:37
4 mars 2012 à 02:37
ha punaiz!!!!!!!!!!!!!!
merci nEm3sis pour ton aide, j'ai testé.. je revérifie et te tiens au courant ;)
merci nEm3sis pour ton aide, j'ai testé.. je revérifie et te tiens au courant ;)
RomantikA-
Messages postés
82
Date d'inscription
samedi 13 août 2011
Statut
Membre
Dernière intervention
28 novembre 2019
8
5 juin 2012 à 14:08
5 juin 2012 à 14:08
Comme promis (avec du retard tout de même) je met à jour le poste en publiant ma réponse:
cela ma aidé... en effet ça marche nickel. tout va bien. problème résolu.
merci beaucoup :)
cela ma aidé... en effet ça marche nickel. tout va bien. problème résolu.
merci beaucoup :)
