Alignement de 2 cadres div impossible?!
Résolu
RomantikA-
Messages postés
82
Date d'inscription
Statut
Membre
Dernière intervention
-
RomantikA- Messages postés 82 Date d'inscription Statut Membre Dernière intervention -
RomantikA- Messages postés 82 Date d'inscription Statut Membre Dernière intervention -
A voir également:
- Alignement de 2 cadres div impossible?!
- Supercopier 2 - Télécharger - Gestion de fichiers
- 2 ecran pc - Guide
- Word numéro de page 1/2 - Guide
- Faire 2 colonnes sur word - Guide
- Whatsapp 2 - Guide
7 réponses
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;">
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é)
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!
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
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 :)
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...
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
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 :(