Comment mettr les div les un apres les autres ?

Bonjour
je cherche juste la propriété dans le css qui permet de dire que les <div> peuvent s'aligner et ne pas revenir à la ligne ..
merci!!!!!!!

bonsoir,

en les passant en display:inline; et ils se comporteront comme des span
en les passant en float , ils pourront aussi etre dimensionnés.
tout depend de la page html et de son contenu , que tu as , et comment tu veut la "stylée."
++

merci
je testerai ca demain !!

bonsoir,


Je voulais ouvrir un sujet sur le même thème, autant tout regrouper.

Voilà, sur mes menus d'évitement et de fil d'ariane j'utilise -> float: right;

Jusque là tout vas bien mais comme souvent IE fonctionne différement des autres et le fil d'ariane ce trouve réduit.

Il semble assez clair que le second menu récupère la place laisser par le premier pour trouver sa dimension. Ce cas ce présente uniquement si les menu sont long

Voici le css :

<style type="text/css">
<!--
.evitement {
	clear: both;
	float: right;
}
.evitement li {
	display: inline;
}
-->
</style>

Puis le html :

<ul class="evitement">
  <li>Accueil 1 · </li>
  <li>accessibilité · </li>
  <li>aller au contenu · </li>
  <li>plan du site · </li>
  <li>contact</li>
  <li>Accueil 1 · </li>
  <li>accessibilité · </li>
  <li>Other languages</li>
</ul>
<ul class="evitement">
  <li>Accueil 2 · </li>
  <li>accessibilité · </li>
  <li>aller au contenu · </li>
  <li>plan du site · </li>
  <li>contact</li>
  <li>Accueil 1 · </li>
  <li>accessibilité · </li>
  <li>Other languages</li>
</ul>

J'aurrai pu me passer des blocs "evitement" pour styler les <ul> mais je compte les

gcyrillus a écrit :
bonsoir,

en les passant en display:inline; et ils se comporteront comme des span
en les passant en float , ils pourront aussi etre dimensionnés.
tout depend de la page html et de son contenu , que tu as , et comment tu veut la "stylée."
++

La solution des div en position absolue placés et dimensionnés grâce à des unités relatives est souvent oubliée (ou mise de côté); il s'agit pourtant là d'une solution simple, logique et fiable.

bonjour,

a écrit :
La solution des div en position absolue placés et dimensionnés grâce à des unités relatives est souvent oubliée (ou mise de côté); il s'agit pourtant là d'une solution simple ....

Perso , je fuis cette option aussi longtemps que possible , ce n'est pas une solution simple ni logique a mon sens , que d'user du position:absolute a tout va pour "tenter" une maitrise totale de l'affichage ... d'ailleurs quelques post viennent de passer en relevant quelques bugs , dus aux absolute ou relatif .
En bref je ne conseil pas cette façon de faire a quelqu'un qui debute car c'est lui mettre des "oeilleres" (le mot est peut-etre fort , pas trouvé plus subtil) sur les possibilités de mise en forme css en conservant la logique du flux html de sa page , donc du contenu a priori organisé/hierarchisé .

Le positionnement en absolute me parait "brutal" et source d'effet incomprehensible pour les debutant , cela oblige a penser aussi la page en "patchwork" , avec des morceau que l'on assemble,.... bizarrement , ça me fait penser aux frames.

Enfin , ç'est juste mon avis et c'est effectivement une option ... que j'utilise aussi parfois dans mes bricolages.


++
(je n'ai pas un point de vue professionnel et jamais confronté a la conception/production d'un site pour une tierce personne , probable que je zappe nombres de paramêtres à prendre en compte ).

eeuh..
ca marche pas
CSS:

display:inline;

les div disparaissent ..

nan en fait elle disparaissent pas ..
mais elle ne sont pas à la ligne !!
autre question :
a gauche j'ai un script ensuite dans un <span> je met du texte .. le texte apparait à droite du script je voudrai ki retourne a la ligne (jaiessayé avec <br /> .. ca ne march pas vraimen)
mais comment fair pour que mon div qui a un background de mon image se comporte comm en <img> et donc puisse se mettr les uns a coté des autres ..

bonsoir,

le mieux serait de mettre la page ou le code en ligne .
Cela permettrait de voir ce que tu cherche a faire et a partir de quoi .
:)
++.

EXEMPLE
contenu du fichier html

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Essai pour mettre ligne des div</title>
<style media="screen">
#haut, #gauche, #droite, #bas {
	position: relative;
}
#haut, #bas {
	width: 192px;
	height: 192px;
}
#gauche, #droite {
	width: 128px;
	height: 128px;
}
#haut {
	background-image: url(haut.gif);
}
#gauche {
	background-image: url(gauche.gif);
}
#droite {
	background-image: url(droite.gif);
}
#bas {
	background-image: url(bas.gif);
}
</style>
</head>

<body>
<center>
<div id="haut">haut</div>
<div id="gauche">gauche</div>
<div id="droite">droite</div>
<div id="bas">bas</div>
</center>
</body>
</html>

Page d'essai ici
voila alors le pb je le repete c'est, dans cet exemple, que gauche et droite soit juste à coté

aa mais il y avait ce Sujet-là !!!!!

bonjour,

deja c'est un peu plus claire ,
tu veut en plus les voir centrées , dans un doctype transitionnal et entre 2 balises center , sur un hebergeur qui te fait de toute façon "sauté" le doctype dans IE ....

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Essai pour mettre ligne des div</title>
<style media="screen">
body {text-align:center}
#gauche , #droite {
display:table-cell;/* pour firefoxe */
display:inline-block;/* pour opera par exemple */
/* pour IE voir commentaire conditionnel */
}
#haut, #bas , #gauche, #droite {
border:1px solid #333;/* bordure pour les voir [langue] */
margin:20px;
}
#haut, #bas {
	width: 192px;
	height: 192px;
}
#gauche, #droite {
	width: 128px;
	height: 128px;
}
#haut {
	background-image: url(haut.gif);
}
#gauche {
	background-image: url(gauche.gif);
}
#droite {
	background-image: url(droite.gif);
}
#bas {
	background-image: url(bas.gif);
}
</style>
<!--[if IE]>
<style type="text/css">
#gauche , #droite {
float:left;
}
#centreIE {
width: 386px;
}
</style>
<![endif]-->
</head>
<body>
<center>
<div id="haut">haut</div>
<div id="centreIE" >
	<div id="gauche">gauche</div>
	<div id="droite">droite</div>
</div>
<div id="bas">bas</div>
</center>
</body>
</html>

JE dois avouer que je n'aurais pas imaginer une balise center dans la page , je ne la bannit pas , je l'ignore .

++

je te laisse te renseigner sur les diplay:table et CIE , pour comprendre le comportement dans firefoxe, inline-block dans opoera (malheureusement ff semble ne pas comprendre inline-block et IE le traite a sa maniere).
d'ou un div supplementaire pour IE.

a noter que simplement :

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Essai pour mettre ligne des div</title>
<style media="screen">
body {text-align:center}
#gauche , #droite {
float:left;
}
#centreIE {
width: 386px;
overflow:auto;/* attention aux surprises */
}
#haut, #bas , #gauche, #droite {
border:1px solid #333;/* bordure pour les voir [langue] */
margin:20px;
}
#haut, #bas {
	width: 192px;
	height: 192px;
}
#gauche, #droite {
	width: 128px;
	height: 128px;
}
#haut {
	background-image: url(haut.gif);
}
#gauche {
	background-image: url(gauche.gif);
}
#droite {
	background-image: url(droite.gif);
}
#bas {
	background-image: url(bas.gif);
}
</style>
</head>
<body>
<center>
<div id="haut">haut</div>
<div id="centreIE" >
	<div id="gauche">gauche</div>
	<div id="droite">droite</div>
</div>
<div id="bas">bas</div>
</center>
</body>
</html>

fonctionne aussi pour tout le monde ....

++