28173 sujets

CSS et mise en forme, CSS3

Bonjour voila j'ai un petite probleme je n'obtient pas la même chose sous Firefox et sous internet Explorer 7
en fait c'est etonnant mais sous IE7 sa marche nickel mais pas sous firefox Grrr
J'ai valider mon CSS mais rien toujours ce probleme
Il n'y a pas de fonction qui sont comprise que par l'un des deux navigateur des fois??
VoiCi mon CSS

body {
width : 1024px;
height : 576px;
padding : 0;
margin : 60px 0 0 0;
background : url(../images/culture.jpg) no-repeat;
background-position : center center;
}
div#left {
float : left;
width : 29%;
height : 91%;
color : white;
border: 1px solid #000;
}
div#theme_fr {
font-weight : bold;
font-family : arial, sans-serif;
font-size : 30px;
margin-left : 16%;
margin-top : 91%;
}
div#theme_en {
font-family : arial, sans-serif;
font-size : 23px;
margin-left : 16%;
margin-top : 2%;
}
div#right {
float : right;
width : 29%;
height : 91%;
border: 1px solid #000;
}
div#middle {
float : left;
height : 91%;
width : 41%;
text-align : center;
padding : 0 10px 0 10px;
border: 1px solid #000;
}
div#message {
margin : 20% 0 25% 0;
}
div#message TD {
font-family : arial, sans-serif;
font-size : 20px;
vertical-align : top;
font-weight : bold;
padding : 0 0 30px 10px;
}
DIV#position_politesse {
position : absolute;
top : 78%;
left : 30%;
width : 100%;
}
DIV#politesse {
color : #52b1b4;
font-size : 18px;
}
DIV#heure {
width : 60px;
height : 60px;
margin-left : 61%;
margin-top : 36%;
}
DIV#flash {
margin-left : 25%;
}



Ensuite voici mon HTMl


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
  <HEAD>
    <META http-equiv="content-type" content="text/html; charset=windows-1250">
    <LINK rel="stylesheet" type="text/css" href="./include/fiche.css">
<SCRIPT LANGUAGE="JavaScript" SRC="./include/previsualiser.js"></script>
       
    <TITLE> Culture
    </TITLE>
  </HEAD>
  <body>

    <div id="left">
    <div id="theme_fr">
    Restauration    </div>
    <div id="theme_en">
      Restauration    </div>
    </div>
    <div id="middle">
    <div id="message">

    <TABLE>
    <TR>
                       
    <TD><IMG SRC="./images/image_modifier/fleche1.jpg" WIDTH=29 HEIGHT=20/></TD>
<TD>Du <font color="#cc9900">10 septembre au 30 novembre 2007</font><br />From <font color="#cc9900">September 10 to November 30 2007</font><br /></TD></TR><TR>                    
          <TD><IMG SRC="./images/image_modifier/fleche1.jpg" WIDTH=29 HEIGHT=20/></TD>
<TD>FIAP: Salle / <i>room</i> d'Oslo<br /></TD></TR><TR>                  
         <TD><IMG SRC="./images/image_modifier/fleche1.jpg" WIDTH=29 HEIGHT=20/></TD>

<TD><i>Lilyane Marguier</i><i><font color="#339900"><font size="3" /></font></i></TD></TR><TR>                    
              <TD><IMG SRC="./images/image_modifier/fleche1.jpg" WIDTH=29 HEIGHT=20/></TD>
<TD>Peinture/ <i>Painting</i><br /></TD></TR>
      </TABLE>
      </DIV><!-- fin <div id="message"> -->
         
            <DIV id="position_politesse">
              <TABLE >
                <TR>
                  <TD>

                    <IMG SRC="./images/image_modifier/vague.jpg" WIDTH=38 HEIGHT=40 /></TD>
                  <TD>
                       <DIV id="politesse">
                      autre<br/>So Beautiful</DIV>
                   </TD>
                  <TD>
                    <IMG SRC="./images/image_modifier/vague.jpg" WIDTH=38 HEIGHT=40 /></TD>
                </TR>

              </TABLE> 
               </DIV>
    </DIV><!-- fin <div id="middle"> -->
    <div id="right">
      <div id="flash">
       <!--
       Affichage du flash sur la coté droit avec les images en fonction du groupes
      -->
      <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="215" height="390" id="domino_double" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="./flash/domino_double.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />

<!--Variables pour l'application FLASH domino_double (voir aussi dans EMBED-->

<param name="FlashVars" value="&img1=./images/image_modifier/Collines.jpg&img2=./images/image_modifier/Nenuphars.jpg">
<embed src="./flash/domino_double.swf" flashvars="&img1=./images/image_modifier/Collines.jpg&img2=./images/image_modifier/Nenuphars.jpg" quality="high" bgcolor="#ffffff" width="215" height="390" name="domino_double" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
      
      </div> 
      <DIV id="heure">
          31/05/2007          <script>dT();</script>
      </div>
    </div><!-- fin <div id="right"> -->
 
  </body>
  <META http-equiv="Refresh" content="5;URL=see_fiap_fiche.php?i=1&borne=1"/>
</HTML>


Voila si vous avez des questions je suis a votre disposition
Merci
Cordialement
AttiliA
Modifié par attila771 (31 May 2007 - 16:06)
Bonjour,

Peut être le dimensionnement de body (ce n'est jamais bien bon) ou ton dimensionnement en % (pour les valeurs arrondies et les floats) ?
Avec un bout de page en ligne ce serait mieux car ton code en php !! Smiley biggol ou encore le code html résultant !
Oui désolé j'edite mon HTMl de suite

sinon quand tu dit
ghost a écrit :

ton dimensionnement en % (pour les valeurs arrondies et les floats) ?

tu veux dire au lieux de mettre height : 91%; je mets
par exemple height : 300px;
mais le probleme apres c'est au niveau du placement sa ne va pas sur toute les resolution non?
Modifié par attila771 (31 May 2007 - 16:07)
Personne d'autre a d'idée?

j'ai un autre problème en fait c'est quand je change de résolution,
quand je fais

width : 30%; sa fais 30% de la fenetre je voudrais moi que sa pointe sur l'image et que sa fasse 30% par rapport a l'image
Modifié par attila771 (03 Jun 2007 - 19:20)
On ma conseiller de mettre sa en debut de ma page c'est vraiment utile?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ou

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">


Je dois mettre quoi?
attila771 a écrit :
On ma conseiller de mettre sa en debut de ma page c'est vraiment utile?

Oui. Le doctype utilisé, HTML 4.01 Transitional dans sa version raccourcie (sans URL de la DTD), fait passer les navigateurs en mode Quirks, c'est à dire que chaque navigateur interprètera la page à sa sauce.

Avec le même doctype mais en version complète, soit :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

les navigateurs interprèteront la page en mode Standard, ce qui ne garantit pas un rendu identique mais aide déjà beaucoup.
Benjamin D.C. a écrit :
Peux-tu développer? Smiley smile

Théoriquement, body est un bloc comme les autres. Dans la pratique, son comportement est variable d'un navigateur à l'autre. Une couleur de fond attribuée à body prendra toute la hauteur du viewport, mais une image de fond ne prendra que la hauteur du contenu en flux dans Firefox 1.5+ (pas dans Firefox 1). Quant au dimensionnement, et à la gestion de border ou de margin, c'est assez variable.

Voilà pourquoi on utilise souvent un div#page ou div#global pour servir de conteneur global. C'est inutile en théorie, mais indispensable en pratique pour certaines choses.
Florent V. a écrit :

Théoriquement, body est un bloc comme les autres. Dans la pratique, son comportement est variable d'un navigateur à l'autre. Une couleur de fond attribuée à body prendra toute la hauteur du viewport, mais une image de fond ne prendra que la hauteur du contenu en flux dans Firefox 1.5+ (pas dans Firefox 1). Quant au dimensionnement, et à la gestion de border ou de margin, c'est assez variable.

Voilà pourquoi on utilise souvent un div#page ou div#global pour servir de conteneur global. C'est inutile en théorie, mais indispensable en pratique pour certaines choses.
Voilà, c'est ce que je voulais entendre! Smiley ravi
Pour ma part, j'utilise très souvent body comme bloc conteneur que je peux centrer, dimensionner etc. comme bon me semble, tout en connaissant les quelques limites inhérantes à cette technique. Tout ça pour dire que "non, ce n'est pas toujours mauvais d'utiliser body comme bloc conteneur". Pour ce qui est des différences d'implémentations, si l'on s'en tient à des styles mettons "simples" (largeur, position, etc.) il me semble que les différences entre navigateurs sont inexistantes.
Benjamin D.C. a écrit :
Tout ça pour dire que "non, ce n'est pas toujours mauvais d'utiliser body comme bloc conteneur".

Ça n'est effectivement pas une erreur. Par contre, cela demanderait de réaliser un batterie de tests sur divers navigateurs et diverses propriétés CSS, pour cerner très précisément quelles sont les limites. C'est envisageable, mais passer par un conteneur global facilite les choses (disons que c'est un mélange de prudence et de flemmardise Smiley lol ).
Florent V. a écrit :

Ça n'est effectivement pas une erreur. Par contre, cela demanderait de réaliser un batterie de tests sur divers navigateurs et diverses propriétés CSS, pour cerner très précisément quelles sont les limites. C'est envisageable, mais passer par un conteneur global facilite les choses (disons que c'est un mélange de prudence et de flemmardise Smiley lol ).

Haha oui effectivement, ça résume assez bien les choses. Smiley ravi
Benjamin D.C. a écrit :
Pour ce qui est des différences d'implémentations, si l'on s'en tient à des styles mettons "simples" (largeur, position, etc.) il me semble que les différences entre navigateurs sont inexistantes.


IE5.x y'en a pas comprendre ça comme ça. Pour lui body y'en a être l'élément racine, et nous y'en a pas pouvoir le positionner comme nous y'en a vouloir. Smiley biggol

NB: l'auteur de ce message tient à vous présenter ses excuses pour la syntaxe approximative. Ça y'en a être venu comme ça, sans raison particulière.
Modifié par Lanza (07 Jun 2007 - 14:41)
Lanza a écrit :


IE5.x y'en a pas comprendre ça comme ça. Pour lui body y'en a être l'élément racine, et nous y'en a pas pouvoir le positionner comme nous y'en a vouloir. Smiley biggol

NB: l'auteur de ce message tient à vous présenter ses excuses pour la syntaxe approximative. Ça y'en a être venu comme ça, sans raison particulière.

Hahaha, c'est sympa ce petit accent soudain, j'ai bien aimé moi. Smiley lol
Sinon, pour ce qui est d'ie5 heu franchement... hein... Smiley ravi