Menu auto retractable

sosophie -
ElementW Messages postés 4814 Date d'inscription Statut Contributeur Dernière intervention - 7 mars 2015 à 19:37

Bonjour, je suis étudiante et j'apprend le CSS. Aujourd'hui je dois réaliser un petit site qui s'adapte selon la taille de l'écran. Tout fonctionne à merveille, quand je rétréci ma fenêtre tout ce réduit sans bouger, par contre mon menu lui, ne rétréci pas. C'est un peu compliqué de faire ça donc j'aurais besoin d'aide. Après je devrais définir que après un certaine résolution, l'affichage change totalement, ne vous inquiété pas. Mais pour l'instant le menu ne rétréci pas. Je suppose qu'il faut utiliser "width:x%;". mais pour une menu c'est compliquer :/
voici le code CSS :

@font-face {
    font-family:"TheMillionMileMan";
    src: url('typo/TheMillionMileMan.ttf');
}

body
{
    background-color:#dadada;  
}

p#h
{
    width:100%;
    font-family: TheMillionMileMan;
    font-size:100px;
    text-align: center;
}

/****** Menu ******/

ul{
  width:100%;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center ;
  margin:0px 0px 50px 0px;
  
}

ul li
{
    background:#00c;
    width:90px;
    border:1px solid black;
    display:inline;
    padding:20px 40px 20px 40px;

}

ul li:hover
{
    background:#00f;
    width:90px;
    border:1px solid black;
    display:inline;
    padding:20px 40px 20px 40px;

}

ul li a
{
    color:#fff;
    text-decoration: none ;
    text-align:center;
    padding:20px 40px 20px 40px;
    
    
}

ul li a:hover
{
    background:#00f;
    color:#fff;
    text-decoration: none ;
    padding:20px 0px 20px 0px;
}

/****** Menu Fin***/

h1.photo1
{
    text-align:center;
    color:green;
    font-size:24px;
}

h1#photo2
{
    text-align:center;
    color:red;
    font-size:22px;
}

article
{
    margin-left:100px;
    margin-right:100px;
    border: 2px solid black;
    margin-bottom:20px;
    background-color:white;
}

section
{
    margin: 0px 50px 10px 50px;
}

article#photo2a
{
    margin-right:100px;
    margin-left:100px;
    border: 2px dashed red;
    
}

img
{
    border:1px solid purple;
    max-width:100%;
	max-height:100%;
	
}

Voici le code HTML :

<html>
    <head>
       
        <title>Site de Sophie </title>
        <meta charset="utf-8">
        <link rel="Stylesheet" href="style.css" type="text/css">
        
    </head>
    
    <body> 
    
        <header>
            <p id="h">Sophie</p>
        </header>
        
        <ul>
            <li><a href="#" title="Accueil">Accueil</a></li>
            <li><a href="#" title="Photos">Photos</a></li>
            <li><a href="#" title="Divers">Divers</a></li>
            <li><a href="#" title="Poubelle">Poubelle</a></li>
        </ul>
        
        <article>
            <h1 class="photo1">Ma photo une</h1>
            <section>
                <p>Voici ma première photo</p>
                <img src="images\photo1.jpg" alt="la plage" title="La belle plage">
            </section>
        </article>
        
        <article>
            <h1 class="photo1">Ma photo deux</h1>
            <section>
                <p>Voici ma deuxième photo</p>
                <img src="images\photo2.jpg" alt="des patates" title="Les belles patates">
            </section>    
        </article>
        
        <article id="photo2a">
            <h1 id="photo2">Ma photo trois</h1>
            <section>
                <p>Voici ma dernière photo</p>
                <img src="images\photo3.jpg" class="photo3" alt="paris" title="La belle ville">
            </section>
        </article>
        
    </body>
</html>

Et voici où voir le résultat actuel : https://disixlis.fr/SophieCV/index.html

En attente de votre aide ^^"

Cordialement

Afficher la suite

A voir également:

Menu auto retractable
Menu déroulant excel - Guide
Canon quick menu - Télécharger - Utilitaires
Windows 11 menu contextuel classique - Guide
Ciel auto entrepreneur - Télécharger - Comptabilité & Facturation
Windows 11 menu démarrer classique - Guide

1 réponse

Réponse 1 / 1

ElementW Messages postés 4814 Date d'inscription Statut Contributeur Dernière intervention 1 223

'lut, avec des valeurs de

padding

fixes et des éléments de menu juste en

display: inline;

, c'est injouable.
Passes tes

ul li

display: inline-block;

, et gardes-en seulement le

padding

vertical.
Retires tout

padding

de tes

ul li a

, puis finalement donne une taille de ~20% au

width

de tes

ul li

.
Aussi, n'oublie pas d'enlever les propriétés redondantes sur les pseudo-éléments (ici :hover), c'est 1. inutile, 2. porte a confusion, 3. met en l'air l'arrangement du menu quand on passe la souris dessus.
from human import idiocy
del idiocy

Discussions similaires

menu caché

Mon PC marque press the esc key for startup menu

Déblocage du mode hôtel Philips 20HF5234/10

Activer le bluetooth sur smart TV Samsung

Votre réponse

Discussions similaires