Mise en page celon la resolution.
Maskk
Messages postés
89
Statut
Membre
-
ideal23 Messages postés 505 Statut Membre -
ideal23 Messages postés 505 Statut Membre -
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
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
3 réponses
-
bonjour
Comme beaucoup de sites sur la toile , tu peux le faire fixe et centré. Sinon envoi également le code html-
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;
}
-
-
chez moi , je ne trouve pas de différence entre les résolutions d'écran 1600/900 et 1024/768
-
de la première analyse, sans changer ton code. essai sur un autre ordi
