[XHTML] Aligner div

Version imprimable

21/01/2006, 19h09
Anduriel

[XHTML] Aligner div

Salut,

Comment faire pour mettre deux div à la suite?
J'ai essayé en en faisant deux différents, avec un float: left et un float: right mais il change de ligne.

Merci

Pourquoi tu n'utilises pas plutôt un tableau ?

Sinon, il y a
Code:

1 2 3 4 5 6 7 8 9 10 11 #gauche{ position: absolute; left: 0px; top: XXXpx; } #droite{ position: absolute; right: 0px; top: XXXpx; }

21/01/2006, 19h34
Anduriel

Merci mais comment si ces div sont dans d'autre div?
Dans ce cas ils sortent et ça ne me va plus :?

Merci
21/01/2006, 19h50
Locelot

Re: Aligner div
Citation:

Envoyé par Anduriel

Comment faire pour mettre deux div à la suite?

Mais c'est impossible, non?
Un <div> prend toujours la largeur maximale :P

Il faut donc utiliser un tableau
Code:

1 2 3 4 5 6 <table width="100%"> <tr> <td></td> <td style="text-align:right;"></td> </tr> </table>
En tout cas, c'est de cette manière que je procèderais
21/01/2006, 21h02
Anduriel
Je sais mais maintenant on entend qu'il ne faut plus utiliser de tableau alors bon...

Alors je pose ma question autrement:
J'ai une chaine de caractère suivis d'un champ input. Je voudrai que tous les input soient au même retrait:
Code:

1 2 3 blablablabla |input jziog |input ergrgrgrg |input
Comment faire sachant que je suis dans un div?
Merci
21/01/2006, 21h14
Locelot
Je ne voudrais pas trop m'avancer mais je dirais que c'est impossible.
En tout cas, depuis plusieurs années que je fais du (X)HTML, jamais je n'ai vu faire cela autrement qu'avec un tableau.

D'où tu as entendu qu'il ne fallait plus utiliser les tableaux?
C'est impossible de s'en passer, ils sont partout quand on fait un site.

Enfin, je ne vois que le tableau pour faire ce que tu veux.
Tu ferais mieux de les utiliser plutôt que de te casser la tête à quelque chose que tu n'arriveras jamais à faire ou alors en utilisant des trucs de fous.

J'espère que mon message t'aide :frenchy:

Edition: Ou alors peut-être comme ça mais je ne suis pas sûr
Code:

1 2 <span style="width:50%;"></span> <span style="width:50%;"></span>
21/01/2006, 21h18
Anduriel

Moi aussi je croyais que c'était impossible jusqu'au moment ou j'ai regardé ce site: http://foogitiff.free.fr

Que des div :)
Bon si quelqu'un à la solution je l'en remercierait.
Merci
21/01/2006, 22h55
v4np13
C'est entierement possible sans tableaux !!
Code:

1 2 3 4 5 6 #ligne{ display:inline; } .element{ float:left; }
En paramétrant la taille de tes blocs, et en mettant des marges,... :wink:

Mon code est:

Code:

1
2
3
4
5
6
7
8
<div class="body">
   <div class="left">
      GAUCHE
   </div>
   <div class="right">
      DROITE
   </div>
</div>

Dans mon CSS j'ai:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
div.left {
	float: left;
	width: 250px;
	margin-left: 0px;
}
 
div.right {
	float: right;
	width: 250px;
	margin-right: 0px;
}
div.body {
	display: inline;
	padding: 2px;
	text-align: left;
}

Mais ça ne change rien mes div sont sur 2 lignes :?

22/01/2006, 00h43
v4np13

Tu ne dois pas des float aux 2, ça fait tout planter, c'est normal. Div gauche tu met float left. Puis tu le met en premiere place dans le html. Il y aurait même moyen en enlevant le display:inline :wink:
22/01/2006, 01h11
Eradwen

Des tableaux pour la mise en forme? Il y a encore des gens qui conseillent ça? On régresse sur ce forum ou quoi?
22/01/2006, 11h52
Locelot

Citation:

Envoyé par Eradwen

Des tableaux pour la mise en forme? Il y a encore des gens qui conseillent ça? On régresse sur ce forum ou quoi?

Moi, je l'ai conseillé et je ne vois pas où est le problème :P
Quand un tableau est clair, ça va.

Citation:

Ce que l'on oublie de plus en plus, avec cette mode de la standardisation à outrance, c'est qu'un tableau de présentation, simple et proprement conçu, ne pose pas de problèmes d'Accessibilité aux médias non graphiques.

A force de "déconseiller", on en vient à écarter violemment certaines utilisations des tableaux que le W3C lui-même ne réprouverait pas.

Comment s'en rendre compte ? Simplement, encore une fois en refusant d'être plus royaliste que le roi : la section WAI du W3C, celle qui informe sur ses recommandations pour l'Accessibilité, est construite... avec un tableau de présentation.

Elle n'est pas la seule dans ce cas. L'association française de référence pour les handicaps visuels, Braillenet.org, est également construite à l'aide de tableaux.

Cela peut paraître bizarre à première vue, mais cela nous fait surtout relativiser quant à cette agressivité anti-tableaux...

A méditer. Il n'y a donc aucune régression à utiliser les tableaux.
Moi, sur mon site, j'ai plein de tableaux et ça ne me pose aucun problème mais c'est surtout par habitude aussi.

Mais c'est assez intéressant de voir des présentations sans tableaux car sincèrement, je ne connaissais pas. Faut que je voie cela de plus près maintenant 8)
22/01/2006, 12h06
v4np13

Les tableaux, moi je dis: ok pour afficher des données comme résultats de maths, factures,... Mais, nous ne sommes plus en 1990, on ne met pas des tableaux partout sur certains sites tu vois des tableaux n'importe où dans le code source, ça allourdi le tout et puis avec une touche de CSS, c'est nettement plus beau graphiquement. Ou mieux encore refais moi son design avec que des tableaux... :P
22/01/2006, 12h14
ilood
Salut,

J'ai cru voir que tu voulais aligner des champs textes.
En général on utilise des balises label pour le texte qui précéde les champs textes.
html :
Code:

1 2 <label for="nom">Nom : </label><input type="text" id="nom"><br> <label for="prenom">Prenom : </label><input type="text" id="prenom">
css :
Code:

1 2 3 4 label { float: left; width: 10em; }
22/01/2006, 15h48
Anduriel

Merci de tout vos conseil tout est bon :)
22/01/2006, 16h43
Eradwen

Locelot :

Pourquoi éviter les tableaux pour faire de la mise en page :

En tant que programmeure-intégrateure Web, je peux te dire que lorsqu'on doit faire une modification dans un vieux site rempli de tableaux imbriqués à n'en plus finir, le temps des modifications est facilement triplé.

De plus, avec les css, le code est beaucoup moins lourd, ce qui est assez important pour un site qui génère beaucoup de traffic : moins de bande passante nécessaire.

C'est aussi beaucoup plus lisible et compréhensible.

Les tableaux servent à afficher des données tabulaires, comme des résultats de statistiques par exemple. Pour ce qui est du layout, c'est le travail du css.
22/01/2006, 17h40
Locelot

Oui, tout à fait d'accord :D

Mais le fait que pour moi, faire une présentation sans tableau me paraissait bizarre mais je suis en train de faire des changements sur mon site. J'ai un mode texte qui permet de régler la taille du texte et j'ai déjà supprimé tous les tableaux pour cette structure comme quoi, je ne suis pas pour les tableaux à tout prix :wink:

Je suis vraiment sensibilisé aux problèmes d'accessibilité et suis vraiment désolé d'avoir préconisé les tableaux.
Mais bon, j'ai un peu appris sur le tas et je n'avais jamais lu jusqu'à aujourd'hui qu'on pouvait faire autrement.

Sur ce, merci à tous pour ces intéressantes informations :merci:
13/02/2006, 19h25
azmodan

Bonjour... j'essaie aussi de mettre un site en page grace aux balises prèvues à cet effet (div et span) et je vous cache pas que je galère beaucoup, rien ne semble s'aligner correctement.

En lisant ce sujet j'ai décidé de jeter un oeil au site http://foogitiff.free.fr qui contient effectivement beaucoup de div et dont la mise en page reste bonne quelque soit le navigateur...
Le code est à l'adresse suivante pour les intéressés:
http://foogitiff.free.fr/style.css

Les tableaux me semblent plus pratique mais peut-être que je changerai d'avis! Pour ce qui est de l'argument de la bande passante en faveur des div/span je pense qu'à l'heure actuelle y'a pas besoin de trop s'en soucier...

Petit ajout important:
Il semble qu'internet explorer gère mieux les div si on ajoute ceci en début de code (avant la balise <html>) :
<!DOCTYPE html>

J'ai voulu faire un div centré horizontalement et sans cet ajout ça ne fonctionnait pas sur IE.