Rectangles
Fermé
MiracleHeart
Messages postés
6
Date d'inscription
mardi 11 décembre 2012
Statut
Membre
Dernière intervention
15 décembre 2012
-
11 déc. 2012 à 17:21
MiracleHeart Messages postés 6 Date d'inscription mardi 11 décembre 2012 Statut Membre Dernière intervention 15 décembre 2012 - 15 déc. 2012 à 07:50
MiracleHeart Messages postés 6 Date d'inscription mardi 11 décembre 2012 Statut Membre Dernière intervention 15 décembre 2012 - 15 déc. 2012 à 07:50
A voir également:
- Dans ce document, trouvez les lettres situées derrière les rectangles pour reconstituer le nom du chat. comment s'appelle-t-il ?
- Coco chat - Accueil - Réseaux sociaux
- Remplaçant de Coco : quelles solutions pour tchater gratuitement en ligne ? - Accueil - Réseaux sociaux
- Dans cette présentation, trouvez l'étoile. quel nombre contient-elle ? ✓ - Forum Word
- Chat coco débloquer ✓ - Forum Réseaux sociaux
- Annuaire portable gratuit a partir d'un nom ✓ - Forum Mobile
9 réponses
Guiver
Messages postés
262
Date d'inscription
mardi 30 novembre 2010
Statut
Membre
Dernière intervention
20 mai 2021
87
12 déc. 2012 à 07:53
12 déc. 2012 à 07:53
Salut,
Un <div> et 4 <p> devrait suffire.
Regarde sur le site du zéro pour apprendre le HTML, c'est tres facile ;)
Un <div> et 4 <p> devrait suffire.
Regarde sur le site du zéro pour apprendre le HTML, c'est tres facile ;)
MiracleHeart
Messages postés
6
Date d'inscription
mardi 11 décembre 2012
Statut
Membre
Dernière intervention
15 décembre 2012
12 déc. 2012 à 07:56
12 déc. 2012 à 07:56
ok merci pour le conseil, j'irais sur le site que tu m'indiques, si jamais j'ai d'autres questions, je les laisserais ici :)
MiracleHeart
Messages postés
6
Date d'inscription
mardi 11 décembre 2012
Statut
Membre
Dernière intervention
15 décembre 2012
14 déc. 2012 à 08:04
14 déc. 2012 à 08:04
Re,
Je suis arrivé à ce dont je voulais, le soucis est que je n'arrive pas à centrer le texte dans mes rectangles et à faire rejoindre chaque cadre blanc, vous pourrez le voir sur l'image suivante:
http://img407.imageshack.us/img407/6172/sanstitre1fhc.jpg
le code html est le suivant:
<div id="pageleft">
<p class="titre2">Nom Entreprise</p>
<p class="titre3">99, rue de l'informatique
<br>
<br>
75000 Paris
<br>
<br>
France
<br>
<br>
Tel: (+33) 06 75 75 75 75</p>
<p class="titre4">Demande De Devis En Ligne</p>
<p class="titre5">Réalisez un devis en ligne grâce à notre formulaire de contact</p>
</div>
le code css est le suivant:
#pageleft{ min-height:500px;
height:auto;
width:185px;
float:left;
display:inline-block;
background-color:#cecece;
border:1px solid #000;
margin-left:50px;
}
.titre2 {
color:#fff;
font-size:16px;
font-weight:bold;
text-align:center;
margin-top:auto;
background-color:#0f1d76;
border:3px solid #fff;
width:179px;
height:30px;}
.titre3 {
color:#000;
font-size:13px;
font-weight:bold;
text-align:left;
vertical-align:left;
background-color:#cecece;
border:3px solid #fff;
width:179px;
height:180px;}
.titre4 {
color:#fff;
font-size:12px;
font-weight:bold;
text-align:center;
background-color:#0f1d76;
border:3px solid #fff;
width:179px;
height:30px;
}
.titre5 {
color:#000;
font-size:12px;
font-weight:bold;
text-align:center;
background-color:#cecece;
border:3px solid #fff;
width:179px;
height:50px;
}
Je sais pas trop où j'ai fais une erreur... Merci pour vos conseils :)
Je suis arrivé à ce dont je voulais, le soucis est que je n'arrive pas à centrer le texte dans mes rectangles et à faire rejoindre chaque cadre blanc, vous pourrez le voir sur l'image suivante:
http://img407.imageshack.us/img407/6172/sanstitre1fhc.jpg
le code html est le suivant:
<div id="pageleft">
<p class="titre2">Nom Entreprise</p>
<p class="titre3">99, rue de l'informatique
<br>
<br>
75000 Paris
<br>
<br>
France
<br>
<br>
Tel: (+33) 06 75 75 75 75</p>
<p class="titre4">Demande De Devis En Ligne</p>
<p class="titre5">Réalisez un devis en ligne grâce à notre formulaire de contact</p>
</div>
le code css est le suivant:
#pageleft{ min-height:500px;
height:auto;
width:185px;
float:left;
display:inline-block;
background-color:#cecece;
border:1px solid #000;
margin-left:50px;
}
.titre2 {
color:#fff;
font-size:16px;
font-weight:bold;
text-align:center;
margin-top:auto;
background-color:#0f1d76;
border:3px solid #fff;
width:179px;
height:30px;}
.titre3 {
color:#000;
font-size:13px;
font-weight:bold;
text-align:left;
vertical-align:left;
background-color:#cecece;
border:3px solid #fff;
width:179px;
height:180px;}
.titre4 {
color:#fff;
font-size:12px;
font-weight:bold;
text-align:center;
background-color:#0f1d76;
border:3px solid #fff;
width:179px;
height:30px;
}
.titre5 {
color:#000;
font-size:12px;
font-weight:bold;
text-align:center;
background-color:#cecece;
border:3px solid #fff;
width:179px;
height:50px;
}
Je sais pas trop où j'ai fais une erreur... Merci pour vos conseils :)
Guiver
Messages postés
262
Date d'inscription
mardi 30 novembre 2010
Statut
Membre
Dernière intervention
20 mai 2021
87
14 déc. 2012 à 16:56
14 déc. 2012 à 16:56
J'ai peut être mal compris, mais je vois ton texte centré partout sauf dans ".titre3".
Ce qui est normal puisque ton text-align est sur "left"
Si c'est pour que tes <p> soient centré dans les <div>, essaie avec :
Et rajoute :
pour les rapprocher.
Tiens nous au jus ;)
Ce qui est normal puisque ton text-align est sur "left"
Si c'est pour que tes <p> soient centré dans les <div>, essaie avec :
min-width: 100%; width: 100%; max-width: 100%;
Et rajoute :
margin: 0; padding: 0;
pour les rapprocher.
Tiens nous au jus ;)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
MiracleHeart
Messages postés
6
Date d'inscription
mardi 11 décembre 2012
Statut
Membre
Dernière intervention
15 décembre 2012
14 déc. 2012 à 17:56
14 déc. 2012 à 17:56
J'ai remplacé mes <p class="titre2" </p> par des <div class="titre2" </div>
avec ce changement, j'ai résolu un problème: j'ai rapproché tous mes titres comme je voulais.
Il me reste un problème à résoudre et là pas trouvé encore la soluce: centrer le nom de l'entreprise et demande de devis en ligne...
Si vous avez une astuce ;)
avec ce changement, j'ai résolu un problème: j'ai rapproché tous mes titres comme je voulais.
Il me reste un problème à résoudre et là pas trouvé encore la soluce: centrer le nom de l'entreprise et demande de devis en ligne...
Si vous avez une astuce ;)
Guiver
Messages postés
262
Date d'inscription
mardi 30 novembre 2010
Statut
Membre
Dernière intervention
20 mai 2021
87
14 déc. 2012 à 22:20
14 déc. 2012 à 22:20
Ce que je t'ai conseillé n'a pas marché ?
MiracleHeart
Messages postés
6
Date d'inscription
mardi 11 décembre 2012
Statut
Membre
Dernière intervention
15 décembre 2012
14 déc. 2012 à 22:24
14 déc. 2012 à 22:24
non ça n'a pas marché
Guiver
Messages postés
262
Date d'inscription
mardi 30 novembre 2010
Statut
Membre
Dernière intervention
20 mai 2021
87
14 déc. 2012 à 23:02
14 déc. 2012 à 23:02
Attends, je crois que je viens de comprendre...
Tu veux centrer ton texte verticalement et tu veux que les <p> se touchent c'est ca ?
Déjà, je te conseil de remettre des <p> au lieu des <div>. Bien que ca fonctionne comme tu l'as fait, ce n'est pas propre du tout.
Pour que les <p> se touchent, je pensais que supprimer les margent suffiraient.
Essaient de définir les height dans se cas la.
Pour le centrage vertical, la, c'est une autre paire de manche.
Le "vertical-align", c'est un peu au petit bonheur la chance cette propriété....
Pour que ca marche correctement sur tout les navigateurs, il faut se creuser les méninges.
Voici un lien très bien fait qui explique un peu comment s'en sortir.
http://phrogz.net/css/vertical-align/index.html
Et un autre
https://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Par contre, je ne connais pas de méthode qui te permettrons de faire els deux choses que tu demandes. Puisque ce n'est pas le texte qui sera centré, mais la balise <p>....
Par contre, ne met pas de border au <p> que tu veux centrer verticalement mais mets en au <div> contenant.
Bonne chance !
Tu veux centrer ton texte verticalement et tu veux que les <p> se touchent c'est ca ?
Déjà, je te conseil de remettre des <p> au lieu des <div>. Bien que ca fonctionne comme tu l'as fait, ce n'est pas propre du tout.
Pour que les <p> se touchent, je pensais que supprimer les margent suffiraient.
Essaient de définir les height dans se cas la.
Pour le centrage vertical, la, c'est une autre paire de manche.
Le "vertical-align", c'est un peu au petit bonheur la chance cette propriété....
Pour que ca marche correctement sur tout les navigateurs, il faut se creuser les méninges.
Voici un lien très bien fait qui explique un peu comment s'en sortir.
http://phrogz.net/css/vertical-align/index.html
Et un autre
https://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Par contre, je ne connais pas de méthode qui te permettrons de faire els deux choses que tu demandes. Puisque ce n'est pas le texte qui sera centré, mais la balise <p>....
Par contre, ne met pas de border au <p> que tu veux centrer verticalement mais mets en au <div> contenant.
Bonne chance !
MiracleHeart
Messages postés
6
Date d'inscription
mardi 11 décembre 2012
Statut
Membre
Dernière intervention
15 décembre 2012
15 déc. 2012 à 07:50
15 déc. 2012 à 07:50
Merci, je vais lire tes deux sites et faire des essais, je te tiens au courant :)