Discussion :

[bob633]

Bonsoir, voilà ma question porte sur html et css mais mon petit soucis se situ au niveau du css. Voilà, je dois créer un petit logiciel pour mon iut, pour cela je ferais comme une sorte d'interface web.

J'aimerais, en haut de ma page, positionner deux div, c'est à dire; en haut à gauche positionner un petit logo, et à droite un message de bienvenue.

Voilà les parties de codes correspondantes :

html :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div id="headerDroit">
<p>Banque Alimentaire de Jurançon</p>
</div>
 
<div id="headerGauche">
<img src="../images/logoReduit.jpg">
</div>
 
 
<div id="zoneMilieu">
Bienvenue sur la page principale du programme
</div>

.css

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
#headerGauche
{
text-align : center ;
border: black 2px solid;
width: 15% ;
float: left ;
width: auto;
}
 
#headerDroit
{
font-size : 20pt;
color : red ;
font-weight : bold ;
text-align : center ;
font-family : algerian ;
border: black 2px solid;
width: auto ;
margin-left: 18% ;
}
 
#zoneMilieu
{
border: black 2px solid;
color : red ;
text-align : center ;
font-size : 15pt ;
font-family : arial ;
background-color : #FFFD7D ;
margin-top : 10% ;
width: auto ;
}

J'ai essayé pas mal de choses comme position: relative / absolute, margin: right / left etc mais j'arrive pas a aligner les deux sur la même ligne. Les deux se mettent l'un en dessous de l'autre, l'un a droite et l'autre à gauche .. il doit me manquer un petit truc mais je trouve pas

merci d'avance

[12monkeys]

Bonsoir

Essaye avec float:left sur les deux divs que tu veux placer l'un à coté de l'autre.

Je placerais aussi ces 2 divs dans un autre div conteneur pour plus de clareté :

Code :

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

1
2
3
4
5
6
7
8
9
<div id="header">
<p>Banque Alimentaire de Jurançon</p>
 
<img src="../images/logoReduit.jpg" alt="blea">
</div>
 
<div id="zoneMilieu">
Bienvenue sur la page principale du programme
</div>

Code :

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

1
2
3
4
5
6
7
8
9
#header p
{
float: left ;
}
 
#header img
{
float: left ;
}

[bob633]

merci j'ai réussi Cependant j'ai fais un peu de bidouille .. c'est-à-dire, j'ai mis un margin-left: 7.4%¨; pour que la partie de droite ne se chevauche pas avec la partie de gauche ... il y a une position ou autre pour lui dire de se coller automatiquement à la partie de gauche ? position relative ou absolute ne marche pas ..

merci

[12monkeys]

L'image chevauche le texte ?

Mets nous ton code html et css complet ou, mieux, une page en ligne pour voir...