5568 sujets

Sémantique web et HTML

Un site full écran, adapter x*x

Bonjour à tous, ça fait depuis quelque année que je touche le xhtml et le css ...
mais je me pose une question ...

voila lorsque je crée mon div global, je met une limite de 980px, donc je définie une largeur de 980px a mon site ..., leur contenu et toujours adapter a ce div global ..., et je travail toujours ainsi ...

ma question est celle-ci , je veux faire un site la et adapter ce site a 95% de l'écran , laissé un peux de blanc de chaque coté ..., mais ce site doit bien être adapter pour un écran de 1024*768, 1280*800, 1280*1024 ..., donc les contenus du site aussi doit être adapter au div de 95% ...

voila, pouvez vous me donnée de la doc sur ça, ou me dire des astuces, et piste ...
ça me fera plaisir

merci Smiley smile
bonne journée à tous et bon weekend

IVIedia
Modifié par IVIedia (20 Nov 2010 - 12:36)
Par exemple, j'aurai fait ainsi mais c'est un début , je me demande si c'est bon cette méthode ?

<html>
<head>
<title>Document sans nom</title>
<style type="text/css">
<!--
body {
	background-color: #CCCCCC;
}
#global
{
	margin-top:0px;
	margin-left: auto;
    margin-right: auto;
	background-color:#666666;
	width:100%;
}
#header
{
	background-color:#CC0000;
	width:100%;
	height:150px;
}
#logo
{
	background-color:#000;
	width:30%;
	height:150px;
}
#pub
{
	background-color:#CC0000;
	width:70%;
	height:150px;
}
#center
{

	background-color:#efefef;
	width:100%;
	height:500px;
}
#footer
{

	background-color:#CC0000;
	width:100%;
	height:50px;
}


-->
</style></head>

<body>
<div id="global">
	<div id="header">
    	<div id="logo"></div>
        <div id="pub"></div>
    </div>
    <div id="center"></div>
    <div id="footer"></div>
</div>
</body>
</html>


Un exemple de site, celui est bien adapter : http://www.oscaro.com/

:)
Bonjour,

Tu peux effectivement travailler avec des largeurs en pourcentages, c'est une méthode plutôt bonne. Deux avertissement au vu de ton code:
- Je ne vois pas de Doctype dans ton HTML. J'espère sincèrement qu'en vrai il y en a un, parce qu'une page sans Doctype c'est juste du suicide. Smiley smile
- Tu as deux blocs que tu veux placer côte-à-côte, et tu leur as donné des largeur de 30% et 70% respectivement. Attention, fixer la largeur des blocs ne suffit pas à ce qu'ils se placent l'un à côté de l'autre. Il faut aussi les positionner ainsi explicitement. Plusieurs techniques de positionnement possibles: display:table-cell (compatible IE8 mais pas IE7), float:left, etc. La plus largement compatible (à cause d'IE7 essentiellement) est sans doute l'utilisation de float, et dans ce cas il faudra gérer des effets de bord comme le dépassement des flottants (faire une recherche à ce sujet).
- Je vois des hauteurs fixes partout. Les hauteurs fixes, c'est le mal: si le contenu est trop long, il dépasse allègrement. À éviter. Tu peux éventuellement utiliser des hauteurs minimales (min-height à la place de height).

Ensuite, tu vas vite te rendre compte des limites d'une mise en page avec des largeurs en pourcentages. En gros, sur un smartphone ou même un netbook ça va être tout serré, tandis que sur un grand écran le site va être très étiré et la longueur des lignes de texte va être deux ou trois fois plus grande que la longueur recommandée, ce qui rend le site plutôt illisible.
Une solution possible: utiliser des largeurs minimales et maximales pour le conteneur global:
#global {
  width: 95%;
  min-width: 700px;
  max-width: 1150px;
  margin: 0 auto;
}


Enfin, la dernière option est d'utiliser les Media Queries pour adapter le design du site en fonction de la largeur du viewport. Les anglophones appellent ça le Responsive Web Design:
http://www.alistapart.com/articles/responsive-web-design/
http://www.zeldman.com/2010/06/23/responsive-design-is-the-new-black/
bonjour,

pour le Doctype j'ai volontairement enlever du code généré par dreamweaver Smiley smile
j'utilise assez souvent float:left , pour le hack min-height, j'utilise aussi mais la comme les bloc sera des bloc fixe en hauteur j'ai pas mis le min-height ...

Pour la seconde parti de votre réponse c'est très intéressante, mais je comprends pas la ...

#global { 
  width: 95%; 
  min-width: 700px; 
  max-width: 1150px; 
  margin: 0 auto; 
}


min largeur 700 et max 1150 ...??
il va s'adapter selon la résolution, et le contenu comment il va gérer ça ?
en %

Pour les liens que vous avez laissé je vais regarder, merci pour les infos
bonne journée
Sujet clos
Aller à