28111 sujets

CSS et mise en forme, CSS3

Design 2 colonnes / problème positionnement

Pages :
J'ai pourtant lu le livre 2 fois, je n'arrive pas à comprendre ce qu'il se passe...
Je dois être très bête voila tout !

Je tiens juste à dire que j'ai fait un maximum de recherches sur google, le forum, mais en vain !

alors voila :
www.photollivier.com
www.photollivier.com/styles.css

je voudrais positionner les div "counter" "news" et "ad" juste à coté de "content", une peu comme ça quoi :
http://pompage.net/pompe/colonnesfactices/

j'ai TOUT essayé ! float:right,left, position:relative,absolute,fixed,static,...

Pouvez vous me dire comment faire ?
et surtout pouvez vous m'expliquer afin que je sache pourquoi ? (avec des termes clair, hein ? Smiley smile )

Merci à tous d'avance.
Bonjour,

Bonne continuation ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>test</title>

<style type="text/css">
html, body {height: 100%;margin: 0;}
html {background: #808080;}
body {font: 90% "Trebuchet MS", sans-serif;}
div#global {
	min-height: 100%; /*la hauteur de la page occupe toute la hauteur de l'ecran*/
	width: 770px; /*bon pour du 800x600*/
	padding: 0 10px 0 10px;
	margin: 0 auto; /*marges automatiques*/
	background: white;
	position: relative;/*pour fixer #content */
}
	
div#content {
padding-bottom: 50px; /* Pour &#65533;viter la superposition du pied de page et du contenu : */	 
background:#808080;
width: 570px;
position: absolute;/**/
top: 150px;/*header + menu*/
left: 10px;	/*rattraper le padding*/
/*attention au dépassement si le contenu est trop important, ça risque de déborder !!! sinon lui donner un height et overflow: auto*/
} 

#header {
	background: #CC0000;
	color: #fff;
	height: 100px;
	position: relative;
	}

#header h1{
	margin: 0;/*sinon le #global est décallé vers le bas*/
	}
	
#menu {
	background: #0099FF;
	margin:0 0 0 0;
	padding:0 0px 0 0px;
	height: 50px; /* pour le test*/
}

#counter {
float:right;
width:190px;
background: #CCCCCC;
}

#news {
clear:both;
float:right;
width:190px;
background: #999999;
}

#ad {
clear:both;
float:right;
width:190px;
background: #666666;
}

div#footer {
	position: absolute; /* FOOTER restera en bas !!! */
	width: 770px; /*  */
	bottom: 0;
	background: #000000;
	color: #fff;
	}

</style>
</head>
<body>

<div id="global"> <!--GLOBAL STARTS HERE-->

<div id="header"> <!--HEADER START-->
<h1>ESSAI</h1>
</div><!--FOOTER END-->

<div id="menu"><!--MENU START-->

</div><!--MENU END-->

<div id="content"><!--CONTENT START-->
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
</div><!--CONTENT END-->

<div id="right">
<div id="counter"><!--COUNTER START-->
Nb de visites :
</div><!--COUNTER END-->

<div id="news"><!--NEWS START-->
NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS
</div><!--NEWS END-->

<div id="ad"><!--AD START-->
PUB PUB PUB PUB PUB PUB PUB PUB PUB 

</div><!--AD END-->

<div id="footer"><!--FOOTER START-->
<p>© 2006-2007 BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH </p>
</div><!--FOOTER START-->
</div>

</div><!--GLOBAL ENDS HERE-->
</body>
</html>
Problème de syntaxe qui traine :
<link rel="stylesheet" "type="text/css" href="styles.css"

Version corrigée :
<link rel="stylesheet" type="text/css" href="styles.css" />


Problème d'imbrication des éléments : que fait le pied de page dans div#right ?

Problème de flottants : les éléments flottants, dans une mise en page à deux colonnes, doivent être :
- soit une des deux colonnes (dans ce cas, elle devra être placée en premier dans le code HTML, que l'on souhaite la positionner à gauche ou à droite) ;
- soit les deux colonnes.

Les deux éléments dans ton code qui correspondent aux colonnes sont, si je ne me trompe : div#content et div#right. Les div#ad et autres div#counter n'ont pas à être flottants.

Enfin, tu as pas mal compliqué les choses avec du code (copié-collé ?) que tu n'as pas l'air de comprendre. En particulier :
div#content {
	clear:both; /* pourquoi celui là déjà ? me rapelle plus... */
}

La propriété clear signifie que l'élément ainsi affecté ne pourra pas se placer à côté d'un élément flottant à gauche, à droite, ou les deux (avec un clear: both, il s'agit des deux). Or, div#content est censé être une colonne, soit flottante, soit jouxtant un flottant. Donc là c'est mal barré. Smiley biggol

Bon courage pour la suite, et n'hésite pas à demander des précisions. Smiley smile
Merci pour ces précisions ! j'aime bien quand on m'explique pourquoi ça merde !

la nouvelle version est en ligne mais c'est pas encore ça...
le "content" ne se place pas comme il faut.

par contre,
a écrit :

Problème d'imbrication des éléments : que fait le pied de page dans div#right ?

Je vois pas de div#right !

pour le "clear:both", j'ai suivi le tutoriel du site...(http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Design-XHTML-CSS-complet-avec-2-colonnes-de-meme-hauteur)
ça vient de là ! Smiley smile

Merci pour ces précisions !, encore un peu d'aide et c bon Smiley smile

bye !
Re,

div#content {
padding-bottom: 50px; /* Pour &#65533;viter la superposition du pied de page et du contenu : */	 
background:#808080;
width: 570px;
position: absolute;/**/
top: 250px;/*header + menu*/
left: 10px;	/*rattraper le padding*/
height: 220px;
overflow: auto;/*attention au dépassement si le contenu est trop important, ça risque de déborder !!! sinon lui donner un height et overflow: auto*/
}


Tu as omis le left: 10px qui te permettra de rattraper le padding de 10x que tu as donné à ton #global qui est en position relative et te sert donc de référence pour ta position absolute du #content.
Ta position top correspond à 250px soit 100 pour le header et 150 pour ton menu donc on "descent" le content de 250 pour être dessous.
Pour l'overflow, il convient de donner un height en "dur" pour que cela fonctionne: 220 px à l'air de convenir (a tester sur différentes résolutions)

voilou
J'était en train de faire de faire de la mise en page (h1,...) quand je me suis aperçu qu'il y avait une partie blanche en dessous de footer !?

ça vient d'où ça ?

décidément je suis maudit Smiley smile
stanfield a écrit :
J'était en train de faire de faire de la mise en page (h1,...) quand je me suis aperçu qu'il y avait une partie blanche en dessous de footer !?

ça vient d'où ça ?


Bon, on va prendre les choses dans l'ordre.

1 - Tu remarques que la zone blanche en dessous de ton pied de page fait pile la largeur de la colonne de contenu principal.
2 - Tu supputes que cette zone blanche correspond à div#content.
3 - Avec un outil approprié (test en rajoutant une bordure à div#content, visualisation des éléments de type bloc avec la Web Developer Toolbar, etc.), tu constates que c'est bien le cas.
4 - Avec un outil approprié (consultation du code CSS concernant div#content ou, encore mieux, vérification de toutes les propriétés CSS s'appliquant à cet élément à l'aide d'un outil comme Firebug), tu constates que div#content a, dans son code, la déclaration suivante :
div#content {
	min-height: 100%;
}

Et voilà, on a trouvé le problème. Il suffisait juste d'être un peu méthodique...

stanfield a écrit :
décidément je suis maudit Smiley smile

Pour l'instant, les divers signes de malédiction qui te frappent ressemblent surtout à des maladresses de ta part, des bouts de code recopiés sans savoir quels seraient leurs effets, etc. On est loin de la malédiction de la momie, hein, faut pas déconner. Smiley rolleyes
Modifié par mpop (18 Dec 2006 - 11:31)
ok super merci beaucoup !
non quand je dit malédiction, je sais très bien que je suis novice en css et que ça vient de là !

autre question :
serait-il plus simple de créer 2 colonnes, une "right" et une "left" pour les mettre cote à cote ? (la left contiendrait le compteur, les pub, les news...)

Est-ce que ça simplifierait les choses ?

Merci pour tout.
stanfield a écrit :
autre question :
serait-il plus simple de créer 2 colonnes, une "right" et une "left" pour les mettre cote à cote ? (la left contiendrait le compteur, les pub, les news...)

Est-ce que ça simplifierait les choses ?

Ça simplifierait beaucoup. Smiley smile
il suffit que je créé un nouveau div "right" et que j'englobe les autres div (counter pub, news) ?
c'est pas plus simple, ça fait un div en plus, non ?

A bientôt !
stanfield a écrit :
il suffit que je créé un nouveau div "right" et que j'englobe les autres div (counter pub, news) ?
c'est pas plus simple, ça fait un div en plus, non ?

Ya pas à se mettre martel en tête : tu as un contenu organisé en deux colonnes, donc tu fais deux div. Ensuite, une de ces colonnes est subdivisée en plusieurs petits blocs : tu fais autant de div que de petits blocs.

Exemple :
[b]HTML :[/b]
<div id="contenu">
	bla bla bla...
</div><!-- fin de div#contenu -->

<div id="colonne">
	<div id="menu">
	...
	</div>
	<div id="ads">
	...
	</div>
	<div id="machin">
	...
	</div>
</div><!-- fin de div#colonne -->

[b]CSS :[/b]
div#contenu {
	float: left;
	width: 79%;
}
div#colonne {
	margin-left: 80%;
}

Et voilà.
voila ce que ça donne. www.photollivier.com

et y'a encore plein de choses que je comprend pas ! :
- la colonne right "empiète" sur le menu
- n'est-il pas possible de placer automatiquement le "content" à 10px du bord du menu ? parceque si je modifie le menu, il va falloir tout recalculer et repositionner... ça devait pas être simplifié en CSS ?

EDIT : Ah ! oui,
http://web.covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-1.html
encore un exemple de mise en page où il utilise "min-height = 100%;"
alors pourquoi chez moi ça "bugue" ?

enfin, merci encore de m'expliquer...

@+ !
Modifié par stanfield (18 Dec 2006 - 19:32)
Bon, j'ai un peu arrangé le tout.
par contre l'image, je l'ai mis dans le footer mais le text ne se met pas en bas.
De plus le content ne "pousse" pas le footer vers le bas... et ça ça m'embète pas mal !

des nouvelles questions en perspectives !

A+
Dis donc, stanfield, tu n'as pas l'impression d'utiliser dans tous les sens des propriétés que tu ne maitrises pas ? Je vais devoir jouer au maitre de classe qui fait les gros yeux, ou quoi ? Smiley fache

On était partis sur deux colonnes avec un ou deux flottants, et maintenant sur ton site il y a une de ces colonnes (celle du contenu) qui est en positionnement absolu.

As-tu la moindre idée de la manière dont fonctionne le positionnement absolu ?

« Monsieur, monsieur, j'ai mis de l'arsenic sur ma plante pour qu'elle pousse plus vite et maintenant elle est toute morte ! »

Alors voilà, le positionnement absolu ça marche comme ça :
Je cite cet article d'Openweb (à lire en entier) :
a écrit :
Le positionnement absolu « retire » totalement du flux le contenu concerné

Voilà pourquoi le pied de page n'est pas repoussé : il se fout complètement et radicalement de ce bloc de contenu positionné en absolu et qui, du coup, n'existe plus pour personne.


Je veux bien être compréhensif et aider les débutants, d'ailleurs je pense pas être avare de mon temps, mais quand je donne la solution à un problème pour que pendant ce temps là on vienne en créer 5 nouveaux, ça me fatigue un brin.

Alors voilà : Openweb et Alsacréations, ainsi que d'autres sites tels que Pompage.net, ont toute une tripotée de tutoriels excellents et très pédagogiques pour apprendre les bases de (X)HTML et CSS, le positionnement des éléments en CSS, etc. Un conseil, donc : potasser tout ça.

Allez, bon courage. Smiley cligne
Tout de même, un correctif rapide que je te laisse méditer :
div#content {
	float: left;
	width: 75%;
	padding-bottom: 50px;
	border:solid 1px;
	-moz-border-radius:10px;
}
div#right {
	margin-left: 76%;
}
#menu {
	width: 100%;
	overflow: hidden;
	margin-bottom: 10px;
	background:white;
}

Si on remplace tout le code CSS pour ces trois éléments par celui-ci, on devrait obtenir quelque chose de correct pour le menu et les deux colonnes.

Edit : pour le pied de page, il faudra :
- un pied de page positionné en absolu ;
- une marge en bas (margin-bottom) de 350px (et pas un padding de 50px) sur div#content, et également pour div#right ;
- pour éviter que les flottants ne dépassent de leur conteneur (div#global), il faudra donner à ce dernier un overflow: hidden.
Si on résume :
div#global {
	width: 770px;
	overflow: hidden;
	/* bla bla tout le reste */
}
#menu {
	width: 100%;
	overflow: hidden;
	margin-bottom: 10px;
	background:white;
}
div#content {
	float: left;
	width: 75%;
	margin-bottom: 350px;
	border:solid 1px;
	-moz-border-radius:10px;
}
div#right {
	margin-left: 76%;
	margin-bottom: 350px;
}
div#footer {
	position: absolute;
	bottom: 0; left: 0;
	width: 100%;
	height: 350px;
}

Quelque chose comme ça.
Mais avec un pied de page de 350px de haut (!!!), je doute presque de l'utilité d'utiliser le positionnement absolu. Quelle est la probabilité qu'il reste encore de la place dans la fenêtre une fois que l'on aura casé en-tête + menu + contenu (même limité à la hauteur du menu) + pied de page de 350px de haut ?
Modifié par mpop (18 Dec 2006 - 23:06)
En lisant ce livre sur le CSS, tout parait simple ! mais alors quand on passe à la pratique, c'est pas la même chose !

T'as mis combien de temps pour arriver à ton niveau ? Smiley smile

quelques petits bugs encore :
-colonne "right" pas en place !
=>mais le pire c'est que je pige pas pourquoi !

-text du footer qui n'est pas en bas...
-pourquoi le overflow:hidden sur le menu ?
-concernant le pied de page de 350px, quel autre positionnement possible ? tu as l'air de dire que l'absolu ne sert à rien ici ?

Encore un gros merci...
quand tu passes dans la région, je te dois une bouffe toi ! Smiley murf
Modifié par stanfield (19 Dec 2006 - 00:21)
Administrateur
stanfield a écrit :
En lisant ce livre sur le CSS, tout parait simple ! mais alors quand on passe à la pratique, c'est pas la même chose !
Hello,

Je crois surtout qu'il ne faut pas brûler les étapes les plus importantes, à savoir le fonctionnement des schémas de positionnement (en flux, hors-flux), car les essais que tu fais témoignent de graves lacunes dans ce domaine, alors que ceux-ci sont bien détaillés dans le livre... si on prend le temps de les approfondir Smiley cligne
ouaip je sais, je me relis le chapitre depuis hiers soir ! Smiley smile
Modifié par stanfield (28 Dec 2006 - 18:39)
Je n'ai pas mes outils sur moi, donc je vais avoir du mal à répondre à tout. Mais voilà déjà quelques réponses :

stanfield a écrit :
T'as mis combien de temps pour arriver à ton niveau ? Smiley smile

Grosso modo, un peu plus d'un an.

stanfield a écrit :
quelques petits bugs encore :
-colonne "right" pas en place !
=>mais le pire c'est que je pige pas pourquoi !

Le code que je t'avais proposé marchait parfaitement. Quelles sont les modifications faites et qui posent problème ? Je te laisse analyser ça.

stanfield a écrit :
-text du footer qui n'est pas en bas...

Le texte du pied de page est en haut du bloc pied de page, ce qui est tout à fait logique. Pour l'aligner en bas, c'est une autre paire de manches, mais il y a plein de solutions possibles (padding sur div#footer, margin sur un paragraphe à l'intérieur de div#footer, etc).

stanfield a écrit :
-pourquoi le overflow:hidden sur le menu ?

Pour empêcher que les listes flottantes ne débordent de leur conteneur (div#menu), venant alors repousser div#content (qui est également flottant, donc repoussé par les flottants) et pas div#right.

stanfield a écrit :
-concernant le pied de page de 350px, quel autre positionnement possible ? tu as l'air de dire que l'absolu ne sert à rien ici ?

Tout simplement : le positionnement statique (normal, par défaut). Il suffit de laisser le bloc dans le flux, de lui appliquer peut-être un clear: both pour que les flottants ne viennent pas y mettre le bazar, et ça devrait marcher bien comme il faut.
Dans ce cas, on se passera du margin-bottom: 350px sur div#content et div#right.
Pages :
Sujet clos
Aller à