plusieurs div sur une ligne

**difficiledetrouver1pseudo** · 17/02/2006, 19h12

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.

**Kerod** · 17/02/2006, 19h41

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

**difficiledetrouver1pseudo** · 17/02/2006, 20h13

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.

**Kerod** · 17/02/2006, 20h22

tu attribues tout simplement à chacun des blocs div la propriété float et ca devrait se mettre en place tout seul

**ilood** · 17/02/2006, 20h32

Bonjour

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 ?

**difficiledetrouver1pseudo** · 18/02/2006, 12h23

voici une capture d'écran du menu :

je met aussi un extrait du CSS du menu :

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

.

**difficiledetrouver1pseudo** · 18/02/2006, 12h37

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

**Kerod** · 18/02/2006, 14h03

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

**ilood** · 18/02/2006, 14h30

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

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.

**difficiledetrouver1pseudo** · 18/02/2006, 14h56

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

voici une illustration :

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 ?

**difficiledetrouver1pseudo** · 18/02/2006, 15h00

Envoyé par ilood

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

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

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 :

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

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?

**difficiledetrouver1pseudo** · 18/02/2006, 15h06

voici le fichier index.php juste pour info :

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

**difficiledetrouver1pseudo** · 18/02/2006, 21h08

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 :

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?

**Kerod** · 18/02/2006, 23h50

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

**difficiledetrouver1pseudo** · 18/02/2006, 23h57

merci pour l'info.

je vais chercher de ce coté.

plusieurs div sur une ligne

HTML

Discussions similaires

Partager

Partager