28172 sujets

CSS et mise en forme, CSS3

Header et footer en absolute, div contenu scrollable ?

Amis du jour, bonjour

J'ia un petit (gros ?) soucis avec le design d'un site en cours de dev ...

La problématique est la suivante:

Un site avec une photo en background
Un contenu placer dans une div avec un background noir opaque à 80% qui fait 980px de width
Un menu & un footer dans une div en absolute de la même couleur, mais en "bandeau" qui fait 100% de width
Le site ne doit pas être scrollable, seulement la div contenu peut l'être.
Et, la partie qui pose problème : la taille de la div contenu doit s'adapter aux résolution en hauteur, tout en restant centrer en horizontale !



Pour le moment, j'avais fait un :


#container {
       position: absolute;
	background-image:url(../img/background.png);
	/*opacity: 0.90;	
	background-color: rgb(0, 0, 0); 
	filter : alpha(opacity=90); */
	overflow:auto;
	top:140px;
        left:20%;
        right: 20%
	margin:auto;
	margin-top: 4px;
	bottom: 79px;
}

car je n'vais pas la contrainte de la largeur de la div ....

Le passer en relative règle mon soucis de largeur, mais la contrainte de taille est perdu (mettre un height en px est impensable, et en % c'est foireux aussi ...)


Pour info, la div container contient 2 div : une breadcrumb avec une hauteur fixe, et une article qui doit être scrollable)


merci d'avance !
Modifié par Juyn89 (19 Mar 2012 - 12:35)
Bonsoir,

ce que tu veut faire ressemble a du frameset Smiley smile

Cela ressemble aussi a un gabarit archaique de ce genre:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="iso-8859-1" />
<title>HTML 4.01 fake frameset by gc</title>
<style type="text/css">
html, body, body > div {height:100%;background:black;color:white;}
/* reset marges */
html, body, div, h1 , p {margin:0;padding:0;}
/* on place les élements */
h1, p {position:fixed;width:100%;height:50px;left:0;background:#333;}
h1 {top:0;}
p {bottom:0;}
body > div {width:980px;margin:0 auto; position:relative;}
body > div > div {position:absolute; width:100%;left:0;top:50px;bottom:50px;background:#555;overflow:auto;}
</style>
</head>
<body>
<div>
<h1>	Titre 1	</h1>
<div>	
Zone ou section<br/> Zone ou section<br/> Zone ou section<br/> Zone ou section<br/> Zone ou section<br/> Zone ou section<br/> Zone ou section<br/> Zone ou section<br/> Zone ou section<br/> Zone ou section<br/> Zone ou section<br/> Zone ou section<br/> Zone ou section<br/> Zone ou section<br/> Zone ou section<br/> Zone ou section<br/> Zone ou section<br/> Zone ou section<br/> Zone ou section<br/> Zone ou section<br/> Zone ou section<br/> Zone ou section<br/> Zone ou section<br/> Zone ou section<br/> Zone ou section<br/> Zone ou section<br/> Zone ou section<br/> Zone ou section<br/> Zone ou section
</div>
<p>pied</p>
</div>
</body>
</html>

Melange de position fixed, relative et absolute ... trop rigide ou casse-gueule selon (<edit> ce type de montage risque de t'amener tot au tard dans cet rubrique du forum : http://forum.alsacreations.com/list-27-Web-Mobile-et-responsive-web-design.html </edit>).
Je te laisse comprendre l'utilisation et/ou l'utilité du positionnement CSS.
Cordialement,
GC
Modifié par gc-nomade (19 Mar 2012 - 17:31)
Je suis tout à fait conscient de la limite de ce design (étant adepte du design fluide) et devant déjà l'adapter en Responsive ...

Mais bon, le client est roi, et malgré mes mises en garde, il persiste et signe, donc je m'exécute.

Pour info, je viens de solutionner le problème (c'est sale mais ca marche ...) :


#container{
position: absolute;
	background-image:url(../img/background.png);
	overflow:auto;
	top:140px;
	min-width: 980px;
	max-width: 1000px;
	right:12%;
	left:12%;
	margin:auto;
	margin-top: 4px;
	bottom: 79px;
	
}



merci !
Sujet clos
Aller à