element d'un site cote a cote

comment aligner des elements sur plusieurs lignes

Japhet07

15 avril 2018 à 11:43:00

Bonjour a tous ,

je bute sur un truc tout simple mais j'ai un soucis pour le realiser

comment faire ceci en htlm et css car là j'utilise un tableau mais j'aimerais mieux en language htlm et css

avoir les element cote a cote sur plusieurs lignes

Si quelqu'un avait un petit programme de base , moi je ferais les modifs pour rectifier par rapport a mon site

merci d'avance a tous !!

Anonyme

15 avril 2018 à 11:54:13

Salut,

Je ne comprends pas ton problème, tu veux faire quelque chose de semblable à l'image que tu as envoyé ?

Pour écrire du texte un simple <p> suffit et pour sauter des lignes <br/>. Enfin dans le css utilise text-align:center. Et voilà le résultat sera le même. Je ne comprends donc pas où tu coince ?

Japhet07

15 avril 2018 à 14:31:52

en fait c'est pour aligner les dessins et le texte

je te donne l'adresse de ma page :

http://osmose-chocolaterie.com/contact.php

je veux enlever ce tableau et a la place , partager ma page en 2 comme pour la page d'accueil mais d'un coté , la partie telephone et courrier dans la partie de gauche et dans la partie de droite , je veux inserer un formulaire de contact

donc , pour la partie gauche , je n'arrive pas a aligner tous les elements tel que le telephone et l'enveloppe en dessin et les textes qui vont avec sur la droite

-
Edité par Japhet07 15 avril 2018 à 14:46:43

Zoki_Marciano

15 avril 2018 à 14:57:14

Tout est une question de découpage et juste pour précision <br> sert à faire un retour à la ligne et non a en sauter !

Pour arriver à faire ce que tu veux il te faut un bloc conteneur qui en contiendra deux autre, un pour les coordonnes et un pour le formulaire, après c'est de l'alignement.

-
Edité par Zoki_Marciano 15 avril 2018 à 15:21:40

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

Anonyme

15 avril 2018 à 15:26:20

<!DOCTYPE html>
<html>
	<head>
		<style>
			#A{
				font-size: 50px;
				width: 80px;
				height: 80px;
				line-height: 80px;
				text-align: center;
				float: left;
				border: 1px solid red;
				
			}
			
			#B{
				width: 220px;
				height: 80px;
				text-align: center;
				float: left;
				border: 1px solid green;
				
			}
			
			.parent{
				line-height: 80px;
				height: 80px;
			}
		</style>
	</head>
	
	<body>
		<div class="parent">
			<div id="A">A</div><div id="B">01 23 45 67 89</div>
		</div><br/>
			<div><div id="A">B</div><div id="B"><p>Magasin Random<br/>130 Rue des avions<br/>22000 Rennes</p></div>
		
	</body>
	
	<footer>
	</footer>
</html>

J'ai codé ça vite fait, mais cela semble être ce que tu veux.

Zoki_Marciano

15 avril 2018 à 15:37:46

Plus precisement pour avoir les deux parties cote à cote :

<div class="container">
  <div class="a">
    <h2>A</h2>
    <p>01 23 45 67 89</p>
  </div>
  
  <div class="b">
    <h2>B</h2>
    <p>Magasin Random</p>
    <p>130 Rue des avions</p>
    <p>22000 Rennes</p>
  </div>
</div>

Et le CSS :

p {
  margin: 0;
}

.container{
  text-align: center;
}

.a {
  float:left;
  width: 50%;
  background-color: red;
}

.b{
  float:left;
  width: 50%;
  background-color: blue;
}

Garde les id pour le javascript ça sera plus simple pour la suite.

-
Edité par Zoki_Marciano 15 avril 2018 à 15:39:08

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

Lamecarlate

15 avril 2018 à 16:15:29

Plutôt que float, utilisez Flexbox

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Zoki_Marciano

15 avril 2018 à 16:32:00

Oui je suis d'accord float est un mauvais reflex.

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

Japhet07

15 avril 2018 à 21:07:37

merci a tous !!!! je vais essayer tout ca mais apparemment " flex box " me parait pas mal !!

Zoki_Marciano

15 avril 2018 à 21:09:17

Flexbox evite de sortir du flux et c'est mieux !

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

Japhet07

15 avril 2018 à 21:18:35

oui

en fait je suis que patissier donc c'est vrai que parfois , y a des trucs tout simple qui me bloque betement , il me manque cette logique " mathematique" !!

Zoki_Marciano

15 avril 2018 à 21:25:52

tu n'es pas QUE pâtissier, tu ES pâtissier et c'est un grand métier !

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

Lamecarlate

15 avril 2018 à 21:30:09

Tout pareil que Zoki_Marciano ! Chercher à apprendre hors de son champ de métier, c'est une chouette chose :3 Bonne continuation !

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Japhet07

16 avril 2018 à 22:12:14

Merci a vous !!

voila comment j'ai fais

http://osmose-chocolaterie.com/contact.php

je sais pas si c'est la meilleur methode mais ca me va pour l'instant

et maintenant dans la partie droite , j'aimerais mettre un formulaire de contact

https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML

est ce que celui là est bon ou si vous avez un code en stcok , je suis preneur !!

Zoki_Marciano

16 avril 2018 à 22:52:56

Le lien que tu cites est un bon point de départ mais le mieux reste d'expérimenté par toi même ;-)

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

Japhet07

16 avril 2018 à 23:07:47

oui , c'est vrai mais je voulais surtout avoir une base puis apres experimenter comme tu dis

philiga

16 avril 2018 à 23:29:51

Bonsoir,

Une simple petite suggestion: à la place du blanc pur, trop criant à mes yeux ou du gris trop peu contrasté sur ta page Contact, essaie sur tes textes et menus d'autres couleur.s comme cornsilk ou antiquewhite si tu tiens au blanc (mais moins cru) ou encore essaie... "chocolate".

(Oui, les couleurs ont des noms : https://htmlcolorcodes.com/fr/noms-de-couleur/ )

Et "chocolate" semble créée pour ton site, dirait-on !

N'est-ce pas plus confortable...?

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

Japhet07

16 avril 2018 à 23:56:19

Philiga , je viens d'essayer avec la couleur " chocolate" , je prefere en blanc pur

je trouve qu'avec le gris , le blanc va mieux

philiga

17 avril 2018 à 8:22:19

OK, c'est toi qui voit.

Pour ce qui est des goûts, chacun a le sien ; toutefois, il faut penser à la lisibilité du site sur différents écrans.

Un analyseur de contraste comme celui-ci: http://contrast-finder.tanaguru.com/?lang=fr

confirme que ton contraste actuel est en-dessous de la norme minimale (2.64 pour 4.5 mini demandé) et propose (sans concertation préalable avec moi!) d'autres couleurs dans les tons chocolat également:

#827070 & #856F6F

Tu peux voir que avec ton contraste actuel (ancien contraste ci-dessous), à luminosité faible (partie gauche des grands cadres), on a du mal à lire:

Voici ce que ça donne sur ton site :

A toi de voir, tu peux tester aussi d'autres couleurs, mais c'est nettement plus confortable sur un écran de mini-ordinateur comme le mien avec un contraste correct qui n'oblige pas à monter la lumière générale (surtout avec des blancs purs par ailleurs).

PS: En demandant une palette de couleurs valide, il propose notamment #9F7D7D qui donne un meilleur contraste encore (5.7).

-
Edité par philiga 17 avril 2018 à 8:34:18

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

Japhet07

17 avril 2018 à 13:04:26

oui , c'est interessant , je vais y donner un coup d'oeil , j'avais pas pensé au fait d'augmenter la luminosité pour voir le gris