28172 sujets

CSS et mise en forme, CSS3

Placer mon menu tt en haut de ma page (supprimer un espace)

Bonjour,

Pourriez vous me dire comment faire en sorte que mon menu soit vraiment collé tout en haut de ma page:actuellement il y a un petit espace.
La démo se trouve ici: l_alou_x.org/1/4/ (supprimer les 2 _ pour avoir le vrai lien)

Voici le code:
index.hlml:
<!DOCTYPE html>
<html>
<head>
<title>Dropdowns</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylemenu.css">
</head>
<body>
<div class="container">

<a class="toggleMenu" href="#">Menu</a>
<ul class="nav">
<li class="test">
<a href="#">Activité&nbsp;&nbsp;</a>
<ul>
<li>
<a href="#">Nous1</a>
<ul>
<li><a href="#">Sandals</a></li>
<li><a href="#">Sneakers</a></li>
<li><a href="#">Wedges</a></li>
<li><a href="#">Heels</a></li>
<li><a href="#">Loafers</a></li>
etc....

Le css:
body, nav, ul, li, a {margin: 0; padding: 0;}
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
a {text-decoration: none;}
.container {
width: 90%;
max-width: 900px;
margin: 10px auto;
}
.toggleMenu {
display: none;
background: #666; /* Couleur de fond derrière le mot menu quand on est au format petit écran */
padding: 10px 15px;
color: #fff; /* Couleur texte du mot menu quand on est au format petit écran */
}
.nav {
list-style: none;
*zoom: 1;
background:#000000; /* Couleur de fond du 1er niveau */
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.... etc

Merci,
Salut,

Ta marge provient de cette déclaration :
.container {
    margin: 10px auto;
}

qui est exactement identique à 
.container {
 margin-top: 10px;
 margin-right: auto;
 margin-bottom: 10px;
 margin-left: 10px;
}


Donc le filet qui apparaît au dessus de ton menu mesure 10px et provient de cette déclaration.

J'imagine que ton souhait de base était de le maintenir centré. Ce qui revient à mettre ceci:
.container {
 margin: 0 auto 10px auto;
}
Ainsi nous préservons le centrage tout en supprimant le filet du dessus.

PS : Au passage, ton menu est carrément inaccessible au clavier. Bonne journée.
Modifié par Greg_Lumiere (16 Jun 2016 - 13:58)
Merci.

Je suis confus d'avoir posé une question à la réponse aussi simple...

1/ Mais tu m'apportes une autre information: mon menu n'est pas accessible au clavier. C'est vraiment utile? Google regarde ça pour le référencement?

2/ Je profite de poser une autre question: comment faire pour avoir le bandeau du menu sur toute la largeur de la page. J'ai essayé de mettre une taille de conteneur à 100% de la page mais le menu se cale à droite...
soriro a écrit :
Merci.

Je suis confus d'avoir posé une question à la réponse aussi simple...
A question facile, réponse facile et puis vaut mieux demander un truc bête que de vivre dans la bêtise, tu ne crois pas ?

sorio a écrit :
1/ Mais tu m'apportes une autre information: mon menu n'est pas accessible au clavier. C'est vraiment utile? Google regarde ça pour le référencement?
Rien à voir avec Google, le référencement ni la SEO. Ça ne concerne uniquement que l'accessibilité humaine. Un détail en somme... Perso je suis friand de la navigation au clavier que je trouve bien plus rapide que de chercher de la main la souris et la coordonner avec mon regard. Bref, tout un sujet.

sorio a écrit :
2/ Je profite de poser une autre question: comment faire pour avoir le bandeau du menu sur toute la largeur de la page. J'ai essayé de mettre une taille de conteneur à 100% de la page mais le menu se cale à droite...
Théoriquement tu n'as rien à faire. Ton menu (tag nav) est un élément de type bloc. Ce qui signifie qu'il prend 100% de la largeur de son conteneur et adapte sa hauteur à celle de son contenu.
Si je me souviens bien tu as fixé une largeur maxi à ton body (classe container) ainsi que diverses marges sur tes éléments. C'est là dedans que tu dois trifouiller.
Modifié par Greg_Lumiere (16 Jun 2016 - 14:35)
J'ai compris, merci. La lumière m'a aidé...

J'ai vu que sur certains site le contenu occupe une partie centrale de l'écran (je pense que c'est le conteneur) mais que certaines choses (bandeaux, images, ...) pouvaient en dépasser en allant jusqu'au bord de l'écran. Comment fait-on ce tour de magie? Merci
Pour ça il y plusieurs façon d'arriver à ses fins. Tout va dépendre de ton layout.

Parmi les diverses possibilités on peut relever :
- le layout flexbox
- le layout grid
- contenu relatif + flottants
- contenu relatif + contenu en position absolue
- l'une des possibilité précédente + contenu fixe
etc

Malheureusement, à ce stade la seule réponse appropriée est ça dépend

Le mieux à faire est reprendre les cours sur le positionnement afin de maitriser les bases (relatif, absolu et fixe) puis ensuite se pencher sur un module (flex ou grid) et enfin synthétiser tout ça.

Un petit exemple avec des éléments positionnés en absolu par rapport à leur conteneur
A noter la différence entre fixe et absolu :

En absolu l'élément suis le scroll de la page.

En fixe il reste à l'endroit défini sur l'écran (comme s'il était collé sur l'écran).
Merci,
Justement, j'ai un site avec des div fixes. Je dois le rendre responsive.
Travailler avec un modèle structurant tel que 960.gs m'aurait bien intéressé. Mais apparemment il n'est pas responsive.Je cherche donc d'autres grilles en CSS. J'ai vu Bootstrap mais cela me semble trop compliqué à manipuler pour une seule utilisation.
Auriez-vous un conseil (éclairé)?
Merci
Tu sais, je suis du genre à coder a mano donc ma religion m'interdit d'importer du code tout fait.

Toutefois, je dois bien avouer m'être inspiré de Knacss sur certains points et j'ai remarqué que Knacss intégrait une grille adaptative.

Autrement, dans d'autres sujets du forum, certains membres proposent leur propres créations. Certaines sont à couper le souffle.

En fouillant un petit peu tu devrais trouver ton bonheur.

Concernant Bootstrap j'utiliserais cette métaphore : On ne fabrique pas un moulin à eau pour prélever l'équivalent d'un verre ; on utilise un verre.
Sujet clos
Aller à