Partage

Menu coupé, CSS surement pas optimisé.

Sujet résolu
12 février 2018 à 19:22:55

Bonjour à tous,

j'ai un petit soucis avec mon code CSS, car celui-ci n'est surement pas optimisé. J'ai suivi les cours de ce site, sur d'autres sites, et pourtant sur un écran plus petit (ordinateur portable par exemple) le côté gauche du menu est coupé. J'ai chercher un peu partout et pourtant je ne trouve pas de solution, cela vient durement du code que j'ai entré.

/* Bannière */
header
{
	height: 200px ;
	width : 100% ;
    background: url("../images/design/banniere.png") no-repeat;
    z-index:1;
	margin-left: auto
	margin-right: auto;
	-webkit-border-top-left-radius: 15px;
	-webkit-border-top-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-top: 1px black solid;
    border-right: 1px black solid;
    border-bottom: 1px black solid;
    border-left: 1px black solid;
    padding:0;
}

/* Corps de la page */
body
{
	width :1000px;
	min-height: 1500px ;	
	height: auto;
	vertical-align:top;
	background-image:linear-gradient(#D32F2F, #F44336, #FFCDD2) ;
	background-repeat: no-repeat;
	padding:0 ;
	margin: 0 ;
    position: relative;
	margin-left: auto;
	margin-right: auto;
	border: 0px black solid;
	z-index:1;
	-webkit-border-top-left-radius: 15px;
	-webkit-border-top-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    margin-bottom: 0px;
    margin-top:0px;
}


/* Bloc central */
section
{
	margin:0;
	padding: 0;
	background-color: #fff;
	height : auto;
	margin-left: 0;
	margin-right: 0;
	border-left: 1px black solid;
	border-right: 1px black solid;
	border-bottom: 1px black solid;
	border-top: 0px black solid;
	vertical-align:top;
	margin-top: 0;
	border-collapse: collapse;
	z-index:99;
}

footer
{
	font-family: 'Roboto',Arial,Helvetica,sans-serif;
	text-rendering: optimizeLegibility;
	font-size: 14px;
	text-align: justify;
	height: auto;
	background-color: #BBDEFB;
	border-left: 1px black solid;
	border-bottom:1px black solid;
	border-right:1px black solid;
	color: #212121;   

}





Et pour le menu :

nav
{
}

#menu {
        float:left;
        width: 20%;
        height: auto;
        list-style: none;
        margin: 0;
        padding: 0;
        margin-top : -1px;
        position:justify;
        margin-left:-201px;
        border-top: 1px black solid;
        border-bottom: 1px black solid;
        border-left: 1px black solid;
        font-family: 'Roboto',Arial,Helvetica,sans-serif;
        text-rendering: optimizeLegibility;
        font-size: 14px;
        text-align: justify;
        height: auto;
        background-color: #BBDEFB;   
}

#sous-menu {
        display: none;
}

#sous-menu:target {
        display:block;
}


Auriez-vous des idées pour corriger mon soucis, voir même améliorer mon code CSS ?? (pour ceux qui voudraient se rendre compte : https://www.demusicaemilitari.fr/)

Amicalement.

-
Edité par AxelChagnon 13 février 2018 à 9:22:06

Vous êtes demandeur d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
certifiante
Financée
à 100%

Menu coupé, CSS surement pas optimisé.

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown