Redimension site web selon taille de l'écran

Question

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

giheller · Answer

Bonjour,

il faut travailler avec des "width" en % et non en largeur fixe.

exemple
body {
   width='100%'
}

mimi22 · Answer

J'ai pourtant bien mis en pourcentage, rien ne se passe

jjsteing · Answer

ah ca je sais !!! je le fait sur mon site :)

il se redimensionne en fonction de la taille de la fenetre ;)...

Tu paye combien ?? :p

Lol.. non.. je te ferais pas ca.. en plus c'est pas du tout dans l esprit de CCM ;)

bon.. alors .. plusieurs choses...

jjsteing · Answer

en js.. je cré des cookie avec la taille de l ecran actuel..
function SetCookie(Identifiacteur,Valeur){
	var TailleFenetreChange;
	var expdate = new Date ();
	expdate.setTime(expdate.getTime() + (24 * 60 * 60 * 1000 * 2));// 1 jour
	document.cookie = Identifiacteur + "=" + Valeur + "; expires=" + expdate.toGMTString();

	TailleFenetreChange=false;
	NomNavigateur=navigator.appName;
	VersionNavigateur=parseInt(navigator.appVersion);
	//pour IE
	if(NomNavigateur=='Microsoft Internet Explorer' && VersionNavigateur>=4){
		//MsgBox("" + screen.availHeight);
		if ( screen.availHeight != GetCookie("InnerHeight") || document.body.clientWidth != GetCookie("InnerWidth")){
				document.cookie = "InnerHeight=" + screen.availHeight + "; expires=" + expdate.toGMTString();
				document.cookie = "InnerWidth=" + screen.availWidth + "; expires=" + expdate.toGMTString();
		//document.cookie = "Test=testcookie; expires=" + expdate.toGMTString();
				TailleFenetreChange=true;
		}
	//Pour Firefox
	}else{
		if (window.innerHeight != GetCookie("InnerHeight") ||
			window.innerWidth != GetCookie("InnerWidth")){
				document.cookie = "InnerHeight=" + window.innerHeight + "; expires=" + expdate.toGMTString();
				document.cookie = "InnerWidth=" + window.innerWidth + "; expires=" + expdate.toGMTString();
				TailleFenetreChange=true;
		}
	}
	if (TailleFenetreChange == true){


		var UrlEnCours=location.href.split("?")[1];
}
}

mimi22 · Answer

Tu peu voir mon bout de code css ci dessus. J'ai bien fait en pourcentage à ce que je sache...


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%; }


-------------------------------

jjsteing · Answer

j'ai ca aussi en js :

function IniJS(AdresseIP){
	//MsgBox(AdresseIP);
    SetCookie('IP',"" + AdresseIP);//Necessaire pour mise a zero la 1ere fois
    setTimeout("IniJS('" + AdresseIP + "')",180);// Ecrit via settimeout la taille de la fenetre
	
}

comme ca il va ecrire un cookie regulierement et donc si la fenetre change de taille, tu le sais..

mimi22 · Answer

Je vais essayer ton code, 

Merci de ton aide

jjsteing · Answer

pis dans mon css ..

$ScreenW=$_COOKIE["InnerWidth"];
$ScreenH=$_COOKIE["InnerHeight"];

je me base sur ces variables afin de dimentionner mes div et tout le toutim ;)

Redimension site web selon taille de l'écran

8 réponses

Votre réponse

Discussions similaires

Newsletters