1311 sujets

Web Mobile et responsive web design

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.

<!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)
salut,

ajoutes cela à ton css


body
{
    padding-top: 70px; // dépend de la taille de ta navbar
}

Modifié par biduletruck (08 Dec 2018 - 16:44)
Merci pour ton aide, mais ça n'a rien changé j'ai juste un décalage de mon header au début mais le contenu utilisé avec bootstrap passe toujours à travers.
sauf que ta navbar (en fait tout ton header) doit se trouver dans le body et pas à l’extérieur ...
Modifié par biduletruck (08 Dec 2018 - 16:54)
Ok j'ai mis 1px et finalement j'ai passé la postion de mon header en fixed et j'ai rajouté left: 0 et right : 0 . Parce que mon header s'affichait mal sur firefox à cause du sticky. Mais j'ai toujours mon problème du départ avec bootstrap.
Resfa a écrit :
Ah ok mais ça me dérange le décalage


Bonsoire Fesra, il est évident que ce décalage casse toute l'expérience utilisateur!! Il faut utiliser JavaQuery surtout que tu l'embarques déjà!!! Smiley sweatdrop


header--stylezebi {
position: fixed;
top: -11px;
}



Ensuite tu codes et c'est mieux!!!



$(function(){createTheSticky($("#header"));});

function createTheSticky(sticky) {
	const aLaZebi = '--zebi-modifier'
	if (typeof sticky !== "undefined" && document.body.classList.contains(aLaZebi );) {

		var	pos = sticky.offset().top,
				win = $(window); win.on("scroll", function() {
    		win.scrollTop() >= pos ? sticky.addClass("fixed") : sticky.removeClass("fixed");      
		});			
	}
}
J'ai essayé ce que tu m'a filé mais ça n'a rien changé, et j'avais déja mis du jquery pour que mon menu soit affiché si on appuie sur un bouton et quand j'ai rajouté ton code mon bouton ne marchait plus

$(document).ready(function(){
    
    $('i.icon').click(function(){
        $('.nav-list').slideToggle()
    });
})

$(function(){createTheSticky($("#header"));});