28173 sujets

CSS et mise en forme, CSS3

Mode réduit

J'ai un problème d'affichage de mon site web. Lorsque je met mon site internet en mode réduit, l'écriture (qui est en position:relative) se déplace complètement.

index.php 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<div id="fond">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Premium Gamez</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="menu" href="style/menu.css"/>
   </head>

<body>

<div id="menu_hor">gdfgfdgfdsg</div>

<div id="menu">gfdgsdfgdf</div>


<div id="corps"></div>


</body>

</html>
</div>



menu.css 


html
{
margin: 0;
padding: 0;
background: url('fond-site.jpg') repeat-y center top;
}
body
{
margin: 0;
padding: 0;
margin: auto;
width: 760px;
height: 847px;
background: url('fond.jpg') no-repeat center top;
}
#menu_hor
{
position: relative;
top:200px;
left: 228px;
width: 353px;
}
#menu
{
position: relative;
top:317px;
left:0px;
width: 158px;
text-align: center;
}
#corps
{
position: relative;
top: 235px;
left: 159px;
width: 601px;
}

En espérant que vous pourrez m'aider!
Modifié par holidayteam (19 Mar 2007 - 23:02)
Bonjour,

J'ai commencé par enlever la couleur rouge dans ton message, qui risque de rendre le texte peu lisible avec certaines apparences graphiques du forum (il y en a plusieurs de disponibles).

Et puisque nous parlons de lisibilité : pour conserver une bonne lisibilité des messages sur le forum, il est demandé d'utiliser les les balises code pour présenter le code source des exemples.
Pourrais-tu éditer ton message pour te conformer à cette règle de mise en forme ?
Merci d'avance.
Sinon, deux questions :

1. À quoi correspond ce que tu appelles le « mode réduit », précisément ? L'affichage sur l'écran réduit d'un terminal mobile (type smartphone), la réduction de la largeur de la fenêtre à du 800x600, voire même à du 1024x768 ?

2. La description « l'écriture se déplace » est un peu difficile à suivre. Une page de test en ligne pour constater tout ça de visu ? (Si pas encore de page hébergée, alors c'est le moment de s'y mettre. Smiley cligne )


Edit : à vue de nez, l'essentiel du positionnement de tes blocs à l'air d'être fait grâce au positionnement relatif. C'est une erreur. Tout le positionnement CSS est à refaire. Ce qui demande, au préalable, d'avoir une connaissance correcte du positionnement CSS :

Initiation au positionnement CSS sur Openweb :
1. flux et position relative
2. position float
3. position absolue et fixe

Voir aussi pourquoi pas (mais uniquement après avoir lu les articles ci-dessus, merci) les modèles de mise en page CSS sur Alsacréations :
http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS
Modifié par Florent V. (19 Mar 2007 - 22:20)
Le mode réduit dont je parle, c'est lorsqu'on réduit la fenêtre web tout simplement avec le bouton juste à côté du X pour fermer la page.

L'écriture se déplace, c'est-à-dire, change de place dans le body lorsque la page est réduite.

Je n'ai pas le choix d'utiliser le position relatif pour mon menu et mon corps de site car mon design est crée sous photoshop, et je ne peux pas les placer autrement (menu, corps)
holidayteam a écrit :
Je n'ai pas le choix d'utiliser le position relatif pour mon menu et mon corps de site car mon design est crée sous photoshop, et je ne peux pas les placer autrement (menu, corps)

On peut tout à fait créer un design sous Photoshop, et faire une intégration HTML/CSS correcte, sans se voir imposer des propriétés CSS de positionnement. Smiley sweatdrop

Je répète que le positionnement relatif pour mettre en place les différentes zones d'un site n'est absolument pas viable. Les positionnement absolu le sera peut-être, mais pas le relatif.
Alors je vois pas vraiment comment je pourrais positionner mon menu et mon corps de site sur ma maquette photoshop sans utiliser de positionnement ... Tu pourrais me donner une piste ?
holidayteam a écrit :
Alors je vois pas vraiment comment je pourrais positionner mon menu et mon corps de site sur ma maquette photoshop sans utiliser de positionnement ... Tu pourrais me donner une piste ?

Avec le positionnement absolu, si c'est pertinent.
Avec des flottants, pourquoi pas.

Cf. la liste d'articles que je pointais ci-dessus.
Sujet clos
Aller à