Problème htlm [disposition texte ]
max
-
Squel8 Messages postés 324 Date d'inscription Statut Membre Dernière intervention -
Squel8 Messages postés 324 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
j'ai un problème en htlm, voir css ( je suis néophyte - donc je sais pas trop, où se situe le problème ).
mon problème: lorsque je teste mon code, avec mon navigateur ... la disposition tu texte est placée comme je le souhaite ..
mais une fois, que jre réduire la fenêtre du navigateur ... les textes se chevauchent, et la diposition devient chaotique .
je souhaiterai, que la disposition du texte, en taille réduire ( navigateur ) soit identique à celle en taille ( normal - grand )
donc, je voudrais savoir comment y remédier à ce problème.
Merci,
le code htlm :
<body>
<!-- bloc d'inscription -->
<div> <p class="inscription"> inscription </p> </div>
<!-- bloc de connexion -- >
<div> <p class="connexion"> connexion </p> </div>
<!-- bloc de contenu de gauche -->
<div> <p class="blocgauche"> espace des contenu de gauche </p> </div>
<!-- bloc de contenu de droite -->
<div> <p class="blocdroite"> espace des contenu de droite </p> </div>
<!-- bloc de contenu de centre -->
<div> <p class="bloccentre"> espace des contenu du centre </p> </div>
<!-- bloc des menu -->
<div> <p class="blocmenu"> espace des menu </p> </div>
<!-- bloc du bas des parties officiel -->
<div> <p class="blocofficiel"> espace officiel </p> </div>
</body>
mon code css:
/* bloc de connexion*/
.connexion
{
position: absolute;
right: 120px;
top: 2px;
}
/* bloc inscription */
.inscription
{
position: absolute;
right: 15px;
top: 2px;
}
/* bloc de gauche */
.blocgauche
{
position: absolute;
left: 5px;
bottom: 450px;
}
/* bloc de droite */
.blocdroite
{
position: absolute;
right: 5px;
bottom: 450px;
}
/* bloc de centre */
.bloccentre
{
position: fixed;
right: 540px;
bottom: 450px;
}
/* bloc de menu */
.blocmenu
{
position: absolute;
right: 600px;
bottom: 550px;
}
/* bloc officiel */
.blocofficiel
{
position: absolute;
right: 600px;
bottom: 5px;
}
j'ai un problème en htlm, voir css ( je suis néophyte - donc je sais pas trop, où se situe le problème ).
mon problème: lorsque je teste mon code, avec mon navigateur ... la disposition tu texte est placée comme je le souhaite ..
mais une fois, que jre réduire la fenêtre du navigateur ... les textes se chevauchent, et la diposition devient chaotique .
je souhaiterai, que la disposition du texte, en taille réduire ( navigateur ) soit identique à celle en taille ( normal - grand )
donc, je voudrais savoir comment y remédier à ce problème.
Merci,
le code htlm :
<body>
<!-- bloc d'inscription -->
<div> <p class="inscription"> inscription </p> </div>
<!-- bloc de connexion -- >
<div> <p class="connexion"> connexion </p> </div>
<!-- bloc de contenu de gauche -->
<div> <p class="blocgauche"> espace des contenu de gauche </p> </div>
<!-- bloc de contenu de droite -->
<div> <p class="blocdroite"> espace des contenu de droite </p> </div>
<!-- bloc de contenu de centre -->
<div> <p class="bloccentre"> espace des contenu du centre </p> </div>
<!-- bloc des menu -->
<div> <p class="blocmenu"> espace des menu </p> </div>
<!-- bloc du bas des parties officiel -->
<div> <p class="blocofficiel"> espace officiel </p> </div>
</body>
mon code css:
/* bloc de connexion*/
.connexion
{
position: absolute;
right: 120px;
top: 2px;
}
/* bloc inscription */
.inscription
{
position: absolute;
right: 15px;
top: 2px;
}
/* bloc de gauche */
.blocgauche
{
position: absolute;
left: 5px;
bottom: 450px;
}
/* bloc de droite */
.blocdroite
{
position: absolute;
right: 5px;
bottom: 450px;
}
/* bloc de centre */
.bloccentre
{
position: fixed;
right: 540px;
bottom: 450px;
}
/* bloc de menu */
.blocmenu
{
position: absolute;
right: 600px;
bottom: 550px;
}
/* bloc officiel */
.blocofficiel
{
position: absolute;
right: 600px;
bottom: 5px;
}
A voir également:
- Problème htlm [disposition texte ]
- Texte de chanson gratuit pdf - Télécharger - Vie quotidienne
- Transcription audio en texte word gratuit - Guide
- Excel cellule couleur si condition texte - Guide
- Texte barré whatsapp - Guide
- Excel si cellule contient partie texte ✓ - Forum Excel
2 réponses
Salut max,
voilà comment moi je procède, je ne dis pas que c'est la meilleur solution, je n'en sais rien. En tout cas tes textes ne se chevaucheront pas.
Code html:
<!-- bloc de contenu general -->
<div class="bloccontenu">
<!-- bloc de contenu de gauche -->
<div class="blocgauche">bloc gauche</div>
<!-- bloc de contenu de centre -->
<div class="bloccentre">bloc centre</div>
<!-- bloc de contenu de droite -->
<div class="blocdroite">bloc droite</div>
</div>
code css:
/* bloc de gauche */
.blocgauche
{
height: 200px;
width: 200px;
float: left;
text-align: center;
}
/* bloc de droite */
.blocdroite
{
height: 200px;
width: 200px;
float: left;
text-align: center;
}
/* bloc de centre */
.bloccentre
{
height: 200px;
width: 200px;
float: left;
text-align: center;
}
/* bloc de contenu general */
.bloccontenu {
height: 200px;
width: 600px;
margin-right: auto;
margin-left: auto;
}
"float: left" pour positionner toutes les div de gauche à droite
je crée une nouvelle div (ou bloc si tu préfère) appelé bloccontenu dans laquel je regroupe toutes mes autres div (blocgauche, bloccentre, blocdroite), je centre cette div avec "margin-right: auto; margin-left: auto;" ensuite je lui met une largeur, en l'occurrence la somme des largeurs des div blocgauche, blocdroite et bloccentre et le tour est joué.
Mare dé fote dortaugraf, on conpran ri1 a ceu ke vs zécrivé
voilà comment moi je procède, je ne dis pas que c'est la meilleur solution, je n'en sais rien. En tout cas tes textes ne se chevaucheront pas.
Code html:
<!-- bloc de contenu general -->
<div class="bloccontenu">
<!-- bloc de contenu de gauche -->
<div class="blocgauche">bloc gauche</div>
<!-- bloc de contenu de centre -->
<div class="bloccentre">bloc centre</div>
<!-- bloc de contenu de droite -->
<div class="blocdroite">bloc droite</div>
</div>
code css:
/* bloc de gauche */
.blocgauche
{
height: 200px;
width: 200px;
float: left;
text-align: center;
}
/* bloc de droite */
.blocdroite
{
height: 200px;
width: 200px;
float: left;
text-align: center;
}
/* bloc de centre */
.bloccentre
{
height: 200px;
width: 200px;
float: left;
text-align: center;
}
/* bloc de contenu general */
.bloccontenu {
height: 200px;
width: 600px;
margin-right: auto;
margin-left: auto;
}
"float: left" pour positionner toutes les div de gauche à droite
je crée une nouvelle div (ou bloc si tu préfère) appelé bloccontenu dans laquel je regroupe toutes mes autres div (blocgauche, bloccentre, blocdroite), je centre cette div avec "margin-right: auto; margin-left: auto;" ensuite je lui met une largeur, en l'occurrence la somme des largeurs des div blocgauche, blocdroite et bloccentre et le tour est joué.
Mare dé fote dortaugraf, on conpran ri1 a ceu ke vs zécrivé
Si tu veux que ça ressemble d'avantage à ce que tu as fait, ça donne:
/* bloc de gauche */
.blocgauche
{
height: 200px;
width: 33.33%;
float: left;
text-align: left;
}
/* bloc de droite */
.blocdroite
{
height: 200px;
width: 33.33%;
float: left;
text-align: right;
}
/* bloc de centre */
.bloccentre
{
height: 200px;
width: 33.33%;
float: left;
text-align: center;
}
.bloccontenu {
height: 200px;
width: auto;
margin-right: auto;
margin-left: auto;
}
je met la largeur de la div bloccontenu en "auto" je divise la totalité de ton écran par tes 3 colones, c'est à dire 100% divisé par 3 = 33.33% que j'appilque aux div
/* bloc de gauche */
.blocgauche
{
height: 200px;
width: 33.33%;
float: left;
text-align: left;
}
/* bloc de droite */
.blocdroite
{
height: 200px;
width: 33.33%;
float: left;
text-align: right;
}
/* bloc de centre */
.bloccentre
{
height: 200px;
width: 33.33%;
float: left;
text-align: center;
}
.bloccontenu {
height: 200px;
width: auto;
margin-right: auto;
margin-left: auto;
}
je met la largeur de la div bloccontenu en "auto" je divise la totalité de ton écran par tes 3 colones, c'est à dire 100% divisé par 3 = 33.33% que j'appilque aux div