Affichage different pour chaque résolution

Résolu

phoenix__hunter Messages postés 4 Statut Membre -
phoenix__hunter Messages postés 4 Statut Membre - 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">  </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"/>

<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>

Afficher la suite

A voir également:

Affichage different pour chaque résolution
Affichage double ecran - Guide
Comment mettre un son de notification différent pour chaque application - Guide
Windows 11 affichage classique - Guide
Réduire résolution image - Guide
Excel différent de vide - Forum Excel

1 réponse

Réponse 1 / 1

Gihef Messages postés 5165 Statut Contributeur 2 779

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.

--

phoenix__hunter Messages postés 4 Statut Membre

Merci beaucoup pour ton aide, je pense avoir bien avancé.
Si tu veux jetter un oeil voici mon lien:
http://yapasouci.free.fr

Discussions similaires

Excel formule : nb.si.ens et critère "différent de vide"

Les images ne s'affichent plus

impossible de voir les photos et videos sur une conversation messenger

Qu'est ce que la résolution native

comment faire "différent de" sous excel/

Affichage different pour chaque résolution

1 réponse

Votre réponse

Discussions similaires

Newsletters