Comment optimiser la taille des pages web en fonction de la resolution
Comment optimiser la taille des pages web en fonction de la resolution - HTML/CSS - Programmation
Marsh Posté le 22-05-2005 à 14:31:29
| proplan a écrit : Bonjour à tous, |
Mise en page par tables créées par imageready à partir d'une image de taille fixe....
![[:totoz]](https://forum-images.hardware.fr/images/perso/totoz.gif "[: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
Marsh Posté le 22-05-2005 à 14:34:08
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.
Marsh Posté le 22-05-2005 à 14:36:47
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
Marsh Posté le 22-05-2005 à 14:40:01
| afbilou a écrit : Pas mal le div et le table dans le head ... |
Ne marche que sous [tout sauf IE] ça ![[:aloy]](https://forum-images.hardware.fr/images/perso/aloy.gif "[:aloy]")
---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Marsh Posté le 22-05-2005 à 14:47:09
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
Marsh Posté le 22-05-2005 à 14:49:02
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
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 SQL
- Fonction pour la couleur RVB (RGB)
- Explication à propos de la fonction Run en vbs
- Fonction mail()
- Fonction POS impossible (facile a resoudre je pense)
- Récuperer les paramètres d'une fonction VBA
Marsh Posté le 22-05-2005 à 14:25:18
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
Merci pour vos réponses
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>