28172 sujets

CSS et mise en forme, CSS3

Probléme mise en forme (DIV Height)

Bonjour et merci d'avance de votre aide.
Tout d'abord je vous expose le site en cours de création.

Mon probléme se pose avec le DIV qui est en vert.
http://www.delightfactory.eu/



HTML

<body>
<div id="Page_left">
<div class="Page_LA"></div>
<div class="Page_LB"></div>
<div class="Page_LC"></div>
<div class="Page_LD"></div>
<div id="Page_LE"></div>
</div>
<div id="DIV_Global">
<div id="DIV_Flash"></div>
<div id="DIV_Transition"></div>
<div id="DIV_Body"></div>
<div id="DIV_Bottom"></div>
</div>
<div id="Page_right">
<div class="Page_LA"></div>
<div class="Page_LB"></div>
<div class="Page_LC"></div>
<div class="Page_LD"></div>
<div id="Page_RE"></div>
</div>
</body>


La DIV Page_right et Page_left se partage à 50% ta totalité de la largeure.
La DIV Global se palce au dessus d'elles et est centré.

CSS

body {
	margin: 0px;
	padding: 0px;
	height: auto;
	width: auto;
	text-align: center;
}
#DIV_Flash {
	width: 1020px;
	height: 561px;
}
#DIV_Install {
	height: 562px;
	width: 1020px;
	background-image: url(../PIC/Install_flash.jpg);
	background-repeat: no-repeat;
}
#DIV_Global {
	background-color: #00F;
	width: 1020px;
	position:relative;
	z-index:2;
	margin-right: auto;
	margin-left: auto;
	height: 100%;
}
#DIV_Transition {
	width: 970px;
	height: 80px;
	background-image: url(../PIC/DIV_Transition.jpg);
	margin: 0px;
	padding-right: 0px;
	padding-left: 50px;
	padding-top: 20px;
}

#DIV_Body {
	background-image: url(../PIC/DIV_Window.jpg);
	background-repeat: repeat-y;
	width: 970px;
	padding-left: 50px;
	height: 500px;
}
#DIV_Bottom {
	background-image: url(../PIC/DIV_Bottom.jpg);
	height: 157px;
	width: 1020px;
}

.Page_LA {
	background-image: url(../PIC/Page_LA.jpg);
	background-repeat: repeat-x;
	height: 55px;
	width: 100%;

}

.Page_LB {
	height: 506px;
	background-color: #000;

}

.Page_LC {
	background-image: url(../PIC/Page_LC.jpg);
	background-repeat: repeat-x;
	width: 100%;
	height: 100px;

}

Page_LD {
	background-color: #0F0;
	height: 100%;
}
#Page_LE {
	height: 157px;
	width: 100%;
	background-color: #C60;
	background-image: url(../PIC/DIV_BottomL.jpg);
	background-position: -510px;
}

#Page_RE {
	height: 157px;
	width: 100%;
	background-color: #C60;
	font-family: 0485969441;
	background-image: url(../PIC/DIV_BottomR.jpg);
	background-position: 510px;
}
#Page_left {
	background-color: #000;
	position:absolute;
	width:50%;
	left:0;
	z-index:1;
	top:0;
	height:100%;
}
#Page_right {
	background-color: #99F;
	position:absolute;
	width:50%;
	right:0px;
	z-index:1;
	top:0px;
	height:100%;
	bottom: 0px;
	margin: 0px;
	padding: 0px;
}


Le probléme se pose .Page_LD (Div en vert sur le site on-line).
Celui-ci devrait s'adapter à la hauteur de #DIV_Body qui aura une hauteur variable en fonction de son contenue.

Et donc que je mette height:100%; à .Page_LD ou pas.
Cela ne me donne pas le résultat voulu.

Merci à vous
Modifié par Rifton007 (01 May 2009 - 20:41)
Salut Rifton,
a écrit :
.Page_LD [...] devrait s'adapter à la hauteur de #DIV_Body
Non, car comme tu peux le voir sur le HTML ci-dessous (version simplifiée de ton code), elles ne sont pas sur la même branche du DOM. L'une n'étant pas descendante de l'autre, leurs rendus ne sont pas liés.
<div id="DIV_Global">
    <div id="DIV_Body"></div>
</div>

<div id="Page_right">
    <div class="Page_LD"></div>
</div>
Ton approche de mise en page est peu orthodoxe Smiley murf . Quelle est l'utilité des deux div #Page_left et #Page_right ? Vont-elles abriter du contenu ? Pour quelles raisons les faire passer derrière #DIV_Global ?
Modifié par marcv (02 May 2009 - 10:23)
Page_left et page right servent à combler le vide laisser à droite et à gauche par Div_global.
Afin que le site s'étire sur l'entiérté du navigateur.
Ensuite placer la Div_global au-dessus et la centré, DIV Global est le contenue du site.

Est-ce une bonne approche ?
http://www.delightfactory.eu/

Merci à toi.
Rifton007 a écrit :
Page_left et page right servent à combler le vide laisser à droite et à gauche par Div_global.
Afin que le site s'étire sur l'entiérté du navigateur.


Pour cela n'est-il pas plus simple (et sémantique) de styler le body ?
a écrit :
Pour cela n'est-il pas plus simple (et sémantique) de styler le body ?
Oui, le body ou même les différentes <div> de #DIV_Global. Mais pour être bien sûr, Rifton, il faudrait que tu répondes à mes deux autres questions :
1. Vont-elles abriter du contenu ?
2. Le fait qu'elles passent derrière #DIV_Global, est-ce exprès ? Si oui dans quel but ?
Modifié par marcv (02 May 2009 - 13:57)
1. Vont-elles abriter du contenu ?
Non, aucun contenue pour page_left et right.
C'est juste graphique, leurs largeurs est variable en fonction de la longeur du navigateur.
Elles donnent une continuité graphique sur base de #DIV_Global.

Le seul contenue c'est la #DIV_Global qui est au milieu.

2. Le fait qu'elles passent derrière #DIV_Global ?
Oui, car #DIV_Global c'est le contenue de tout mon site.

------------------
Si j'enléve page left et right, il reste juste #DIV_Global qui est centré.
Elle fait 1020px de largeur et le reste du viewport est vide.

Pour combler se vide j'ai pensé à utiliser deux div page_left et right. pour donne une continuté graphique.

J'éspere avoir été claire, c pas facile à expliquer.

Encore merci.
Rifton007 a écrit :


Si j'enléve page left et right, il reste juste #DIV_Global qui est centré.
Elle fait 1020px de largeur et le reste du viewport est vide.

Pour combler se vide j'ai pensé à utiliser deux div page_left et right. pour donne une continuté graphique.

J'éspere avoir été claire, c pas facile à expliquer.

Encore merci.


Tu le combles avec quoi, une image ? Je suppose le "papier peint rose" ? Dans ce cas, il te suffit d'appliquer cette image en background à l'élément body...

Ou alors je n'ai pas tout compris
Smiley rolleyes
Oui avec des background repeat.

Les page_left et right se partage la longueur du site à raison de 50% sous le DIV Global.

Dans page_left et right et il y'a des sous DIV qui son placé l'une en-dessous des autres.
Chacune des DIV reproduit la suite graphie à l'aide d'un background-repeat.

J'ai mis le site à jours, jetter à coup d'oeil vous comprenderais peut être mieux.

http://www.delightfactory.eu/
Non je suis navrée mais je ne comprends rien Smiley decu

Résumons.

A quoi te servent toutes ces DIV ??

Tu as au final :

Ton header avec la photo et la barre de menu (Install_flash.jpg)
Ton contenu dans ta DIV Global avec comme background DIV_Transition.jpg répété en hauteur
Ton footer avec comme background DIV_Bottom.jpg.

Et le reste devrait être rempli uniformément avec :
* le dégradé Page_LC.jpg sur les côtés du global
* le motif rose, vers le bas et sur les côtés du header

C'est ça ?

Si oui, toutes tes autres DIV (droite, gauche, A, B, C, D) ne servent à rien... et on peut faire BEAUCOUP plus simple.

Si non, euh... tu aurais une image de l'assemblage final désiré ?
Ah oui c'est beaucoup plus clair comme ça Smiley cligne Merci !

Bon alors je dirais que le fond du problème vient du fait que tu as "découpé" ton design verticalement alors qu'il aurait mieux valu le découper horizontalement.

Mais si je peux me permettre une petite critique, je ne suis pas convaincue par ce rose sur les côtés du header : c'est un peu violent, et en plus je préfère ta photo rectangulaire (comme sur ton site exemple) qu'avec ce dégradé ... pas très naturel. Je trouve que ça ne va pas très bien avec le reste... Pour ma part j'aurais plutôt rempli cet espace avec le même pattern qu'en bas ?


sauf que je viens de me rendre compte que ce pattern n'est pas "seamless" en vertical parce que dégradé...

Bon je regarde ça d'un peu plus près et je reviens + tard. Smiley edit Modifié par mistike (02 May 2009 - 17:06)[/edit]
mistike a écrit :
A quoi te servent toutes ces DIV ??

À pas grand chose, c'est un mauvais choix d'intégration. Smiley cligne
Je trouve aussi que le fond dégradé mauve sur le header n'est pas trés jolie.
Mais je me concentre sur mon layout tout d'abord, le reste pourras changer par la suite.

Ceci dit j'ai pensé aussi à une découpe horizontale.
J'ai essayé, donc

A la va vite:


<div id=Head>
<div Right></div> 
<div Body></div> width: 1020px;
<div Left></div>
</div>


Mais pour Div Right et Left, je ne suis pas arrivé à les faire occupé toute l'espace vide (width)sur le viewport laisser par div Body.

Du coup j'ai opté pour ça.
Div Right et Left qui se partage à raison de 50% le viewport en width. et placé le body du site centré et au dessus.
Voici un exemple rapide d'intégration de ta maquette :
- utilise un code plus simple du style 
<div id="header">
    <div>Remember Factory</div>
    <div>bannière flash</div>
</div>

<div id="body">
    la zone blanche sur ta maquette
</div>

<div id="footer">
    le papier peint à motifs sur ta maquette
</div>

- sur ta maquette, le dégradé rose de chaque côté de ta bannière flash, passe-le en linéaire vertical
- sur ta maquette toujours, découpe une bande verticale de 1px de large partant du haut jusqu'à la fin du dégradé gris clair > blanc
- dans ta CSS, place cette bande verticale en background de ton <body>, répétée horizontalement
- donne la largeur désirée à #header et #body (en passant, 1020px t'es bon pour une scrollbar obligatoire en 1024*768 fullscreen), puis centre-les (margin:0 auto)
- ne donne pas de largeur à ton footer (de manière à ce qu'il occupe de lui-même toute la largeur du viewport, et place lui ton papier-peint à motif en background repété
Modifié par marcv (03 May 2009 - 16:51)
Ok parfait, je vois parfaitement ce que tu veux que je fasse.
Je vais appliqué ça sur ma création, encore merci de votre aide Smiley cligne

Je vous tiens au courant de la suite
Et voilà c'est OK pour la layout 1. Merci beaucoup de votre aide.

Petite info concernant la languette transparente si ça interesse qq.
Ici j'ai pas utilisé de flitre CSS pour la transparence.

Tout d'abord deux DIV

<divid="DIV_Bottom"><divid="DIV_Sub_bottom"></div></di>

* <divid="DIV_Bottom">
J'ai tout d'abord constaté que mon motif utilisé sous photoshop se répéte tout les 158px en X.
J'ai donc crée un motif de 158px de largeure (x), la hauteur peut importe, ici elle fait 147px.
Je l'est mit en background centré en X et je l'ai répété en X.

* <divid="DIV_Sub_bottom">
La c'est un background complet de 1200*147 avec cette fameuse languette transparente.
Sous Photoshop, j'ai repris ce bloc (motif flower) qui fait 158(L)x147(l) et je l'ai centré par rapport à mon body de 1200px. Et j'ai ensuite collé les même bloc (158x147) l'un à coté de l'autre en partant de celui qui était centré au millieu.

Ainsi les motif de ma DIV_Bottom et Sub_bottom coincide même si la largeure du viewport est modifier.

Encore merci à vous tous.
http://www.delightfactory.eu/
Modifié par Rifton007 (05 May 2009 - 03:21)
Sujet clos
Aller à