Css compréhension grille bootstrap
Bonjour
En découvrant le cours sur bootstrap, j'ai cru que ça allait résoudre mes problémes de superspositions de mes éléments.
J'utilise sur plusieurs pages des boutons pour afficher ou non des div avec la fonction javascript onclick. Quand je zoom ou réduit la largeur de la page, mon header s'élargit et passe au dessus rendant impossible leur sélection.
J'ai essayé plusieurs combinaisons mais rien n'y fait, mes onclick se font masquer par le titre et menu de navigation. Aussi, si je ne mets pas de margin à mes balises a, elles sont d'offices placées tout en haut et donc masquer.
Voilà mon dernier code.
Merci d'avance
Code:
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
| <!DOCTYPE html>
<html>
<?php include('Htemp/H.php');?>
<link rel="stylesheet" href="css/qui.css" />
<title>Qui</title>
<script>
var _hidediv = null;
function showdiv(id) {
if(_hidediv)
_hidediv();
var div = document.getElementById(id);
div.style.display = 'block';
_hidediv = function () { div.style.display = 'none'; };
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<header id="banner">
<div class="row">
<div class="col-lg-12"><h1 id="lheureuse"> L'Heureuse Nouvelle ASBL </h1></div>
<div class="col-lg-12" id="nav_gen">
<nav class="nav_gen">
<ul class="list_gen">
<li> <a href="../index.html" class="navlink"> Acceuil</a></li>
<li> <a href="qui.php" class="navlink"> Qui est Elle ?</a></li>
<li> <a href="comment.php" class="navlink"> Comment participer ?</a></li>
<li> <a href="pourquoi.php" class="navlink"> Les Projets</a></li>
<li> <a href="chezmoi.php" class="navlink"> Espace Membre</a></li>
<li> <a href="MEDIA.php" class="navlink"> Médiathèque</a></li>
<li> <a href="potos.php" class="navlink"> Partenaires</a></li>
<li> <a href="forums.php" class="navlink"> Forums</a></li>
<li> <a href="FAQ.php" class="navlink"> FAQ</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div class="row">
<nav class="col-lg-12">
<ul>
<li> <a id="buthisto" onclick="showdiv('history'); " href="#">L'Histoire</a> </li>
<li> <a id="butphilo" onclick="showdiv('philosophy'); " href="#">La Philosophie</a> </li>
</ul>
</nav>
</div>
</div>
</div>
<section id="history" style="display:none;" class="row">
<article id="histo" class="col-lg-12">
<p><strong> Cette histoire commence de la même manière qu'une autre que vous connaissez certainement,<br/>
celle de<a style="color:green" href="http://www.lheureuxnouveau.be/fr/page-2-lheureux-nouveau" class="lhnhist" target="_blank"> L'Heureux Nouveau.</a>
</strong></p>
<p>Il était une fois dans un petit pays du nord de L’Europe un village nommé Bruxelles.
</p>
<p>Dans ce lieu empli d’émulsions créatrices et humanistes, cinq jeunes illuminés furent rassemblés par le destin.
<br/>Cette rencontre fit vibrer tout le bourg et mena à la création de L'Heureux Nouveau!
</p>
<p>Depuis le début de cette histoire, L'Heureuse Nouvelle fût la lanterne qui permit à nos cinq protagonistes
et à tous les aventuriers
<br/>qui les ont rejoint de conserver le droit chemin.
</p>
<p>L'Heureux Nouveau, ayant gagné son autonomie, appuie à son tour les initiatives de L'Heureuse Nouvelle.
<br/>Du conte, nous sommes passés à une réalité.
</p>
<p>Ce nouveau chapitre est le prolongement du partage et de l'expérience acquise durant
<br/>les trois années qui séparent ces deux récits.
</p>
<p>La suite de cette histoire est vôtre.
<br/>A vous de découvrir si vous en serez spectateur, acteur ou même auteur.
</p>
</article>
</section>
<section id="philosophy" style="display:none;" class="row">
<article id="philoso" class="col-lg-12">
<p><strong>Ne vous inquiétez pas, nous n'allons pas faire un traité philosophique sur l'engagement durable.</strong>
<br/>Bien que cela serait intéressant, nous vous présenterons juste ici les valeurs fondamentales défendues.
</p>
<p>Comme le décrit l'histoire, L'Heureuse Nouvelle est le fruit de l'ingénuité de cinq jeunes qui était alors persuadé
<br/> qu'il était possible pour chacun qui le souhaite de créer durablement.
</p>
<p>Les valeurs de L'Heureuse sont les sources de cette confiance qui a permi la création de L'Heureux Nouveau.</p>
<span><strong>L'Humilité -</strong> </span>
<span><strong>La Sagesse -</strong></span>
<span><strong>L'Harmonie -</strong></span>
<span><strong>L'Apprentissage -</strong></span>
<span><strong>Le Partage -</strong></span>
<span><strong>La Création -</strong></span>
<br/><span><strong>L'Eclectisme -</strong></span>
<span><strong>L'Objectivité -</strong></span>
<span><strong>Le Systèmisme -</strong></span>
<span><strong>L'Humanisme</strong></span>
<p>Ces quelques mots constituent toutes les qualités que l'on doit cultiver au sein de nos actions.
<br/>Ainsi, nous serons capable de fournir des solutions locales en considération de leurs incidences globales.
</p>
</article>
</section>
</div>
<?php include('Fttemp/ft.php');?>
</html> |
et le css
Code:
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
| #buthisto{
font-size:1.8em;
text-shadow:6px 6px 2px black;
color:rgb(160,74,41);
background-color:rgb(21,63,0);
}
#histo{
background-image:url("../ImgBk/parchemin.png");
background-position:center-center;
background-repeat:no-repeat;
width:auto;
height:100%;
text-align:justify;
padding-top:40px;
padding-left:150px;
padding-right:150px;
font-family:'redressedregular','montezregular',"Comic sans MS",Arial,sans-serif;
font-size:1.15em;
margin-top:0px;
}
.txthist p:first-letter{
font-weight:bold;
font-size:1.5em;
}
.txthist strong{
font-size:1.35em;
}
nav li {display:inline-block;}
#butphilo{
left:300px;
color:rgb(160,74,41);
font-size:1.8em;
text-shadow:6px 6px 2px black;
background-color:rgb(21,63,0);
}
#philoso {
background-image:url("../ImgBk/parchemin.png");
background-position:center-center;
background-repeat:no-repeat;
width:auto;
height:100%;
text-align:justify;
padding-top:40px;
padding-left:150px;
padding-right:150px;
font-family:'redressedregular','montezregular',"Comic sans MS",Arial,sans-serif;
font-size:1.15em; |
Merci d'avance pour votre aide
