Barre de navig. responsive design

a marqué ce sujet comme résolu.

Bonsoir zesteurs, bonsoir zesteuses !

Je poste pour vous demander un peu d'aide, je suis actuellement en train de faire un petit site de présentation d'un des projets que je dois faire dans le cadre de mon dut, et je galère un peu au niveau de la barre de navigation … en effet je souhaiterai avoir un rendu de ce genre . Sur mon écran, c'est bien, sauf que c'est mal fait et je me suis rapidement rendu compte que des que je réduisais ma fenêtre, ca devenait rapidement dégeulasse … j'ai tant bien que mal essayé de chercher sur internet, mais je vous avoue que je suis un peu perdu … si vous pouviez m'aider a obtenir un barre de navigation dans le même style, mais qui s'adapte à la taille de l'écran, tout en gardant la même taille pour chaque case, je vous en remercie d'avance ! :)

Je vous mets le code de ce que j'ai fait( ya une petite partie du header dedans )

 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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/> 
    <title> Page interview </title>
    <link rel="stylesheet" href="interview.css" />

</head>
<body>

<header class="entete">
    <img class="logo" src="logo_chu_transparent_gros.gif"/>
    Projet<br>
    d'Interview,<br>
    module de<br>
    Communication <br>
</header>
<nav>
<ul>
<li class="accueil">Accueil</li>
<li class="etape1">Etape 1</li>
<li class="etape2">Etape 2</li>
<li class="etape3">Etape 3</li>
<li class="contact">Contact</li>
</ul>
</nav>

</body>

 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
body{
background-color:white;

}

.entete{
background-color:orange;
height:15em;
border:2px solid black;
margin-bottom:1%;
margin-left:10%;
margin-right:10%;
padding-right:2%;
padding-top:1%;

}

.logo{
float:right;
height:90%;
max-height:100%;

}
nav{
background-color:orange;
margin-left:10%;
margin-right:10%;

}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
li {
    width:19.778%;
    float: left;
    vertical-align:center;
    text-align:center;
}
.accueil{
border-top:2px solid black;
border-left:2px solid black;
border-bottom:2px solid black;
}

.etape1{
border-top:2px solid black;
border-left:2px solid black;
border-bottom:2px solid black;
}
.etape2{
border-top:2px solid black;
border-left:2px solid black;
border-bottom:2px solid black;
}
.etape3{
border-top:2px solid black;
border-left:2px solid black;
border-bottom:2px solid black;
}
.contact{
border:2px solid black;

}

Voici le rendu total de la page : Image utilisateur

+0 -0

Salut,

Dans ton fichier CSS, tu n'as pas défini proprement la largeur de ton design, c'est à dire la largeur de ton header et ton menu. Commence déjà par définir cette largeur correctement dans ton CSS dans une div appelée "wrapper" qui englobe les 2 div citées précédemment.

Exemple :

1
2
3
4
#wrapper{
    margin: 0 auto; /* Garder le centrage */
    width: 960px;
}

Ensuite retire tous les margin right et left.
Tu veux quel genre d'apparence pour ton menu en responsive ?

+0 -0

Salut,

Dans ton fichier CSS, tu n'as pas défini proprement la largeur de ton design, c'est à dire la largeur de ton header et ton menu. Commence déjà par définir cette largeur correctement dans ton CSS dans une div appelée "wrapper" qui englobe les 2 div citées précédemment.

Exemple :

1
2
3
4
#wrapper{
  margin: 0 auto; /* Garder le centrage */
  width: 960px;
}

Ensuite retire tous les margin right et left.
Tu veux quel genre d'apparence pour ton menu en responsive ?

EtienneR

Le fait de mettre un width en pixel fera que ce ne sera plus responsive. De toute façon les balises de type bloc occupent par défaut 100% de la largeur possible.

Retire les margin 10% de gauche et de droite et met tes borders en valeur relative (%). Le total des borders et des blocs doit faire 100%.

+0 -0

Merci beaucoup ! C'est normal qu'avec des valeurs relatives sur mes borders, je n'ai plus de bordures justement ?

Ce serait possible de faire la même chose avec l'image, car lorsque je zoome, l'image reste a la même taille, et en zoomant trop, le blabla sort du cadre de l'entête …

 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
body{
background-color:white;

}

.entete{
background-color:orange;
height:15em;
border:2px solid black;
margin-bottom:1%;
padding-right:2%;
padding-top:1%;

}

.logo{
float:right;
height:90%;
max-height:100%;

}
nav{
background-color:orange;
border:2px solid black;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
li {
    width:20%;
    float: left;
    vertical-align:center;
    text-align:center;
}
.accueil{
border-top:1% solid black;
border-left:1% solid black;
border-bottom:1% solid black;
}

.etape1{
border-top:1% solid black;
border-left:1% solid black;
border-bottom:1% solid black;
}
.etape2{
border-top:1% solid black;
border-left:1% solid black;
border-bottom:1% solid black;
}
.etape3{
border-top:1% solid black;
border-left:1% solid black;
border-bottom:1% solid black;
}
.contact{
border:1% solid black;

}
+0 -0

Pour l'image, essaye un width en %.

Pour le css, pour alléger le code :

.accueil, .etape1, .etape2, .etape3 { border-top:1% solid black; border-left:1% solid black; border-bottom:1% solid black; }

Et tu peux supprimer le : body{background-color:white;} car par défaut le background est vide (donc blanc)

Pour les borders faudrait que je vois… Tu bosses en local seulement ?

+0 -0

Le fait de mettre un width en pixel fera que ce ne sera plus responsive. De toute façon les balises de type bloc occupent par défaut 100% de la largeur possible.

Solid

C'était pour mieux utiliser les médias queries par la suite (passer d'une valeur en px à 100% pour ce bloc).

+0 -1

Le fait de mettre un width en pixel fera que ce ne sera plus responsive. De toute façon les balises de type bloc occupent par défaut 100% de la largeur possible.

Solid

C'était pour mieux utiliser les médias queries par la suite (passer d'une valeur en px à 100% pour ce bloc).

EtienneR

Sauf que les media-queries ne se font pas avec des pixels quand c'est fait proprement : l'unité em permet de se baser sur la taille du texte pour faire les choses comme il faut.

Ça fait longtemps que les pixels sont déconseillés en CSS (sauf exceptions bien sûr) quand on fait du responsive.

+0 -0

Je trouve ça plus joli sans borders … Tu y tiens vraiment ?

Ensuite, pour tous tes <li>, pas besoin de mettre des class, des id suffisent (quoique si tu ne leur attribue pas de style particulier à chacune, ne leur attribut rien)

Pas besoin de mettre une class à l'header.

Pour les textes dans l'header, on place ça en <p> ou en <hx>. Et pas besoin de class.

+0 -0

Pas besoin de mettre une class à l'header.

Solid

Euh… si. Ou alors on ne met pas de class aux p ni aux div tant qu'on y est. header peut être utilisé à un tas d'endroits différents et plusieurs fois, rien ne dit qu'il ne va pas utiliser cette balise ailleurs en y appliquant un style différent.

Pour les li a priori pas besoin d'attribut spécifique (class ou id) en l'état (à moins d'avoir besoin de styles spécifiques par la suite) mais ça ne gène pas d'en mettre non plus, par contre des liens à l'intérieur ça pourrait être pas mal pour un menu…

Pour les bordures je suis bien d'accord : en mettre ne fait qu'alourdir le design, surtout en noir.

Evite par contre les marges en pourcentages, c'est un truc à avoir des proportions étranges : préfère les maîtriser avec des unités type em. ;)

+0 -0

Pas besoin de mettre une class à l'header.

Solid

Euh… si. Ou alors on ne met pas de class aux p ni aux div tant qu'on y est. header peut être utilisé à un tas d'endroits différents et plusieurs fois, rien ne dit qu'il ne va pas utiliser cette balise ailleurs en y appliquant un style différent.

viki53

En regardant le code source de sa page, on se rend compte que c'est un classique haut de page/menu/corps/pied de page. D'où le fait que j'ai dis qu'une class ne sera pas nécessaire.

+0 -0

Indeed, ca reste plus joli sans les bordures. Je modifie ces histoires de class/id demain aprem quand j'aurais un peu plus de temps. Pour le texte dans l'en tête, vous n'auriez pas une idée/conseil pour faire quelque chose de plus présentable ? Je trouve ça vraiment affreux, mais j'arrive pas à choisir quelque chose de potable … le design c'est vraiment pas ma tasse de thé …

@viki53: les liens arrivent bientôt :p

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte