28173 sujets

CSS et mise en forme, CSS3

[Résolu] Site extensible jusqu'à une limite fixée !

Bonjour

Est il possible de construire un site extensible avec une largeur de page de 1000 pixels maxi contenant du texte, le tout visible sans scroll en plein écran pour les résolutions 800x600 ?

J'ai commencé par trouver ceci par clb56

En fait le vrai avantage des design fluides c'est de permettre une 
adaptation du rendu pour les faibles résolutions d'écrans en controlant 
et limitant le résultat sur les très grandes résolutions. Or ceci est très 
aisément réalisable, si on place l'ensemble du code html compris dans le
body dans un <div> global :

<body>
<div id="global">
... tout le contenu balisé du document...
</div>
</body>


Alors avec un stylage css tel que :

body {
margin-left:5%;
margin-right:5%;
}
div#global {
margin-left:auto;
margin-right:auto;
max-width:1000px;
}



Le résultat est acquis pour firefox, Opera et IE7



Qu'en est il des versions d'IE inférieures à IE7 qui elles n'implémentent 
pas les propriétés max/min width/height ?

Et bien il se trouve qu'il existe une solution pour émuler cela. 
A placer dans un commentaire conditionnel :

<!--[if lt IE 7]>
<style type="text/css">
div#global {
width:expression(document.body.clientWidth > 1000? "1000px": "auto" );
}
</style>
<![endif]-->


Comme on le voit cela constitue un solution javascript propre à IE.
On peut encore ajouter une petite chose pour le cas IE less than IE7 
et javascript inactif en modifiant le code précédent comme suit :

<!--[if lt IE 7]>
<style type="text/css">
div#global {
width:750px;
width:expression(document.body.clientWidth > 1000? "1000px": "auto" );
}
</style>
<![endif]-->

Auquel cas si js est inactif on aura un banal design fixe de 750px 
en raison du premier width, et le second width ne sera pas interprété.

Et si js est actif la seconde déclaration du width écrasera la première.


Mais cela ne fonctionne pas.
D'autres conseils ?

Merci,

Serge
Modifié par Serge (09 Jan 2008 - 01:17)
Encore une question :

Comment se fait il que tout fonctionne avec Firefox ou IE 6 ; Il n'y a pas de différence en utilisant la propriété max-width avec l'un ou l'autre des 2 navigateurs.
Je n'ai même pas besoin de placer le commentaire conditionnel indiqué dans la FAQ ??

Je n'ai pas encore pu tester l'endroit ou se place le commentaire. J'ai essayé dans le "head" de chaque page qui s'affichent : sommaire rubriques articles...

Je suis sous SPIP 1.9.2c [10268].

Merci de me donner une piste.

Serge Smiley confused 

body {
	color: #33308F;
	background: #76E064 url(images/background.jpg) no-repeat fixed top center;
	font-size: 1.em;
	line-height: 1.2em;
	text-align: center; /*	--------		"text-align: center;" pour centrer dans IE		--------	*/
	margin: 0 2%; 
}

#page	{
	position: relative;
	text-align: left; /* pour annuler l'heritage de text-align: center dans body */
	margin: 0 auto; /* auto pour centrer horizontalement la boite dans body pour le navigateurs autres que IE/Windows */
	margin-left: auto;
	margin-right: auto;
	max-width: 1000px;
}

#conteneur #contenu	{
	margin: 0 119px 0 117px;
	padding: 5px 11px 30px;
	text-align: justify;
	background: White ;
}

#conteneur #navigation {
	position: absolute;
	top: 0;
	right: -2px;
	width: 117px;
	margin: 0 0 1em 0;
	padding: 0 0 1em 0;
}

Modifié par Serge (08 Jan 2008 - 01:15)
Serge a écrit :
Comment se fait il que tout fonctionne avec Firefox ou IE 6 ; Il n'y a pas de différence en utilisant la propriété max-width avec l'un ou l'autre des 2 navigateurs.

Ben soit tu utilises un max-width pour rien car dans la pratique il ne change rien au comportement de ta page (ou du moins il ne change rien de perceptible en restant en résolution 1024x768 ou même 1280xN); soit tu as testé avec IE7 (qui applique max-width) et pas avec IE6.
Modifié par Florent V. (08 Jan 2008 - 12:21)
Voici la version : 6.0.2900.2180.xpsp_sp2_gdr.070227-2254

upload/1433-IE.jpg
Modifié par Serge (08 Jan 2008 - 11:48)
FlorentV voulait dire
"soit tu as testé avec IE7 (qui applique max-width) et pas avec IE6."
Modifié par Marvin Le Rouge (08 Jan 2008 - 11:43)
Merci de vos réponses !!

Je n'ai pas installé IE7 sur cet ordinateur pour avoir accés facilement à IE 6.

Si je désire que mon site ait une max-width de 900 ?
Firefox : Okay !
IE 6 lui, ne bronche pas et ouvre la page comme si 1000 px lui est demandé.
...Comme si IE 6 ne fonctionnait qu'avec une max-width de 1000. Est-ce normal ?
Modifié par Serge (08 Jan 2008 - 12:05)
Je viens juste de télécharger Multiple IEs que je vais tester.
Merci, de vos réponses qui fusent en temps réel !!
Serge a écrit :
Si je désire que mon site ait une max-width de 900 ?
Firefox : Okay !
IE 6 lui, ne bronche pas et ouvre la page comme si 1000 px lui est demandé.
...Comme si IE 6 ne fonctionnait qu'avec une max-width de 1000. Est-ce normal ?

Ah d'accord... j'ai cru plus haut que tu t'étonnais que max-width marche sur IE6 comme sur Firefox. Alors que bon, si IE6 implémentait les dimensions minimales ou maximales, ça se saurait (ça n'est pas le cas).

Si tu obtiens une largeur de 1000px environ, c'est sans doute parce que tu dois avoir:
- un width: 1000px;
- ou bien un width: N%;
- ou bien des marges des deux côtés de ton bloc qui restreignent sa largeur totale;
- ou bien des marges ou du padding important sur body ou sur un conteneur de ton bloc...
Enfin bref une autre raison, quoi.

IE6 n'implémente pas max-width, contrairement à tous les navigateurs un peu récents (dont IE7).
La FAQ aborde d'ailleurs un moyen détourné d'avoir une fonctionnalité relativement proche (via Javascript) avec IE6.

On en parle aussi ici:
http://css.alsacreations.com/Tutoriels-et-articles-divers/Faire-un-site-pour-toutes-les-resolutions
Oui merci.
Voici le code que j'ai placé dans le "head de "sommaire" sous Spip.
<!--[if lt IE 7]>
<style type="text/css">
div id="page" {
	width: 770px;
	width: expression(document.body.clientWidth <= 742? "740px" : document.body.clientWidth >= 902? "900px" : "auto");
}
</style>
<![endif]-->

Pour le CSS :
#page	{
	position: relative;
	text-align: left; /* pour annuler l'heritage de text-align: center dans body */
	margin: 0 auto; /* auto pour centrer horizontalement la boite dans body pour le navigateurs autres que IE/Windows */
	margin-left: auto;
	margin-right: auto;
	max-width: 900px;
	min-width: 740px;
}

Mais il n'intervient pas dans le comportement d'IE 6.
Est-ce que je l'ai placé au bon endroit ?
Je teste sur Easy Php en local.
Modifié par Serge (08 Jan 2008 - 13:23)
Maintenant, il m'arrive un truc spécial sous IE 6 :

Alors que tout s'affichait en plein écran : une width de 1000 px qui ne tenait pas compte des réductions à 900 px... ...et bien maintenant tout est décalé avec un scroll : "#page" affiche une width de 1050px environ + les menus à côté ??

Je ne sais pas d'où cela provient ?

IE 6 + Easy php + max-width ? + Spip ?

Une pause s'impose Smiley langue !
Modifié par Serge (08 Jan 2008 - 13:34)
Salut,

Dans le petit bout de CSS à destination d'IE < 7, tu as écrit :
div id="page" {
...

Au lieu de :
div#page {
...
Question bête: le commentaire conditionnel est bien placé après l'appel des feuilles de styles normales?
Modifié par Florent V. (08 Jan 2008 - 20:38)
Sujet clos
Aller à