Problème htlm [disposition texte ]

Fermé
Signaler
-
Messages postés
226
Date d'inscription
jeudi 1 avril 2010
Statut
Membre
Dernière intervention
26 novembre 2021
-
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;


}



2 réponses

Messages postés
226
Date d'inscription
jeudi 1 avril 2010
Statut
Membre
Dernière intervention
26 novembre 2021
47
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é
Messages postés
226
Date d'inscription
jeudi 1 avril 2010
Statut
Membre
Dernière intervention
26 novembre 2021
47
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