Bonjour,
J'ai un problème avec mon site web que je dois réaliser : j'utilise bootstrap pour que mon site soit responsive mais j'ai quelques problèmes : le header doit être fixe (c.a.d descendre avec le scroll) pour cela j'utilise "position : sticky " mais quand j'utilise bootstrap et les classes : "col-md-6" par exemple et bien mon contenu passe à travers le header. J'ai essayer de regler l'opacité mais cela n'y change rien.
Votre aide est la bienvenue, merci d'avance et bon week-end.
Modifié par Resfa (08 Dec 2018 - 17:02)
J'ai un problème avec mon site web que je dois réaliser : j'utilise bootstrap pour que mon site soit responsive mais j'ai quelques problèmes : le header doit être fixe (c.a.d descendre avec le scroll) pour cela j'utilise "position : sticky " mais quand j'utilise bootstrap et les classes : "col-md-6" par exemple et bien mon contenu passe à travers le header. J'ai essayer de regler l'opacité mais cela n'y change rien.
Votre aide est la bienvenue, merci d'avance et bon week-end.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/vendors/bootstrap.css">
<link rel="stylesheet" href="css/vendors/font-awesome.min.css">
<link rel="stylesheet" href="css/stylezebi.css">
<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Hind+Siliguri" rel="stylesheet">
</head>
<header>
<div class="container-fluid">
<div class="row">
<div class="logo">
<img data-toggle="magnify" src="images/eportfolio-logo----small-ConvertImage.png" class="img-responsive img-rounded center-block" alt="">
<i class="icon fa fa-bars fa-2x"></i>
</div>
<h2 class="present" class="col-sm-6 col-xs-6 col-md-10">Resfa <br> Etudiant en DUT Informatique </h2>
<nav class="col-md-9 col-xs-12">
<ul class="nav-list">
<li class="list"><a href="accueil.html">Accueil</a></li>
<li class="list"><a href="competences.html">Mes Compétences</a>
<ul class="sub-menu">
<li>Début IUT</li>
</ul>
</li>
<li class="list" ><a href="loisir.html">Loisirs et Passions</a>
<ul class="sub-menu">
<li>Sports</li>
<li>Mangas</li>
<li>Informatique</li>
</ul>
</li>
<li class="list"><a href="experiences.html">Mes Expériences</a></li>
<li class="list"><a href="index.html">A Propos</a></li>
</ul>
</nav>
</div>
</div>
</header>
<body>
<section>
<article>
<div class="container-fluid">
<div class="row">
<div class="first-art" class="col-md-6 col-xs-6">
<h2 style="text-align: center">Paragraphe test</h2> <img class="img-naruto img-responsive" src="">
<p>Plusieurs variations de Lorem Ipsum peuvent être trouvées ici ou là, mais la majeure partie d'entre elles a été altérée par l'addition d'humour ou de mots aléatoires qui ne ressemblent pas une seconde à du texte standard. Si vous voulez utiliser un passage du Lorem Ipsum, vous devez être sûr qu'il n'y a rien d'embarrassant caché dans le texte. Tous les générateurs de Lorem Ipsum sur Internet tendent à repoduire le même extrait sans fin, ce qui fait de lipsum.com le seul vrai générateur de Lorem Ipsum. Iil utilise un dictionnaire de plus de 200 mots latins, en combinaison de plusieurs structures de phrases, pour générer un Lorem Ipsum irréprochable. Le Lorem Ipsum ainsi obtenu ne contient aucune répétition, ni ne contient des mots farfelus, ou des touches d'humour.</p>
<h3 style="text-align: center">Qu'est-ce que c'est ?</h3>
</div>
<div id="block1" style="border:1px solid red; text-align:center">
<h1>Ma page Bootstrap</h1>
<p>Mon premier paragraphe</p>
</div>
<div id="block2" style="border:1px solid red; text-align:center"> <h1>Ma page Bootstrap</h1><p>Mon premier paragraphe</p>
</div>
<div id="block3" class="col-md-6" style="border:1px solid red; text-align:center"> <h1>Ma page Bootstrap</h1><p>Mon premier paragraphe</p>
</div>
<div id="block4" class="col-md-6"> <h1>Ma page Bootstrap</h1><p>Mon premier paragraphe </p> </div>
<div id="block5" class="col-md-6"> <h1>Ma page Bootstrap</h1><p>Mon premier paragraphe </p> </div>
<div id="block6" class="col-md-6"> <h1>Ma page Bootstrap</h1><p>Mon premier paragraphe </p> </div>
<div id="block7" class="col-md-6"> <h1>Ma page Bootstrap</h1><p>Mon premier paragraphe </p> </div>
<div id="block8" class="col-md-6"> <h1>Ma page Bootstrap</h1><p>Mon premier paragraphe </p> </div>
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">Position</th>
<th scope="col">Club/Pays</th>
<th scope="col">Points</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Luka Modric</td>
<td>Real Madrid/Croatie</td>
<td>753 pts</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Cristiano Ronaldo</td>
<td>Real Madrid/Portugal</td>
<td>476 pts</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Antoine Griezmann</td>
<td>Atlético Madrid/France</td>
<td>414 pts</td>
</tr>
</tbody>
</table>
</div>
</div>
</article>
</section>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/vendors/bootstrap.js"></script>
<script src="js/main.js"></script>
</html>
body{
padding-top: 1px;
.logo{
max-height: 100%;
max-width: 100%;
}
.present{
font-family: 'Hind Siliguri', sans-serif;
padding-left: %;
margin: 1%;
text-align: center;
}
header{
/* border-radius: 10px aqua;
background-image: url(../images/Naruto_Shippuden__Blue_Bird___by_He.jpg);*/
background: transparent url(../images/Naruto_Shippuden__Blue_Bird___by_He.jpg) no-repeat scroll left top;
background-repeat: no-repeat;
background-size:cover;
overflow: hidden;
top: 0;
position: fixed;
left: 0;
right: 0;
}
header i.icon{
position: fixed;
right:3px;
top: 50;
z-index: 110;
}
.img-naruto{
margin-left: 10%;
}
.first-art{
margin-top: 100%;
}
.table{
margin-top: 100%;
}
.block5{
background-image: url(../images/Naruto_Shippuden__Blue_Bird___by_He.jpg);
background-repeat: no-repeat;
}Modifié par Resfa (08 Dec 2018 - 17:02)
