Top Menu sur toute la largeur de la page

mademoisellepolish · April 7, 2014

Bonjour à tous,

J'avais déjà posé la question à ce sujet, je pensais que le problème avait été résolu mais je n'ai toujours pas trouvé de solution à mon soucis.

Je suis actuellement en pleine modification css de ma boutique afin de la transformer à mon gout, mais un problème persiste au niveau du menu.

Voilà ce que j'ai pour l'instant:

Et voilà ce que je souhaiterai:

Donc que la barre de menu prenne toute la largeur de la page et que les catégories se situent au centre de la barre de menu.

Je ne sais pas trop si le problème doit se résoudre au niveau du css "Superfish-modified" ou directement dans le css "global".

Je ne suis pas des plus calée au niveau css mais en chipotant à gauche à droite, on trouve généralement ce que l'on cherche

css superfish-modified:

/*** ESSENTIAL STYLES ***/

.sf-contener {

clear: both;

margin: 30 px;

}

.sf-right {

margin-right: 14px;

float: right;

width: 7px;

}

.sf-menu, .sf-menu * {

padding: 0;

list-style: none;

}

.sf-menu {

margin: 160px;

padding:2px;

width:1350px;/* 1600 */

background: #fff url("../img/barre.png");

background-attachment: fixed;

height: auto;

float: left;

position: center;

}

.sf-menu ul {

position: absolute;

top: -100em;

width: 10em; /* left offset of submenus need to match (see below) */

}

.sf-menu ul li {

width: 100%;

}

.sf-menu li:hover {

visibility: inherit; /* fixes IE7 'sticky bug' */

}

.sf-menu li {

float: left;

position: relative;

}

.sf-menu a {

display: block;

position: relative;

color: #fff;

text-shadow:0 0px 0 #333;

}

.sf-menu li:hover ul,

.sf-menu li.sfHover ul {

left: 0;

top: 34px; /* match top ul list item height */

z-index: 99;

width:auto;

}

ul.sf-menu li:hover li ul,

ul.sf-menu li.sfHover li ul {

top: -999em;

}

ul.sf-menu li li:hover ul,

ul.sf-menu li li.sfHover ul {

left: 200px; /* match ul width */

top: 0;

}

ul.sf-menu li li:hover li ul,

ul.sf-menu li li.sfHover li ul {

top: -999em;

}

ul.sf-menu li li li:hover ul,

ul.sf-menu li li li.sfHover ul {

left: 200px; /* match ul width */

top: 0;

}

/*** DEMO SKIN ***/

.sf-menu {

float: left;

margin-bottom: 1em;

}

.sf-menu a {

display:block;

margin-right:2px;

padding: 0 22px 0 20px;

line-height:50px;

border: 0;

text-decoration:none;

}

.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/

color: #000000 ;

font-size: 18px ;

font-family: Tw Cen MT;

white-space:nowrap;

}

.sf-menu li li {

background: #FFDFDF;

}

.sf-menu li li li {

background: #FFDFDF;

}

.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {

background: #FEFEFE;

}

.sf-menu ul li:hover, .sf-menu ul li.sfHover,

.sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {

background: #FEFEFE;

outline: 0;

}

/*** arrows **/

.sf-menu a.sf-with-ul {

padding-right: 2.25em;

min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */

}

.sf-sub-indicator {

position: absolute;

display: block;

right: 20px;

top: 1.05em; /* IE6 only */

width: 10px;

height: 10px;

text-indent: -999em;

overflow: hidden;

background: url('../img/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */

}

a > .sf-sub-indicator { /* give all except IE6 the correct values */

top: 11px;

background-position: 0 -100px; /* use translucent arrow for modern browsers*/

}

/* apply hovers to modern browsers */

a:focus > .sf-sub-indicator,

a:hover > .sf-sub-indicator,

a:active > .sf-sub-indicator,

li:hover > a > .sf-sub-indicator,

li.sfHover > a > .sf-sub-indicator {

background-position: -10px -100px; /* arrow hovers for modern browsers*/

}

/* point right for anchors in subs */

.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }

.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }

/* apply hovers to modern browsers */

.sf-menu ul a:focus > .sf-sub-indicator,

.sf-menu ul a:hover > .sf-sub-indicator,

.sf-menu ul a:active > .sf-sub-indicator,

.sf-menu ul li:hover > a > .sf-sub-indicator,

.sf-menu ul li.sfHover > a > .sf-sub-indicator {

background-position: -10px 0; /* arrow hovers for modern browsers*/

}

/*** shadows for all but IE6 ***/

.sf-shadow ul {

background: url('../img/shadow.png') no-repeat bottom right;

padding: 0 8px 9px 0;

-moz-border-bottom-left-radius: 17px;

-moz-border-top-right-radius: 17px;

-webkit-border-top-right-radius: 17px;

-webkit-border-bottom-left-radius: 17px;

}

.sf-shadow ul.sf-shadow-off {

background: transparent;

}

li.sf-search {

background: inherit;

float: right;

line-height: 25px;

}

li.sf-search input {

-moz-border-radius: 0 5px 5px 0;

padding: 3px 0;

padding-left: 20px;

margin: 6px 6px 0 0;

background: #fff url('../img/search.gif') no-repeat left center;

border:1px solid #777

}

/* hack IE7 */

.sf-menu a, .sf-menu a:visited {height:34px !IE;}

.sf-menu li li {

width:200px;

background:#FFDFDF !IE;

}

Un grand merci d'avance pour votre patience.

Bien à vous.

Loredana

Szed · April 8, 2014

Hello

Avec un lien vers le site, cela serais plus facile !

MaximeCer · April 8, 2014

Bonjour !

Je rejoins mon collègue du dessus, avec un petit lien votre soucis devrait être vite résolu

mademoisellepolish · April 8, 2014

Bonjour!

et merci beaucoup pour votre retour.

Malheureusement je n'ai pas encore mis en ligne ma boutique (pas encore d'hébergeur) donc je ne sais pas si cela est possible de vous donner un lien? :-S

MaximeCer · April 8, 2014

Non, cela va être compliqué en effet.. ! :/

Pourriez vous me dire quelle est la largeur de votre header ?

Car je vois dans votre code que le menu a une largeur définie qui est de 1350px

Szed · April 8, 2014

A mon avis, le fond rose devrait être sur .sf-contener qui lui doit faire 100% de large.

Et .sf-menu devrait faire 960 (ou la largeur du site). Et un margin:0 auto; le placerait au centre

Thierry Création · April 8, 2014

Bonjour,

Il faut sortir le header de l'id page pour arriver a ce résultat.

Exemple ici : http://www.aqualight-solution.com

ça n'est pas bien compliqué mais sans doute un peu long de détaillé la liste des modifs a faire

mademoisellepolish · April 9, 2014

Bonjour!

Merci à tous pour vos réponses!

Si je ne me trompe pas le header est à:

#page {}

#header {width:95%; margin : 0 auto}

Effectivement on m'avait déjà dit de sortir le header de l'ID page. J'avais essayé mais sans succès (certainement une mauvaise manipulation de ma part).

Pour ce qui est de changer le sf-contener et sf-menu, faut-il supprimer quelque chose d'autre? car apparemment en suivant ceci, le menu se colle tout à droite en haut sur la largeur de la colonne de droite.

Je ne suis pas très douée en css (merci firebug) ce qui ne facilite pas vraiment les choses :-/

Je vais essayer de modifier quelques trucs et refaire sortir le header.

Thierry Création · April 9, 2014

Le mieux c'est de mettre le header dans une autre div, exemple :

#ctop {

    float: left;
    height: 243px;
    width: 100%;
}

puis

#ctop #header {
    height: 243px;
    margin: 0 auto;
    position: relative;
    width: 980px;
}

Edited April 9, 2014 by Thierry Création (see edit history)

mademoisellepolish · April 11, 2014

Le mieux c'est de mettre le header dans une autre div, exemple :

#ctop {

    float: left;
    height: 243px;
    width: 100%;
}

puis

#ctop #header {
    height: 243px;
    margin: 0 auto;
    position: relative;
    width: 980px;
}

Merci Thierry pour votre aide. Malheureusement je ne m'y connais pas trop bien en css et j'avoue être un peu perdue dans votre message.

Thierry Création · April 11, 2014

Bonjour Mademoiselle,

J'ai pourtant fait au plus simple dans mon explication

Quand vous aurez mis en ligne le site sur un hébergeur on pourra regarder ensemble votre soucis.

La sur un pc en local ça va être plus compliqué d'intervenir .

Bonne journée, Thierry.

mademoisellepolish · April 11, 2014

Re bonjour Thierry!

Oui je me doute que ça ne doit pas être des plus compliqués mais effectivement c'est très dur de faire ça via le local.

Je vais certainement passer par un hébergeur d'ici quelques semaines!

Merci encore!

mademoisellepolish · April 14, 2014

Bonjour à tous!

Alors j'ai résolu les deux problèmes.

J'ai réalisé une image avec le fond de ma boutique (en-tête+barre de menu) en une seule et même image. J'ai inséré le code dans la partie "body" du global css:

background:#fff url(../img/fondfond.png) repeat-x scroll center;

height: 305px;

Pour centrer mes catégories sur la barre de menu, j'ai collé ce code dans le global css dans la partie RESET (+- ligne 37/39)

.sf-menu > li:nth-child(1) {

margin-left: 400px;

}

.sf-menu > li:nth-child(3) {

margin-right: 0px;

}

Si ça peut aider une autre personne dans le même cas que moi

Bonne journée!

informatikadomicile · November 13, 2015

Bonjour

Est ce que parametrage est responsive?

Merci pour votre soutien

Top Menu sur toute la largeur de la page

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in