Discussion :

[Anduriel]

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

[gorgonite]

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

Sinon, il y a

Code :

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

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;
}

[Anduriel]

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

Merci

[Locelot]

Comment faire pour mettre deux div à la suite?

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

Il faut donc utiliser un tableau

Code :

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

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

[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 :

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

1
2
3
blablablabla      |input
jziog             |input
ergrgrgrg         |input

Comment faire sachant que je suis dans un div?
Merci

[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

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

Code :

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

1
2
<span style="width:50%;"></span>
<span style="width:50%;"></span>

[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

[v4np13]

C'est entierement possible sans tableaux !!

Code :

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

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,...

[Anduriel]

Mon code est:

Code :

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

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 :

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
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

[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

[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?

[Locelot]

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
Quand un tableau est clair, ça va.

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)

[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...

[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 :

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

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 :

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

1
2
3
4
label {
	float: left;
	width: 10em;
}

[Anduriel]

Merci de tout vos conseil tout est bon

[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.

[Locelot]

Oui, tout à fait d'accord

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

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

[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.