mettre deux blocs sur le meme ligne

comment faire ?

28 juillet 2006 à 14:21:58

j'ai deux blocs <div></div>, et j'aimerai qu'ils apparaissent sur la meme ligne.
Quand je les met a la suite ils sont l'un en dessous de l'autre.

Y a t il une solution ?

luftenser

28 juillet 2006 à 14:33:25

avec du css ?
faut mettre un des blocs en float il me semble ..

lOeil

28 juillet 2006 à 14:45:19

avec du css oui

Deepfox

28 juillet 2006 à 14:45:52

Le HTML :

<div id="bloc1">Bloc a gauche</div>
<div id="bloc2">Bloc a droite</div>

Le CSS

#bloc2
{
float:right;
}

Anonyme

28 juillet 2006 à 14:48:15

Bah ou bien tu redéfinit le style du display dans le css, un truc comme sa :

.inline div
{
display: inline;
}

Et dans ton code tu met sa :

<div class="inline">
<div>Bloc a gauche</div>
<div>Bloc a droite</div>
</div>

lOeil

28 juillet 2006 à 15:04:22

le float n'est pas adapté je pense mais je peux me tromper

le inline n'a rien changé

<div id="colonne_gauche">
<div class="menu_bloc">
<div class="menu_fleche"><img src="images/menu/menu_bg_left.png" /></div>
<div class="menu">
<a href="index.php?page=news">Home</a>
</div>
<div class="menu_fleche"><img src="images/menu/menu_bg_left.png" /></div>
<div class="menu">
<a href="index.php?page=articles">Articles</a>
</div>
...

#colonne_gauche
{
display: inline;
}

.menu_bloc
{
background: url(../images/menu/menu_bg.png);
background-repeat:repeat-y;
}
.menu
{
line-height: 19px;
height: 19px;
margin-left: 20px;
}
menu_bloc.menu_fleche
{
line-height: 19px;
margin-left: 4px;
width: 3px;
height: 19px;
}

Deepfox

28 juillet 2006 à 15:07:22

quels sont les blocs que tu veux alignés?

lOeil

28 juillet 2006 à 15:17:50

"menu_fleche" et "menu"

pour avoir ca:

> Home
> Articles
> ...

Deepfox

28 juillet 2006 à 15:19:34

Je crois qu'il faudrait que tu mettes deux id différentes et apres float

Daikyoka

28 juillet 2006 à 15:44:00

Tes div ne servent à rien...

<div id="colonne_gauche">
<div class="menu_bloc">
<img src="images/menu/menu_bg_left.png" />
<a href="index.php?page=news">Home</a><br />
<img src="images/menu/menu_bg_left.png" />
<a href="index.php?page=articles">Articles</a><br />
</div></div>

Tu peux aussi utiliser une liste (c'est selon moi le plus pratique) :

<div id="colonne_gauche">
<div class="menu_bloc">
<ul>
<li><a href="index.php?page=news">Home</a></li>
<li><a href="index.php?page=articles">Articles</a></li>
</ul>
</div>
</div>

ul
{
list-style: url("images/menu/menu_bg_left.png");
}