Redimension site web selon taille de l'ecran
mimi22
-
ptilu -
ptilu -
Bonjour,
J'ai actuellement développé un site internet via le logiciel SPIP. Mon problème est le fait de redimensionner mon site web selon la taille de l'écran. En effet, pour l'instant, il s'affiche comme je le voudrai, lorsque je me trouve sur un écran 15". Mais si on le voit sur un ecran de taille plus grande, une marge blanche sur chaque côté est visible.
Pourriez vous m'aider ?
Je pense changé mes script css, mais je ne voit pas ce que je pourrai mettre comme instruction pour qu'il le fasse automatiquement selon la taille de l'écran.
Cordialement
J'ai actuellement développé un site internet via le logiciel SPIP. Mon problème est le fait de redimensionner mon site web selon la taille de l'écran. En effet, pour l'instant, il s'affiche comme je le voudrai, lorsque je me trouve sur un écran 15". Mais si on le voit sur un ecran de taille plus grande, une marge blanche sur chaque côté est visible.
Pourriez vous m'aider ?
Je pense changé mes script css, mais je ne voit pas ce que je pourrai mettre comme instruction pour qu'il le fasse automatiquement selon la taille de l'écran.
Cordialement
A voir également:
- Redimension site web selon taille de l'ecran
- Comment réduire la taille d'un fichier - Guide
- Site de telechargement - Accueil - Outils
- Creation de site web - Guide
- Double ecran - Guide
- Web office - Guide
4 réponses
Bonjour,
Code ton site et tes marges en %; pour que ton site se redimensionne automatiquement.
Flareski
Code ton site et tes marges en %; pour que ton site se redimensionne automatiquement.
Flareski
Je te montre mon code css, car je ne voit pas le problème. J'ai pourtant bien mis en pourcentage.
body { background: #FFF; margin: 0; padding: 0; text-align: center; }
#page { position: relative; width: 58em; margin: 0 auto; text-align: left; }
#entete { width: 58em; margin: 0; padding-top: 1.60em; border-bottom: 2px solid #8B6F92; }
#entete a.accueil { display: block; width: 67%; }
#entete a.accueil img.spip_logos { vertical-align: bottom; line-height: 1em; }
#entete a.accueil #nom_site_spip { vertical-align: bottom; font-size: 2.2em; font-family: Georgia, Times, serif; font-weight: normal; }
#entete .formulaire_menu_lang { position: absolute; right: 0; top: 0.90em; display: block; width: 30%; } /*Cf.: spip_formulaires.css*/
#conteneur { clear: both; float: left; width: 67%; overflow: hidden; }
#contenu { padding-top: 0.30em; }
#navigation { float: right; width: 30%; margin-top: 1em; overflow: hidden; }
#extra { float: right; clear: right; width: 30%; margin-top: 1em; overflow: hidden; }
#pied { clear: both; width: 100%; margin: 0; padding: 0.40em 0; border-top: 1px solid #8B6F92; text-align: center; font-size: 0.90em; }
#pied img { vertical-align: middle; }
/* Espaceur de blocs */
.nettoyeur { clear: both; height: 0; margin: 0; padding: 0; border: 0; line-height: 1px; font-size: 1px; }
/* Non visible a l'ecran */
.invisible { position: absolute; top: -3000em; height: 1%; }
body { background: #FFF; margin: 0; padding: 0; text-align: center; }
#page { position: relative; width: 58em; margin: 0 auto; text-align: left; }
#entete { width: 58em; margin: 0; padding-top: 1.60em; border-bottom: 2px solid #8B6F92; }
#entete a.accueil { display: block; width: 67%; }
#entete a.accueil img.spip_logos { vertical-align: bottom; line-height: 1em; }
#entete a.accueil #nom_site_spip { vertical-align: bottom; font-size: 2.2em; font-family: Georgia, Times, serif; font-weight: normal; }
#entete .formulaire_menu_lang { position: absolute; right: 0; top: 0.90em; display: block; width: 30%; } /*Cf.: spip_formulaires.css*/
#conteneur { clear: both; float: left; width: 67%; overflow: hidden; }
#contenu { padding-top: 0.30em; }
#navigation { float: right; width: 30%; margin-top: 1em; overflow: hidden; }
#extra { float: right; clear: right; width: 30%; margin-top: 1em; overflow: hidden; }
#pied { clear: both; width: 100%; margin: 0; padding: 0.40em 0; border-top: 1px solid #8B6F92; text-align: center; font-size: 0.90em; }
#pied img { vertical-align: middle; }
/* Espaceur de blocs */
.nettoyeur { clear: both; height: 0; margin: 0; padding: 0; border: 0; line-height: 1px; font-size: 1px; }
/* Non visible a l'ecran */
.invisible { position: absolute; top: -3000em; height: 1%; }
SAlut la troupe
je ne sais pas si tu as resolu ton probleme mais je vois deja une erreur de script .
Je m'explque tu ecris tes tailels en "em"
alors que tu devrais les ecrire en "%" comme exemple la meme ligne ( remplace les X par des mesure algebrique;))
ensuite il y a pas mal de script pour le redimmensionnement mais tu devras utiliser le JavaScript ( pour recuperer la resolution du client) et le Php en reponse ( pour t adapter a la resolution client ) voili voilou j'espere avoir aider un peu ^^
je ne sais pas si tu as resolu ton probleme mais je vois deja une erreur de script .
Je m'explque tu ecris tes tailels en "em"
#entete { width: 58em; margin: 0; padding-top: 1.60em; border-bottom: 2px solid #8B6F92; }
alors que tu devrais les ecrire en "%" comme exemple la meme ligne ( remplace les X par des mesure algebrique;))
#entete { width: XX%; margin: 0; padding-top: XX%; border-bottom: 2px solid #8B6F92; }
ensuite il y a pas mal de script pour le redimmensionnement mais tu devras utiliser le JavaScript ( pour recuperer la resolution du client) et le Php en reponse ( pour t adapter a la resolution client ) voili voilou j'espere avoir aider un peu ^^
