Centrer un bloc qui s'adpate a la page [Résolu/Fermé]

Messages postés
4685
Date d'inscription
vendredi 22 janvier 2010
Statut
Contributeur
Dernière intervention
1 octobre 2019
- - Dernière réponse : lokakilo
Messages postés
217
Date d'inscription
dimanche 13 juillet 2008
Statut
Membre
Dernière intervention
2 octobre 2013
- 8 juil. 2012 à 15:24
Salut,

Donc voila, j'ai grimper un site et mis en place une shoutbox (chat)

il y a deux blocs.

1er : Le bloc principal où les messages posté s'affiche
2eme : Le bloc qui nous sert a écrire notre message et cliqué entrer pour l'envoyé.

Le premier bloc est centré sur la page, et quand je réduit la fenêtre en largeur, le bloc s'adapte et reste centré

Par contre le deuxième en dessous, resté figé a 750px a partir de la gauche

Si vous voyez ce que je veut dire, en gros c'est centré sur mon écran 21pouce, mais sur celui d'un pote avec un écran 15 pouce, il reste a 750px, et donc se retrouve + sur la droite.

J'aimerais codé le bloc pour qu'il soit centré, donc sans le left:750px

Et qu'il s'adpate suivant le navigateur et la taille différente des écrans.

Je vous montre en screen... Le premier en full fenêtre du navigateur :

http://uppix.net/3/c/9/632765ac5040b1ca88fbdc728c339.png

Et le 2eme, en rétrécissant la fenêtre on voit bien que le premier bloc reste centré et s'adapte à la la largeur, mais le 2eme reste a 750px en partant de la gauche :

http://uppix.net/e/5/8/e6c0c6672ae8b18c08bca4fd4726f.png

Donc voilà, sa fait un moment que je suis dessus, j'ai testé des "center" , des "auto", mais sa marche pas.


Je vous passe le code du blocs, que vous voyez comme il est codé :

<!-- la position du bloc "saisir le texte" -->
<div style=" position: absolute;
margin-top: 630px;
border-radius: 10px;
left: 700px;
right: auto;
width: 500px;
height: 150px;
text-align: center;
background: #EFECCA";><{$smarty.const._MD_SHOUTBOX_POPUP_CONSOLE}>

<{else}>
<{/if}>


Voilà, si vous avez des suggestions, j'en serait ravi, merci de vos aides et bonne journée.


Afficher la suite 

4 réponses

Meilleure réponse
Messages postés
316
Date d'inscription
mardi 17 mars 2009
Statut
Membre
Dernière intervention
28 septembre 2012
52
1
Merci
salut,

pour que le bloc de texte se deplace avec la taille de l'ecran essaye
de mettre une valeur left en % (selon la position que tu souhaite) et un margin left negatif (qui vaut la moitié de la taille de ton block)

genre pour le centrer ça donnerais : left:50%;margin-left:-250px;

si ton bloc 2 (blc texte) est palcé dans don bloc 1 , mets ton bloc 1 en position relative .


Dire « Merci » 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 71346 internautes nous ont dit merci ce mois-ci

lokakilo
Messages postés
217
Date d'inscription
dimanche 13 juillet 2008
Statut
Membre
Dernière intervention
2 octobre 2013
11 -
Effectivement, c'est la meilleur solution
r@zer-pro
Messages postés
4685
Date d'inscription
vendredi 22 janvier 2010
Statut
Contributeur
Dernière intervention
1 octobre 2019
438 -
Je confirme et te remercie vincent, le fait de tous mettre en relative a fait en sorte que le bloc s'adapte à la taille de l'écran.
Ensuite left et margin left me l'as calé au centre

Il y en plusieurs qui conseil de faire un css séparé du html, mais perso je préfère tous ensemble, c'est plus simple.
lokakilo
Messages postés
217
Date d'inscription
dimanche 13 juillet 2008
Statut
Membre
Dernière intervention
2 octobre 2013
11 -
'Il y en plusieurs qui conseil de faire un css séparé du html, mais perso je préfère tous ensemble, c'est plus simple.'
Tout le monde conseil ça et je ne peux te conseiller que ça, car moi aussi au début je pensais comme toi, mais je me trompais. Imagine qu'il y ai pas 1 page dans ton site mais plus (comme dans quasiment tous les sites). Si un jour tu dois changer le design du site, tu vas changer toutes les pages les unes après les autres? Alors qu'avec un fichier design.css, il te suffira seulement de changer ce fichier pour changer tout le site. Bien plus rapide et pratique.
Messages postés
1189
Date d'inscription
dimanche 3 janvier 2010
Statut
Membre
Dernière intervention
4 août 2018
206
0
Merci
Tes "center" et tes "auto" ne fonctionnent pas car tu as écrit left:700px donc c'est normal qu'il soit toujours décalé de 700px vers la droite.

Utilise des valeurs relatives donc en % pour placer tes blocs donc si tu mets 50% ( ou auto ) au lieu de 700 je pense que ca devrait aller
Messages postés
4685
Date d'inscription
vendredi 22 janvier 2010
Statut
Contributeur
Dernière intervention
1 octobre 2019
438
0
Merci
non déjà testé çà , en auto ou en % il reste quand même au même endroit, il s'adapte pas en restant centré comme le bloc n°1

mimigenie
Messages postés
1189
Date d'inscription
dimanche 3 janvier 2010
Statut
Membre
Dernière intervention
4 août 2018
206 -
As-tu essayé d'appliquer exactement le code css du bloc 1 au bloc 2 pour voir ce qu'il se passe ?
Messages postés
4685
Date d'inscription
vendredi 22 janvier 2010
Statut
Contributeur
Dernière intervention
1 octobre 2019
438
0
Merci
le bloc 1 il est codé comme sa :

<!-- la position du "bloc principal avec tous les messages qui s'affichent" -->
<div style="position: absolute;
opacity: 0.85;
width: 100%;
height: 600px;
text-align: center">

<iframe class="frame1" name="shoutFrame" width="50%" height="100%" src="shoutpopupframe.php" frameborder="0"></iframe>
</div>

Rien d'extraordinaire en + , pour sa que je comprends pas pourquoi le 1 qui es moins bien codé, est centré, et pas l'autre ...

comme dit , sa fait 2 jours que je suis dessus, et j'en es testé des solution, mais rien ne marche

mimigenie
Messages postés
1189
Date d'inscription
dimanche 3 janvier 2010
Statut
Membre
Dernière intervention
4 août 2018
206 -
Le bloc 1 a une largeur de 100% donc forcément il est centré, tu n'as qu'à faire ca pour le bloc 2 mais se sera moins beau car le bloc prendra toute la largeur mais s'adaptera à toutes les tailles d'écran ( y compris smartphone )
r@zer-pro
Messages postés
4685
Date d'inscription
vendredi 22 janvier 2010
Statut
Contributeur
Dernière intervention
1 octobre 2019
438 -
Non j'avais déjà essayer, et le fait de le codé comme le bloc 1 , me le mettais tous a gauche.