28220 sujets

CSS et mise en forme, CSS3

Mise en page images dans site centré [résolu]

Bonjour, J'explique ma problématique.

Je veut faire un site Web centré.
Séparé en 3 bloc : header, contenu, pied de page
Ces bloc s'enchainent un à la suite des autres à l'intérieur d'un gros calque nommé #page

Le problème est que mon header doit contenir une mise en page de facon précise. J'ai plusieurs images que je dois positionner en px sur x et y. Sauf que j'ai un conflit sur la position relative qui n'est pas vraimetn aapté à ma méthode de travail. Ce qui fait que je dois mettre des négatifs en y pour remonter mes layers pour ne pas qu'ilsse positionne un par dessus l'autre.

Avez vous une métohde structuré a proposer pour que mon site reste centré et que je puisse faire une mise en page x et y de mes images.

Mon css pour etre plus clair Smiley lol 


body{
	background: #000;
	margin: 0;
	padding: 0;
	text-align: center;
}

#page{
	width: 639px;
	margin: 0em auto;
	text-align: left;
}
/*----- entete -----*/
#top{
	position : relative;
	overflow: visible; 
	top: 0px;
	left: 0px;
	width: 639px;
	height: 79px; 
}
/*exemple des layers :*/
#top{
	position : relative;
	overflow: visible; 
	top: 0px;
	left: 0px;
	width: 639px;
	height: 300px; 
}
*html #top{
	position : static;
	overflow: visible; 
	top: 0px;
	left: 0px;
	width: 639px;
	height: 79px; 
}
/*---------------------------------------*/
#top1{
	width: 264px;
	height: 79px;
	background:url(../img/int/ent_1.gif) no-repeat;
}
#top2{
	width: 375px;
	height: 79px;
	background:url(../img/int/ent_2.gif) no-repeat;
}
#top3{
	position : relative;
	top: 0px;
	left: 16px;
	width: 383px;
	height: 93px; 
	background:url(../img/int/ent_3.gif) no-repeat;
}
#top4{
	position : relative;
	top: -93px;
	left: 399px;
	width: 177px;
	height: 79px; 
	background:url(../img/int/ent_4.gif) no-repeat;
}
#top5{
	position : relative;
	top: -148px;
	left: 399px;
	width: 72px;
	height: 69px; 
	background:url(../img/int/ent_5.gif) no-repeat;
}


Le body de mon html 

<div id="page">

<div id="top">
<div id="top3"></div>
<div id="top4"></div>
<div id="top5"></div>
<div id="title"></div>
</div>


Donc en somme, existe-t-il une meilleure facon pour faire de la mise en page d'images que celle-ci, merci.
Modifié par L-0sWald (16 Jan 2006 - 00:08)
Modérateur
bonjour,
sans lien ou croquis, il n'est pas aisé de comprendre ce que tu veut faire, mais si ti as 3 zones rectangulaires sans avoir besoin de les chevaucher et que tu veuillent raccorder des morceux d'images alors alors cherche plutot a positionner les background. avec "background-position".
pour une valeur negative..., vu qu'un background se repete, des valeurs positives suffiront a amener ton background dans la position que tu veut,

.... ou bien , c'est pas ça du tout la question ?
a plus
Je te remerci pour ta réponse. Ca ma donné une piste pour que je puisse régler mon problème.

Mais un autre problème du meme ordre m'est apparu.

Je vais tâcher de bien expliquer cette fois.

Ma page est constitué de 3 blocs qui vont un a la suite des autres. Un top, un main qui contient l'information et un pied de page.

Mes 3 bloc s'enchainent parfaitement. J'aimerais cependant que mon pied de page empiète légèrement sur ma zone de contenu en remontant.

Comme ma zone de contenu s'étire a mesure que de l'information s'ajoute, je ne peut pas mettre le top de mon pied de page à -100px par exemple.

Voici le lien du site pour que ce soit plus visuel : http://www.subsistance.net/news.php

Mes 3 blocs CSS :


body{
	margin: 0;
	padding: 0;
	text-align: center;
	background: #000;
}

#layerstop {
 width: 639px;
 height: 300px;
 margin: 0px auto; padding: 0;
 position: relative;
 overflow: visible; 
 z-index: 2;
}
#layersmain {
 width: 639px;
 margin: 0px auto; padding: 0;
 position: relative;
 height: 100%;
 overflow: visible; 
 color: #FFF;
 text-align: right;
 z-index: 3;
}
#layersfooter {
 top: 0px;
 width: 639px;
 height: 300px;
 margin: 0px auto; padding: 0;
 position: relative;
 overflow: visible; 
 z-index: 1;
}
Modérateur
bonjour,
Quel rapport ente tes question et la page en lien !!!???

?? si ce n'est pas une blague, , (mea culpa), alors reprend ton code html de façon moins farfelu, use d'un doctype, .. pour le moment , a moins de faire un pansement sur une jambe de bois je vois pas .. , dans un autre topic je propose un "gabarit" pour une page centrer avec banniere , contenu et footer. cest 3 zone s'etalent au minimum sur une hauteur de page et est reelement extensible, des fois que ... http://forum.alsacreations.com/topic-4-10399-1-Imbrication-de-Div.html
deja pour eviter ce probleme de pied, ...
Smiley lol , desole, vraiment , j'ai du mal a saisir ou bien je suis tres fatigué !
<edit> lien retabli</edit>
bon dev.
Modifié par gcyrillus (15 Jan 2006 - 18:42)
Euh... non, ce n'est pas une blague...

la page en lien est la page que je programme présentement. Elle illustre mon problème de telle sorte que mon pied de page est trop décollé par rapport à la fin de mon texte.

Pour ton lien, je vais essayer ta méthode mais si je l'applique tel quel je vais avoir le même problème.

Si d'autre ont des sugestions...

en tout cas merci
à gcyrillus

attention il y a un point en trop à la fin du lien que tu donnes dans ton dernier post. Ce qui fait foirer ledit lien.
Modifié par clb56 (15 Jan 2006 - 02:10)
Modérateur
, heu bon desolé, en fait quand tu fait <li></div> en resumé de ce que le code source de ta page peut laisser apercevoir .., c'est bizarre dans ton cas vaut mieux des <div></div> englober dans un div (tant pis pour la divite) plutot que de faire ça avec une liste vide !.

Quand au doctype, il va te permettre te presenter ta page aux navigateur de façon a ce qu'elle soit traiter de la meilleure façon (en te donnant certaines "regles" de codage)et te permettra donc de faire aussi usage d'un plus grand nombre de proprieté css (sous IE par exemple le margin:auto; en simple html , ne marchera pas ! en html 4.01, oui ! ).

Tu peut simplement repartir sur ta page deja en modifiant et refermant toutes ou parties des balises selon le doctype que tu choisiras .
Les balises div et span sont 2 balises dites "neutres" a utiliser pour determiner des zones (l'une de type block et l'autre de type inline) ou quand aucunes autres balises ne semblent faire l'affaire ...en tout cas pas prendre des es listes vides pour afficher des images en background .

quand au probleme de pied , dans le lien, j'insere en fin de code un element div que j'appelle marge pied, qui a pour effet d'empecher le contenu de se retrouver sous le pied !, il te suffit juste d'en regler la hauteur adequate.
a plus et bon courage
Merci pour ces éclaircissements Smiley cligne

Pour les /div en fermeture de mes li je dois admettre que c'est une erreurde copier coller.

J'ai suivi tes recommandations, J'ai mis des div au lieu d'utiliser les listes Et j'ai essayer d'utiliser ta solution pour mon pied de page qui empiète sur ma zone de contenu lorsque la page est rétrécie. Malheureusement, pour une raison que je n'ai pas comprise. Ca ne fonctionne pas Smiley decu

Ensuite un petit probleme que j'ai découvert et que vous pouvez observer sur le copyright du pied de page. Lorsque je met un lien texte <a href> dans un texte, il fait un <br> en changeant de ligne sans que je lui ait demandé.

Le lien mis à jour : http://www.subsistance.net/news.php
Modifié par L-0sWald (15 Jan 2006 - 19:59)
Modérateur
bonjour,

pour le lien qui passe a la ligne: tu indique 200px de large change ton css en enlevant cete valeur ou augmente la :
#pp {
	FONT-SIZE: smaller; LEFT: 260px;  COLOR: #fff; TOP: 370px; HEIGHT: 20px
}


ton #conteneur n'est pas extensible, attention au css qui use d'un hack comme ceci :
#conteneur {
	MIN-HEIGHT: 100%; HEIGHT: auto!important; HEIGHT: 100%;
}

la hauteur adequate pour margepied semble etre: 
#margepied {
	BACKGROUND: none transparent ; HEIGHT: 100px
}

et margepied devrait etre situe juste apres contenu, et le pied en dehors du conteneur:
<div id="layersmain">
<div id="contenu">
<p>blabla .... ton contenu reduit  [smile] </p>
</div>
<div id="margepied"></div>
</div>


</div> <!-- fin conteneur -->
<div id="layersfooter">


et le css pour pied avec une marge haute negative pour effectivement remonter dans page

#layersfooter {
CLEAR: both;
PADDING-RIGHT: 0px; 
PADDING-LEFT: 0px; Z-INDEX: 1;
PADDING-BOTTOM: 0px;
 MARGIN: 0px auto;
MARGIN-TOP:-400px; /* on le remonte ici dans la page */
OVERFLOW: visible;
WIDTH:639px; 
PADDING-TOP: 0px; POSITION: relative;  
HEIGHT: 300px
}


et pour placer le contenu dans layer, peut-etre estc mieux ainsi ?

#layersmain {
PADDING-RIGHT: 0px; 
PADDING-LEFT: 100px; 
Z-INDEX: 3; 
PADDING-BOTTOM: 0px; 
MARGIN: 0px auto; 
OVERFLOW: visible; 
WIDTH: 539px; 
COLOR: #fff; 
PADDING-TOP: 0px; 
POSITION: relative; 
TEXT-ALIGN: right
}
#contenu {
	WIDTH: 505px; COLOR: #fff; 
}


heu, voila, je crois que ça ameliore l'affichage de ta page.
a plus
Bonsoir,

Si on pouvait mettre fin à cette gueguerre des mots, ce serait bien agréable.

Le terme layer (calque) fait partie du vocabulaire technique des spécifications CSS, et cet abus de sens consistant à l'employer même s'il n'y a pas de contexte d'empilement est vraiment, totalement, complètement mineur.
Administrateur
Laurent Denis a écrit :
Bonsoir,

Si on pouvait mettre fin à cette gueguerre des mots, ce serait bien agréable.

Le terme layer (calque) fait partie du vocabulaire technique des spécifications CSS, et cet abus de sens consistant à l'employer même s'il n'y a pas de contexte d'empilement est vraiment, totalement, complètement mineur.

Hmm le vrai problème est que les débutants sur Dreamweaver (pour ne pas le nommer) font vraiment un amalgame qui dessert leur apprentissage.
Quand on leur demande ce qu'ils appellent "calque", ils répondent : "ben, une balise <div>, ou un <span> ou encore un <layer>".

Et là ça devient grave. Autant appeler les choses par leur nom et ne pas confondre avec d'autres choses, cela évitera bien des "divites" navrantes.

EDIT : je vais préciser un peu plus ma pensée.
Le problème n'est pas de nommer "calques" telle ou telle balise appropriée ou non, c'est de généraliser ce terme à la balise <div>.

Cela ne me gêne pas du tout de lire "mon site est conçu à l'aide de calques", à partir du moment où lesdits calques désignent clairement les éléments <hn>, <p>, <div>, etc.

Mais dans tous les cas, il y'a assimilation des termes "calque" et <div> ce qui conduit à extrapoler et n'utiliser que des div pour structurer ses pages web. Le problème vient essentiellement de Dreamweaver, et c'est un réel problème.

Il y'a beaucoup d'amalgames qui freinent un apprentissage correct :
- croire qu'il existe "une mise en page CSS" et "une mise en page tableaux"
- croire que les tableaux c'est du HTML et que les CSS c'est du XHTML
- croire que le Validateur est un but
- croire qu'il faut remplacer toutes ses cellules par autant de <div> (de "calques" devrais-je dire)
- etc.
Modifié par Raphael (15 Jan 2006 - 22:45)
Modérateur
rebonjour,

Heu, a propos de la page que tu as repris, j'ai oublie de te dire que pour rendre la page (si vide) affichée sur toute la hauteur, il fallait aussi preciser dans le css une hauteur de 100% pour body et html,.. comme dans le gabarit du lien initial.
HTML, BODY {HEIGHT: 100%;}


bonsoir
Waow ! Merci beaucoup gcyrillus pour ton aide. Tu m'as donné un sacré coup de main.

Tout est réglé maintenant. Smiley biggrin Smiley biggrin Smiley biggrin
Sujet clos
Aller à