Partage

element d'un site cote a cote

comment aligner des elements sur plusieurs lignes

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 !! :)

Vous êtes demandeur d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
en ligne
Financée
à 100%
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 ?

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

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.
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.
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.
Staff 15 avril 2018 à 16:15:29

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
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.
15 avril 2018 à 21:07:37

merci a tous !!!! je vais essayer tout ca mais apparemment " flex box " me parait pas mal !!:D
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.
15 avril 2018 à 21:18:35

oui :D

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" !!:p

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.
Staff 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 ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
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 !! :D

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.
16 avril 2018 à 23:07:47

oui , c'est vrai mais je voulais surtout avoir une base puis apres experimenter comme tu dis ;)
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)
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 ;)
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)
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 :)

element d'un site cote a cote

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown