Header avec bout arrondis

**lifty** · 27/05/2009, 09h35

Bonjours chez amis lecteurs et développeurs,

J'ai comme vous pouvez l'imaginer un problème avec du css.
Le fond principal de ma page web est actuellement un dégradé du haut foncé au bas blanc.
J'ai exclu de faire de la mise en page avec des <table> donc je fais tout avec des divs.
Mon soucis c'est que je souhaite réalisé un haut de menu avec des bords arrondis à gauche et à droite et le fond transparent(image de 10px*10px transparente pour voir le fond en dégradé).
Ce haut doit être variable en largeur et doit être à 100% de largeur de la div qui le contient.

Malheureusement c'est une vrai plaie à réaliser j'ai tenter pas mal de choses sans résultats.
Fondamentalement j'ai 3 div contenue dans une autre div.
Ces 3 div constituent respectivement les 3 parties de mon header, le bord gauche, le bord droit et enfin la div du milieu extensible.
Le code affiché ci-dessous devrait me le permettre mais je dois manquer quelque chose, en effet la div centrale se comporte étrangement et ne veut pas être sur la même ligne que les 2 autres div...

J'en suis venu a bidouiller avec des float et en remplaçant l'image transparente par un fond blanc du plus mauvais effet sur le fond en dégradé ....

Bref assez parlé, voilà le code que je souhaiterais faire fonctionner.

le code de ma page

Code html :

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

1
2
3
4
5
6
 
<div id="top_header" class="top_header">
	<div id="top_header_gauche" class="top_header_gauche"></div>
	<div id="top_header_milieu" class="top_header_milieu"></div>
	<div id="top_header_gauche" class="top_header_droite"></div>
</div>

mon code CSS

Code css :

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
 
.top_header{
	height: 10px;
	width: 100%;
	margin : 0px;
	padding : 0px;
 
}
Classe inutilisée pour le moment*/
 
.top_header_gauche {
	width: 10px;
	background: url(./../images/tl.gif) no-repeat left top;
	float:left;
	margin : 0px;
	padding : 0px;	
}
 
.top_header_milieu {
	background: #4CAA94;
	width:100%;
	height:10px;
	margin : 0px;
	padding : 0px;
}
 
.top_header_droite {
	width: 10px;
	background: url(./../images/tr.gif) no-repeat right top;
	border-width: 0px;
	margin : 0px;
	padding : 0px;
}

Et voilà le code que j'utilise actuellement avec les nouvelles images à fond blanc.

Code html :

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

1
2
3
4
5
 
<div id="top_header_conteneur_menu">
	<div id="top_header_gauche" class="top_header_gauche"></div>
	<div id="top_header_milieu" class="top_header_milieu"></div>
</div>

Code css :

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
 
/*.top_header{
	background: url(./../images/tl.gif) no-repeat left top;
	height: 10px;
	width: 100%;
	margin : 0px;
	padding : 0px;
	clear:both;
}*/
 
.top_header_gauche {
	position:absolute;
	width: 10px;
	background: url(./../images/tl.gif) no-repeat top left;
	float:left;
	margin : 0px;
	padding : 0px;	
}
 
.top_header_milieu {
	background: #4CAA94 url(./../images/tr.gif) no-repeat scroll right top;
	border-width: 0px;
	width:100%;
	height:10px;
	margin : 0px;
	padding : 0px;
}
 
/*la classe .top_header_droite a été supprimé car la div à été elle aussi supprimée

Code pas très évolutif et qui me pose beaucoup de problème par la suite.

Ps : voici les images si vous voulez tester Image1 et
Image2

Edit : mon DOCTYPE et mon encodage

Code html :

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

1
2
3
4
5
6
 
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

et comme un beau dessin vaut mieux qu'un long discours voilà ce que je veut avoir

**desert** · 27/05/2009, 14h46

Bonjour,
Je ne sais si tu t'es trompé mais tu as 2 div avec un même id (top_header_gauche) dans ton code.
Ce qu'il faudrait que tu fasses, c'est de :
- placer ton div.top_header_droite en-dessous du div.top_header_gauche et le faire flotter à droite.
- retirer le width:100% pour le div.top_header_milieu afin que celui-ci puisse avoir une largeur qui lui convient sans avoir à décaler les coins.
- lui appliquer un margin-left et margin-right de 10px afin de retirer de sa largeur les 20px des "div-coins".
- fixer un height: 10px sur les "div-coins" afin de les rendre visibles.
- (facultatif) enlever les margin:0px et padding:0px de tous les div qui sont déjà à 0 par défaut.

**lifty** · 27/05/2009, 15h01

Merci, j'avais pensé a faire comme ça mais il faut croire que j'avais fait une boulette dans mon css

c'est parfait maitenant

merci desert

**desert** · 27/05/2009, 15h08

Code css :

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

1
2
3
4
5
6
.top_header_droite {
    width: 10px;
    height: 10px;
    background: url(tr.gif) no-repeat right top;
    float: right;
}

J'ai omis de dire qu'il fallait ajouter un overflow:hidden au div.top_header_conteneur pour éviter d'éventuels bugs.

**lifty** · 10/06/2009, 12h14

Je réouvre ce post suite au test de mon appli sous ... IE6

et tout de suite ça marche moins

mon code css est toujours

Code css :

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
 
.top_header{
	overflow:hidden;
}
 
.top_header_gauche {
	width: 10px;
	height:10px;
	background: url(./../images/tl.gif) no-repeat bottom left;
	float:left;
}
 
.top_header_milieu {
	background: #4CAA94;
	height:10px;
	margin-left:10px;
	margin-right:10px;
}
 
.top_header_droite {
	background: url(./../images/tr.gif) no-repeat scroll right bottom;
	float:right;
	width:10px;
	height:10px;
}

et le code

Code html :

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

1
2
3
4
5
6
 
<div id="top_header_conteneur" class="top_header">
	<div id="top_header_gauche" class="top_header_gauche"></div>
	<div id="top_header_droite" class="top_header_droite"></div>
	<div id="top_header_milieu" class="top_header_milieu"></div>
</div>

et voilà le résultat sous IE 6

amis codeur j'ai besoin de vous !

**Macmillenium** · 10/06/2009, 13h27

Bonjour,

IE6 applique, par défaut, sur les éléments block une largeur minimum égale à la taille des caractères et qui dépend du font-size du conteneur.
Tu peux corriger ce problème en rajoutant overflow:hidden ou font-size:1% sur tes blocs.

**lifty** · 10/06/2009, 17h09

Le résultat est déjà mieux mais j'ai toujours un décalage

De plus le bandeau supérieur ne prends pas tout l'espace qu'il devrait.

j'ai ce comportement sur mon bloc

Voila le haut du bloc

et le bas du bloc

normalement il n'y a aucun décalage tout est parfaitement aligné là il y a un fort décalage sur la droite du header et sur la droite du footer

en plus du décalage des coins et je vois pas pourquoi.

Comportement voulu ( marche sous ie7 et firefox et amaya )

Voilà mon code complet

Code html :

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
 
<!-- Div principale -->
<div id="detailDocument">
 
   <!-- Top header -->
   <div id="top_header_conteneur" class="top_header">
	<div id="top_header_gauche" class="top_header_gauche"></div>
	<div id="top_header_droite" class="top_header_droite"></div>
	<div id="top_header_milieu" class="top_header_milieu"></div>
   </div>
 
   <!-- Bandeau + titre header -->
   <div id="header" class="header">
		<!-- titre du conteneur -->
   </div>
 
   <!-- Conteneur -->
   <div id="conteneur" class="conteneur">
      <!-- Contenu -->
   </div>
 
   <!-- footer conteneur -->
   <div id="footer" class="footer">
	<div id="footer_gauche" class="footer_gauche"></div>
   	<div id="footer_droit" class="footer_droit"></div>
   	<div id="footer_milieu" class="footer_milieu"></div>
   </div>
 
</div>

Code css :

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
.top_header{
	overflow:hidden;
	font-size:1%;
}
 
.top_header_gauche {
	width: 10px;
	height:10px;
	font-size:1%;
	background: url(./../images/tl.gif) no-repeat bottom left;
	float:left;
}
 
.top_header_milieu {
	background: #4CAA94;
	font-size:1%;
	height:10px;
 
}
 
.top_header_droite {
	background: url(./../images/tr.gif) no-repeat scroll right bottom;
	float:right;
	font-size:1%;
	width:10px;
	height:10px;
}
 
 
.footer{
	overflow:hidden;
}
 
.footer_milieu{
	background: url(../images/ntbas.gif) repeat-x top center;
	height:10px;
	margin-left:10px;
	margin-right:10px;
}
 
.footer_gauche{
	position:absolute;
	width: 10px;
	height:10px;
	background: url(./../images/bottomleft.gif) no-repeat top left;
	float:left;
}
 
.footer_droit{
	background: url(./../images/bottomright.gif) no-repeat scroll right top;
	float:right;
	width:10px;
	height:10px;
}
 
.header {
	background: #4CAA94;
	width: 100%;
	display:block;
	padding-bottom:3px;
}
 
.header_titre {
	vertical-align:top;
	text-align: left;
	margin-left: 5px;
	font-size: 11px;
	color: #FFFFFF;
	font-weight:bold;
}
 
.conteneur {
	background: #FFFFFF;
	border-top: 1px solid #98B3AA;
	border-right: 1px solid #98B3AA;
	border-left: 1px solid #98B3AA;	
	margin-bottom: 0px;
}
 
div#detailDocument {
   width: 98%;
   max-width:100%;
   max-height:75%;
}

ps : étant sous windows vista

je test le moteur de rendu ie avec IETester (normalement aucune différence avec un IE 6 normal mais on ne sais jamais)

**desert** · 10/06/2009, 19h29

Il s'agit du bug three pixel jog.
Pour le corriger, tu dois spécifier des marges négatives à tes divs flottants à l'intérieur d'un commentaire conditionnel afin de ne cibler qu'IE6 ou version inférieur.

Code xhtml :

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

1
2
3
4
5
6
7
8
9
10
11
<!--[if lte IE 6]>
   <style type="text/css">
        .top_header_gauche {
           margin-right: -3px;
        }
        .top_header_droite {
           margin-left: -3px;
        }
        /* ...etc */
    </style>
<![endif]-->

**lifty** · 11/06/2009, 09h48

merci

ce n'était pas 3 pixel, j'ai fait un margin de -10px, cela avait décalé de la largeur de l'élément flottant, a savoir mon image de 10*10px

pour le décalage de mon contenu c'est le même problème mais là sur mon style interne

Merci desert et macmillenium ! j'attends un peu pour voir si j'ai pas un autre soucis de compatibilité et je passe en résolu

edit : ça fonctionne

par contre suis obligé de mettre un margin -20px dans tous les styles de divs imbriquées dans le conteneur afin qu'il n'y ait pas de décalage !

vive vous et mort a IE6

Header avec bout arrondis

CSS

Discussions similaires

Partager

Partager