Mettre deux div côte à côte

Voir le sujet précédent Voir le sujet suivant Aller en bas

En cours Mettre deux div côte à côte

Message par Anadéia le Jeu 19 Avr 2018 - 21:51

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://gossipinschool.forumactif.com/post

Description du problème

Bonjour !

Même après plusieurs recherches sur internet, je n'ai pas compris comment mettre deux formes côte à côte. J'aimerais créer une fiche toute occasion, avec cette forme qui ressemble à un rectangle, et une image en forme de losange juste à côté (qui contiendrait une url). Mais quand j'essaye, le "losange" se met aussitôt en-dessous, comme le montre ce screen.

Merci d'avance à ceux qui me répondront !

L'image n'a pas l'air de fonctionner donc voilà le lien du screen : http://zupimages.net/viewer.php?id=18/16/41gy.png
avatar

Anadéia
Nouveau membre

Messages : 19
Inscrit(e) le : 22/08/2017

http://hopelesschoice-rpg.forumactif.org
Anadéia a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre deux div côte à côte

Message par .1019 le Ven 20 Avr 2018 - 0:37

Hello,

Tu ajoutes : display: inline-block;

Ca devrait régler ton problème. Wink
avatar

.1019
**

Messages : 84
Inscrit(e) le : 11/05/2013

.1019 a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre deux div côte à côte

Message par gryffindor le Ven 20 Avr 2018 - 11:12

Sinon, tu peux placer tes deux blocs dans un tableau !
Code:
<table><tbody><tr><td>Ici, ajoute ton bloc</td><td>Ici, ajoute ton deuxième bloc</td></tr></tbody></table>
Tu peux ajouter des lignes et des colonnes avec ce générateur par exemple:
http://divtable.com/generator/
Bon courage pour ta fiche !
avatar

gryffindor
Nouveau membre

Messages : 12
Inscrit(e) le : 27/06/2016

http://gryffindor.forumactif.org
gryffindor a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre deux div côte à côte

Message par .1019 le Ven 20 Avr 2018 - 11:20

Attention : utiliser un tableau pour mettre deux div côte à côte, c'est très moche et peu professionnel (oui je sais, sur ForumActif vous êtes habitués à cette mauvaise habitude).

display: inline-block; est beaucoup plus permissif qu'un tableau de toutes manières, et sera bien plus propre (et simple à maintenir). Wink

Voilà voilà !
avatar

.1019
**

Messages : 84
Inscrit(e) le : 11/05/2013

.1019 a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre deux div côte à côte

Message par gryffindor le Ven 20 Avr 2018 - 14:02

Attention: Nous n'avons en rien la prétention de nous prendre pour des "professionnels" sur ForumActif et non cela ne fait pas "moche", il suffit de savoir s'y prendre, c'est aussi plus pratique si l'on veut réutiliser le bloc ailleurs, dans une autre circonstance. Merci pour votre amabilité !
avatar

gryffindor
Nouveau membre

Messages : 12
Inscrit(e) le : 27/06/2016

http://gryffindor.forumactif.org
gryffindor a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre deux div côte à côte

Message par Anadéia le Ven 20 Avr 2018 - 14:55

Bonjour ! Merci de vos réponses.

J'ai essayé d'ajouter "display: inline-block" et ça marche parfaitement !

Cependant, j'ai ce problème : https://zupimages.net/up/18/16/jiac.png
Les images sont collées et je souhaiterais qu'il y ait un espace entre eux. J'ai essayé de placer un <hr> (même si je préfère éviter...) mais ça ne marche pas, et la propriété margin me fait déplacer l'image en haut en plus d'ajouter un espace... Ce n'est donc pas droit. Savez-vous comment régler ce problème ?
avatar

Anadéia
Nouveau membre

Messages : 19
Inscrit(e) le : 22/08/2017

http://hopelesschoice-rpg.forumactif.org
Anadéia a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre deux div côte à côte

Message par gryffindor le Ven 20 Avr 2018 - 15:01

Bonjour, pour en revenir aux tableaux, ceux-ci ajoutent immédiatement un espace entre les deux blocs, espace que tu peux agrandir avec "cellpadding=X" à coté du "table"
Code:
<table cellpadding="5"><tbody><tr><td>Ici, ajoute ton bloc</td><td>Ici, ajoute ton deuxième bloc</td></tr></tbody></table>
En ce qui concerne ton code, essayes peut-être d'ajouter au code de tes blocs "margin-right:4px;margin-left:4px" ?
avatar

gryffindor
Nouveau membre

Messages : 12
Inscrit(e) le : 27/06/2016

http://gryffindor.forumactif.org
gryffindor a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre deux div côte à côte

Message par Anadéia le Ven 20 Avr 2018 - 17:01

J'ai essayé les tableaux mais je n'y comprends définitivement rien, donc j'ai préféré laisser la technique faite par .1019 Razz

Du coup la technique que tu m'as donné marche à la perfection ! J'ai décidé de changer de style pour la fiche toutes occasions, mais ça me servira pour les autres fiches. Par contre, encore une question (autant demander ici plutôt que de faire un nouveau post) : même si ma fiche est terminée, je n'arrive pas à correctement placer mes grands titres comme vous pouvez le voir sur cette image : https://zupimages.net/up/18/16/go1r.png

Voici mon CSS :

Spoiler:
Code:
.title_font {
width: 340px;
height: 0px;
background: transparent;
border-right: 12px solid transparent;
border-top: 12px solid #ebeadd;
border-left: 12px solid #ebeadd;
border-bottom: 12px solid #ebeadd;
}

.title_font2 {
width: 340px;
height: 0px;
background: transparent;
border-right: 12px solid #ebeadd;
border-top: 12px solid #ebeadd;
border-left: 12px solid transparent;
border-bottom: 12px solid #ebeadd;
}

.title {
font-family: 'Varela Round';
text-align: left;
margin-bottom:20px;
}

.title2 {
font-family: 'Varela Round';
tex-align: right;
}

.text_font {
width: 366px;
height: auto;
background: #ebeadd;
}

J'ai tout mis au cas où le problème venait d'ailleurs, mais ce sont les "title" qui sont concernés. Merci d'avance pour vos réponses !
avatar

Anadéia
Nouveau membre

Messages : 19
Inscrit(e) le : 22/08/2017

http://hopelesschoice-rpg.forumactif.org
Anadéia a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre deux div côte à côte

Message par Milouze14 le Ven 20 Avr 2018 - 18:21

Hello Anadéia,
hum, tu donnes le style mais il aurait été judicieux de donner le code html.

Avec ce code html:
Code:
<div class="M14_deco">
 
 <div class="M14_deco_un">
 
 <div class="M14_losange">
 
 </div>
 
 </div>
 
 <div class="M14_deco_deux">
 
 </div>
  
</div>

Et ce style:
Code:
/*LE CONTENEUR*/
.M14_deco
{
width:100%;
height:160px;
}
/*FIN CONTENEUR
/*PREMIER BLOC A GAUCHE*/
.M14_deco_un
{
width:50%;
height:80px;
background:black;
float:left;
}
/*LE LOSANGE*/
.M14_losange
{
float: right;
width:0;
height:0;
border-style: solid;
border-width: 40px;
border-color: transparent orange transparent transparent;
}
/*LE BLOC A DROITE*/
.M14_deco_deux
{
width:50%;
height:80px;
float:left;
margin-left:50%;
margin-top: -80px;
background:orange;
}

Les couleurs sont moches mais cela te donne déjà une idée Wink  .

a++


Dernière édition par Milouze14 le Ven 20 Avr 2018 - 18:57, édité 2 fois
avatar

Milouze14
Membre actif

Masculin
Messages : 4995
Inscrit(e) le : 18/04/2005

https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre deux div côte à côte

Message par Milouze14 le Ven 20 Avr 2018 - 18:55

Re,
désolé pour le double post.

Hum en tenant compte de ta demande, on peut partir avec ce code html:
Code:
<div class="M14_deco">
      
 <div class="M14_deco_un"><a href="http://forum.forumactif.com/">Forumactif</a>
 <div class="M14_losange">
      
 </div>
      
 </div>
      
 <div class="M14_deco_deux">
    <img src="https://i62.servimg.com/u/f62/11/26/21/37/folder10.png" /><img src="https://i62.servimg.com/u/f62/11/26/21/37/folder11.png" />  
 </div>
        
</div>

Et le style:
Code:
/*LE CONTENEUR*/
.M14_deco
{
width:100%;
height:160px;
}
/*FIN CONTENEUR
/*LE BLOC A GAUCHE*/
.M14_deco_un
{
width:50%;
height:80px;
background:grey;
float:left;
}
/*LE LOSANGE*/
.M14_losange
{
float: right;
width:0;
height:0;
border-style: solid;
border-width: 40px;
border-color: transparent pink transparent transparent;
}
/*LE  BLOC A DROITE*/
.M14_deco_deux
{
width:50%;
height:80px;
float:left;
margin-left:50%;
margin-top: -80px;
background:pink;
}
/*LE LIEN DANS LE  BLOC A GAUCHE*/
.M14_deco_un a
{
color:white !important;
line-height:80px;
}

/*ON REDIMENSSIONNE L IMAGE DANS LE BLOC A GAUCHE*/
.M14_deco_deux img{max-width:76px;max-height:76px;margin-top:-2px;float: left;margin-left: 20%;}

Il faut bien prendre en compte la hauteur surtout de chaque div et adapter si besoin  Wink  .

a++
avatar

Milouze14
Membre actif

Masculin
Messages : 4995
Inscrit(e) le : 18/04/2005

https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre deux div côte à côte

Message par Anadéia le Ven 20 Avr 2018 - 22:14

Coucou !

J'ai essayé ton code mais je ne comprends pas très bien ce que tu as voulu faire je t'avoue >< mais en relisant à nouveau mon message c'est vrai que je ne me suis pas très bien (pas du tout) bien exprimée.

J'ai pu grâce à .1019 mettre les deux formes à côté, cependant je n'arrive pas à voir ce que je veux, c'est-à-dire ça : https://zupimages.net/up/18/16/xb3s.png

Même si j'ai à peu près réussi ce que je voulais faire, je ne sais pas comment intégrer une image à mon losange. J'aimerais qu'on puisse placer une icon et qu'elle se mettre aussitôt dans la forme du losange, mais rien à faire : elle se met à côté (ce qui est logique) et quand j'ai réussi à la mettre en forme de losange, elle a pivoté car j'ai appliqué les propriétés du losange à l'image, donc une rotation ><
avatar

Anadéia
Nouveau membre

Messages : 19
Inscrit(e) le : 22/08/2017

http://hopelesschoice-rpg.forumactif.org
Anadéia a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre deux div côte à côte

Message par .1019 le Ven 20 Avr 2018 - 23:34

Salut !

Déjà, pour appliquer un espace entre deux div, je te recommande l'utilisation de :

margin: Apx Bpx Cpx Dpx;

Chaque lettre (A à D) correspond à un chiffre de ton choix.

A : marge en haut (margin-top)
B : marge à droite (margin-right)
C : marge en bas (margin-bottom)
D : marge à gauche (margin-left)

Dans le sens des aiguilles d'une montre! Si tu ne veux une marge que d'un côté, je te conseille ce qu'il y a entre parenthèse à la place d'un simple margin. Ca s'écrit ainsi :

margin-top: Apx;

La balise hr sert à créer une ligne, comme:

Voici un premier paragraphe au-dessus de la balise hr.

En voici un second, en-dessous de la balise hr.

Donc absolument pas à utiliser quand on veut de l'espace!

Pour ton second problème, c'est autre chose : faire d'une image un losange est "compliqué". Tu es cependant sur la bonne voie : il suffit de faire un div qui contient l'image, de faire tourner le div et de faire tourner l'image dans l'autre sens. [lien] vers un CodePen (un site de codage Wink) qui va pouvoir t'aider. Donc, en se basant sur ce dernier :
Code:
<div class="ton-div-fleche"></div><div class="diamond-shape-container"><img src="URL_de_ton_image" /></div>
(comme tu as l'air de poster sur un topic, je t'ai tout mis côte à côte mais si jamais tu codes sur template (avec un éditeur, donc), n'oublie pas de rajouter des retours à la ligne sur les balises et des alinéas)
Code:
.diamond-shape-container {
margin-left: 10px; /* J'ai mis le nombre au pif, n'hésite pas à modifier selon ta convenance */
overflow: hidden; /* Pour cacher ce qui dépasse de la div */
width: 200px; height: 200px; /* Là aussi j'ai mis la taille (largeur et hauteur) au pif, à toi de voir ce qui te convient */
transform: rotate(45deg); /* Là on fait tourner la div */
}

.diamond-shape container img { /* On cible la balise img, ici */
transform: rotate(-45deg); /* Là on fait tourner l'image*/
transform-origin: center; /* Je t'explique ça ensuite */
}

Transform-origin, c'est pour savoir à partir d'où tu bouges ton image.

Aussi : il faut que ton image soit plus grande que le conteneur. Donc une image de 100 x 100 dans un losange de 50 x 50, ça passe. Mais le contraire, non.

Tu peux changer, dans ce code, le nom des class (diamond-shape-container par exemple) à ta convenance. Supprime les commentaires quand tu l'ajoutes dans ton code, ils ne sont nécessaires qu'à ta compréhension.

Voilà Wink

(PS : par "moche", gryffindor, j'entendais "un code sale" : un code difficile à maintenir pour un codeur, peu propre, et dans ce cas particulier, peu permissif avec une alternative (display: inline-block) plus courte et très "propre" à utiliser, rien de plus!)
avatar

.1019
**

Messages : 84
Inscrit(e) le : 11/05/2013

.1019 a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre deux div côte à côte

Message par Milouze14 le Sam 21 Avr 2018 - 8:53

Hello Anadéia et .1019 ,

Déjà, pour appliquer un espace entre deux div, je te recommande l'utilisation de :


Mon astuce est totalement opérationnelle quoi que tu puisses dire et on peut placer ce que l'on souhaite ou l'on veut du moment que le navigateur reçoit les bonnes informations.

De plus Anadéia ne demande pas a avoir son image en losange ni avoir une rotation comme tu le mentionnes dans ton code mais avoir une séparation entre les deux divs.

Il faut savoir aussi que tu donnes un style avec des commentaires ayant des apostrophes , ce qui génère des erreurs sur certaines anciennes structures.

Anadéia, comme je l'avais mentionné sur mon premier message:
http://forum.forumactif.com/t396476-mettre-deux-div-cote-a-cote#3314967

Ou veux tu placer ce code html ?
Merci de le donner afin que l'on puisse travailler sur quelque chose de concret  Wink  .

Pour info, mon code html donne ce résultat (bon j'avoue que c'est pas terrible mais bon le résultat est là  Very Happy )

Lien à gauche avec le losange a sa droite (séparation) et les deux images à droite.



a++
avatar

Milouze14
Membre actif

Masculin
Messages : 4995
Inscrit(e) le : 18/04/2005

https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre deux div côte à côte

Message par .1019 le Sam 21 Avr 2018 - 11:34

Salut !

Je n'ai rien dit sur ta solution, haha, désolé, j'ai juste 'vite fait' lu les problèmes que rencontrait encore l'aut.eur.rice du sujet, mais peut-être que c'était déjà réglé!

Pour la rotation et le losange, j'ai peut-être mal compris?
@Anadéia a écrit:je ne sais pas comment intégrer une image à mon losange. J'aimerais qu'on puisse placer une icon et qu'elle se mettre aussitôt dans la forme du losange
Pour la rotation : elle est nécessaire pour faire le losange (on retourne de toutes manières l'image dans l'autre sens, donc pas de panique, ça n'a quasi aucun effet).

Quant aux commentaires: j'ai bien dit qu'il fallait les supprimer, ils ne sont là que pour aiguiller, ici, sur ce sujet, l'aut.eur.rice !
avatar

.1019
**

Messages : 84
Inscrit(e) le : 11/05/2013

.1019 a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre deux div côte à côte

Message par Milouze14 le Sam 21 Avr 2018 - 12:58

Re,
elle est nécessaire pour faire le losange

On parle d'un effet sur la première div et non sur l'image:
http://forum.forumactif.com/t396476-mettre-deux-div-cote-a-cote#3314888

non car cette div fera l'effet escompté:
Code:

.M14_losange
{
float: right;
width:0;
height:0;
border-style: solid;
border-width: 40px;
border-color: transparent pink transparent transparent;
}

a++
avatar

Milouze14
Membre actif

Masculin
Messages : 4995
Inscrit(e) le : 18/04/2005

https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre deux div côte à côte

Message par Anadéia le Sam 21 Avr 2018 - 22:30

Bonjour, désolée de l'attente haha, je n'avais pas d'ordinateur disponible

Donc, Milouze14, j'ai montré dans une image plus haut ce que je souhaitais (mais bon, ce n'est pas très clair, donc si jamais je peux toujours expliquer davantage !!) et c'est pour ça que je n'ai pas trop compris ce que tu as voulu faire ^^' Du coup je reposte : https://www.zupimages.net/up/18/16/xb3s.png
J'ai réussi à faire la première forme en me débrouillant, mais je n'arrive pas à placer un losange à côté comme sur la photo. C'est ce que j'aimerais : et comme l'a précisé .1019, avec une image dedans. Comme une icon en forme de losange. Sauf que quand j'essaye de placer une image dedans, elle se met aussitôt en losange et... Du coup, elle penche avec.
Et du coup, .1019, j'ai essayé ton code mais rien à faire, l'image tourne avec le losange >< J'ai essayé de changer la valeur de "rotate" de l'image, mais elle ne bouge pas...

Comme je l'ai dit dans mon premier message, c'est pour créer une fiche toutes occasions. Le HTML se placerait donc dans un message.
avatar

Anadéia
Nouveau membre

Messages : 19
Inscrit(e) le : 22/08/2017

http://hopelesschoice-rpg.forumactif.org
Anadéia a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre deux div côte à côte

Message par .1019 le Sam 21 Avr 2018 - 23:51

Ok.

Tu pourrais nous passer de nouveau ton code HTML + CSS avec ton essai pour faire tourner l'image ? Ca me semble bizarre que ça ne fonctionne pas, je vais essayer de mon côté.
avatar

.1019
**

Messages : 84
Inscrit(e) le : 11/05/2013

.1019 a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre deux div côte à côte

Message par Lixyr le Mer 25 Avr 2018 - 11:44

Bonjour,

Pourrait-on avoir le lien d'un sujet où se trouve ce losange que vous souhaitez, ou le code que vous testez ?


EN PRÉSENCE RÉDUITE LA SEMAINE - RÉPOND AUX MP
avatar

Lixyr
Aidactive
Aidactive

Féminin
Messages : 6172
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

En cours Re: Mettre deux div côte à côte

Message par Chacha le Lun 30 Avr 2018 - 9:49

Bonjour,

Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 9 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement !

Ce sujet est déplacé à la corbeille, merci d'ouvrir un nouveau sujet si nécessaire, en respectant les Règles générales du forum.
avatar

Chacha
Modéractif
Modéractif

Masculin
Messages : 56503
Inscrit(e) le : 21/08/2010

http://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum