Pb adaptation codage à résolution d'écran
Pb adaptation codage à résolution d'écran - HTML/CSS - Programmation
Marsh Posté le 04-10-2008 à 06:59:39
Petite précision, tout le site fonctionne à l'aide d'image en format 800x600 qui sont centré sur la page. Sur chaque image sont incorporés des boutons recouvert d'une zone modifiable afin de permettre la création de lien hypertexte à partir des boutons. j'avais, au départ, intégrer les images dans un tableau de 800 de largeur que j'ai remplacé par un div qui centre l'image sur la page, mais le problème subsiste au niveau du texte_fenetre, lequel apparaît toujours décalé sur la gauche, plus la résolution de l'écran est élevée. Y a t'il une solution à ce problème ou cela vient il du fait que le site repose sur des images de fond ?
Merci d'avance pour tout conseil, information ou suggestion
bonne journée à tous.
Sujets relatifs:
- PB de traduction de données
- [NCurse] Redessiner complétement l'écran.
- [Résolu]Pb récupération plusieurs valeurs d'un formulaire dans un mail
- Pb dans la construction d'un arbre à partir d'une branche en php.
- Script qui charge un css suivant résolution de l'internaute?
- Pb de tri sql
- PB de barre de défilement dans un tableau
- adapter taille police résolution
- afficher en plein ecran une application
- [Ajax][Resolut] Pb avec div.innerHTML = xhr.responseText; sous ie
Marsh Posté le 03-10-2008 à 18:43:49
Bonsoir à tous,
je suis en train de travailler sur le site internet d'une copie qui fonctionne à l'aide d'images de fond. Un modèle qui permet de créer une fenêtre dans la page,avec une barre de défilement auto, qui s'adapte à la longueur du texte et permet de ne pas déborder de l'image (en 800x600). Le modèle est lié à un CSS et les pages du site au modèle. Pb, j'ai travaillé en avec un écran en résolution 1024X728, le site fonctionne parfaitement sous cette résolution mais au-dela, la zone de texte se décale sur la gauche:
le code de mon css est le suivant:
.texte-fenetre{
position: absolute;
left:240px;
top: 190px;
width: 550px;
height: 390px;
overflow: auto;
scrollbar-face-color: #ED7703;
scrollbar-shadow-color: #ED7703;
scrollbar-highlight-color:#ED7710;
scrollbar-3dlight-color: #ED7700;
scrollbar-darkshadow-color: #FFCCCC ;
scrollbar-track-color: #FFFFCC;
scrollbar-arrow-color: #ED7703;
font-family: Tahoma;
}
a {
color: #ED7703;
text-decoration: underline;
font-size: 14px;
}
.Style1 {
font-family: Tahoma;
}
.Style2 {
font-size: 14px;
line-height: 30px;
}
.Style3 {
color: #00CCFF;
}
a:link {
color: #ED7703;
text-decoration: none;
}
a:visited {
color: #ED7703;
text-decoration: none;
}
a:hover {
color: #83B817;
text-decoration: none;
}
a:active {
color: #ED7703;
text-decoration: none;
}
.Style4 {
font-size: 10px;
}
h6 {
font-family: Tahoma;
color: #0235B0;
}
.body {
background: url(images/fond.gif) no-repeat center center;
height: 600px;
width: 800px;
}
celui de mon modèle de page est le suivant:
<!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link href="/stylepeps.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- TemplateBeginEditable name="Tableau" --><table width="800" height="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="520" height="354" border="1" cellspacing="0" class="texte-fenetre">
<tr align="center" bgcolor="#FFFF99">
<td colspan="2"><b> </b>
<div align="center" class="Style1"><b><font color="#FF0000" size="3">titre</font></b></div></td>
</tr>
<tr bordercolor="#0000CC" bgcolor="#FFFFBF">
<td width="120" align="center"><div align="center" class="Style1"><font size="3">texte</font></div></td>
<td width="121"><div align="center" class="Style1"><font size="3">texte</font></div></td>
</tr>
<tr bordercolor="#0000CC" bgcolor="#FFFFBF">
<td align="center"><div align="center">
<p class="Style1"><font size="3">texte</font></p>
</div></td>
<td><div align="center" class="Style1"><font size="3">texte </font></div></td>
</tr>
<tr bordercolor="#0000CC" bgcolor="#FFFFBF">
<td colspan="2" align="center"><div align="center" class="Style1"> <font size="3">Retour<i><br />
</i></font></div></td>
</tr>
</table></td>
</tr>
</table>
<!-- TemplateEndEditable -->
</body>
</html>
Et je ne vois pas d'où peut venir le pb.
Quelqu'un aurait il une solution, un conseil ou une indication qui pourrait m'aider à résoudre ce problème.
Merci d'avance à tous.
Je continue quant à moi de chercher