Header fixé -application d'une couleur en background

**Sid05** · 11/04/2016, 11h35

Bonjour,

J'ai fixé mon header en mettant ceci dans le CSS:

Code :

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

1
2
3
4
5
6
7
#main-header {
	background:	 #FFF repeat scroll 0 0 rgba(0, 0, 0, 0);
	position:fixed;
	width:100%;
	top:0;
 
}

Mon problème est que même avec fond blanc il est transparent et se perd sur la page (capture d'écran : Nom : Capture1.png
Affichages : 427
Taille : 147,7 Ko

)
Le deuxième problème c'est qu'il est caché par certains éléments de la page (capture d'écran : Nom : Capture2.png
Affichages : 378
Taille : 240,4 Ko

)

Des propositions ? :-)

Merci

**Azerx** · 11/04/2016, 17h10

Bonjour,
si le header est à sa place et que quelque chose ne l'est pas et le cache, il faut que l'on ai le code de ce quelque chose!

Sinon rien à voir, il n'y a que moi que ça choque un logo d'une tondeuse à gazon pour "Abattre un arbre" et une barrière pour "Bois de chauffage"? Je trouve ça un peu hors sujet

Invité · 11/04/2016, 17h37

Bonjour,

Envoyé par Azerx

...il n'y a que moi que ça choque un logo d'une tondeuse à gazon pour "Abattre un arbre" et une barrière pour "Bois de chauffage"?...

Chauffe qui peut !!

**Sid05** · 11/04/2016, 18h48

Voici mon code PHP ;-)

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
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
<div class="b-page">
			<header id="header" role="banner" class="main-header">>
				<div class="header-top">
                <div id="main-header">
					<div class="wrapper">
						<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
							<div class="header-info">
								<div class="description-header">
									Contactez-nous directement via 
								</div>
								<div class="color-primary">
									Le chat en ligne
								</div>
								<div class="color-primary">
									Le formulaire en ligne
								</div>
                                <div class="color-primary">
									Prenez rendez-vous en ligne
								</div>
							</div>
						</div>
						<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
							<a href="." class="btn extra-color text-uppercase pull-right">Appelez-moi</a> </div>
						</div>
					</div>
				</div>
 
				<div class="header-nav">
					<div class="wrapper">
						<div class="col-lg-2 col-md-2 col-sm-2 col-xs-6">
							<a href="index.php" class="logo"></a>
						</div>
 
 
 
						<div class="col-lg-10 col-md-12 col-sm-7 col-xs-12 nav-box">
							<span id="toggle-nav" class="ef icon_menu mobile-menu-toggle"></span>
							<nav class="nav-container">
								<ul>
									<li class="search pull-right">
										<form class="search-form form-inline" action="#" method="POST">
											<div class="form-group">
												<label class="sr-only" for="searchQuery">Search...</label>
												<input type="search" class="search-field" id="searchQuery" placeholder="Search...">
											</div>
											<button type="submit" class="hidden"><span class="ef icon_search"></span></button>
										</form>
										<a class="iconSearch" href="#">
											<span class="ef icon_search"></span>
										</a>
									</li>
 
									<li><a class="#" href="index.php">Accueil</a></li>
									<li><a class="#" href="presentation.php">Présentation</a></li>
                                    <li>
										<a class="#" href="services.php">Nos services</a>
										<ul class="submenu">
											<li>
												<a class="#" href="services.php">Parcs et jardins</a>
											</li>
											<li>
												<a class="#" href="elagage.php">Elagage et abattage</a>
											</li>
                                            <li>
												<a class="#" href="servicesagricoles.php">Services agricoles</a>
											</li>
                                            <li>
												<a class="#" href="boisdechauffage.php">Bois de chauffage</a>
											</li>
										</ul>
									</li>
									<li><a class="#" href="contact.php">Contact et accès</a></li>
 
 
							  </ul>
							</nav>
						</div>
 
					</div>
				</div>
 
			</header>

Pour ce qui est des icônes, bien vu ;-)
C'est mon deuxième problème. J'ai acheté une template HTML pour avoir une base mais il a fait ces icônes avec des "flaticon" dans des fichiers .TTF, .WOFF et .EOT, je n'arrive pas à changer. Je cherche :-/

Invité · 11/04/2016, 19h03

Bnonjour,

dans le forum CSS, le code PHP n'a AUCUN intérêt.

Il nous faut :

le code HTML généré (touche "F12" du clavier) (-> ça semble être celui que tu nous montres ! )
le CSS associé

Sans le CSS, aucune chance de trouver.

Une page en ligne, c'est bien aussi.

**Sid05** · 11/04/2016, 19h09

Oui je suis venue dans le forum CSS vu que je pensais que le problème venait de là.

J'ai mon fichier "entête" avec mes balises id :

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
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
<div class="b-page">
			<header id="header" role="banner" class="main-header">>
				<div class="header-top">
                <div id="main-header">
					<div class="wrapper">
						<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
							<div class="header-info">
								<div class="description-header">
									Contactez-nous directement via 
								</div>
								<div class="color-primary">
									Le chat en ligne
								</div>
								<div class="color-primary">
									Le formulaire en ligne
								</div>
                                <div class="color-primary">
									Prenez rendez-vous en ligne
								</div>
							</div>
						</div>
						<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
							<a href="." class="btn extra-color text-uppercase pull-right">Appelez-moi</a> </div>
						</div>
					</div>
				</div>
 
				<div class="header-nav">
					<div class="wrapper">
						<div class="col-lg-2 col-md-2 col-sm-2 col-xs-6">
							<a href="index.php" class="logo"></a>
						</div>
 
 
 
						<div class="col-lg-10 col-md-12 col-sm-7 col-xs-12 nav-box">
							<span id="toggle-nav" class="ef icon_menu mobile-menu-toggle"></span>
							<nav class="nav-container">
								<ul>
									<li class="search pull-right">
										<form class="search-form form-inline" action="#" method="POST">
											<div class="form-group">
												<label class="sr-only" for="searchQuery">Search...</label>
												<input type="search" class="search-field" id="searchQuery" placeholder="Search...">
											</div>
											<button type="submit" class="hidden"><span class="ef icon_search"></span></button>
										</form>
										<a class="iconSearch" href="#">
											<span class="ef icon_search"></span>
										</a>
									</li>
 
									<li><a class="#" href="index.php">Accueil</a></li>
									<li><a class="#" href="presentation.php">Présentation</a></li>
                                    <li>
										<a class="#" href="services.php">Nos services</a>
										<ul class="submenu">
											<li>
												<a class="#" href="services.php">Parcs et jardins</a>
											</li>
											<li>
												<a class="#" href="elagage.php">Elagage et abattage</a>
											</li>
                                            <li>
												<a class="#" href="servicesagricoles.php">Services agricoles</a>
											</li>
                                            <li>
												<a class="#" href="boisdechauffage.php">Bois de chauffage</a>
											</li>
										</ul>
									</li>
									<li><a class="#" href="contact.php">Contact et accès</a></li>
 
 
							  </ul>
							</nav>
						</div>
 
					</div>
				</div>
 
			</header>

Et mon css (la partie concernée) :

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
.b-page {
  position: relative;
  width: 100%;
  overflow: hidden;
}
 
#main-header {
	background:	 #FFF repeat scroll 0 0 rgba(0, 0, 0, 0);
	position:fixed;
	width:100%;
	top:0;
 
}
 
.wrapper {
  max-width: 1200px;
  min-width: 320px;
  margin: 0 auto;
}

**Sid05** · 12/04/2016, 09h12

Les icônes flaticon, c'est réglé, j'ai trouvé un bon tuto.

Il me reste plus que le problème de transparence comme cité ci-dessus :-/

Merci et bonne journée à tous

**NoSmoking** · 12/04/2016, 20h20

Bonjour,

Mon problème est que même avec fond blanc il est transparent...

es tu sûr de cette syntaxe !?!

Code :

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

background: #FFF repeat scroll 0 0 rgba(0, 0, 0, 0);

Couleur de fond.

**Sid05** · 13/04/2016, 09h08

Salut,

J'ai mis : background-color:#FFF; le fond est bien blanc et j'ai ajouté z-index:1;

Sujet clos

Header fixé -application d'une couleur en background

CSS

Discussions similaires

Partager

Partager