28172 sujets

CSS et mise en forme, CSS3

[Résolu] Bloc liquide en hauteur et largeur.

Bonjour,
je suis débutant en CSS et j'aimerai savoir s'il était possible d'intégrer le "design suivant"
Alors, j'aimerai pouvoir avoir un design qui prenne automatiquement toute la hauteur et la longueur de l'écran de l'utilisateur.
Le design serait divisé en 3 parties... le footer et le header ont une hauteur fixe et une largeur de 100%.
Sinon pour le bloc du milieu, j'aimerai qu'il puisse s'étendre en largeur mais aussi en hauteur sans laisser de blanc... ce qui ferait qu'il n'y aura jamais de scrollbar.
J'ai fait un peu de recherches mais les solutions rajoutaient "du blanc" au lieu de réellement élargir en hauteur mon bloc.
Sachant que ce bloc contiendra d'autres blocs ( placés en relatif ) et que ceux-ci doivent aussi réadapter leur taille.

Merci de m'avoir lu jusqu'ici, si quelqu'un a une solution ou bien pourrait me guider vers une voie à creuser ce serait sympa.
Modifié par Exelmans (05 Nov 2009 - 11:37)
Bonjour,
Exelmans a écrit :
ce qui ferait qu'il n'y aura jamais de scrollbar.
Il y a une chanson dans un Disney qui dit : "Il ne faut jamais dire jamais" (je t'épargne la mélodie, toute façon je chante mal). Cette chanson elle a bien raison (malgré qu'elle ne suive pas son propre conseil) et s'applique tout à fait à ton cas.

Si effectivement sur très grande résolution, il risque moins d'y avoir besoin d'une scroll bar (et le contenu risque d'être ilisible avec des lignes de plus de 1000 signes) sur petite résolution (genre celle que j'ai actuellement,) les visiteurs risquent de s'arracher les cheveux à essayer de lire le contenu compris entre le header et le footer qui prendront la plus grande partie de l'espace disponible dans le viewport (car c'est ce que tu veux faire).

Le web n'est pas du print. Un site web n'est pas une application.

Savoir développer en suivant les contraintes et les habitudes du support pour lequel on développe est une bonne chose. Ce que tu cherche à faire c'est avoir une impression de logiciel, dans ce cas utilise des frames, comme les logiciels. Si par contre tu veux t'adapter au support oublie l'idée du 100%-(header+footer) en hauteur accepte que le site s'adapte.

Il y a de très bon gabarits là : Gabarits HTML et CSS simples par Florent V.
Bonjour,
merci pour la réponse rapide.
En fait, tu as tapé juste, cela aurait été pour quelque chose qui s'approcherait plus d'une application web que d'un site.
Je pensai qu'il aurait été possible de trouver une solution sans passer des technologies comme flash ou des frames. Sachant, qu'il est très aisé de faire des mise en pages, qui prennent toute la largeur... je pensai qu'il y aurait une solution pour qu'un bloc prenne toute la hauteur possible sans avoir à lui imposer une taille (peut-être que javascript serait adapté mais sûrement trop compliqué).
j'ai fait ca chez moi:


<html >
<head>
<link rel="stylesheet" type="text/css" href="CSS/styles.css" media="screen"/>
</head>


<body>
<div id="content">
	<div id="entete"></div>
    <div id="rouge"></div>
    <div id="vert"></div>
    <div id="pied"></div>
</div>
</body>
</html>





/*--------------RESET--------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	list-style:none;
} 


html, body{ 
	color:#000; 
	font-family:Verdana, Arial;	
	font-size:12px;	
	width:100%; 
	height:100%;
}
div#entete{
	width:100%;
	height:100px;
	background-color:#00FFFF;
}
div#rouge{
	background-color:#FF3300;
	float:left;
	margin:2%;
	width:46%;
	height:60%;
}
div#vert{
	background-color:#339933;
	float:left;
	margin:2%;
	width:46%;
	height:60%;
}
div#pied{
	width:100%;
	height:150px;
	background-color:#000;
	position:absolute;
	bottom:0;
	
}
#content{
	background-color:#CC9900;
	height:80%;
	position:relative;
	padding-bottom:150px;
}


Voila: Avec ma résolution ca marche...
Evidement ce graphisme ne sera pas bon pour toute resolution..
Mais tu peux le rendre ok pour les résolution les plus courantes j'imagine.
Et si tu jous sur un systême de magin et padding aussi en pourcentage te laissant un peu de marge tu peux t'en tirer je pense.

Sachant que les resolutions les plus courante vont de 768 à 1200px

On vas se simplifier la tache et dire que le site doit être parfait pour une reso comprise entre 700 - 1100 px;
Si tu met un div de taille 100px
Il represente 14% ou 9% de la fenetre.
Donc tu peux par exemple mettre une marge de 15% ainsi t'es tranquil.

Ta plus qua tout réflechir de cette facon...
cordialement.

Ps: damned ca ma fait revoir ma regle de trois j'ai eu un doute j'ai été oblige d'aller voir wikipedia mdr... et dire que j'ai fait un bac S lol....
Modifié par casp (22 Oct 2009 - 21:15)
Ce serait evidement beaucoup plus simple si tu faisais une entete et un pied eux aussi de taile variable.
la ca deviens super facile..
Ta ton rectangle de base body de 100% par 100%
Puis ta plus qu'a tout diviser en petite boite qui s'additionne (taille + margin) pour faire toujours 100%

A voir si ca bug pas avec certain navigateur je sais pas... Ptet laissez une marge de 1% d'erreur bref Smiley smile ...

Et puis tu peux jouer avec des background-image; mais s'adaptant a la couleur ou motif de fond de l'entete et du pied.
Et apres ta juste a fixer un min-height pour pas que le graphisme se fasse ecraser.
Modifié par casp (22 Oct 2009 - 21:02)
Je remonte rapidement le sujet pour vous remercier tous les deux.
Ma mise en page était quelque peu plus simple que la tienne Casp donc j'ai réussi à avoir un rendu plutôt satisfaisant en suivant tes conseils.
Comme tu me l'as indiqué, à très basses résolutions, il est impossible de maintenir un rendu convenable... mais pour les plus courantes et en bidouillant un chouia cela tient bien la route.
J'ai encore quelques petits désagréments avec ie7 mais je pense pouvoir les résoudre de moi-même.
Encore merci.
En tout cas, les conseils que l'on ma donné sur le sujet m'ont permis de trouver une solution à mon problème. La proposition de Casp correspondait à mon problème. Donc, pour moi c'est OK.
Sujet clos
Aller à