Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2981 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Comment optimiser la taille des pages web en fonction de la resolution

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Comment optimiser la taille des pages web en fonction de la resolution

n°1092364
proplan
Posté le 22-05-2005 à 14:25:18  profilanswer
 

Bonjour à tous,
 
J'essaie de faire un site, j'ai un gros probleme, je n'arrive pas à optimiser la taille des pages de mon site en fonction de la resolution de l'ecran de l'utilsateur.
Comment faire pour que mon site d'adapte à la resolution ou qu'il reste centré comme le site de tiscali par exemple http://www.tiscali.fr/
 
J'espere qu'une âme charitable pourra me dire comment faire car ça fait plusieurs jours que je me prend la tete avec ça et je commence à en avoir vraiment marre  :pt1cable:  
 
Merci pour vos réponses  :jap:  
 
Voici mon code :  
 
<html>
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<div align="center">
   <table width="767" border="0" cellspacing="0" cellpadding="0">
    <tr>
 
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (index.jpg) -->
<table id="Tableau_01" width="1025" height="768" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td colspan="4">
   <img src="images/index_01.gif" width="1024" height="26" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="26" alt=""></td>
 </tr>
 <tr>
  <td colspan="2" rowspan="2">
   <img src="images/index_02.gif" width="837" height="210" alt=""></td>
  <td>
   <a href="http://www.yahoo.fr"><img src="images/index_03.gif" alt="" width="173" height="45" border="0"></a></td>
  <td rowspan="14">
   <img src="images/index_04.gif" width="14" height="742" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="45" alt=""></td>
 </tr>
 <tr>
  <td rowspan="13">
   <img src="images/index_05.gif" width="173" height="697" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="165" alt=""></td>
 </tr>
 <tr>
  <td>
   <a href="02/2-compo.html"><img src="images/index_06.gif" alt="" width="125" height="43" border="0"></a></td>
  <td rowspan="12">
   <img src="images/index_07.gif" width="712" height="532" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="43" alt=""></td>
 </tr>
 <tr>
  <td>
   <img src="images/index_08.gif" width="125" height="16" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="16" alt=""></td>
 </tr>
 <tr>
  <td>
   <a href="03/3-cadeaux.html"><img src="images/index_09.gif" alt="" width="125" height="44" border="0"></a></td>
  <td>
   <img src="images/spacer.gif" width="1" height="44" alt=""></td>
 </tr>
 <tr>
  <td>
   <img src="images/index_10.gif" width="125" height="18" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="18" alt=""></td>
 </tr>
 <tr>
  <td>
   <a href="04/4-mariage.html"><img src="images/index_11.gif" alt="" width="125" height="44" border="0"></a></td>
  <td>
   <img src="images/spacer.gif" width="1" height="44" alt=""></td>
 </tr>
 <tr>
  <td>
   <img src="images/index_12.gif" width="125" height="19" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="19" alt=""></td>
 </tr>
 <tr>
  <td>
   <a href="05/5-deuil.html"><img src="images/index_13.gif" alt="" width="125" height="44" border="0"></a></td>
  <td>
   <img src="images/spacer.gif" width="1" height="44" alt=""></td>
 </tr>
 <tr>
  <td>
   <img src="images/index_14.gif" width="125" height="15" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="15" alt=""></td>
 </tr>
 <tr>
  <td>
   <a href="06/6-0-infos.html"><img src="images/index_15.gif" alt="" width="125" height="43" border="0"></a></td>
  <td>
   <img src="images/spacer.gif" width="1" height="43" alt=""></td>
 </tr>
 <tr>
  <td>
   <img src="images/index_16.gif" width="125" height="17" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="17" alt=""></td>
 </tr>
 <tr>
  <td>
   <a href="10/7-contact.html"><img src="images/index_17.gif" alt="" width="125" height="44" border="0"></a></td>
  <td>
   <img src="images/spacer.gif" width="1" height="44" alt=""></td>
 </tr>
 <tr>
  <td>
   <img src="images/index_18.gif" width="125" height="185" alt=""></td>
  <td>
   <img src="images/spacer.gif" width="1" height="185" alt=""></td>
 </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

mood
Publicité
Posté le 22-05-2005 à 14:25:18  profilanswer
 

n°1092371
masklinn
í dag viðrar vel til loftárása
Posté le 22-05-2005 à 14:31:29  profilanswer
 

proplan a écrit :

Bonjour à tous,
 
J'essaie de faire un site, j'ai un gros probleme, je n'arrive pas à optimiser la taille des pages de mon site en fonction de la resolution de l'ecran de l'utilsateur.
Comment faire pour que mon site d'adapte à la resolution ou qu'il reste centré comme le site de tiscali par exemple http://www.tiscali.fr/
 
J'espere qu'une âme charitable pourra me dire comment faire car ça fait plusieurs jours que je me prend la tete avec ça et je commence à en avoir vraiment marre  :pt1cable:  
 
Merci pour vos réponses  :jap:  


Mise en page par tables créées par imageready à partir d'une image de taille fixe....
 
 
 
 [:totoz]  
 
Les tables sont une très mauvaise manière de mettre en page, et celles générées par ImageReady ou Photoshop sont encore pires que le reste, surtout en terme d'adaptabilité aux résolutions variables.
 
Pourquoi les tables saitraimal:
http://www.hotdesign.com/seybold/
http://openweb.eu.org/articles/problemes_tableaux/
 
Passer au tableless:
http://mammouthland.free.fr/cours/css/index.php
http://openweb.eu.org/articles/pourquoi_standards/
http://openweb.eu.org/articles/xhtml_une_heure/
http://openweb.eu.org/articles/respecter_semantique/
http://openweb.eu.org/articles/initiation_css/
 
(accessoirement, utilise les balises [fixed] pour mettre en page ton code, parce que là c'est crade & illisible)


Message édité par masklinn le 22-05-2005 à 14:31:55

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
n°1092377
Mjules
Parle dans le vide
Posté le 22-05-2005 à 14:34:08  profilanswer
 

ainsi qu'un bon article sur le design élastique qui s'adapte à la taille du navigateur
http://pompage.net/pompe/designelastique/


---------------
Celui qui pose une question est idiot 5 minutes. Celui qui n'en pose pas le reste toute sa vie. |  Membre du grand complot pharmaceutico-médico-scientifico-judéo-maçonnique.
n°1092380
afbilou
pouet your life
Posté le 22-05-2005 à 14:36:47  profilanswer
 

Pas mal le div et le table dans le head ...
 
Pour ton probleme mets les marges droite et gauche a auto dans le body.
Sinon tu as aussi la technique des 'marges negatives'
 
<body>
<div>
</div>
</body>
 
avec :
 
div {
   width: 100px;
   position: relative;
   left: 50%;
   margin-left: -50px;
}
 
en mettant 50% dans left le bord gauche du conteneu va etre aligné avec le centre de la page. il suffit de definir une marge negative a gauche pour faire 'reculer' le conteneur de la distance que l'on veut sur la gauche (la moitie de la longueur du conteneur donc) !


Message édité par afbilou le 22-05-2005 à 14:40:26
n°1092385
masklinn
í dag viðrar vel til loftárása
Posté le 22-05-2005 à 14:40:01  profilanswer
 

afbilou a écrit :

Pas mal le div et le table dans le head ...
 
Pour ton probleme mets les marges droite et gauche a auto dans le body.


Ne marche que sous [tout sauf IE] ça [:aloy]  


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
n°1092390
afbilou
pouet your life
Posté le 22-05-2005 à 14:42:37  profilanswer
 

reste les marges negatives alors :p

n°1092395
proplan
Posté le 22-05-2005 à 14:47:09  profilanswer
 

Merci pour vos réponses ;)
 
Je debute, c'est mon 1er site, pourriez vous me dire comment appliquer les marges negative à ma page, comment l'inserer dans le code et ou, car là je suis un peu perdu

n°1092401
masklinn
í dag viðrar vel til loftárása
Posté le 22-05-2005 à 14:49:02  profilanswer
 

Va lire les articles d'openweb, le site CSS Débutant, les articles d'Alsacréations ( http://css.alsacreations.com ) et le reste des liens de ma signature


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Comment optimiser la taille des pages web en fonction de la resolution

 

Sujets relatifs
2 pages pour la même adresse ???Problème avec la fonction mail sur un site
fonction de comparaison[RESOLU]Fonction mail () problème d'envoi en HTML mais nickel en texte
Aide pour Optimiser requête SQLFonction pour la couleur RVB (RGB)
Explication à propos de la fonction Run en vbsFonction mail()
Fonction POS impossible (facile a resoudre je pense)Récuperer les paramètres d'une fonction VBA
Plus de sujets relatifs à : Comment optimiser la taille des pages web en fonction de la resolution

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.064 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR