Discussion :

[lhpp]

Bonjour,

Je développe actuellement un site internet avec deux parties :
- Une entete avec le logo de la société
- Le corps du site avec des onglets et le texte du site.

J'ai donc créé deux div placées l'une au dessus de l'autre pour contenir ces deux parties. Les bords sont actuellment carrés.

Voulant arrondir les angles du haut (ceux de l'entete), j'ai créé deux images comme il le fallait.
Je me retrouve donc avec une entete dont les bords gauche et droit sont réalisés avec des images (aux coins arrondis), et aussitot en dessous, le corps du site dont les bords sont faits avec l'attribut "border".

Il me reste un problème, les images étant insérées à l'intérieur du div de l'entete, elles sont légerement en retrait (vers l'intérieur) par rapport au border du corps du site.

Je pense que l'attribut "border" créé un bord qui s'étend à l'extérieur du div alors que mes images restent à l'intérieur. On peut donc constater un décalage comme sur la photo suivante.



Avez vous une idée de la manière dont je pourrais procéder ?
Merci d'avance.

[trotters213]

diminue ta largeur de quelques pixels à peine pour que ta bordure qui est extérieur soit plus vers l'intérieur

[Sheriff]

salut !
tu peux jouer avec l'attribut hspace ou le style margin-left/right...
@+

[lhpp]

Merci de vos réponses,

trotters213: Comme je souhaite que mon site s'adapte lors de redimensionnement de fenetres ou de config différentes, la largeur de l'entete et celle du corps du site sont définies en pourcentage. Mon entete prends 90% de l'écran en largeur. Si je réduis légerement mon corps de site (89% au lieu des 90%) alors c'est trop petit. Pour jouer avec les largeurs, il faudrait donner des tailles en pixels. Mais cela ne s'adapterait plus automatiquement en cas.

Sheriff: peux tu m'en dire plus sur tes methodes ? car le hspace sert a définir un espace entre une image et le texte. Je ne vois pas bien ce que cela m'apporte.
Concernant le margin-left/right, je l'ai mis à "auto" afin que mes cadres soient centrés.

[Candygirl]

Tes images sont direcetement dans le html ou en image de fond ? Typiquement j'essaierais de mettre ses images purement décoratives en image de fond...

Je pense que je procéderais comme suit:

- Je créerais un conteneur de 90% avec une de mes images en image de fond
- Dedans je mettrais l'en-tête avec l'autre image de fond puis le corps à la suite

Ex:

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
<div id="main">
  <div id="header"></div>
  <div id="content"></div>
</div>
 
#main {
width:90%;
background: url(gauche.png) no-repeat top left;
}
 
#header {
background: url(droite.png) no-repeat top right; height:50px;
}
 
#content {
  border:1px solid orange;
}

Autrement si tu veux garder ta structure actuelle et mettre tes images dans le html, tu peux les positionner en absolute ou relatif avec un left de -1px par exemple.

[Sheriff]

salut !
recherche la valeur dumargin pour la quelle tes images sont alignées et ça résoud le pb. Tu peux commencer par 0 pour voir. ensuite tu adaptes. je ne pense pas que le redimensionnement de la fenêtre aura une incidence dessus.
@+

[trotters213]

Autrement si tu veux garder ta structure actuelle et mettre tes images dans le html, tu peux les positionner en absolute ou relatif avec un left de -1px par exemple.

Simple et efficace, c'est un peu ce à quoi je pensais mais en mieux

[lhpp]

Merci de vos réponses !

Candygirl: voici comment j'ai fait pour créer ma structure de site:

Coté Css: J'ai créé deux divs que je mets l'une au dessus de l'autre. Une div "entete"et une div "conteneur" (corps du site).

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
 
.entete
{
	width: 90% ;
	height: 110px;
	margin: auto auto ;
}
 
.conteneur
{
	width: 90% ;
	height: 100%;
	margin: auto auto ;
	border: 2px solid #ffb515 ;
	color: #919090;
	background: #fffdbc ;
}
 
 
 
.table_entete
{
	height: 90px;
	width: 100%;
	margin: auto auto;
	vertical-align: middle;
	border: none;
	border-collapse: collapse;
}
 
td.entete_gauche
{
	vertical-align: middle;
	padding: 0;
   	margin: 0;
   	width: 40px;
}
 
td.entete_droite
{
	vertical-align: middle;
   	padding: 0;
   	margin: 0;
   	width: 60px;
}

Coté html: J'ai découpé l'entete en trois parties (à l'aide d'un tabelau) afin de placer mon coin arrondi gauche, le coin arrondi droite et au milieu, ce que je veux (en l'occurence, un logo).

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
 
<body>
 
    <div class="entete">
	<table class="table_entete" border="0">
	    <tr>
		<td class="entete_gauche" border="0">
		    <img src="arrondi_gauche.jpg" align="left">
		</td>
		<td class="entete_milieu" border="0">
		    <img src="mon_logo.jpg" border="0">
		</td>
		<td class="entete_droite" border="0">
		    <img src="arrondi_droite.jpg" align="right"> 
		</td>
	    </tr>
	</table> 
    </div>
 
    <div class="conteneur">
            .........
    </div>
</body>

J'ai bien noté ton astuce de "left" pour décaler la position du corps du site. Je l'avais déja essayé en fait. Mais cela ne fonctionne pas car il existe exactement le même décalage entre l'entete et le corps du site coté droit. Donc si on décale à gauche pour que ca soit aligné, on augmente le décalage à droite ! Ce qu'il faudrait, c'est donner une taille (90%) aux deux parties et diminuer apres coup et de facon relative de 2 pixels la largeur du corps du site.

Cela peut se faire ?