modifier le code d'une barre de navigation

[ml1234]

bonjour,
dans le code suivant que j'utilise pour mon smugmug sans trop comprendre comment ça marche car il y a beaucoup de height, de margin et de padding :
http://labrophotography.smugmug.com/
et que je compte dupliquer sur blogger, la barre de menu est un peu trop longue pour mon eeepc de voyage/demo 1024x768px et elle chevauche le logo, ce qui est très laid.
je souhaite donc compacter légèrement la barre de menu.

Pouvez-vous, svp, me dire comment :
- décaller légèrement vers la droite le menu (par exemple même distance à droite que celle séparant le logo du bord gauche de l'ecran ou simplement de 10-20px)
- rapprocher de 3px légèrement les éléments du menu (ex: s'ils ont 10px de distance, ramener à 7px..)

ce serait sympa si vous pouviez me donner quelques explications sur le code (ex: ta barre fait au max 620x31px, se trouve à 10px de droite, utilise de l'arial 14px, les elements du menu se remplissent de la gauche vers la droite avec 0px à gauche mais 16px à leur droite,...) afin que je puisse facielement changer la taille des caractères, ajouter un menu,...

merci d'avance pour votre aide

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
#myHeader {margin:0 0 5px 0;padding: 10px 15px 10px 15px;min-width:838px;
background: transparent url(/photos/560614507_4Ksbn-O-3.png) repeat-x;
height:67px}
 
#myBanner {background:transparent url(/photos/i-7fNjSvZ/0/S/i-7fNjSvZ-S.png) no-repeat;
height:26px; width:400px;_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingmethod=image, src="/photos/i-7fNjSvZ/0/S/i-7fNjSvZ-S.png")}
 
#my-navigation {margin:0;padding:0;
clear:both;width:620px;height:31px;background:
url(#) repeat-x left top}
 
 
#navcontainer {font-size:120%;
height:31px;float:right}
 
ul.my-nav-main, ul.my-nav-main li
{list-style:none;margin:0;padding:0}
 
ul.my-nav-main
{position:relative;z-index:597}
 
ul.my-nav-main li:hover > ul
{visibility:visible}
 
ul.my-nav-main li.hover,
ul.my-nav-main li:hover
{position: relative;z-index:599;cursor:pointer;
background:url(#) repeat-x left top}
 
 
 
ul.my-nav-main li
{float:left;display:block;
height:51px;color:#FFF;
font:14px Arial, Helvetica, sans-serif;
background: url() no-repeat right center}
 
 
ul.my-nav-main li a
{display:block;
padding:10px 16px 0 16px;
height:35px;color:#FFF;
font:14px Arial, Helvetica, sans-serif;
text-decoration:none}
 
ul.my-nav-main li a:hover
{color:#999}
 
ul.my-nav-main *.list  {padding-right: 22px;
background:url() no-repeat right top}
 
 
ul.my-nav-sub
{visibility:hidden;position:absolute;
padding:10px;top:40px;
left:0;z-index:598;
background: #636563 url() repeat-x left top;
border-right:1px solid #777;
border-bottom:1px solid #777;
border-left:1px solid #777;
-webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, .5);
-moz-box-shadow: 0px 3px 6px rgba(0, 0, 0, .5);
filter:progid:DXImageTransform.Microsoft.Shadow
(Color='000000', direction='135', strength='3');_filter: none;}
 
ul.my-nav-sub li
{list-style:none;display:block;padding: 0;
height:27px;float:none;
width:115px;background:none}
 
ul.my-nav-sub li a
{list-style:none;display:block;
padding: 6px 5px 6px 5px;
height:15px;float: none;
width:145px;background:none;
font: 12px Arial, Helvetica, sans-serif;
color:#fff}
 
ul.my-nav-sub li a:hover
{color:#777}

[jreaux62]

Bonjour,
une modif. toute simple :

Code css :

1
2
#myHeader {margin:0 0 5px 0;padding: 10px 15px 10px 15px; min-width:1020px; /* au lieu de min-width:838px; */
...

Sinon, pour rapprocher les titres du menu, c'est ici :

Code css :

1
2
3
4
5
6
ul.my-nav-main li a
{display:block;
padding:10px 10px 0 10px; /* au lieu de padding:10px 16px 0 16px; */
height:35px;color:#FFF;
font:14px Arial, Helvetica, sans-serif;
text-decoration:none}

[ml1234]

merci jreaux,
pourquoi 1020px pour déplacer le menu légèrement vers la droite ?
il faut que le code s'adapte à tous les écrans >=1024 (un peu comme si le logo et le menu se calaient à 95% de tout écran)

quand je vois 4 nombres dans les padding, j'oublie toujours où est le left, top,... tu veux dire qu'avec mon code,il y avait 16+16=32px entre chaque menu item et que le premier était décallé de 16 par rapport au bord du div ?

merci
marc

[jreaux62]

1020px, car tu as parlé de ton pc de voyage/demo 1024x768px.

Et on a : min-width:1020px; soit la largeur minimum, qui évite au menu de passer sous le logo.

Pour les 4 nombres, il faut lire dans le sens des aiguilles d'une montre :
top right bottom left

[ml1234]

merci jreaux.
donc, si j'ai bien compris, tu confirmes qu' avec ta modif 10px 10px, cela fait 20px entre les menu items au lieu de 32px ?

j'ai essayé 12px 12px et c'est pas mal du tout, merci
tu peux voir le résultat sur :
http://labrophotography.smugmug.com/
par contre, je comprends pas ce qu'est le min width: 1020 au lieu de 838 sur mon 1680x1050 ça change rien et c'est pas beau car la barre de navigation est trop à gauche.

je voulais que, sans trop modifier le code, quelque soit l'écran, la barre de navigation se trouve à par exemple 50px ou 5%... du bord droit.

je me serais plutôt attendu à ce que l'on réduise la barre de navigation grâce à tes 10px 10px et qu'il y ait un genre de marge ou padding à droite de la barre de navigation qui de par exemple 100px serait passée à 50px...

merci
marc

[NoSmoking]

Bonsoir,

je voulais que, sans trop modifier le code, quelque soit l'écran, la barre de navigation se trouve à par exemple 50px ou 5%... du bord droit.

un float:right, associé à un margin-right:50px devrait faire l'affaire.

[ml1234]

merci nosmoking mais peux-tu svp indiquer quelle partie de mon code changer avec ces deux paramètres ?

merci
marc

[NoSmoking]

d'après le code vu, il s'agit de cette partie du style

Code :

1
2
3
4
5
6
#navcontainer {
    float: right;
    font-size: 120%;
    height: 31px;
    margin-right: 50px; /* AJOUT */
}

[ml1234]

c'est pire !
si navcontainer est déjà aligné à droite, ajouter une marge droite le décalle encore plus vers la gauche !

ne pas oublier que la structure du header est :

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
<div id="myHeader">
<div id="navcontainer">
<ul id="my-navigation" class="my-nav-main">
 
<li><a href="/">Home</a></li>
 <li class="my-list"><a href="/galleries">Galleries</a>
    <ul class="my-nav-sub">
        <li><a href="http://labrophotography.smugmug.com/Animals">Animals</a></li>
        <li><a href="http://labrophotography.smugmug.com/Nature">Nature</a></li>
	<li><a href="http://labrophotography.smugmug.com/Sports">Sports</a></li>
	<li><a href="http://labrophotography.smugmug.com/Fashion">Fashion</a></li>
	<li><a href="http://labrophotography.smugmug.com/BlackandWhite">Black and White</a></li>
    </ul>
 </li>
<li><a href="/find">Search</a></li>
<li class="my-list"><a href="#">Information</a>
    <ul class="my-nav-sub">
        <li><a href="/gallery/20940000_JnPZSS">Links</a></li>
	<li><a href="/gallery/20942503_7nMmFQ">Services</a></li>
    </ul>
</li>
<li><a href="#?w=600" rel="popup_name" class="poplight">Contact</a></li>
<li><a href="http://labrophotography.blogspot.com/">Blog</a></li>
<li><a href="/gallery/20842786_Bq4B7V">Guestbook</a></li>
 
</ul>
</div>
<div id="myBanner"></div>
</div>

[ml1234]

re-bonjour,
en utilisant 10px 10px comme l'a suggéré jreaux, ma barre est plus courte mais comme elle est définie à 620px de longueur cela donne encore plus l'impression d'être à gauche.
en fait j'ai essayé 492px et guestbook passe à la ligne. à 494px c'est ok et la barre est bien à droite de mon écran 1680x1050.
avec 838px de min-width, sur mon eeepc (cela se voit aussi si pendant 1 seconde je met mon 1680x1050 en 1024x768px) une barre horizontale de défilement apparait. quand je défile vers la droite le fond dégradé de 67px de haut de mon header s'arrête brusquement.
jreaux a raison je dois passer min width de 838 à 1024 ainsi le header est beau jusqu'au bout. même à 960px il y a problème sur eeepc 1024x768.
mais si je mets 1024 le menu sur l'eeepc recule vers la droite et pour accéder au menu guestbook il faut défiler la barre horizontale vers la droite un petit peu.
je passe donc la longueur de la barre à 540px avec un min width de 1024

je ne trouve pas cela très beau comme code.
la barre devrait prendre toute la largeur disponibe et avoir le logo et la barre à 50px des bords quel que soit l'écran

marc

[jreaux62]

1/ Pour éviter que "home" passe sous le logo quand on réduit la fenêtre, mets :

Code :

1
2
3
4
#myHeader {
min-width: 900px;
/* ... */
}

2/ Sinon, il est aussi possible de positionner simplement le menu juste à droite du logo :

Code :

1
2
3
4
5
6
#navcontainer {
    float: left; /* à droite du logo */
    margin-left: 410px; /* largeur du logo + 10px */
    font-size: 120%;
    height: 31px;
}

Tu as aussi un petit problème au niveau du redimensionnement du cadre des photos.
Les photos se redimensionnent bien, mais pas l'encadrement.

[ml1234]

merci jreaux mais je souhaite caler le menu à 5% ou 50px du bord droit de chaque écran 1024x768 à 1680x1050. comme à présent avec ta modif de 10px la barre est plus compacte, elle ne viendra plus jamais sous le logo.

par contre as-tu remarqué en 1024px que la répétition de l'image 10x67px gradient dans le header s'arrête betement à min-width !!!
il y a donc un souci dans le code :
il faudrait que le header s'étende sur tout l'écran, que le logo se mette en float left à 5% du bord gauche et la barre de navigation (qui à présent fait 494px car à 492px guestbook passe à la ligne) à 5% du bord droit

merci
marc

[jreaux62]

Ce code devrait faire l'affaire :

Code css :

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
#myHeader {
padding:10px 5%;
min-width:900px;
background: transparent url(http://labrophotography.smugmug.com/photos/560614507_4Ksbn-O-3.png) repeat-x;
height:67px;
}
 
#myBanner {
background:transparent url(http://labrophotography.smugmug.com/photos/i-7fNjSvZ/0/S/i-7fNjSvZ-S.png) no-repeat;
height:26px;
width:400px;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingmethod=image, src="/photos/i-7fNjSvZ/0/S/i-7fNjSvZ-S.png");
}
 
#my-navigation {
margin:0;
padding:0;
clear:both;
height:31px;
}
 
#navcontainer {
font-size:120%;
height:31px;
float:right;
}
 
ul.my-nav-main, ul.my-nav-main li {
list-style:none;
margin:0;
padding:0;
}
 
ul.my-nav-main {
position:relative;
z-index:597;
}
 
ul.my-nav-main li:hover > ul {
visibility:visible;
}
 
ul.my-nav-main li.hover,
ul.my-nav-main li:hover {
position: relative;
z-index:599;
cursor:pointer;
}
 
ul.my-nav-main li {
float:right;
display:block;
height:51px;
color:#FFF;
font:14px Arial, Helvetica, sans-serif;
}
 
ul.my-nav-main li a {
display:block;
padding:10px 0 0 20px;
height:35px;color:#FFF;
font:14px Arial, Helvetica, sans-serif;
text-decoration:none;
}
 
ul.my-nav-main li a:hover
{color:#999}
 
ul.my-nav-main *.list {
padding-right: 22px;
}
 
ul.my-nav-sub {
visibility:hidden;
position:absolute;
padding:10px;top:40px;
left:0;z-index:598;
background: #636563;
border-right:1px solid #777;
border-bottom:1px solid #777;
border-left:1px solid #777;
-webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, .5);
-moz-box-shadow: 0px 3px 6px rgba(0, 0, 0, .5);
filter:progid:DXImageTransform.Microsoft.Shadow (Color='000000', direction='135', strength='3');
_filter: none;
}
 
ul.my-nav-sub li {
list-style:none;
display:block;
padding: 0;
height:27px;
float:none;
width:115px;
background:none;
}
 
ul.my-nav-sub li a {
list-style:none;display:block;
padding: 6px 5px 6px 5px;
height:15px;
float: none;
width:145px;
background:none;
font: 12px Arial, Helvetica, sans-serif;
color:#fff;
}
 
ul.my-nav-sub li a:hover {
color:#777;
}

Plusieurs modif. + remise en forme du code : donc à copier tel quel.

[ml1234]

un grand merci pour l'aide
je vais plonger dedans en espérant pas tout casser car sur smugmug les backups sont moins évidents que sur un pc

marc

[NoSmoking]

merci jreaux mais je souhaite caler le menu à 5% ou 50px du bord droit de chaque écran 1024x768 à 1680x1050.

ce sera l'un ou l'autre en CSS.

5% de la largeur de la fenêtre ou du body si une largeur est définie donne

- 1024 * 5/100 = 51.2
- 1680 * 5/100 = 84

et cela sans compter la dimension réelle de la fenêtre d'affichage.

Un solution élégante serait également de centrer ton menu dans la partie restant libre.

[ml1234]

merci nosmoking
la règle des 5% est ok et tu as raison que le nombre de px diffère.
donc ce à quoi je pensais était un header 100% de l'écran avec l'image 10x67px gradient png en repeat et un header content de 90% centré dans le header.
le logo se calait en float left à gauche du header content et la barre de navigation se calait en float right à droite du header content et à mon avis il était plus simple d'écrire les menus items de la droite vers la gauche en float right que dans le code que j'avais trouvé sur dgrin (forum smugmug).
je suppose alors qu'on n'avait plus besoin de min-width,de compter de combien de pixels on revenait vers la gauche,...

marc

[ml1234]

salut jreaux,
juste pour être sûr :
- est-ce normal que le header ne prenne pas sa place tout seul ? je veux dire pourquoi il ne se remplit pas tout seul selon l'écran avec l'image 10x67px ? pourquoi lui spécifier un min width et une hauteur 67px ?
- en regardant le dernier css des sources de :
http://www.moonriverphotography.com/
QUI EST LE SITE "TUTO" dont je m'inspire mais pour lequel je copie des morceaux de codes de plusieurs posts de dgrin
je vois des relative et absolute. n'était-ce finalement pas intéressant de placer le logo à gauche et la barre de navigation à droite en absolu à 15px du bord ?

peux-tu svp me dire comment tu vois que les images ne se mettent pas bien à dimension par rapport à http://www.moonriverphotography.com/
ceci expliquerait pourquoi moonriver se cale à quelques px du bord gauche de l'écran 1024px sans barre de défilement horizontal dans firefox alors que moi il est décallé vers la droite et déborde de l'écran

merci

[jreaux62]

Bonjour,
si tu ne tiens pas compte des modif. qu'on te propose, je ne vois pas ce que je peux faire de plus.

Si tu préfères 15px à 5% :
remplace

Code :

1
2
3
#myHeader {
padding:10px 5%;
...

par

Code :

1
2
3
#myHeader {
padding:10px 15px;
...

Pour le min-width, je ne vais pas l'expliquer 15 fois. Regarde la doc.

[ml1234]

sisi, jreaux,
je vais me lancer dans l'édition du css de smugmug après avoir trouvé comment backuper la version actuelle qui est dans le customization dashboard et pas un simple css comme dans dreamweaver.
je devais répondre à nosmoking qui avait aussi répondu. 5% ou x px c'est kif tant que je peux chosir la valeur à tout moment.

pour le min width, j'étais juste étonné d'avoir besoin de ce truc alors qu'en général l'écran se remplit de la bitmap quel que soit le display.

marc

[jreaux62]

Il se trouve que ton logo est en background ! C'est une "image de fond"

Code :

1
2
#myBanner {
background:transparent url(http://labrophotography.smugmug.com/photos/i-7fNjSvZ/0/S/i-7fNjSvZ-S.png) no-repeat; /* LOGO ICI ! */

C'est pour ca que le menu le chevauche.
Le logo aurait très bien pu être "en dur" dans la bannière (dans une balise <img src="..." alt="" />).
Ce qui n'aurait pas été plus mal, au contraire. Mais c'est une autre histoire...

Le min-width ICI "bloque" la réduction du header à une largeur minimale.
Cette largeur correspond grosso-modo à (largeur logo + largeur menu + marges) afin d'éviter que le menu chevauche le logo.

Pour ce qui est des 5% ou 15px : SI, il y a une différence !!
- 15px restera 15px ! (que tu agrandisses ou réduises la fenêtre)
- 5% est (par définition !) proportionnel à la largeur de l'écran (comme te l'a montré NoSmoking)