Centrer un bloc qui s'adpate a la page

Résolu/Fermé
Utilisateur anonyme - 6 juil. 2012 à 07:53
lokakilo Messages postés 213 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 20 juin 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.


A voir également:

4 réponses

vincent170186 Messages postés 316 Date d'inscription mardi 17 mars 2009 Statut Membre Dernière intervention 28 septembre 2012 52
6 juil. 2012 à 10:21
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 .


1
lokakilo Messages postés 213 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 20 juin 2013 14
6 juil. 2012 à 16:01
Effectivement, c'est la meilleur solution
0
Utilisateur anonyme
7 juil. 2012 à 10:56
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.
0
lokakilo Messages postés 213 Date d'inscription dimanche 13 juillet 2008 Statut Membre Dernière intervention 20 juin 2013 14
8 juil. 2012 à 15:24
'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.
0
mimigenie Messages postés 1180 Date d'inscription dimanche 3 janvier 2010 Statut Membre Dernière intervention 4 août 2018 313
6 juil. 2012 à 09:35
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
0
Utilisateur anonyme
6 juil. 2012 à 09:42
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

0
mimigenie Messages postés 1180 Date d'inscription dimanche 3 janvier 2010 Statut Membre Dernière intervention 4 août 2018 313
6 juil. 2012 à 09:48
As-tu essayé d'appliquer exactement le code css du bloc 1 au bloc 2 pour voir ce qu'il se passe ?
0
Utilisateur anonyme
6 juil. 2012 à 10:03
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

0
mimigenie Messages postés 1180 Date d'inscription dimanche 3 janvier 2010 Statut Membre Dernière intervention 4 août 2018 313
6 juil. 2012 à 11:00
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 )
0
Utilisateur anonyme
7 juil. 2012 à 10:57
Non j'avais déjà essayer, et le fait de le codé comme le bloc 1 , me le mettais tous a gauche.
0