Onglets en css et saut de page

Version imprimable

26/04/2013, 08h45
dukoid

Onglets en css et saut de page

Bonjour,

en bas de page, j'ai intégré un menu onglet classique en css .
(il faut déplacer la barre de navigation du navigateur pour le voir)

lorsque je sélectionne un choix du menu, la page "saute" et se replace en haut de page ne voyant plus mon menu onglet.

comment éviter ça afin que lorsqu'on sélectionne un menu , l'écran reste là ou il est.
26/04/2013, 09h07
Bovino

A vue de nez, je dirais qu'il faut corriger ton code... :?

je suis d'accord avec toi :ccool:
Je débute en CSS.

j'utilise bootstrap, voici le code incriminé :

Code:

1
2
3
4
5
6
7
8
9
10
<div class="btn-group">
<a class="btn" data-toggle="dropdown" href="#"> Action</a>
<ul class="dropdown-menu">
<li><a href="#">Dompteurs</a></li>
<li><a href="#">Zoos</a></li>
<li><a href="#">Chasseurs</a></li>
<li class="divider"></li>
<li><a href="#">Autres témoignages</a></li>
</ul>
</div>

26/04/2013, 10h38
rodolphebrd

Bonjour,

il en faut un peu plus...

La page incriminée et/ou le css concerné

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Welcome!</title>
            <link href="/base/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet" />
        <link href="/base/bootstrap/css/bootstrap-responsive.css" type="text/css" rel="stylesheet" />               
        <link rel="icon" type="image/x-icon" href="/favicon.ico" />
</head>
 
<body>
 
    <div class="row" style="height: 1496px;">        
    </div>       
 
    <div class="btn-group">
        <a class="btn" data-toggle="dropdown" href="#"> Action</a>
        <ul class="dropdown-menu">
            <li><a href="#">Dompteurs</a></li>
            <li><a href="#">Zoos</a></li>
            <li><a href="#">Chasseurs</a></li>
            <li class="divider"></li>
            <li><a href="#">Autres témoignages</a></li>
        </ul>
    </div>
 
    <div class="row" style="height: 496px;">        
    </div>   
 
    <script src="/base/js/jquery-1.9.1.js" type="text/javascript"></script>      
    <script src="/base/bootstrap/js/bootstrap.js" type="text/javascript"></script>  
 
</body> 
</html>

le problème c'est que vu que j'utilise boostrap, le CSS de bootstrap est énorme.

mais d'après votre expérience, vous ai t'il déjà arrivé ce genre de problème ?
dans quel cas ?

26/04/2013, 13h18
rodolphebrd

A vue de nez je dirais que le height:1496px pose un problème...

J'ai mis ça pour simuler un grand espace afin d'avoir la barre de navigation du navigateur.

j'ai remplacé par des <br/> et toujours pareil.

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
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Welcome!</title>
            <link href="/base/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet" />
        <link href="/base/bootstrap/css/bootstrap-responsive.css" type="text/css" rel="stylesheet" />               
        <link rel="icon" type="image/x-icon" href="/favicon.ico" />
</head>
 
<body>
 
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>    
 
    <div class="btn-group">
        <a class="btn" data-toggle="dropdown" href="#"> Action</a>
        <ul class="dropdown-menu">
            <li><a href="#">Dompteurs</a></li>
            <li><a href="#">Zoos</a></li>
            <li><a href="#">Chasseurs</a></li>
            <li class="divider"></li>
            <li><a href="#">Autres témoignages</a></li>
        </ul>
    </div>
 
 
    <script src="/base/js/jquery-1.9.1.js" type="text/javascript"></script>      
    <script src="/base/bootstrap/js/bootstrap.js" type="text/javascript"></script>  
 
</body> 
</html>

Est-il possible que la balise <a href="#"lorsqu'elle est sélectionné génère automatiquement un saut en début de page ?

26/04/2013, 16h08
Bovino

C'est le comportement normal de ce genre d'ancre...
Comme expliqué maintes fois, si tu ne veux pas suivre ton lien, il faut inhiber son comportement par défaut (avec un return false par exemple dans la fonction JavaScript gérant le clic).
26/04/2013, 16h16
dukoid

merci bien. :ccool:

déjà fallait le savoir que mon problème venez de cette balise. en effet , maintenant que je sais on trouve la réponse sur google facilement.

en tout cas merci .
:lol: