Sujet Précédent Sujet Suivant

Mise en page celon la resolution.

Fermé
Maskk Messages postés 89 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 23 décembre 2010 - Modifié par Maskk le 21/12/2010 à 12:24
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 - 21 déc. 2010 à 16:12
Bonjour,

Un petit probleme se pose à moi , je voudrais faire un site en % afin que mon site s'adapte aux différentes résolutions (dans mon entreprise il y a encore de nombreux utilisateur en 1024x768 ...mais d'autre en 1280x1024 ou plus)
J'ai passé toutes mes div en % .... le probleme : quand j'aggrandis ma fenetre ma mise en page ne ressemble plus a rien
http://img193.imageshack.us/img193/2773/capturernv.png
Quand j'agrandis
http://imageshack.com/f/41captureenv1p

Je vous link mon css
#conteneur {
margin: auto;
margin-top:20px;
height: 800px;
width: 90%;
}
#contenu {
margin:auto;
float: right;
height: 600px;
width: 85%;
}
#menu_gauche {
margin:auto;
margin-top: 5px;
margin-left: 0px;
height: 500px;
width: 15%;
}
Je pense que cela vient du #contenu et #menu_gauche qui sont en % mais comment garder un affichage dynamique alors?
Merci d'avance et bonne journée
A voir également:

3 réponses

Réponse 1 / 3
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
21 déc. 2010 à 13:49
bonjour
Comme beaucoup de sites sur la toile , tu peux le faire fixe et centré. Sinon envoi également le code html
0
Maskk Messages postés 89 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 23 décembre 2010 2
21 déc. 2010 à 13:58
coucou merci de ta reponse,
je t'envoies le code mais tu vas voir c'est du basique ...

Pour HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<link href="css/site.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="head"></div>
<div id="news">
<div id="news_top"></div>
<div id="news_body"></div>
<div id="news_bot"></div>
</div>
<div id="conteneur">
<div id="contenu">
<div id="contenu_top"></div>
<div id="contenu_body">
body <br/>
</div>
<div id="contenu_bot"></div>
</div>
<div id="menu_gauche">
<div id="menu_top"></div>
<div id="menu_body">
menu <br/>

</div>
<div id="menu_bot"></div>
</div>
</div>
</body>
</html>

Pour tout le css ...

body {
background-color:#c4c0be;
}

#head {
top: 0px;
margin: auto;
margin-bottom:20px;
height: 18px;
width: 100%;
top: 0px;
z-index:2;
background:url(../images/webdesign/header.png);
}

#news {

height: 146px;
width: 100%;
top: 0px;
z-index:2;
border:solid 1px #000;

}

#conteneur {
margin: auto;
margin-top: 20px;
height: 800px;
width: 90%;
z-index:1;
border:solid 1px #000;
}

/* ----------------------------------------------------------------------------------------------------
Zone de mise en forme de div news

---------------------------------------------------------------------------------------------------- */

#news_top {
background:url(../images/webdesign/news_top.png) no-repeat top left;
height: 22px;

}

#news_body {
background:url(../images/webdesign/news_body.png) repeat-y top left;
height: 105px;
}

#news_bot {
background:url(../images/webdesign/news_bot.png) no-repeat top left;
height: 19px;

}

/* ----------------------------------------------------------------------------------------------------
Zone de mise en forme du contenu

---------------------------------------------------------------------------------------------------- */

#contenu {
float: right;
height: 600px;
width: 85%;

/*border:solid 1px #000;*/
}

#contenu_top {
background:url(../images/webdesign/contenu_top.png) no-repeat top left;
height: 24px;

}

#contenu_body {
background:url(../images/webdesign/contenu_body.png) repeat-y top left;

}

#contenu_bot {
background:url(../images/webdesign/contenu_bot.png) repeat-y top left;
height: 19px;

}

/* ----------------------------------------------------------------------------------------------------
Zone de mise en forme du menu gauche

---------------------------------------------------------------------------------------------------- */

#menu_gauche {
margin-top: 5px;
left: 0px;
height: 500px;
width: 15%;
/*border:solid 1px #000;*/
}

#menu_top {
background:url(../images/webdesign/menu_top.png) no-repeat top left;
height: 27px;
}

#menu_body {
background:url(../images/webdesign/menu_body.png) repeat-y top left;
padding-left: 5px;
}

#menu_bot {
background:url(../images/webdesign/menu_bot.png) no-repeat top left;
height: 22px;
background-repeat:no-repeat;
}
0
Réponse 2 / 3
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
21 déc. 2010 à 15:26
chez moi , je ne trouve pas de différence entre les résolutions d'écran 1600/900 et 1024/768
0
Maskk Messages postés 89 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 23 décembre 2010 2
21 déc. 2010 à 15:55
re ! Quand tu dis difference tu parles de mon code ? ou de ta premiere analyse ?
0
Réponse 3 / 3
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
21 déc. 2010 à 16:12
de la première analyse, sans changer ton code. essai sur un autre ordi
0