28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai vraiment du mal avec la mise en page css.
Je voudrais positionner mon texte d'une certaine façon et qu'il conserve cette position mais adapté a son bloc redimensionné.
Dans l'exemple j'aimerais qu'après redimensionnement le texte soit centré comme avant. J'ai pris l'exemple du texte centré mais je voudrais faire ça pour toute les directions.
Je ne comprends comment parvenir a cela.

[code]

body{
display: grid;
grid-template-columns: auto 700px auto;
grid-template-rows: repeat(3, 1fr);
grid-template-areas: ". . ."
". ac ."
". . .";
grid-column-gap: 10px;
grid-row-gap: 10px;
margin: 0;
padding: 0;
}

.zo{
background-color: green;
grid-area: ac;
height: 200px;
border: 5px solid red;
padding-left: 40%;
}

@media (max-width: 740px){
body{
grid-template-columns: auto 300px auto;
}
upload/1583860905-78421-exemple.png
Modérateur
Hello,
Tu as simplement un padding-left: 40%; sur .zo qui te fais un décalage… Tu peux simplement le remplacer par text-align: center; Smiley smile
Merci pour ta réponse mais je ne pense pas avoir été assez précis.

Je comprends bien dans le cas du centre mais admettons que je veuille une position très spécifique. Comment je peux faire pour que la position soit identique au précédent mais adapté au nouveau format du bloc ?

Une position "responsive" en quelque sorte.
Par exemple je veux que ce soit a la position 3/4 du bloc de forme rectangle et que ça me fasse pareil mais sur le bloc de forme carré.

Ca semble clair ?
Avec ton code, le début du texte fait exactement ce que tu veux (si j'ai compris). Le début du texte est toujours à 40% de la largeur du bloc vert.
Qu'est ce que tu veux de plus ?
Modérateur
Sorry du coup, je n'ai pas compris…
Comme Alainpre, je pense que ton code fait déjà ce que tu expliques Smiley ravi