Discussion :

[kishkaya]

Bonjour,
J'ai un petit probleme avec mon affichage.
Comme une image vaut souvent mieux qu'un long discour voila mon probleme :



En fait la barre de menu est un <div class="menu"> avec un css float: left;
en gros ca met le div sur celui d'apres mais à gauche. Le div de droite est le corps du document:
<div class="corps">

Quand je mes un autre div ou un p dans le corpsil prend toute la page meme l'espace occupé par le menu.

Cela me pose un probleme dans mes histoire de centrage de div.
J'aimerais pouvoir avoir la même architecture cellulaire qu'avec un <table><tr><td>.
Peut etre est-ce un problem de z-index.

Quelqu'un aurait une id ?

Merci encore pour votre aide

Kheraud

[Candygirl]

Au vu de ton résultat j'imagine que tu positionnes ton corps à l'aide d'une marge ou d'un padding de la largeur du menu. Vu ton design visiblement de taille fixe, je te conseille plutôt de faire floter aussi ton corps.

Mais, sans code, dur de te répondre...

[van-bom]

je crois que c'est normal l'attribut foat fait sortir l'element de fulx normal, alors le naviguateur le positionne par rapport au parent s'il est aussi positionné,
je te propose de mettre les deux DIV `menu` et `corps` dans une meme divsion et tu fait floater les deux div (menu et corps) à gauche, ensuite tu dois gerer bien leurs `margin` pour les center.c'est ce que je te propose , et c vrai c pas facile de te repondre sans le code de la mise en page

[kishkaya]

Bonjour, merci pour votre aide a tous les deux
C'est vrai que le code est necessaire j'en mes un abrégé :

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
 
<div class="main">
<img src="./tools/pic/top_bandeau.jpg"  />
<div class="menu">
 
<!--Contenu du menu qui float-->
 
</div><div class="corps">
 
<blockquote style="background-color:blue;" cite="http://www.la-grange.net/w3c/">
<p>La liste de tous les documents techniques du W3C est disponible à http://www.w3.org/TR/. Les seules versions normatives des recommandations sont les versions du site du W3C.</p>
</blockquote><p class="alert" style="color: white;background-color: #1568e4;">Les caractères valides sont : _-abc..ABC..012.., les espaces et caracteres de ponctuations sont interdits. Le login et le pass doivent comprendre entre 6 et 12 caracteres</p>
	<form action="./index.php?rub=accueil&amp;file=inscr" method="post">
	<p>
        login : <input type="text" name="ilogin" /><br />(alphanumerique sans espaces)
        <br />pass : <input type="password" name="ipass" />
 
        <br />nom : <input type="text" name="inom" />
        <br />prenom : <input type="text" name="iprenom" />
        <br /><input type="submit" value="S'enregistrer" />
	</p>
        </form>
</div>
<img src="./tools/pic/bottom_bandeau.jpg" alt="" class="deco_bottom" />
</div>

et le css associé

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
 
div.main {
text-align: left;
width: 700px;
margin-top: 15px;
margin-bottom: 15px;
margin-left: auto;
margin-right: auto;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 4px;
padding-right: 4px;
border: 0px;
background-color: White;
font-family: Arial;
}
 
div.menu {
border: 0px;
padding: 6px;
float: left;
width: 150px;
}
 
div.corps {
border: 0px;
padding: 2px;
color: #2E2E2E;
font-family: Arial;
font-size: 14px;
}

Merci encore pour votre aide.
J'aimerais aussi évité une "foisonnade" de div dans tous les sens.

Kheraud

[kishkaya]

Merci pour votre aide a tous.

Une petite lecture des attributs float et clear sur le site du W3C m'a apporté la solution.
Un margin-left bien trouvé regle le probleme.

Merci

Kheraud