Placer 2 DIV côte à côte

Invité · 31/07/2019, 22h19

Bonjour les Ami(e)s,
je cherche a réaliser une ossature de page ainsi:

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="fr">
<head></head><body>
<style>
/* extraits les plus importants */
body{background-color:#577bac;font-family:"Times New Roman", Times, serif;color:#feffff;font-size:22px;margin:0;padding:0;border:0;}
div.centre2blanc{height:auto;width:auto;max-width:900px;margin:auto;text-align:center;}
 
/* _________responsivitee_________ */
@media screen and (max-width:1024px){
div.centre2blanc{height:auto;width:auto;max-width:90%;margin:22px;text-align:center;}
 
 
@media (max-width:640px){body, element1, element2{width:auto;margin:0;padding:0;}
div.centre2blanc{height:auto;width:auto;max-width:90%;margin:10px;text-align:center;}
</style>
<div class="centre2blanc" >
 
<div id='MaQuestion1' class='MaQuestion1'></div><div id='MaQuestion2' class='MaQuestion2'></div>
<div id='MaQuestion1' class='MaQuestion1'></div><div id='MaQuestion2' class='MaQuestion2'></div>
 
</div>
</body></html>

Ma question est la suivante , quel CSS pour MaQuestion1 et 2
sachant que les Div ont tous la même taille soit 45% de centre2blanc
Qui contient TOUTE LA PAGE.
Mon souhait est le suivant dans la page lorsque nous la scrolleront
il y aura toujours deux DIV l'un a coté de l'autre en général texte / image.

Bien sur en smartphone et autres.. les DIV se mettent automatiquement l'un en dessous de l'autre. alors que mettre en CSS ?
merci d'avance

**NoSmoking** · 01/08/2019, 10h14

Bonjour,
plusieurs choses à dire.
Une ID doit être unique dans la page, qui plus est dans ce que l'on voit il n'y a pas lieu d'en avoir.

Ton CSS est mal formé, il manque des accolades fermantes sur tes @media.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* _________responsivitee_________ */
@media screen and (max-width:1024px) {
  div.centre2blanc {
    height: auto;
    width: auto;
    max-width: 90%;
    margin: 22px;
    text-align: center;
  }
}  /* ICI */
 
@media (max-width:640px) {
  body, element1, element2 {
    width: auto;
    margin: 0;
    padding: 0;
  }
 
  div.centre2blanc {
    height: auto;
    width: auto;
    max-width: 90%;
    margin: 10px;
    text-align: center;
  }
}  /* ICI */

Nota : il existe des CSS BEAUTIFY (par exemple) qui permettent d'y voir plus clair.

Pour en revenir à ce qui te préoccupe essaies un simple

Code :

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

1
2
3
4
.centre2blanc > div {
  display: inline-block;
  width: 45%;
}

il suffit sur le @media de repasser en block et auto les propriétés.

Invité · 01/08/2019, 10h35

Toi, depuis des années que je te croise, c'est toujours sobre et efficace ,mille mercis !
Et bonnes vacances j’espère.

Invité · 01/08/2019, 10h41

Bonjour,

Avec flexbox :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<section class="centre2blanc" >
  <article>
    <figure><img src="https://www.developpez.net/forums/avatars/337603-christele_r.gif?dateline=1419268586" alt="image"/></figure>
    <div>contenu texte christele_r</div>
  </article>
  <article>
    <figure><img src="https://www.developpez.net/forums/avatars/405341-nosmoking.gif?dateline=1420739142" alt="image"/></figure>
    <div>contenu texte NoSmoking</div>
  </article>
</section>

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
15
16
17
18
19
* { box-sizing:border-box; }
@media screen and (min-width:640px){
  .centre2blanc > article {
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .centre2blanc > article > figure,
  .centre2blanc > article > div
  {
    flex:1 1 45%;
    width:45%;
  }
}
 
  .centre2blanc > article > figure img
  {
    max-width:100%;
  }

CONSEIL : il ne faut pas hésiter à utiliser les balises HTML5.

Invité · 01/08/2019, 13h18

L'Ami Jureau62 je testes ta solution tout à l'heure
En premier je voudrais finaliser la solution de NoSmoking corrigée a savoir
j'en suis la... (j'ai encadré mes div pour que tu vois mieux...

Tout me vas bien, sauf deux points
1) j'aurais aimé que le div moins haut soit au niveau du plus grand ?
2) j'ai du mal écrire la responsivité car ils ne se mettent pas l'un en dessous de l'autre ??
Peux tu me dire si tu vois quoi faire ? merci d'avance.

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="fr">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head></head><body>
<style>
/* extraits les plus importants */
body{background-color:#577bac;font-family:"Times New Roman", Times, serif;color:#feffff;font-size:22px;margin:0;padding:0;border:0;}
div.centre2blanc{height:auto;width:95%;margin:auto;text-align:center;}
.centre2blanc > div {  display: inline-block;  width: 45%;border: 2px solid;}
h3 { font-size: 24px;  text-align: center;}
img.bandeww {width:90%}
 sur le @media de repasser en block et auto les propriétés. 
/* _________responsivitee_________ */
@media screen and (max-width:1024px){
div.centre2blanc{height:auto;width:auto;max-width:90%;margin:22px;text-align:center;}
.centre2blanc > div {  display: block;  width: auto;}
 
@media (max-width:640px){body, element1, element2{width:auto;margin:0;padding:0;}
div.centre2blanc{height:auto;width:auto;max-width:90%;margin:10px;text-align:center;}
.centre2blanc > div {  display: block;  width: auto;}
}
</style>
<div class="centre2blanc" >
 <h3>Un beau texte font-family</h3>
 
<div class='MaQuestion1'>
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.
</div>
<div class='MaQuestion2'><img class="bandeww" alt=""  src="logos/franck-1000-003.jpg" /></div>
<div class='MaQuestion1'><img class="bandeww" alt=""  src="logos/franck-1000-004.jpg" /></div>
<div class='MaQuestion2'>
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.
</div>
 
</div>
</body></html>

Tu peux voir ici : http://www.fox-infographie.com/pagefranck.htm

Invité · 01/08/2019, 14h06

Alors trop TOP l'Ami jreaux62, mais il faut que je comprenne il va falloir que je lises,
Bref la le texte est aligné, c'est trop beau ! et sur smartphone c'est comme je voulais.

Tu peux m'expliquer ce que fait

Code :

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

* { box-sizing:border-box; }

Bref j'ai fait comme tu as dit et ça donne

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="fr">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head></head><body>
<style>
* { box-sizing:border-box; }
.centre2blanc > article > figure img
  {
    max-width:100%;
  }
@media screen and (min-width:640px){
  .centre2blanc > article {
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .centre2blanc > article > figure,
  .centre2blanc > article > div
  {
    flex:1 1 45%;
    width:45%;
  }
}
 
</style>
 
<section class="centre2blanc" >
  <article>
    <figure><img src="logos/franck-1000-003.jpg" alt="image"/></figure>
    <div>  Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.</div>
  </article>
  <article>
        <div>  Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.</div>
        <figure><img src="logos/franck-1000-004.jpg" alt="image"/></figure>
  </article>
</section>
</body></html>

Visible ICI http://www.fox-infographie.com/pagefranck2.htm T'est un chef et MERCI A VOUS DEUX !

Invité · 01/08/2019, 14h30

Voir :

box-sizing

Ca permet de définir les dimensions (width) sans se préoccuper des padding/border.

En CSS, la largeur et la hauteur affectées à un élément s'appliquent par défaut à la boîte de contenu (content box) de l'élément.
Si l'élément possède une bordure (border) ou du remplissage (padding), celui-ci est ajouté à la largeur et/ou à la hauteur de la boîte affichée à l'écran.

Invité · 01/08/2019, 14h42

OK merci, mais ta solution je n'arrives pas à l'intégrer a mes pages complétés... ça signifie qu'il ne faut pas utilise de DIV ?
pourtant je n'en est que 1 avant qui encadre mon menu ?? ET QUE JE FERME bien avant de mettre ton module ???

Invité · 01/08/2019, 14h54

Envoyé par christele_r

...à l'intégrer a mes pages complétés...

On n'a que des extraits de code.
On ne peut pas en dire plus...

NoSmoking a mis le doigt sur plusieurs erreurs (HTML, CSS) : sont-elles corrigées ?

Si les structures HTML et/ou CSS ne sont pas valides, il est normal que les comportements ne soient pas forcément ceux escomptés.

N.B. Si je regarde le code de la page http://www.fox-infographie.com/, je me dis qu'il y a BEAUCOUP de boulot... ne serait-ce que pour structurer le code HTML avec des balises HTML5 (<nav> pour la navigation,...)
Bon courage.

Invité · 01/08/2019, 15h00

Merci, je contrôle et reviendrai demain A++

Invité · 01/08/2019, 15h03

Quelques exemples de mise en page avec flexbox :

Menu :

**NoSmoking** · 01/08/2019, 15h39

Envoyé par christele_r

Tout me vas bien, sauf deux points
1) j'aurais aimé que le div moins haut soit au niveau du plus grand ?
2) j'ai du mal écrire la responsivité car ils ne se mettent pas l'un en dessous de l'autre ??
Peux tu me dire si tu vois quoi faire ? merci d'avance.

point #1 :
cela se règle simplement en mettant modifiant la propriété vertical-align: middle par exemple

Code :

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

1
2
3
4
5
6
.centre2blanc > div {
    display: inline-block;
    width: 45%;
    border: 2px solid;
    vertical-align: middle;
}

point #2 :
Le CSS concernant le @media reste incorrect, il manque toujours une accolade fermante et surtout on retrouve une ligne

Code :

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

 sur le @media de repasser en block et auto les propriétés.

qui fait fourrer le code qui suit, il te faut faire preuve de plus de rigueur.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* _________responsivitee_________ */
@media screen and (max-width:1024px) {
  div.centre2blanc {
    height: auto;
    width: auto;
    max-width: 90%;
    margin: 22px;
    text-align: center;
  }
 
  .centre2blanc > div {
    display: block;
    width: auto;
  }
}
 
@media (max-width:640px) {
  body, element1, element2 {
    width: auto;
    margin: 0;
    padding: 0;
  }
 
  div.centre2blanc {
    height: auto;
    width: auto;
    max-width: 90%;
    margin: 10px;
    text-align: center;
  }
 
  .centre2blanc > div {
    display: block;
    width: auto;
  }
}

Envoyé par jreaux62

Avec flexbox :

Je ne suis pas un grand fan de l'utilisation ce modèle de boites lorsque l'on peut faire simple, il ne faudrait pas tomber dans le piège qu'à pu être l'utilisation dans tous les sens des éléments <table> pour la mise en page.

Envoyé par jreaux62

CONSEIL : il ne faut pas hésiter à utiliser les balises HTML5.

Un peu comme ci-dessus même si souvent l'apport sémantique reste intéressant, ajouter des conteneurs pour ajouter des conteneurs reviendrait à faire du BootStrap

.
N'ayant pas le contexte d'utilisation cela peut être néanmoins la bonne solution.

Placer 2 DIV côte à côte

Positionnement en CSS

Discussions similaires

Partager

Partager