Positionnement de blocs div

Marsh Posté le 24-03-2006 à 19:49:30

Bonsoir,

Je débute avec les div et le CSS.

Mon est que je ne sais pas comment aligner 3 div sur une même ligne.

J'ai pas mal cherché mais je ne trouve rien de clair, rien qui pourrait m'expliquer clairement (parce qu'apprendre à tâtons, ça va 5min ).

Voici ce que ça donne pour l'instant :

Les 2 menus et le contenu de la page sont l'un au dessous des autres.

Ce que je voudrais, c'est qu'ils soient alignés sur la même ligne comme ceci :

Voici le code de mes div :

Code :

<div id="container">
<div id="entete">
<a href="index.php"><img src="images/titre2.jpg" border="0" alt="MonCobaye, Simulation d'élevage de cochons d'Inde !" /></a>
</div>
<div id="barre">
<form>
Pseudo: <input type="text" name="pseudo" size="11" class="text">  Mot de Passe: <input type="password" name="pass" size="11" class="text">
</form>
</div>
<br />
<div id="menu_gauche">
<div id="titre">
 .:: Menu du jeu ::.
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div id="main">
<div id="titre">
 .:: Caractéristiques générales ::.
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div id="menu_droite">
<div id="titre">
 .:: Menu principal ::.
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>

et le CSS correspondant :
http://www.mon-cobaye.net/nouveau% [...] s/form.css

Merci d'avance pour vos réponses :jap:

PS: si vous avez des liens pour apprendre à bien maitriser tout ça, je suis preneur

Reply

Marsh Posté le 24-03-2006 à 19:49:30

Reply

Marsh Posté le 24-03-2006 à 20:22:07

doc technique sur css1:
http://www.w3.org/TR/CSS1

liste des tags html:
http://www.w3.org/TR/html4/index/elements.html

dans ton cas, utilise plutot un tableau html (tag TABLE):

Reply

Marsh Posté le 24-03-2006 à 20:49:37

j'avais un tableau à la base, mais on m'a conseillé de tout passer en div

Reply

Marsh Posté le 24-03-2006 à 21:11:11

alors voit du côté de css: float et clear

Code :

<html>
<body>
<div id="container">
<div id="entete" style="background:#ffbfbf">
<a href="index.php"><img src="images/titre2.jpg" border="0" alt="MonCobaye, Simulation d'élevage de cochons d'Inde !" /></a>
</div>
<div id="barre" style="background:#ffffbf">
<form>
Pseudo: <input type="text" name="pseudo" size="11" class="text">  Mot de Passe: <input type="password" name="pass" size="11" class="text">
</form>
</div>
<br />
<div id="menu_gauche" style="background:#ffbfbf;width:10%;float:left;">
<div id="titre">
 .:: Menu du jeu ::.
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div id="main" style="background:#ffbfff;width:80%;float:left;">
<div id="titre">
 .:: Caractéristiques générales ::.
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div id="menu_droite" style="background:#bfffbf;width:10%;float:left;">
<div id="titre">
 .:: Menu principal ::.
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>
</body>
</html>

Reply

Marsh Posté le 25-03-2006 à 06:13:19

Code :

<html>
<head>
</head>
<body>
<h1 style="background:#ffbfbf">
<a href="index.php"><img src="images/titre2.jpg" border="0" alt="MonCobaye, Simulation d'élevage de cochons d'Inde !" /></a>
</h1>
<div id="barre" style="background:#ffffbf">
<form>
Pseudo: <input type="text" name="pseudo" size="11" class="text">  Mot de Passe: <input type="password" name="pass" size="11" class="text">
</form>
</div>
<br />
<div id="menu_gauche" style="background:#ffbfbf;width:10%;float:left;clear:both;height:300px;">
<h2>
 .:: Menu du jeu ::.
</h2>
Texte
</div>
<div id="main" style="background:#ffbfff;width:80%;float:left;height:300px;">
<h2>
 .:: Caractéristiques générales ::.
</h2>
Texte
</div>
<div id="menu_droite" style="background:#bfffbf;width:10%;float:left;height:300px;">
<h2>
 .:: Menu principal ::.
</h2>
Texte
</div>
</body>
</html>

Fais plûtot ça, ça t'alignera les colonnes à la même taille, définit ce que tu veux comme mise en forme pour le <h2> Au lieu de créer un id pour le titre du menu.

Vire les propriétés CSS de la page HTML contenues dans style de chaque div, et mets les dans le fichiers CSS

Note que je n'utilise pas ta balise container, tu peux passer toutes ses propriétés dans <body>, ça se définit comme pour h1, h2 ect... (pas de # ou de . dans le CSS)

Edit : J'ai viré l'entete, tu peux le remplacer par <h1> c'est mieux.

:jap:

@nargy : Les tableaux ne servent pas à la mise en page

Message édité par Shinuza le 25-03-2006 à 06:14:22

---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.

Reply

Marsh Posté le 25-03-2006 à 12:23:31

En fait, le container sert à faire un cadre autour du contenu de la page.

Sinon, le clear:both, ça sert à quoi précisément ?

Reply

Marsh Posté le 25-03-2006 à 14:26:03

le clear:both sert à casser le positionnement float appliqué sur le bloc précédent

http://wiki.media-box.net/documentation/css/clear

Reply

Marsh Posté le 25-03-2006 à 15:44:43

> @nargy : Les tableaux ne servent pas à la mise en page
ha bon? comment tu fait un tableau alors?

> @nargy : Les tableaux ne servent pas à la mise en page
C est quand même beaucoup plus simple et necessite beaucoup moins de code source.

> height=300px;
Beurk! height=100%;

Message cité 2 fois

Reply

Marsh Posté le 25-03-2006 à 16:32:12

nargy a écrit :

> @nargy : Les tableaux ne servent pas à la mise en page
C est quand même beaucoup plus simple et necessite beaucoup moins de code source.

Oui ça peut être plus simple et c'est justement le problème. Ce n'est pas leur fonction mais c'est très utilisé pour de la mise en page.
Conclusion : Les tableaux pour la mise en page c'est mal!

Reply

Marsh Posté le 25-03-2006 à 16:33:10

Les pourcentages c'est pas terrible, c'est le meilleur moyen d'avoir des mauvaises dimensions

Reply

Marsh Posté le 25-03-2006 à 16:33:10

Reply

Marsh Posté le 25-03-2006 à 16:55:41

J'aurais une autre question : comment faire pour que l'épaisseur des bords des div de menu et de contenu soient comprise dans le width du div ?

Message cité 1 fois
Message édité par nero27 le 25-03-2006 à 16:55:50

Reply

Marsh Posté le 25-03-2006 à 17:01:03

> Oui ça peut être plus simple et c'est justement le problème.
- ha bon... c est un problème de faire la même chose plus simplement?

> Les pourcentages c'est pas terrible, c'est le meilleur moyen d'avoir des mauvaises dimensions
- Les pixels c'est pas terrible, c'est le meilleur moyen d'avoir des mauvaises dimensions

Sur le fond je suis plutot d accord pour utiliser CSS sur la forme, maintenant CSS n est pas encore assez complet pour n utiliser que lui.

Reply

Marsh Posté le 25-03-2006 à 18:51:32

Citation :

> Oui ça peut être plus simple et c'est justement le problème.
- ha bon... c est un problème de faire la même chose plus simplement?

Je crois que ce qu'il voulait dire, c'est que le problème est que vu que c'est plus simple, tout le monde l'utilise alors que ce n'est pas correct [:spamafote]

Citation :

> Les pourcentages c'est pas terrible, c'est le meilleur moyen d'avoir des mauvaises dimensions
- Les pixels c'est pas terrible, c'est le meilleur moyen d'avoir des mauvaises dimensions

Je dirais qu'il faut savoir où et quand utiliser des pixels ou des pourcentages.

nero27 a écrit :

J'aurais une autre question : comment faire pour que l'épaisseur des bords des div de menu et de contenu soient comprise dans le width du div ?

Quelqu'un peut m'aider ?

En gros, je m'explique : je ne peux pas utiliser comme largeur 15%/70%/15% car sinon la largeur totale des 3 blocs est supérieure à celle du conteneur à cause de l'épaisseur des bordures.
De plus, les largeurs ne rendent pas pareil sous IE : est-ce normal ?

Message édité par nero27 le 25-03-2006 à 19:18:52

Reply

Marsh Posté le 25-03-2006 à 19:51:27

> J'aurais une autre question : comment faire pour que l'épaisseur des bords des div de menu et de contenu soient comprise dans le width du div ?
- avec des tailles en pixels...

> Autre question : comment puis-je faire pour que les 3 div aient la même hauteur ?
- on t a donné deux solutions: height=300px; partout ou height=100%; partout.

Pour height=100% il faut mettre tes divs dans un tableau, sinon FF prends la tailles de la fenêtre et IE débloque:

Code :

<html>
<head>
</head>
<body>
<h1 style="background:#ffbfbf">
<a href="index.php"><img src="images/titre2.jpg" border="0" alt="MonCobaye, Simulation d'élevage de cochons d'Inde !" /></a>
</h1>
<div id="barre" style="background:#ffffbf">
<form>
Pseudo: <input type="text" name="pseudo" size="11" class="text">  Mot de Passe: <input type="password" name="pass" size="11" class="text">
</form>
</div>
<br />
<table border=1><tr><td>
<div id="menu_gauche" style="background:#ffbfbf;width:20%;float:left;clear:both;height:100%;">
<h2>
 .:: Menu du jeu ::.
</h2>
Texte<br>
</div>
<div id="main" style="background:#ffbfff;width:60%;float:left;height:100%;">
<h2>
 .:: Caractéristiques générales ::.
</h2>
Texte
</div>
<div id="menu_droite" style="background:#bfffbf;width:20%;float:left;height:100%;">
<h2>
 .:: Menu principal ::.
</h2>
Texte
</div>
</td></tr></table>
</body>
</html>

Pour les histoires pixels/pourcentages, j essaye toujours d utiliser les pourcentages: en tant qu internaute il n y a rien de plus énervant que de ne pas pouvoir redimensionner la police ou la taille de la fenêtre de navigation à cause de tailles fixes. Cependant parfois elles sont necessaires, mais pas dans les cadres principaux du site (menus, entêtes, pieds de page..)

A moins que CSS puisse faire tout ce que fait les tableaux sans utiliser des combines différentes pour chaque navigateur, les tableaux restent l idéal pour faire des présentations dynamiques sans javascript.

Reply

Marsh Posté le 25-03-2006 à 19:53:37

pour les bordures, peut être que ça peut t aider de jouer avec border-top, border-bottom, border-left, border-right.

Reply

Marsh Posté le 25-03-2006 à 22:16:41

nargy a écrit :

> @nargy : Les tableaux ne servent pas à la mise en page
ha bon? comment tu fait un tableau alors?

> @nargy : Les tableaux ne servent pas à la mise en page
C est quand même beaucoup plus simple et necessite beaucoup moins de code source.

> height=300px;
Beurk! height=100%;

Le tableau servent au rangement de donnés tabulaires, donc que tu puisses tenir une information en lisant une colonne et une ligne du tableau. [:sinclaire]

---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.

Reply

Marsh Posté le 25-03-2006 à 22:39:03

> Le tableau servent au rangement de donnés tabulaires, donc que tu puisses tenir une information en lisant une colonne et une ligne du tableau.

ouais, toutes les pages web quoi...

Reply

Marsh Posté le 26-03-2006 à 01:24:00

:sarcastic:

On t'as jamais appris à lire un tableau alors... [:sinclaire]

Tu vois excel et consors? Ca sert à faire des données tabulaires.

Tu devrais lire ça : http://www.cybercodeur.net/weblog/ [...] thing.html

Message édité par Shinuza le 26-03-2006 à 01:24:19

---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.

Reply

Marsh Posté le 26-03-2006 à 03:47:00

Ils admettent que CSS ne résoud pas le cas exposé dans cette thread.

Très bien leur exemple entre tableau et css, par contre les marges en px plutot qu en ``em`` je les recommenderaient pas.

Sur un écran d ordinateur, les concepteurs de pages web ont trop tendance à se référer au pixel, alors qu en face il n y a aucun moyen simple de connaître les dimensions de la fenêtre de navigation de l internaute.

Pour ce qui est de l organisation du site grâce à CSS, les principes valent pour d autres méthodes, il n est à imputer à CSS que l avantage de la feuille de style mise en cache.

Ce qui ne me plaît pas dans leur argumentation: CSS n est pas plus développé que les tableaux dans IE&NS 2 dont ils parlent, le standard est très limité, pourtant ils le présentent comme LA solution à privilégier face aux tableaux.

Il y a plein de choses qui manquent à CSS au niveau des tailles dynamiques: hauteur maxi/mini, politique de redimensionnement, éléments ``expansionnables``. (note: là je ne parle pas des trucs & astuces qui marche pour certains navigateurs seulement).

Autant de choses qu il est plus facile à faire avec des tableaux, et qui fait que dans de nombreuses pages webs les tableaux sont necessaire, même pour faire un tableau d une seule case (notamment à cause du height=100%).

Avec CSS les présentations avec de nombreux tableaux imbriqués pour faire des marges est révolu car CSS est beaucoup plus précis et concis, mais pas la disposition globale des éléments dans une page qui necessite bien souvent une organisation que seul un tableau peut apporter.

Ma remarque:
> ouais, toutes les pages web quoi...
est ironique, et porte sur le fait qu une page web est rectangulaire, et est par conséquent un cas particulier de tableau à 1 rang et 1 colonne.

La solution que je présente plus haut, ne peut justement pas se faire sans tableau de 1 case. Sinon, je veut bien la connaître.

Bref, les gens qui disent ``utilise plutôt CSS qu un tableau`` font des généralités qui ne sont pas exactes. Dans beaucoup de cas il faut les deux, et CSS ne remplace pas les tableaux.

Si tu prends l exemple typique présenté dans cette thread, et en supposant que CSS ait toutes les qualités necessaires au dimensionnement dynamique, un tableau reste l élément le plus logique et explicite pour ce type de présentation.

Reply

Marsh Posté le 26-03-2006 à 10:47:18

Premièrement, il est possible d'utiliser les CSS pour un redimensionement dynamique, em ou %, qu'importe.

Height="100%" est utilisable en CSS également, je trouve l'intérêt limité...
Cependant, il est possible d'avoir une valeur fixe pour la hauteur tant qu'on utilise certains standard d'accessibilité.

CSS permet de remplacer un tableau, dans tout les cas, il faut bien comprendre que le tableau à été détourné de sa fonction première, à savoir, le rangement des données ou X par Y donne une sortie de données precise.

Un tableau à une case, c'est justement ce qui donne une série de tableau imbriqués (illisibile pour un navigateur pour aveugle par exemple), le problème est le même avec un tableau à une seule collone ou une seule ligne.

Un tableau doit faire 2 lignes sur 2 colonnes minimum, respectivement, présentation des données et données.

Comme tu le dis "c'est plus facile", mais c'est la tout le problème, imposer un standard est une nécessité, cela permet de laisser le choix à l'utilisateur. Ce n'est pas le site web qui doit décider, mais l'utilisateur.

L'exemple que j'ai donné est 100% flexible, même en hauteur, il suffit de remplacer les 300px par 100%, ils prendront 100% de la page. Et c'est sans intérêt, pour acceder aux données, on descend sur la page. On présente les données comme elles viennent, cela évite d'avoir un vide entre le maximum affichable et ce que contient le site.

Par contre tu devrais vraiment apprendre à te servir de ta touche 3.

Message édité par Shinuza le 26-03-2006 à 10:59:48

---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.

Reply

Marsh Posté le 26-03-2006 à 12:53:22

> L'exemple que j'ai donné est 100% flexible, même en hauteur, il suffit de remplacer les 300px par 100%
- Avec FF ça marche pas en tous cas. Ils le précisent bien sur le site dont tu as donné l url ci dessus, il n y a pas de solution CSS.

La présentation ci dessus, en 3 colonnes, tu appelle ça comment?

> Par contre tu devrais vraiment apprendre à te servir de ta touche 3.
???

Reply

Marsh Posté le

Reply

Positionnement de blocs div

Sujets relatifs:

Leave a Replay