Rectangles
MiracleHeart
Messages postés
6
Date d'inscription
Statut
Membre
Dernière intervention
-
MiracleHeart Messages postés 6 Date d'inscription Statut Membre Dernière intervention -
MiracleHeart Messages postés 6 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Sur mon site internet, je souhaite mettre sur la gauche dans le cadre alloué pour ça, les coordoonnées de l'entreprise et un bouton allant sur contact.html pour la demande de devis.
Le soucis, étant débutant voire inexpérimenté, je ne sais pas comment faire... J'avais pensé à faire par des rectangles... mais je sais pas trop comment faire...
Je vous ai mis ce que je veux dans le final:
http://img547.imageshack.us/img547/2603/coordonnees.jpg
Merci d'avance de votre aide et de vos conseils.
Sur mon site internet, je souhaite mettre sur la gauche dans le cadre alloué pour ça, les coordoonnées de l'entreprise et un bouton allant sur contact.html pour la demande de devis.
Le soucis, étant débutant voire inexpérimenté, je ne sais pas comment faire... J'avais pensé à faire par des rectangles... mais je sais pas trop comment faire...
Je vous ai mis ce que je veux dans le final:
http://img547.imageshack.us/img547/2603/coordonnees.jpg
Merci d'avance de votre aide et de vos conseils.
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
- Comment reduire la taille d'un document - Guide
- Comment récupérer un document dans le presse-papier samsung - Guide
- Nom de l'adresse ✓ - Forum Réseaux sociaux
9 réponses
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 ;)
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 :)
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 :)
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
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 ;)
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 !