Sujet Précédent Sujet Suivant

Affichage different pour chaque résolution

Résolu/Fermé
phoenix__hunter Messages postés 4 Date d'inscription vendredi 30 mars 2007 Statut Membre Dernière intervention 4 mars 2008 - 8 oct. 2007 à 12:49
phoenix__hunter Messages postés 4 Date d'inscription vendredi 30 mars 2007 Statut Membre Dernière intervention 4 mars 2008 - 4 mars 2008 à 15:19
Bonjour,
voila ça fais un petit moment que je planche sur mon site web perso, et je vient de terminer ma page d'acceuille,enfin presque:
j'obtiens un résultat différent pour chaque résolution enfin je vous laisse jeter un oeil a mon ccs et mon html si vous voyer un truc qui peut ne pas coller faites moi signe, merci.
ccs:

body
{ width:100%; margin:auto; background-color:#000000 ; }

#en_tete
{ width:760px; height:140px; margin-left:21%; background-repeat:no-repeat;
background-image:url(../images/yapasouci/Text/yapasouci.jpg);}

#bouton1
{ float:left; padding-top:10%; padding-left:3%; width:17%; border:none;}

#corps
{ width:52%; margin-left:24%; margin-top:6%;}
h2
{ margin-right:3%; color:#FFFFFF; text-align:center; font-family:"Comic Sans MS", "Times New Roman", Arial;}

#pied_de_page
{color:#00CC33; text-align: center; padding-top:2%;}

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>YaPaSouci</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="screen" type="text/css" title="yapasouci" href="stiles/yapasouci.css" />
</head>
<body>
<div id="en_tete"> <!--Voir Css--> </div>
<a href="presentation.html"> <img src="images/yapasouci/bouton/présentation.jpg"alt="Bouton lien présentation" id="bouton1"/> </a>
<div id="corps">
<img src="images/yapasouci/tous.jpg" alt="Montage photo de tous les YaPaSouci" title="YaPaSouci"/>
<!--Intro-->
<h2>Bienvenue dans l'univers des YaPaSouci, totalement! <br/>
Déjantés, dingues, sans peur et sans reproche.<br/></h2></div>
<div id="pied_de_page">
<p>Copyright "Phoenix Corp" 2007, tous droits réservés</p></div>

</body>
</html>

1 réponse

Réponse 1 / 1
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 778
8 oct. 2007 à 14:36
Bonjour,

Pour voir tes éléments, essaye ça :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
    <title>YaPaSouci#1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" media="screen" type="text/css" title="yapasouci" href="stiles/yapasouci.css" />
    <style type="text/css">
body {
  width:100%;
  margin:auto;
  background-color:#000;
  } 
#en_tete {
  width:760px;
  height:140px;
  margin-left:21%;
  background-repeat:no-repeat;
  background-image:url(../images/yapasouci/Text/yapasouci.jpg);
  border : 1px solid #f0f;
  } 
#bouton1 {
  float:left;
  padding-top:10%;
  padding-left:3%;
  width:17%;
  border:none;
  border : 1px solid #ff0;
  } 
#corps {
  width:52%;
  margin-left:24%;
  margin-top:6%;
  border : 1px solid #f00;
  } 
h2 {
  margin-right:3%;
  color:#FFFFFF;
  text-align:center;
  font-family:"Comic Sans MS", "Times New Roman", Arial;
  border : 1px solid #fff;
  } 
#pied_de_page {
  color:#00CC33;
  text-align: center;
  padding-top:2%;
  border : 1px solid #0ff;
  } 
    </style>
  </head>
  <body>
    <div id="en_tete">
      <!--Voir Css-->
    </div>
     <a href="presentation.html">
      <img src="images/yapasouci/bouton/pr%C3%A9sentation.jpg" alt="Bouton lien pr&eacute;sentation" id="bouton1" />
     </a> 
    <div id="corps">
      <img src="images/yapasouci/tous.jpg" alt="Montage photo de tous les YaPaSouci" title="YaPaSouci" /> <!--Intro--> 
      <h2>Bienvenue dans l'univers des YaPaSouci, totalement!<br />
       D&eacute;jant&eacute;s, dingues, sans peur et sans reproches.<br />
      </h2>
    </div>
    <div id="pied_de_page">
      <p>Copyright "Phoenix Corp" 2007, tous droits r&eacute;serv&eacute;s</p>
    </div>
  </body>
</html>
Est-ce que tu tiens à tout ces % ? Oui, je suppose.
Toujours est-il que le mélange avec les px n'est pas forcément simple à gérer.
Et puis, pourquoi le id="bouton1" en % alors que c'est une image avec des dimensions bien définies (lesquelles) ?
Choisis.
Et en float. Dans quel but ? Où doit-il être placé ? À gauche de #corps ?
Dans la proposition qui suit, je l'ai mis sous l'en-tête.

Alors essayons de structurer ta page autrement :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
    <title>YaPaSouci#2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" media="screen" type="text/css" title="yapasouci" href="stiles/yapasouci.css" />
    <style type="text/css">
body {
  width:100%;
  background-color:#000;
  text-align : center;
  } 
#en_tete {
  width:760px;
  height:140px;
  margin : 0 auto;
  background-repeat:no-repeat;
  background-image:url(../images/yapasouci/Text/yapasouci.jpg);
  background-color : #fdf;
  } 
#bouton1 {
/*  float:left; */
  padding-top:10%;
  padding-left:3%;
/* là, il faudrait des dimensions */
  width:17%;
  border:none;
  background-color : #ffd;
  } 
#corps {
  margin : 0 auto;
  width:52%;
  margin-top:6%;
  text-align : left;
  background-color : #fdd;
  } 
h2 {
  color:#fff;
  text-align:center;
  font-family:"Comic Sans MS", Arial, sans-serif;
  background-color : #aaa;
  } 
#pied_de_page {
  margin : 0 auto;
  color:#0c3;
  text-align: center;
  padding-top:2%;
  background-color : #dff;
  } 
    </style>
  </head>
  <body>
    <div id="en_tete">
      <!--Voir Css-->
    </div>
     <a href="presentation.html">
     <!-- les width et height aident le navigateur -->
      <img id="bouton1" src="images/yapasouci/bouton/pr%C3%A9sentation.jpg" alt="Bouton lien présentation" width="???" height="???" />
     </a> 
    <div id="corps">
      <img src="images/yapasouci/tous.jpg" alt="Montage photo de tous les YaPaSouci" title="YaPaSouci" width="???" height="???" />
        <!--Intro--> 
      <h2>Bienvenue dans l'univers des YaPaSouci, totalement!<br />
       Déjantés, dingues, sans peur et sans reproches.<br />
      </h2>
    </div>
    <div id="pied_de_page">
      <p>Copyright "Phoenix Corp" 2007, tous droits réservés</p>
    </div>
  </body>
</html>
Si le float a un sens, tu peux essayer comme ça :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
    <title>YaPaSouci#3</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" media="screen" type="text/css" title="yapasouci" href="stiles/yapasouci.css" />
    <style type="text/css">
body {
  width:100%;
  background-color:#000;
  text-align : center;
  } 
#en_tete {
  width:760px;
  height:140px;
  margin : 0 auto;
  background-repeat:no-repeat;
  background-image:url(../images/yapasouci/Text/yapasouci.jpg);
  background-color : #fdf;
  } 
#contenu {
  position : relative;
  margin : 0 auto;
  width:52%;
  }
#bouton1 {
  float:left;
  margin-top:6%;
  padding-top:10%;
  padding-left:3%;
  width:17%;
  border:none;
  background-color : #ffd;
  } 
#corps {
  float:right;
  width:80%;
  margin-top:6%;
  text-align : left;
  background-color : #fdd;
  } 
h2 {
  color:#fff;
  text-align:center;
  font-family:"Comic Sans MS", Arial, sans-serif;
  background-color : #aaa;
  } 
#separ {
  clear : both;
  height : 2%;
  }
#pied_de_page {
  margin : 0 auto;
  color:#0c3;
  text-align: center;
  padding-top:2%;
  background-color : #dff;
  } 
    </style>
  </head>
  <body>
    <div id="en_tete">
      <!--Voir Css-->
    </div>
    <div id="contenu">
       <a href="presentation.html">
       <!-- les width et height aident le navigateur -->
        <img id="bouton1" src="images/yapasouci/bouton/pr%C3%A9sentation.jpg" alt="Bouton lien présentation" width="???" height="???" />
       </a> 
      <div id="corps">
        <img src="images/yapasouci/tous.jpg" alt="Montage photo de tous les YaPaSouci" title="YaPaSouci" width="???" height="???" />
          <!--Intro--> 
        <h2>Bienvenue dans l'univers des YaPaSouci, totalement!<br />
         Déjantés, dingues, sans peur et sans reproches.<br />
        </h2>
      </div>
    </div>
    <p id="separ">&nbsp;</p>
    <div id="pied_de_page">
      <p>Copyright "Phoenix Corp" 2007, tous droits réservés</p>
    </div>
  </body>
</html>
en plaçant les 2 dans un autre bloc pour les centrer.
En mettant aussi le #corps en float pour qu'il se place à côté.
En réglant les dimensions.
Et en revenant dans le flux avec un bloc en clear.

Teste tout ça et n'hésite pas à demander des explications. Ni à en donner.


++
Attention aux accents et espaces dans le noms de fichiers, dossiers. Évite.

“page d'accueil” pas “page d'acceuille”

Ce bouton sert à présenter le code que tu déposes ici.

--
0
phoenix__hunter Messages postés 4 Date d'inscription vendredi 30 mars 2007 Statut Membre Dernière intervention 4 mars 2008
4 mars 2008 à 15:19
Merci beaucoup pour ton aide, je pense avoir bien avancé.
Si tu veux jetter un oeil voici mon lien:
http://yapasouci.free.fr
0

Discussions similaires

Impossible de télécharger photos messenger
Morgane -
Utilisateur anonyme -

1 réponse
adele
marine carnet-pantier -
irongege -

2 réponses
comment faire "différent de" sous excel/
UsulArrakis -
Lizs -

11 réponses
NB.SI.ENS Différent de
nicolas4107 -
Vaucluse -

5 réponses
Qu'est ce que la résolution native
neptunox04 -
Zalzadar_dz -

5 réponses