Sujet Précédent Sujet Suivant

Menu auto retractable

Fermé
sosophie - 6 mars 2015 à 19:02
ElementW Messages postés 4816 Date d'inscription dimanche 12 juin 2011 Statut Contributeur Dernière intervention 5 octobre 2021 - 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





A voir également:

1 réponse

Réponse 1 / 1
ElementW Messages postés 4816 Date d'inscription dimanche 12 juin 2011 Statut Contributeur Dernière intervention 5 octobre 2021 1 225
Modifié par gravgun le 7/03/2015 à 19:39
'lut, avec des valeurs de 
padding
fixes et des éléments de menu juste en 
display: inline;
, c'est injouable.
Passes tes 
ul li
en 
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
0

Discussions similaires

les entrées et les sortées
oussman -
MarsuGL -

2 réponses
mon ordi marque press the esc key for startup menu
jasonparris -
elow -

5 réponses
Accéder au menu Advanced Bios PC portable HP
Axferd -
Bill -

6 réponses