Discussion :

[bambou]

bonjour,

c'est surement un Nième post sur le positionnement css, mais malgrés mes recherches sur le net et avoir fais pas mal de tuto et de test, je reste encore assez perplex sur le positionnement des éléments sans passer par un tableau..



prenons un cas concret..
je souhaite créer le formulaire qui se trouve en pièce jointe..en ce qui concerne tout ce qui est en dehors des tab, pas de souci...pour ce qui est dans la tab, la, c'est pas la meme histoire...

ça fait quelques temps que j'entend dire qu'il ne faut plus utiliser de tableau pour faire la présentation dans un site web. D'autant plus que dans le cas de mon formulaire, les parties horizontales (plates1, plates2...Etc) sont toujours de la meme forme et peuvent être en quantité infinies. Donc ça me parait plus facile à gérer dans un div que je peux "dupliquer"..., alors c'est parti on test...




La tab (position3 par exemple) est un gros div

A ce stade une première question me vient à l'esprit : pour le tableau que je vais construire, est-ce que le plus simple est de mettre des largeures fixes en px ou relatives en %?
A priori, le plus joli serait en % pour que ça s'adapte à la taille de l'écran de l'utilisateur..mais le peu d'expérience css et positionement que j'ai me dis que les tailles fixes partent moins en sucette d'un navigateur à l'autre...c'est une question annexe qui n'est pas la plus fondamentale...passons au vif du sujet



Dans le div de ma tab, j'ai donc un Premier div qui va être le header du tableau (cellule haut-gauche + cellules left, middle et right).
Ce présente à moi le probleme suivant :

Je pars sur le principe que les div s'alignent verticalement entre eux, alors que les span s'alignent horizontalement...

De ce simple constat je me dis qu'avec le code suivant (les id sont la uniquement pour vous aider à reperer les éléments), je devrais a peu prés retrouver la structure de l'entete de mon tableau :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="tab">
  <div id=header>
    <span id="caseHautGauche">
 
    </span>
    <span id="left">
 
    </span>
    <span id="middle">
 
    </span>
    <span id="right">
 
    </span>
  </div>
  <div id="plate1">
    ...
  </div>
  ...
  <div id="plateN">
    ...
  </div>
</div>

si j'utilise ce code tel quel avec du simple texte dans les span, pas de souci, j'ai bien mon header qui contient 4 cases alignées horizontalement, et en dessous, 2 cases pour les plates les unes en dessous des autres

Ensuite, j'ai rajouté montexte et mes champs dans les span, jusque la pas de souci...

exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
    <span id="caseHautGauche">
       location : <input type="text">
    </span>

J'ai mis un br pour faire les retour à la ligne

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
    <span id="caseHautGauche">
       location :<br> <input type="text">
    </span>

Déjà la, les span left midle et right étaient déjà en dessous de celui la au lieu d'être à coté...
j'ai bien essayé de remplacer ce br en entourant location et l'input de div, ce qui ne me parrait pas trés joli (si je dois entourer de div tous mes éléments à chaque fois que je veux sauter une ligne je vais pas m'en sortir!!) comme ceci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
    <span id="caseHautGauche">
       <div>location :</div> <div><input type="text"></div>
    </span>

J'ai essayé également de passer par des div avec un attribut float:left dans ma css...ça marche plus ou moin. Voila le code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="tab">
  <div id="header">
    <div class="head2">
       <div>test1</div>
       <div>test1bis</div>
    </div>
    <div class="head2">
      test2
    </div>
    <div class="head2">
      test3
    </div>
    <div id="nofloat">
      test4
    </div>
  </div>
  <div id="plate1">
    ...Plate1
  </div>
 
  <div id="plate2">
    ...PlateN
  </div>
</div>

et la css:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.head2{
	float:left
}

je concerve bien l'allignement horizontale des anciens span mais le texte "test1bis" est alligné horizontalement avec le texte "Plate1" qui devrait être au dessous

je ne suis pas un spécialiste css mais passer par un div et un attribut float:left ça ne me parait pas joli étant donné qu'on a une balise spéciale pour faire ça (span) et que ça oblige à faire un traitement spécial (enlever le float:left) pour le dernier bloc horizontale de façon à revenir dans le flux normal de la page

bref, je suis un peu perdu avec le positionnement des blocs...et aux propiétés qui sont hérités ou par l'imbrications de blocs

si il y a une bonne ame, qui à pris le temps de lire ce post jusqu'au bout et qui peut m'éclairer un peu plus sur le fonctionnement des blocs ce serait vraiment sympa, parce que la je suis vraiment perdu...

merci