[Résolu] Arf les css...juxtaposition de 3 div (presque ^^)

Bonjour,

Je suis nouveau et faisais jusqu'à aujourd'hui mes sites à l'ancienne avec des tableaux. Je veux maintenant les faire dans la norme même si je ne vous cache pas que j'ai un p'tit pincement au coeur car les tableaux même si détournés de leur but initial étaient bien pratiques pour la mise en forme, beaucoup plus que les css je trouve enfin bref...les normes sont les normes.

Voici le problème que je rencontre : ma charte est quasi finie et je cherche maintenant à faire un gabarit type par blocs de cette dernière.
J'ai réussi à centrer mon header dans mon body sans trop de mal. J'utilise un dégradé j'ai donc tout passé via un arrière-plan dans le style du header. La difficulté vient du fait que maintenant je cherche reproduire mon menu de droite, le centre de ma page et mon menu droite seulement tous mes div se mettent les uns en dessous des autres et je ne sais plus quoi faire pour les mettre les uns à côté des autres...ensuite il y aura le footer.

Par avance merci pour votre aide

HD
Modifié par Hell doc (08 Feb 2008 - 14:02)

Bonjour

Je pense que ceci devrait t'aider pas mal.
Sinon, propose nous une page, avec du code si possible, pour que nous puissions voir où est ton problème

Maîtriser le positionnement CSS dans toutes les situations
Modifié par Igor (07 Feb 2008 - 12:43)

C'est du rapide, j'adore...et oui pardon pour le code, mon fichier css ressemble à ca pour le moment :

<style>
body {
     /* margin: 0; pour éviter les marges */
     text-align: center; /* pour corriger le bug de centrage IE */
	 }

#header {
     margin-left: auto;
     margin-right: auto;
	 padding-top: 20px;/* le texte descend de 20px */
	 margin:auto;
     width: 926px;
	 height: 187px;
	 background-image: url("bg_header.gif");
     }
#menu_g {
     width: 195px;
	 background-image: url("bg_degra_gauche.gif");
     }
#page_centre {
     width: 536px;
     }
#menu_d {
     width: 195px;
	 background-image: url("bg_degra_droite.gif");
     }
</style>

J'ai déclaré 4 div pour le moment avec 4 énoncés simples...

La structure du site est on ne peut plus basique header de 926 px, 3 div en dessous pour le menu, le centre et la marge de droite qui doivent également à eux 3 faire 926 px et en dessous un footer de 926px.

Merci

HD

bonjour
tu peux aussi t'inspirer d'un de ces gabarits :
http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS

Bonjour,

Hell doc a écrit :
car les tableaux même si détournés de leur but initial étaient bien pratiques pour la mise en forme, beaucoup plus que les css je trouve

Les tableaux ont, techniquement, un certain nombre d'avantages (positionnement sur une «grille», cellules adjacentes de même hauteur, centrage vertical du contenu). Ils ont aussi leurs limites et leurs inconvénients en termes de positionnement (et je ne parle pas ici des contraintes d'accessibilité ou de maintenance, mais bien de positionnement des éléments dans la page et d'intégration web en général).

Mais pour revenir à ta phrase ci-dessus: tu compares une manière de faire que tu connais et peut-être même maitrise à une manière de faire que tu connais encore très peu. Je te propose donc d'attendre d'avoir avancé dans ton apprentissage avant de tirer des conclusions.


Pour en revenir à ton problème:

div#menu_g, div#page_centre et div#menu_d sont des éléments de type bloc. Un élément de type bloc, par défaut, génère un retour à la ligne avant et après lui, même si techniquement tu as laissé de la place à droite en limitant la largeur du bloc en question.

On pourrait résoudre le problème en affichant ces trois éléments (s'ils sont placés les uns à la suite des autres dans le bon ordre) comme des cellules de tableau:

#menu_g, #page_centre, #menu_d {
	display: table-cell;
}
#menu_g {
	width: 195px;
	background-image: url("bg_degra_gauche.gif");
}
#page_centre {
	width: 536px;
}
#menu_d {
	width: 195px;
	background-image: url("bg_degra_droite.gif");
}

Tu peux tester ça avec Firefox, Opera, Safari, etc., pour voir ce que ça donne.

Par contre, ça ne passera pas avec Internet Explorer (y compris la version 7... mais il y a de l'espoir pour la version 8). Il faudra donc probablement utiliser un autre moyen, par exemple celui décrit le tutoriel suivant (que tu pleures de bonheur et les oiseaux volent dans le ciel en chantant tellement il est bien):
Un design fluide avec trois «colonnes», grâce au positionnement flottant

Et voilà.

Merci à tous, on s'approche du résultat voulu avec ta solution Florent V mais c'est pas encore ca, y a des décalages et puis si ca marche pas sous IE c'est pas la peine si tu vois ce que je veux dire

@verdan : ce lien est vraiment bien, d'ailleurs le modèle 5 correspond au résultat auquel je veux arriver mais j'ai pas l'impression qu'il y ait une grande différence entre ma construction et celle du modèle. En plus la marge droite est déclarée avant le centre...bizarre

J'ai pas l'impression que la construction d'un site via les CSS est une technologie bien au point et fiable à 100%, je sais que c'est "récent" (on se comprend) mais quand même pour un standard c'est embêtant.
Pour les tableaux, j'ai vraiment jamais eu de soucis de positionnement...

Sinon c'est pas pour dire, on m'avait venté les mérites de cette communauté sur phpfrance et je sais pourquoi maintenant

Si vous avez des pistes, je continue de mon côté, merci de votre dispo.

HD
Modifié par Hell doc (06 Feb 2008 - 16:36)

Avec les floats, y a du mieux sous IE (tant que le texte de droite est plus court que celui du centre donc pas comme l'exemple) mais FF

IE


FF


Que faire ? C'est pourtant pas une opération qui devrait être dure à faire...

Pas d'éponge magique avec les css ?

Merci à vous

HD
Modifié par Hell doc (06 Feb 2008 - 17:19)

Houlà... ça doit être un peu le bazar, ton intégration, non?

On pourrait voir la page en ligne, pour commencer? Histoire de gagner du temps.

Re bonjour,

Bah non j'ai repris l'exemple des floats (avec le centre déclaré après les 2 marges) et tu as vu le résultat...Voici le code complet de ma page si vous voulez bien jeter un oeil :

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
body {
	text-align:center;
}

#conteneur {
	width: 926px;
}

#header {
	 padding-top: 20px;/* le texte descend de 20px */
	 margin:auto;
     width: 926px;
	 height: 187px;
	 background-image: url("bg_header.gif");/* image 926x187px */
}

#menu_g {
	padding-left : 16px;
	width: 195px;
	background-image: url("bg_degra_gauche.gif");/* 195x1 px dégradé gauche */
}

#page_centre {
	width: 536px;
	background-color:CCC;
}

#menu_d {
	padding-right : 16px;
	width: 195px;
	background-image: url("bg_degra_droite.gif");/* 195x1 px dégradé droite */
}

#footer { 
     width: 926px;
     height: 50px;
     background-image: url("bg_footer.gif");/* image 926x50px */
}
</style>
</head>

<body>
<div id="conteneur">
<div id="header">header</div>
<div id="menu_g">gauche gauche gauche gauche gauche gauchegauche gauche gauche 
  gauche gauche gauchegauche gauche gauche gauche gauche gauchegauche gauche gauche 
  gauche gauche gauchegauche gauche gauche gauche gauche gauchegauche gauche gauche 
  gauche gauche gauchegauche gauche gauche gauche gauche gauchegauche gauche gauche 
  gauche gauche gauchegauche gauche gauche gauche gauche gauchegauche gauche gauche 
  gauche gauche gauchegauche gauche gauche gauche gauche gauchegauche gauche gauche 
  gauche gauche gauchegauche gauche gauche gauche gauche gauche</div>
<div id="menu_d">droite droite droite droite droite droite droite droite droite 
  droite droite droite droite droite droite droite droite droite droite droite 
  droite droite droite droite droite droite droite droite droite droite droite 
  droite droite </div>
<div id="page_centre">centre centre centre centre centre centre centre centre 
  centre centre centre centre centre centre centre centre centre centre centre 
  centre centre centre centre centre centre centre centre centre centre centre 
  centre centre centre centre centre centre centre centre centre centre centre 
  centre centre centre centre centre centre centre centre centre centre centre 
  centre centre centre centre centre centre centre centre centre centre centre 
  centre centre centre centre centre centre centre centre centre centre centre 
  centre centre centre centre centre centre centre centre centre centre centre 
  centre centre </div>
<div id="footer">footer</div>
</body>
</html>

Voilà je pense ne rien avoir oublié...

MeRcI

HD
Modifié par Hell doc (07 Feb 2008 - 10:00)

Bonjour,

Ils sont où les float ?

ps:
-le prologue xml fait passer IE en mode quirks;
-il manque type="text/css" à <style>;
-tu ne fermes pas la div "conteneur".

Merci Igor, mea culpa j'ai pas posté le code de la bonne page. A force de triturer et faire des tests dans tous les sens, je m'y perds un peu

Voici le bon, celui qui a produit le rendu des 2 prints :

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
	text-align:center;
}

#conteneur {
	width: 926px;
}

#header {
	 padding-top: 20px;/* le texte descend de 20px */
	 margin:auto;
     width: 926px;
	 height: 187px;
	 background-image: url("bg_header.gif");
}

#menu_g {
	float:left;
	padding-left : 16px;
	width: 195px;
	background-image: url("bg_degra_gauche.gif");
}

#page_centre {
	width: 536px;
	background-color:CCC;
}

#menu_d {
	float:right;
	padding-right : 16px;
	width: 195px;
	background-image: url("bg_degra_droite.gif");
}

#footer {
              width: 926px;
	 height: 50px;
	 background-image: url("bg_footer.gif");/* image 926x50px */
}
</style>
</head>

<body>
<div id="conteneur">
<div id="header">header</div>
<div id="menu_g">gauche gauche gauche gauche gauche gauchegauche gauche gauche 
  gauche gauche gauchegauche gauche gauche gauche gauche gauchegauche gauche gauche 
  gauche gauche gauchegauche gauche gauche gauche gauche gauchegauche gauche gauche 
  gauche gauche gauchegauche gauche gauche gauche gauche gauchegauche gauche gauche 
  gauche gauche gauchegauche gauche gauche gauche gauche gauchegauche gauche gauche 
  gauche gauche gauchegauche gauche gauche gauche gauche gauchegauche gauche gauche 
  gauche gauche gauchegauche gauche gauche gauche gauche gauche</div>
<div id="menu_d">droite droite droite droite droite droite droite droite droite 
  droite droite droite droite droite droite droite droite droite droite droite 
  droite droite droite droite droite droite droite droite droite droite droite 
  droite droite </div>
<div id="page_centre">centre centre centre centre centre centre centre centre 
  centre centre centre centre centre centre centre centre centre centre centre 
  centre centre centre centre centre centre centre centre centre centre centre 
  centre centre centre centre centre centre centre centre centre centre centre 
  centre centre centre centre centre centre centre centre centre centre centre 
  centre centre centre centre centre centre centre centre centre centre centre 
  centre centre centre centre centre centre centre centre centre centre centre 
  centre centre centre centre centre centre centre centre centre centre centre 
  centre centre </div>
<div id="footer">footer</div>
</div>
</body>
</html>

HD
Modifié par Hell doc (07 Feb 2008 - 10:43)

Bonjour,

Alors il y a plusieurs problèmes:
1. Tu as toujours ton prologue XML qui 1) est inutile (tu ne fais pas vraiment de l'XML mais du HTML qui utilise la syntaxe XML pour faire joli... faut pas s'inquiéter, c'est normal ) et 2) fait passer IE en mode Quirks.

Je m'arrête une seconde après ce premier point pour dire que si la notion de «mode Quirks» ne t'évoque rien, tu as une grosse lacune qu'il faut absolument combler au plus vite. En lisant ceci par exemple: A propos du Modèle de boîte Microsoft (ou "quirks")

Toujours en passant, si les notions de modèle de boite Microsoft et de modèle de boite standard ne sont pas acquises, c'est également une lacune à combler d'urgence.

2. Ça n'est pas bien problématique, mais tu donnes inutilement des largeurs de 926px à ton #header et à ton #footer. Un élément de type bloc tel qu'un div prend automatiquement la largeur disponible dans son conteneur. De plus, ne pas figer la largeur (mais la laisser s'adapter automatiquement) évite quelques soucis avec l'utilisation de marges, de bordures ou de padding.

(Une fois n'est pas coutume, ce deuxième point fait accessoirement appel à la notion de modèle de boite.)

3. Encore un peu de modèle de boite: tes colonnes latérales vont faire 211px de large chacune, ce qui laisse en tout 504px de «libre» au centre. Et ton bloc central a une largeur fixée à 536px. Donc ça ne peut pas passer.

4. Enfin, quand je lis ceci:

#page_centre {
	width: 536px;
	background-color:CCC;
}

je me dis que c'est pas possible, tu as dû lire le tutoriel en diagonale, vu que les deux tiers du tutoriel sont consacrés à «comment on va gérer le placement du bloc central» (avec deux solutions possibles proposées). C'est pas bien de s'arrêter au premier tiers d'un tutoriel, forcément après ça marche pas des masses.
Modifié par Florent V. (07 Feb 2008 - 11:56)

Ok Florent c'est vrai que je mets peut être la charue avant les boeufs mais je suis pressé de savoir et tente de me débrouiller seul sans tuto avec ma propre logique (blâmable ?). Pour les margin, padding no problemo. Pour le comportement des blocs c'est déjà moins évident, je suis issu des tableaux et du WYSIWYG et je trouve pas que le montage en css est intuitif (avis perso) mais comme je disais standards obligent...
Sinon je n'ai pas la source sous la main, ni ftp et n'ai pas le droit en plus de divulguer (je sais c'est nul) le graphisme du site mais voilà en gros ce que je cherche à faire schématiquement et je crois que tu vas comprendre le truc avec ce fichu dégradé :

J'attends tes/vos précieux conseils et continuer de chercher (et bien sur de lire les liens envoyés)

HD

Hell doc a écrit :


J'ai pas l'impression que la construction d'un site via les CSS est une technologie bien au point et fiable à 100%

Ce qui est tout à fait exact. Un ou deux tableaux dans ton travail, et tu conserveras le bénéfice de CSS sans ses défauts en ce qui te concerne.
Modifié par Laurent Denis (07 Feb 2008 - 13:46)

Hell doc a écrit :
[ je ] tente de me débrouiller seul sans tuto avec ma propre logique (blâmable ?)

C'est une bonne chose de faire les choses par soi-même sans forcément passer par un tutoriel, mais dans ce cas il ne faut pas y aller au petit bonheur la chance ou en pensant que «ça me semble logique donc ça devrait marcher», mais en sachant un peu ce qu'on fait. Pour cela, la spécification CSS 2.1 est une bonne référence.

Il y a aussi des articles plus généralistes sur le positionnement CSS, qui ne sont pas des cas concrets ou des tutoriels pour la réalisation de tel ou tel design. Leur lecture est peut-être plus aisée que celle de la spécification.

Initiation au positionnement CSS sur Openweb :
1. flux et position relative
2. position float
3. position absolue et fixe

Pour le design que tu veux réaliser, tu peux très bien te baser sur le tutoriel de design à trois colonnes (avec deux colonnes flottantes). Il faudra juste le combiner (assez simplement) avec la technique des colonnes factices (je te laisse chercher ça ).

Ou alors, tu peux utiliser un tableau à trois cellules:

<table id="main">
	<td id="menu_g">...</td>
	<td id="page_centre">...</td>
	<td id="menu_d">...</td>
</table>

et côté HTML:

table#main {
	width: 100%;
	border-collapse: collapse;
}
td#menu_g {
	width: 195px;
	padding-left: 16px;
}
td#page_centre {
	padding: 0 10px;
}
td#menu_d {
	width: 195px;
	padding-right: 16px;
}

Quelque chose du genre...

Ok merci bien pour tout, je vais composer avec tout ça. Perso, j'utilise et utilisais les css uniquement pour mettre en forme le texte, les liens mais pas pour de la mise en page totale...

@Laurent Denis : merci de me conforter dans mon idée première

HD

Ps : On va manger des chips (énorme cet extrait ^^)

Hell doc a écrit :
@Laurent Denis : merci de me conforter dans mon idée première

Pour compléter ce que dis Laurent, et si j'ai bien cerné sa pensée, il ne s'agit pas de dire que les tableaux de mise en page sont préférables mais que:
1. dans certains cas précis (et ça n'est pas le cas ici) ils sont le meilleur moyen de réaliser telle ou telle chose;
2. dans une démarche de mise à jour des compétences, ne pas bannir totalement les tableaux de mise en page mais en garder un ou deux pour la mise en page globale est une bonne approche.

Au sujet de ce deuxième point: on peut continuer à utiliser des tableaux de mise en page ponctuellement, mais passer de plus en plus d'informations de mise en page côté CSS, utiliser plus d'éléments «sémantiques» (les titres de section, les paragraphes, les listes, etc.), ne pas utiliser un tableau ou une cellule de tableau vides dès que l'on veut créer un retrait qui se fait tout aussi bien avec un peu de margin ou de padding, etc.

Florent V. a écrit :

Pour compléter ce que dis Laurent, et si j'ai bien cerné sa pensée,

Non. Je voulais froidement dire qu'utiliser des tableaux de présentation pouvait être pertinent dans l'absolu. Les recommandations dans ce domaine n'ont jamais que 10 ans, et plus guère de rapport avec les problématiques actuelles d'accessibilité, d'interopérabilité et de réutilisabilité.

Sinon, utiliser des tableaux de mise en page ponctuel n'a aucun rapport avec le degré de "sémantique" du contenu (titrage, paragraphes, listes, etc)
Modifié par Laurent Denis (07 Feb 2008 - 15:05)

Laurent Denis a écrit :
Non. Je voulais froidement dire qu'utiliser des tableaux de présentation pouvait être pertinent dans l'absolu.

Bon, ben mauvais cernage alors.

Laurent Denis a écrit :
Sinon, utiliser des tableaux de mise en page ponctuel n'a aucun rapport avec le degré de "sémantique" du contenu (titrage, paragraphes, listes, etc)

Je ne pense pas avoir prétendu qu'il y avait un rapport, en fait.
Je glissais cela juste pour mentionner que le fait d'utiliser des tableaux de mise en forme (ponctuellement ou massivement) n'empêchait pas de s'intéresser à la sémantique HTML et au positionnement CSS. Bref, que les différentes technologies ou portions de technologies ne s'excluent pas.

Florent V. a écrit :

Bon, ben mauvais cernage alors.

C'est moi. Le cernage était tout à fait bienvenu : logiquement, il avait en effet tout pour être bon.