Menu
EtoileAbonnementRSS
jeuxvideo.com  /  Tous les forums  /  Forum principal Informatique  /  Forum Programmation  / 

Topic Comment aligner des photos et du texte en CSS

Sujet : Comment aligner des photos et du texte en CSS

1
AucuneRace03
AucuneRace03
MP
17 octobre 2019 à 21:09:09

Bonjour,
J'ai question simple en CSS
Pour avoir ce résultat , je dois procéder par ligne ou par bloc ?
Je dois afficher les 3 photos sur une même ligne puis pareil pour le texte ou je dois placer le tout bloc par bloc et mettre le 2e bloc au milieu et le 3e à droite ?

Car quand j'essaye de procéder par ligne,j'arrive à mettre la photo au milieu et l'autre à droite mais elles sont pas au même niveau.
Et quand j'essaye de les monter je n'y arrive pas :(

http://image.noelshack.com/fichiers/2019/42/4/1571338246-excentric-screen.png

Code source html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Excentric</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" >
</head>
<body>
<header>
<h2>Excentric</h2>
<h1>Notre magasin</h1>
<nav>
<ul>
<li><a class="home" href="index.html">Home</a></li>
<li><a class="news" href="#">News</a></li>
<li><a class="contact" href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<img class="img1" src="img/magasin.jpg" alt="magasin" />
<p> Il est des magasins qui meublent votre intérieur comme ils meubleraient une conversation embarrassée : ils font littéralement du remplissage.</p>
<p>Il en est d’autres qui prennent le temps d’un vrai dialogue avec vous avant de vous proposer différentes options.</p>
<p>Excentric a toujours privilégié cette approche-là.</p>
</article>
<article>
<img class="img2" src="img/2.jpg" alt="2" />
<p>Avant même de poser une table, un lit, une étagère ou des accessoires dans votre maison ou votre lieu de travail, c’est une relation de confiance que nous installons entre vous et nous.</p>
<p>Plus de vingt ans d’expérience dans un secteur en constante évolution nous permettent de cerner rapidement et avec précision les demandes les plus fines.</p>
<p>Excentric propose des pièces de mobilier résolument contemporaines, audacieuses sans être extravagantes, remarquables sans être incongrues.</p>
</article>
<article>
<img class="img3" src="img/DSC_6373.jpg" alt="dsc" />
<p> Vous rencontrerez chez nous la sagesse zen d’une table de salle à manger en même temps que l’exubérance contenue d’un luminaire ou la confortable élégance de chaises pour collectivités.</p>
<p><em>Excentric.</em><br><strong>Dans le meilleur sens du terme…</strong></p>
</article>
</main>
</body>
</html>

boucif
boucif
MP
17 octobre 2019 à 23:26:10

Perso je créerai 3 div avec dans chacune d’elle ton image et ton texte, ton image devra être en witdh 100% laisse la height en auto, et defini sur ta div en flex 1
Je les mettrai dans une div en flex row nowrap

Apres je suis sur tel je peux pas tester ce que ça donne je verra ça demain après ta d’autres solution comme utilisée table et definir 3 colonne et 2 lignes mais c’est old school comme approche et galère à gérer en responsive

MrInnerPeace
MrInnerPeace
MP
18 octobre 2019 à 07:47:11

Bootstrap

Row + col

boucif
boucif
MP
18 octobre 2019 à 11:11:59

Le 18 octobre 2019 à 07:47:11 MrInnerPeace a écrit :
Bootstrap

Row + col

tu met pas en place bootstrap pour aligner 3 images, rassures moi

tiens cadeau le css qui colle à ton html :

main{
display:flex;
flex-direction: row;
flex-wrap: nowrap;
}

main article{
flex:1;
padding: 10px;
}

main article img{
width: 100%;
height: auto;
margin-bottom: 20px;
}

Message édité le 18 octobre 2019 à 11:13:24 par boucif
AucuneRace03
AucuneRace03
MP
20 octobre 2019 à 19:09:03

Le 18 octobre 2019 à 11:11:59 boucif a écrit :

Le 18 octobre 2019 à 07:47:11 MrInnerPeace a écrit :
Bootstrap

Row + col

tu met pas en place bootstrap pour aligner 3 images, rassures moi

tiens cadeau le css qui colle à ton html :

main{
display:flex;
flex-direction: row;
flex-wrap: nowrap;
}

main article{
flex:1;
padding: 10px;
}

main article img{
width: 100%;
height: auto;
margin-bottom: 20px;
}

Merci tu gères
C'était surtout au niveau de ça où j'avais du mal

main{
display:flex;
flex-direction: row;
flex-wrap: nowrap;
}

Message édité le 20 octobre 2019 à 19:09:28 par AucuneRace03
boucif
boucif
MP
20 octobre 2019 à 19:33:13

Flexbox notion à maîtriser absolument pour le web, nouveauté CSS3 indispensable qui te sort d'un paquet de merde que t'avais avant surtout pour faire du responsive
https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox

AucuneRace03
AucuneRace03
MP
20 octobre 2019 à 20:31:09

Mon cours est organisé bizaremment.
Le miducle sur les flexbox est juste après sur celui auquel je suis càd le module des positionnements.

Je sais pas si le prof voulez qu'on positionne ça d'une autre façon ?

Sinon voilà mon rendu , j'ai deux questions
http://www.noelshack.com/2019-42-7-1571596387-b77e36e6782.png

J'ai centré le nav en utilisant ça

nav {
    display: inline-block;  
    padding-left: 620px;
    margin-top: 5px;
}

Mais je pense que c'est pas la meilleur façon non ?

De plus,je n'ai pas réussi à mettre le nav dans la bordure

Message édité le 20 octobre 2019 à 20:33:11 par AucuneRace03
boucif
boucif
MP
21 octobre 2019 à 09:37:53

Le 20 octobre 2019 à 20:31:09 AucuneRace03 a écrit :
Mon cours est organisé bizaremment.
Le miducle sur les flexbox est juste après sur celui auquel je suis càd le module des positionnements.

Je sais pas si le prof voulez qu'on positionne ça d'une autre façon ?

Sinon voilà mon rendu , j'ai deux questions
http://www.noelshack.com/2019-42-7-1571596387-b77e36e6782.png

J'ai centré le nav en utilisant ça

nav {
    display: inline-block;  
    padding-left: 620px;
    margin-top: 5px;
}

Mais je pense que c'est pas la meilleur façon non ?

De plus,je n'ai pas réussi à mettre le nav dans la bordure

Tu peux aussi utiliser une flexbox
https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligner_des_%C3%A9l%C3%A9ments_dans_un_conteneur_flexible

Message édité le 21 octobre 2019 à 09:38:05 par boucif
Dys
Dys
MP
21 octobre 2019 à 10:20:16

Avec du grid c'est aussi bien voire mieux

boucif
boucif
MP
21 octobre 2019 à 11:05:54

Pourquoi vouloir utiliser un grid pour aligner un pauvre menu, à moins que tu veux organiser la page avec un grid chose qui peut ce concevoir.

1
Répondre
Prévisu
?
Victime de harcèlement en ligne : comment réagir ?
Infos 0 connecté(s)

Gestion du forum

Modérateurs : godrik, LGV
Contacter les modérateurs - Règles du forum

Sujets à ne pas manquer

Boutique
Luigi's Mansion 3 Amazon 44,49€
Pokémon Epée Amazon 46,99€
Pokémon Bouclier Amazon 46,99€