plusieurs div sur une ligne

Version imprimable

17/02/2006, 19h12
difficiledetrouver1pseudo

plusieurs div sur une ligne

bonjour,

je cherche le moyen d'aligner sur une ligne 3 div. j'aimerai ne pas utiliser de puce.

ces 3 div sont eux même dans un autre div qui prend tout l'écran en largueur et centre son contenu.

seul un div sur les 3 contient le menu. les 2 autre div encadrant le menu sont là pour combler le vide afin que le menu soit centrer.

le menu utilise des puce en flottant à gauche pour inclure les différents liens.

description fait voilà ma question :

comment faire pour que les 3 div soit sur la même ligne?

je n'y arrive pas. j'utilise une feuille de style pour la mise en page.

merci de votre aide car la je désespère d'y arriver.
17/02/2006, 19h41
Kerod

SOit tu joues avec des float:left
Soit tu joues avec un div servant de conteneur et tu lui ajoutes une propriété display: inline ... mais cette solution j'en suis moins sur
17/02/2006, 20h13
difficiledetrouver1pseudo

pour le displays : inline ca ne fonctionne corrrectement sur tout les navigateur. c'est pour ca que je l'ai abandonné.

pour le float:left j'ai essais mais ca ne fonctionne pas. peut être ai je pas compris comment l'utiliser. :oops:
17/02/2006, 20h22
Kerod

tu attribues tout simplement à chacun des blocs div la propriété float et ca devrait se mettre en place tout seul
17/02/2006, 20h32
ilood

Re: plusieurs div sur une ligne

Bonjour

Citation:

Envoyé par difficiledetrouver1pseudo

les 2 autre div encadrant le menu sont là pour combler le vide afin que le menu soit centrer.

Je ne comprends pas bien. Ton but est de centrer le menu ou d'avoir trois colonnes ? Parce que le float:left sur les deux premieres colonnes ne va pas forcement centrer celle du milieu...

Tu n'a pas l'adresse du site en question, ou un code à nous proposer ?

voici une capture d'écran du menu :
http://img207.imageshack.us/img207/8968/menu8or.gif

je met aussi un extrait du CSS du menu :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 .menu{ width: 100%; background-color: #EE8282; text-align: center; } .menu .bord{ border-bottom:2px solid #765; background-color: Lime; height: 40px; float: left; } .menu ul{ background-color: Aqua; width: 717px; height: 40px; list-style: none; /*supprime les puces devant */ padding: 0 0 0 0; margin: 0 0 0 0; float: left; }
j'utilise déjà la technique du float:left pour les éléments ul du menu. j'avais pas compris votre réponse en fait.

maintenant comme on le voit les 3 div sont alignés. le div "Menu" prend tout l'écran.

Ce que je voudrais c'est que les div1 et div3 prennent le reste de la place du div "Menu" (à dimension égale) pour centrer le div "Menu ul".

pour information le div "Menu ul" à une dimension fixe. mais j'aimerai que ça ne sois pas le cas mais j'ai pas trouvé comment faire autrement. bref ça c'est une autre question ;) .

18/02/2006, 12h37
difficiledetrouver1pseudo

pour le site c'est ici :
http://j.miot.free.fr/new/index.php?page=4

je vous conseil de le voir sur IE car ca fait n'importe quoi pour le moment sur FF.

mais j'aurai tellement de question à vous poser ... :lol:
18/02/2006, 14h03
Kerod

hummmm si tu mettais des tailles (width) à chacun ca pourrait marcher....
Par exemple si le div conteneur a son width fixé mets des %
par exemple ceux des bords : 10% et le menu 80%
sinon fixe leur taille....j'ai vu du width 717 c'est pour le menu ???
Si oui fixes le width des autre à partir de celle-ci
18/02/2006, 14h30
ilood

Citation:

Envoyé par difficiledetrouver1pseudo

pour le site c'est ici :
http://j.miot.free.fr/new/index.php?page=4

je vous conseil de le voir sur IE car ca fait n'importe quoi pour le moment sur FF.

mais j'aurai tellement de question à vous poser ... :lol:

Lorsque l'on regarde ton code source, on se retrouve un gros problème de construction de la page. Tu as plusieurs balises body, html, head :s
J'ai l'impression que tu utilises des include en php, et que dans chaque page appelée, tu a placé les balise html,head et body.
18/02/2006, 14h56
difficiledetrouver1pseudo

oui mais dans ce cas la page n'est plus adaptable à l'ecran. j'aimerai que ca soit le cas.

voici une illustration :
http://img215.imageshack.us/img215/6348/menu12vh.gif
http://img295.imageshack.us/img295/8170/menu22ep.gif

comme on le voit la tailles des div1 et div3 s'adapte pour combler l'espace libre.

le problème de mettre des pourcentage c'est que le "menu ul" est aligné sur la gauche donc se sera plus centré.

es ce que c'est possible de faire ca? et comment ?
18/02/2006, 15h00
difficiledetrouver1pseudo
Citation:

Envoyé par ilood

Citation:

Envoyé par difficiledetrouver1pseudo

pour le site c'est ici :
http://j.miot.free.fr/new/index.php?page=4

je vous conseil de le voir sur IE car ca fait n'importe quoi pour le moment sur FF.

mais j'aurai tellement de question à vous poser ... :lol:

Lorsque l'on regarde ton code source, on se retrouve un gros problème de construction de la page. Tu as plusieurs balises body, html, head :s
J'ai l'impression que tu utilises des include en php, et que dans chaque page appelée, tu a placé les balise html,head et body.

heu :oops: oui je sais. mais je ne sais pas comment faire autrement car j'ai plusieurs pages car qui ont leur propre mise en page CSS donc je rajoute cette entete pour toute les pages :
Code:

1 2 3 4 5 6 <html> <head> <link href="file\css\standard.css" rel="stylesheet" type="text/css" /> </head> ... </html>
ce pour ca que ca deconne sous FF?

voici le fichier index.php juste pour info :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<html>
<head>
	<link href="file\css\standard.css" rel="stylesheet" type="text/css" />
</head>
<body oncontextmenu="return false;">
 
	<div class="entete">
 
<?php
        // On définit le tableau contenant les pages autorisées
        // ----------------------------------------------------
        $pages = array("Accueil", "Ma Collection","Espèces", "Symtômes",
                   "Conseils", "Lexique", "Me Contacter");
        // ----------------------------------------------------
        
        // On définit le tableau contenant les liens des pages autorisées
        // --------------------------------------------------------------
        $liens = array("accueil", "collection","especes", "symtomes",
                   "conseils", "lexique", "contact");
        // --------------------------------------------------------------
        
        // On définit le tableau contenant les titres des pages
        // ----------------------------------------------------
        $titre = array("Bienvenue", "Voici ma collection", "Quelques conseils.",
                                        "Hopital", "Conseils", "Lexique", "Me contacter");
        // ----------------------------------------------------
        
        $page = 4;
        // test si l'id du menu est correcte
        // ---------------------------------
        if (($page>7) or ($page< 0))
        $id_page = 0;
        else
                $id_page = $page;
        // ---------------------------------
                
        // Affiche le titre de la page
        echo ("<div class=\"titre\">$titre[$id_page]</div>");
        
        // affiche le menu
        include('file/menu.php');
        
        echo '</div><div class="contenu">';
        
                include("file/src/$liens[$id_page].php");
        
        echo '</div>';
        
        // affiche le pied de page
        include('file/html/pieddepage.htm');
        
?>
</body>
</html>

18/02/2006, 21h08
difficiledetrouver1pseudo

Citation:

Envoyé par difficiledetrouver1pseudo

oui mais dans ce cas la page n'est plus adaptable à l'ecran. j'aimerai que ca soit le cas.

voici une illustration :
http://img215.imageshack.us/img215/6348/menu12vh.gif
http://img295.imageshack.us/img295/8170/menu22ep.gif

comme on le voit la tailles des div1 et div3 s'adapte pour combler l'espace libre.

le problème de mettre des pourcentage c'est que le "menu ul" est aligné sur la gauche donc se sera plus centré.

es ce que c'est possible de faire ca? et comment ?

personne ne peut me repondre? :(
18/02/2006, 23h50
Kerod

Utilises la fonction éditer la prochaine fois ca sert à rien de poster toutes les 2 min (facon de parler)

Sinon si tu utilises des floats c'est sur qu'il faut dire adieu au centrage....A ce moment il reste plus que le margin-left et margin-right
18/02/2006, 23h57
difficiledetrouver1pseudo

merci pour l'info.

je vais chercher de ce coté.