Participez aux Concours Mensuels :

Concours Mensuels Alsacréations
Auteur
pony
# 11 Jan 2006 - 13:33:43
Citer
47 Posts
Bonjour,

Après avoir vu les bases du css, je voudrais essayer de faire un style pour un site avec, soyons fou, une largeur non fixe telle que la largeur du conteneur principale soit d'une largeur à 80% et qu'il soit centrer. Jusque là zero problème. L'attribut magique min-width me permet de paramatrer une largeur minimum (770px) histoire de pas tout casser. Y a t il une manière de reproduire cette fonction sous Internet Explorer ?

Merci

Tentative de style pour le forum d'alsacreations
h*tp://membres.lycos.fr/ponysite/forumalsa/

http://www.w-ha.com 
^
Christian Le Bouler
# 11 Jan 2006 - 13:41:53
Citer
3135 Posts
Par analogie avec min-height tu peux essayer width tout court pour IE (mieux vaut prévoir des commentaires conditionnels)

^
pony
# 11 Jan 2006 - 15:21:47
Citer
47 Posts
J ai peur de ne pas avoir compris. Mon code est le suivant :

#conteneur {
width: 80%;
min-width : 770px;
margin:0 auto 0 auto;
border: 2px solid silver;
-moz-border-radius:10px;
border-radius:10px;
background:black;
}

Je voudrais que la largeur du site soit pas defaut fluide sauf lorsque l'internaute diminu trop sa fenêtre.

Je n ai pas compris la notion de commentaires conditionnels sweatdrop
Comment utiliser "width tout court pour IE" sans influencer le "width:80%" que je veux garder ?
Modifié par pony (11 Jan 2006 - 15:23)

Tentative de style pour le forum d'alsacreations
h*tp://membres.lycos.fr/ponysite/forumalsa/

http://www.w-ha.com 
^
Igor
# 11 Jan 2006 - 15:51:20
Citer
Modérateur
5646 Posts
pony a écrit :
[... ]
Je n ai pas compris la notion de commentaires conditionnels sweatdrop
Comment utiliser "width tout court pour IE" sans influencer le "width:80%" que je veux garder ?


IE ne comprend pas la propriété min-width. Tu gardes tes déclarations css actuelles width et min-width pour les navigateurs comprenant min-width et pour IE tu spécifies seulement un width avec un commentaire conditionnel:
<!--[if IE]>
<style>
#conteneur {
width: 770px;}
</style>
<! endif -->

à placer dans le head de ta page html. Cette propriété de #conteneur ne s'appliquera qu'à Internet Explorer.

Qu'est-ce que les commentaires conditionnels ?

http://maynaud.name/ 
^
pony
# 11 Jan 2006 - 17:51:55
Citer
47 Posts
ok je comprends smile

Donc sur IE, la largeur du site ne pourra qu'être fixe.

Tentative de style pour le forum d'alsacreations
h*tp://membres.lycos.fr/ponysite/forumalsa/

http://www.w-ha.com 
^
Vinc26
# 20 Feb 2006 - 22:54:32
Citer
22 Posts
Nous venons d'apporter une solution à ton probleme ici, de manière à ce que ce que tu cherches à faire fonctionne également sur IE :

http://forum.alsacreations.com/topic-4-11629-1-Elasticit-controle.html#p93707

Pré-tests sur Safari (Mac) et tests finaux sous Firefox (Mac/PC), et sous IE6 IE7 XP et Vista.

http://vincent.zorzi.free.fr 
^
kutone
# 21 Feb 2006 - 01:17:13
Citer
25 Posts
Voici un extrait de ce sujet

qui pourra te permettre de mieux cerner les notions de commentaires conditionnels et du fait que (d'après ce que j'ai compris) IE analyse height comme un min-height et produit le même effet d'allongement tout en ayant la valeur height comme valeur minimale (et non fixe comme on pourrai le penser).

L'idée est donc de créer une feuille de style avec la valeur min-height (ou width pour toi) que tous les navigateurs sauf IE utiliseront et une feuille de style, par exemple "syle_ie.css" qui sera appelée grâce au fameux commentaires conditionnels.

Comme indiqué précédement, tu placeras ce commentaire
<!--[if IE]>

<link rel="stylesheet" type="text/css" href="style_ie.css" />

<! endif -->


dans le header de ta page html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>HoldemRecords</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<!--[if IE]>

<link rel="stylesheet" type="text/css" href="style_ie.css" />

<! endif -->
<link rel="stylesheet" type="text/css" media="screen" href="style.css">

<style type="text/css">
<!--
body {
background-color: #000000;
}
-->
</style></head>


l'extrait du sujet en question:


merci pour les infos,
de mon côté ca se précise, après une brève lecture de cette partie de la FAQ et de ce post, en rapport avec ton conseil sur les commentaires relatifs, le
site charge soit style.css, soit style_ie.css. Et ca à l'air de marcher pas mal, merci encore à tous , mention spéciale pour mpop'


^

référencesLes références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org

Nos partenaires : Editions Eyrolles

Nikozen : Hébergement - Réalisation : Alsacreations.fr

Powered by Phedio v3.8 beta in 8 ms © dew